From e1504f8e6c08ae8dec96c7a8ef294b723dcdc6a7 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 22 Apr 2026 22:20:18 -0400
Subject: [PATCH] feat(web): add Shell component with header, sidebar, and user
 menu

Persistent chrome used by every authenticated route. Sidebar hides
below md:; mobile nav is a separate concern for a later plan.
---
 web/src/lib/components/Shell.svelte  | 80 ++++++++++++++++++++++++++++
 web/src/lib/components/Shell.test.ts | 45 ++++++++++++++++
 web/tsconfig.json                    | 23 +++++++-
 web/vitest.config.ts                 |  3 +-
 4 files changed, 148 insertions(+), 3 deletions(-)
 create mode 100644 web/src/lib/components/Shell.svelte
 create mode 100644 web/src/lib/components/Shell.test.ts

diff --git a/web/src/lib/components/Shell.svelte b/web/src/lib/components/Shell.svelte
new file mode 100644
index 00000000..b37d41fd
--- /dev/null
+++ b/web/src/lib/components/Shell.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import { user, logout } from '$lib/auth/store.svelte';
+
+  let { children } = $props<{ children: import('svelte').Snippet }>();
+
+  let menuOpen = $state(false);
+
+  async function handleLogout() {
+    menuOpen = false;
+    await logout();
+    goto('/login', { replaceState: true });
+  }
+
+  function isActive(href: string): boolean {
+    if (href === '/') return page.url.pathname === '/';
+    return page.url.pathname.startsWith(href);
+  }
+
+  const navItems = [
+    { href: '/',          label: 'Library' },
+    { href: '/search',    label: 'Search' },
+    { href: '/playlists', label: 'Playlists' }
+  ];
+</script>
+
+<svelte:window onclick={() => (menuOpen = false)} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />
+
+<div class="grid h-screen grid-cols-[auto_1fr] grid-rows-[auto_1fr] bg-background text-text-primary">
+  <header class="col-span-2 flex items-center justify-between border-b border-border bg-surface px-4 py-3">
+    <div class="font-semibold">Minstrel</div>
+    <div class="relative">
+      <button
+        type="button"
+        class="rounded px-3 py-1 hover:bg-surface-hover"
+        onclick={(e) => { e.stopPropagation(); menuOpen = !menuOpen; }}
+      >
+        {user.value?.username ?? ''}
+      </button>
+      {#if menuOpen}
+        <div
+          class="absolute right-0 mt-1 w-32 rounded border border-border bg-surface shadow"
+          onclick={(e) => e.stopPropagation()}
+          onkeydown={(e) => e.stopPropagation()}
+          role="menu"
+          tabindex="-1"
+        >
+          <button
+            type="button"
+            class="block w-full px-3 py-2 text-left hover:bg-surface-hover"
+            onclick={handleLogout}
+          >
+            Log out
+          </button>
+        </div>
+      {/if}
+    </div>
+  </header>
+
+  <nav class="hidden w-48 border-r border-border bg-surface md:block">
+    <ul class="p-2">
+      {#each navItems as item}
+        <li>
+          <a
+            href={item.href}
+            class="block rounded px-3 py-2 hover:bg-surface-hover"
+            aria-current={isActive(item.href) ? 'page' : undefined}
+          >
+            {item.label}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </nav>
+
+  <main class="overflow-y-auto p-4 md:col-start-2">
+    {@render children?.()}
+  </main>
+</div>
diff --git a/web/src/lib/components/Shell.test.ts b/web/src/lib/components/Shell.test.ts
new file mode 100644
index 00000000..1ad5a48d
--- /dev/null
+++ b/web/src/lib/components/Shell.test.ts
@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+
+vi.mock('$app/state', () => ({
+  page: { url: new URL('http://localhost/') }
+}));
+
+vi.mock('$app/navigation', () => ({
+  goto: vi.fn()
+}));
+
+vi.mock('$lib/auth/store.svelte', () => ({
+  user: { value: { id: '1', username: 'alice', is_admin: false } },
+  logout: vi.fn().mockResolvedValue(undefined)
+}));
+
+import Shell from './Shell.svelte';
+import { logout } from '$lib/auth/store.svelte';
+import { goto } from '$app/navigation';
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('Shell', () => {
+  test('renders the username in the header', () => {
+    render(Shell);
+    expect(screen.getByText('alice')).toBeInTheDocument();
+  });
+
+  test('renders three nav items: Library, Search, Playlists', () => {
+    render(Shell);
+    expect(screen.getByRole('link', { name: 'Library' })).toHaveAttribute('href', '/');
+    expect(screen.getByRole('link', { name: 'Search' })).toHaveAttribute('href', '/search');
+    expect(screen.getByRole('link', { name: 'Playlists' })).toHaveAttribute('href', '/playlists');
+  });
+
+  test('user-menu "Log out" calls logout() and navigates to /login', async () => {
+    render(Shell);
+    await fireEvent.click(screen.getByRole('button', { name: /alice/i }));
+    await fireEvent.click(screen.getByRole('button', { name: /log out/i }));
+    expect(logout).toHaveBeenCalledTimes(1);
+    expect(goto).toHaveBeenCalledWith('/login', { replaceState: true });
+  });
+});
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 43447105..4660e525 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -9,6 +9,25 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "moduleResolution": "bundler"
-  }
+    "moduleResolution": "bundler",
+    "types": ["node", "vitest"]
+  },
+  "include": [
+    ".svelte-kit/ambient.d.ts",
+    ".svelte-kit/non-ambient.d.ts",
+    ".svelte-kit/types/**/$types.d.ts",
+    "vite.config.js",
+    "vite.config.ts",
+    "vitest.config.ts",
+    "vitest.setup.ts",
+    "src/**/*.js",
+    "src/**/*.ts",
+    "src/**/*.svelte",
+    "test/**/*.js",
+    "test/**/*.ts",
+    "test/**/*.svelte",
+    "tests/**/*.js",
+    "tests/**/*.ts",
+    "tests/**/*.svelte"
+  ]
 }
diff --git a/web/vitest.config.ts b/web/vitest.config.ts
index 7ec8c2f0..a6bc5c75 100644
--- a/web/vitest.config.ts
+++ b/web/vitest.config.ts
@@ -1,8 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), svelteTesting()],
   test: {
     environment: 'jsdom',
     include: ['src/**/*.test.ts'],