Add sidebar navigation and global command search

src/routes/+layout.svelte

@@ -7,6 +7,7 @@
     import { startFleetMonitor, hydrateFleet } from '$ui/stores/fleet.js';
     import { page } from '$app/stores';
     import Navigation from '$ui/components/Navigation.svelte';
+    import CommandPalette from '$ui/components/CommandPalette.svelte';
     import { visibleNavigation } from '$lib/navigation.js';
     import BrandMark from '$ui/components/BrandMark.svelte';
     import Confirmation from '$ui/components/Confirmation.svelte';
@@ -27,6 +28,9 @@
     let signingOut = $state(false);
     let signOutError = $state('');
     let helpOpen = $state(false);
+    let paletteOpen = $state(false);
+    let drawerOpen = $state(false);
+    let sidebarCollapsed = $state(false);
     let accountButton = $state<HTMLButtonElement>();
     const accountName = $derived(data.user?.displayName || data.user?.username || 'Account');
     const accountInitial = $derived(Array.from(accountName.trim())[0]?.toLocaleUpperCase() || '?');
@@ -36,12 +40,14 @@
     }
 
     function openHelp() {
+        if (accountOpen) accountButton?.focus();
+        accountOpen = false;
         helpOpen = true;
     }
 
     beforeNavigate(() => performance.mark('ec:navigation-start'));
     afterNavigate(() => { if (performance.getEntriesByName('ec:navigation-start').length) { performance.measure('ec:navigation', 'ec:navigation-start'); performance.clearMarks('ec:navigation-start'); } });
-    afterNavigate(() => { accountOpen = false; resolveConfirmation(false); });
+    afterNavigate(() => { accountOpen = false; drawerOpen = false; paletteOpen = false; resolveConfirmation(false); });
 
     function closeMenu(event: KeyboardEvent) {
         if (event.key === 'Escape' && accountOpen) { accountOpen = false; accountButton?.focus(); }
@@ -66,14 +72,20 @@
 
     $effect(() => {
         if (!sessionReady) return;
-        const path = $page.url.pathname;
-        if (!(path === '/' || /^\/(scripts|configs|plugins)\//.test(path) || path === '/betas/new')) return;
         if ('fleetSnapshot' in $page.data && $page.data.fleetSnapshot) hydrateFleet($page.data.fleetSnapshot);
+    });
+
+    $effect(() => {
+        if (!sessionReady) return;
+        // Navigation badges need fresh host evidence on every signed-in page.
         return startFleetMonitor();
     });
 
     onMount(() => {
         const stopTimeZone = startTimeZonePreference();
+        const desktop = window.matchMedia('(min-width: 961px)');
+        const closeDrawer = () => { if (desktop.matches) drawerOpen = false; };
+        desktop.addEventListener('change', closeDrawer);
 
         const shortcuts = Object.fromEntries(visibleNavigation(data.user?.role ?? 'viewer').flatMap(group => group.items).filter(item => item.shortcut).map(item => [item.shortcut!, item.href]));
         let armed = false;
@@ -81,6 +93,13 @@
 
         const onKey = (e: KeyboardEvent) => {
             if (!sessionReady) return;
+            // Global search also works while focus is in a page's search field.
+            if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === 'k') {
+                e.preventDefault();
+                accountOpen = false; drawerOpen = false; helpOpen = false;
+                paletteOpen = !paletteOpen;
+                return;
+            }
             const target = e.target as HTMLElement;
             if (target && (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || target.isContentEditable || target.closest('dialog'))) return;
             if (e.metaKey || e.ctrlKey || e.altKey) return;
@@ -106,6 +125,7 @@
         window.addEventListener('keydown', onKey);
         return () => {
             stopTimeZone();
+            desktop.removeEventListener('change', closeDrawer);
             window.removeEventListener('keydown', onKey);
             if (armTimer) clearTimeout(armTimer);
         };
@@ -120,17 +140,40 @@
 
 <svelte:window onkeydown={closeMenu} onclick={dismissAccount} />
 
-<div class="shell">
+<div class="shell" class:with-sidebar={sessionReady} class:sidebar-collapsed={sidebarCollapsed}>
     <a class="skip-link" href="#main-content">Skip to content</a>
+    {#if sessionReady && data.user}
+        <aside class="sidebar" id="desktop-navigation" hidden={sidebarCollapsed}>
+            <a class="sidebar-brand" href="/" aria-label="Electric Cherry home"><BrandMark size="sm" /></a>
+            <div class="sidebar-scroll"><Navigation role={data.user.role} /></div>
+        </aside>
+        <div class="navigation-drawer">
+            <Dialog bind:open={drawerOpen} title="Navigation" drawer>
+                <div id="mobile-navigation"><Navigation role={data.user.role} onNavigate={() => drawerOpen = false} /></div>
+            </Dialog>
+        </div>
+    {/if}
     {#if publicPage}
         <header class="auth-brand"><BrandMark size="md" /></header>
     {:else}
     <header class="app-header">
+        {#if sessionReady}
+            <button class="icon-button desktop-toggle" type="button" aria-label={sidebarCollapsed ? 'Expand navigation' : 'Collapse navigation'} aria-controls="desktop-navigation" aria-expanded={!sidebarCollapsed} onclick={() => sidebarCollapsed = !sidebarCollapsed}>
+                <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="3" width="16" height="14" rx="2" /><path d="M7 3v14" /></svg>
+            </button>
+            <button class="icon-button mobile-toggle" type="button" aria-label="Open navigation" aria-controls="mobile-navigation" aria-expanded={drawerOpen} onclick={() => drawerOpen = true}>
+                <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5h14M3 10h14M3 15h14" /></svg>
+            </button>
+        {/if}
         <a class="brand-link" href={sessionReady ? '/' : '/account'} aria-label="Electric Cherry home">
             <BrandMark size="sm" />
         </a>
-        {#if sessionReady && data.user}<div class="primary-navigation"><Navigation role={data.user.role} /></div>{/if}
+        {#if sessionReady}<button class="search-button" type="button" aria-label="Search pages, servers, hosts, and players" aria-keyshortcuts="Meta+k Control+k" onclick={() => paletteOpen = true}>
+            <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8" cy="8" r="5" /><path d="m12 12 5 5" /></svg>
+            <span class="search-label">Search pages, servers, players…</span><kbd>⌘K / Ctrl K</kbd>
+        </button>{/if}
         <div class="header-actions">
+            {#if sessionReady}<button class="icon-button help-button" type="button" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)" onclick={openHelp}>?</button>{/if}
             {#if data.user}
                 <div class="account-menu">
                     <button bind:this={accountButton} class="account-button" type="button"
@@ -143,6 +186,7 @@
                         <div class="account-links" id="account-links">
                             <div class="account-name">{accountName}</div>
                             <a href="/account">My account</a>
+                            {#if sessionReady}<button onclick={openHelp}>Keyboard shortcuts <span aria-hidden="true">?</span></button>{/if}
                             {#if data.user.role === 'admin' && sessionReady}<a href="/settings/users">Manage users</a>{/if}
                             <button disabled={signingOut} onclick={signOut}>{signingOut ? 'Signing out…' : 'Sign out'}</button>
                             {#if signOutError}<p role="alert">{signOutError}</p>{/if}
@@ -154,13 +198,13 @@
     </header>
     {/if}
     <main id="main-content" tabindex="-1" class:auth-main={publicPage}>
-        {#if sessionReady && data.user}<Navigation role={data.user.role} variant="secondary" />{/if}
         {#if sessionReady && data.user?.role === 'viewer'}<aside class="viewer-note"><strong>Viewer access</strong><span>You can read fleet status and summaries. Operating servers or viewing raw configs, file changes, logs, and telemetry requires an operator account.</span></aside>{/if}
         {@render children()}
     </main>
     <Confirmation />
-    <Dialog bind:open={helpOpen} title="Keyboard shortcuts" description="Press g, then the destination key. Shortcuts are inactive while typing or using a dialog.">
-        <dl class="shortcuts">{#each shortcuts as item}<div><dt><kbd>g {item.shortcut}</kbd></dt><dd>{item.href === '/' ? 'Fleet' : item.label}</dd></div>{/each}<div><dt><kbd>?</kbd></dt><dd>This help</dd></div></dl>
+    {#if sessionReady && data.user}<CommandPalette bind:open={paletteOpen} role={data.user.role} />{/if}
+    <Dialog bind:open={helpOpen} title="Keyboard shortcuts" description="Press g, then a destination key. Page shortcuts are inactive while typing or using a dialog; search works from any field.">
+        <dl class="shortcuts"><div><dt><kbd>⌘K / Ctrl K</kbd></dt><dd>Search pages, servers, hosts, and players</dd></div>{#each shortcuts as item}<div><dt><kbd>g {item.shortcut}</kbd></dt><dd>{item.href === '/' ? 'Fleet' : item.label}</dd></div>{/each}<div><dt><kbd>?</kbd></dt><dd>This help</dd></div></dl>
     </Dialog>
 </div>
 
@@ -204,14 +248,29 @@
     }
 
     .shell { min-height: 100vh; }
+    .shell.with-sidebar { padding-left: 224px; }
+    .shell.sidebar-collapsed { padding-left: 0; }
+    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 25; display: flex; flex-direction: column; width: 224px; border-right: 1px solid var(--border-subtle); background: var(--surface); }
+    .sidebar[hidden] { display: none; }
+    .sidebar-brand { display: flex; align-items: center; min-height: 60px; padding: 0 var(--space-4); text-decoration: none; }
+    .sidebar-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-2) var(--space-6); scrollbar-width: thin; }
+    .navigation-drawer :global(dialog.drawer) { inset: 0 auto 0 0; width: min(320px, 100vw); border-left: 0; border-right: 1px solid var(--border-subtle); }
     .auth-brand { display:flex; justify-content:center; padding:48px 20px 20px; }
     main { min-width:0; overflow-wrap:anywhere; padding:var(--space-6) var(--space-8) var(--space-16); max-width:1600px; margin:0 auto; view-transition-name:main; }
     main.auth-main { max-width:520px; padding-top:16px; }
     .viewer-note { display:flex; gap:8px 16px; flex-wrap:wrap; padding:14px 18px; margin-bottom:24px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); font-size:var(--text-sm); color:var(--text-secondary); }
     .viewer-note strong { color:var(--text-primary); }
-    .app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; min-height:60px; padding:0 20px; border-bottom:1px solid var(--border-subtle); background:var(--surface); }
+    .app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--space-3); min-height:60px; padding:0 var(--space-5); border-bottom:1px solid var(--border-subtle); background:var(--surface-sunken); }
     .brand-link { flex-shrink:0; display:flex; align-items:center; text-decoration:none; }
-    .primary-navigation { flex:1; min-width:0; }
+    .with-sidebar:not(.sidebar-collapsed) .app-header .brand-link { display: none; }
+    .icon-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--text-lg); cursor: pointer; }
+    .icon-button:hover { color: var(--text-primary); background: var(--surface-raised); }
+    .icon-button svg, .search-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; flex-shrink: 0; }
+    .mobile-toggle { display: none; }
+    .search-button { min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex: 1; max-width: 440px; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary); cursor: pointer; text-align: left; font-size: var(--text-xs); }
+    .search-button:hover { border-color: var(--border-control-hover); color: var(--text-primary); }
+    .search-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    .search-button kbd { padding: 1px 4px; white-space: nowrap; }
     .header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
     .account-menu { position:relative; }
     .account-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); color:var(--text-primary); font:inherit; cursor:pointer; }
@@ -223,7 +282,7 @@
     .account-links p { padding:0 12px; font-size:var(--text-xs); color:var(--state-danger); }
     .shortcuts { display:grid; gap:12px; margin:0; }
     .shortcuts > div { display:flex; gap:20px; align-items:center; }
-    .shortcuts dt { min-width:55px; }
+    .shortcuts dt { min-width:120px; }
     .shortcuts dd { margin:0; font-size:var(--text-sm); }
     kbd { font-family:var(--font-mono); padding:3px 8px; border:1px solid var(--border-strong); border-radius:5px; }
     .skip-link { position:fixed; left:16px; top:-80px; z-index:300; padding:12px 16px; background:var(--surface-raised); border-radius:var(--radius-md); }
@@ -231,17 +290,25 @@
     :global(input),:global(select),:global(textarea) { min-width:0; max-width:100%; }
     :global(input),:global(select),:global(textarea),:global(button),:global(a) { scroll-margin-block:90px 100px; }
     :global(dialog) { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
-    @media (max-width:999px) {
-        .app-header { flex-wrap:wrap; gap:0 16px; padding-top:8px; }
-        .primary-navigation { order:3; flex-basis:100%; }
+    @media (max-width:960px) {
+        .shell.with-sidebar { padding-left: 0; }
+        .sidebar, .desktop-toggle { display: none; }
+        .mobile-toggle { display: inline-grid; }
+        .with-sidebar:not(.sidebar-collapsed) .app-header .brand-link { display: flex; }
+        .app-header { min-height: 56px; gap: var(--space-2); padding: 0 var(--space-3); }
+        .search-button { margin-left: auto; max-width: 300px; }
+        .search-button kbd { display: none; }
+        .header-actions { margin-left: 0; }
     }
     @media (max-width:720px) {
-        .app-header { padding-inline:12px; gap:8px; }
+        .app-header { padding-inline: var(--space-2); gap: var(--space-1); }
         .brand-link :global(.mark-sm .word) { font-size:12px; letter-spacing:1px; }
-        main { padding:var(--space-5) max(var(--space-4),env(safe-area-inset-right)) calc(var(--space-16) + env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left)); }
+        .search-button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; }
+        .search-label, .help-button { display: none; }
+        main { padding:var(--space-4) max(var(--space-4),env(safe-area-inset-right)) calc(var(--space-16) + env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left)); }
         :global(input:not([type='checkbox']):not([type='radio'])),:global(select),:global(textarea) { font-size:16px !important; min-height:44px; }
         :global(button),:global(.btn) { min-height:44px; }
     }
-    @media (max-width:360px) { .brand-link :global(.mark-sm .word) { font-size:10px; letter-spacing:0; } .header-actions { gap:4px; } }
+    @media (max-width:360px) { .brand-link :global(.mark-sm .word) { display: none; } .brand-link::after { content: 'EC'; margin-left: var(--space-2); color: var(--text-primary); font-size: var(--text-base); font-weight: var(--weight-semibold); } .header-actions { gap:4px; } }
     :global(::view-transition-old(root)),:global(::view-transition-new(root)),:global(::view-transition-old(main)),:global(::view-transition-new(main)) { animation-duration:var(--dur-base); animation-timing-function:var(--ease-standard); }
 </style>