feat(frontend): refine main sidebar interactions

Author: oshuej198

frontend/src/lib/components/UserAvatar.svelte

@@ -14,7 +14,9 @@
     // minimal drops the items that navigate to the desktop app (My Workspace,
     // Profile, Security) — used on the mobile surface where those routes render
     // the full desktop UI. Theme + Sign Out remain.
-    minimal = false
+    minimal = false,
+    isOpen = $bindable(false),
+    onOpenChange = null,
   } = $props();
 
   // Local state
@@ -124,6 +126,8 @@
   triggerAlignment={expanded ? "start" : "center"}
   showChevron={false}
   triggerTestid="user-avatar-trigger"
+  {isOpen}
+  {onOpenChange}
   items={[
     ...((!minimal && authStore.currentUser) ? [{
       id: 'my-workspace',

frontend/src/lib/features/notifications/NotificationTray.svelte

@@ -9,22 +9,35 @@
   import { navigate } from '../../router.js';
   import { t } from '../../stores/i18n.svelte.js';
   import { createPopover, melt } from '@melt-ui/svelte';
+  import { toStore } from 'svelte/store';
 
   const AUTO_SEEN_DELAY_MS = 5000;
 
   let {
     expanded = false,
-    label = ''
+    label = '',
+    isOpen = $bindable(false),
+    onOpenChange = null,
   } = $props();
 
   let unreadCount = $state(0);
 
   // Portal above the sidebar stacking context.
+  const controlledOpen = toStore(
+    () => isOpen,
+    (value) => {
+      if (isOpen === value) return;
+      isOpen = value;
+      onOpenChange?.(value);
+    }
+  );
+
   const {
     elements: { trigger, content },
     states: { open }
   } = createPopover({
     forceVisible: true,
+    open: controlledOpen,
     positioning: {
       placement: 'right-start'
     },
@@ -108,6 +121,7 @@
   {#if $open}
     <div
       use:melt={$content}
+      tabindex="-1"
       class="notification-dropdown z-[60] w-96 rounded shadow-xl max-h-[500px] overflow-hidden"
       style="background-color: var(--ds-surface-overlay); border: 1px solid var(--ds-border); color: var(--ds-text);"
       in:fly={{ x: -10, duration: 200, easing: quintOut }}

frontend/src/lib/layout/DropdownMenu.svelte

@@ -5,6 +5,7 @@
   import { t } from '../stores/i18n.svelte.js';
   import { sanitizeHtml } from '../utils/sanitize.ts';
   import { tick } from 'svelte';
+  import { toStore } from 'svelte/store';
   import Checkbox from '../components/Checkbox.svelte';
   import Input from '../components/Input.svelte';
   import ItemTypeIcon from '../components/ItemTypeIcon.svelte';
@@ -31,12 +32,23 @@
     disabled = false,
     triggerTestid = '',
     triggerLabel = '',
+    isOpen = $bindable(false),
+    onOpenChange = null,
     children = undefined
   } = $props();
 
   const isDisabled = $derived(disabled || (items.length === 0 && !children));
 
   // Create popover (replaces createDropdownMenu to avoid typeahead focus-stealing)
+  const controlledOpen = toStore(
+    () => isOpen,
+    (value) => {
+      if (isOpen === value) return;
+      isOpen = value;
+      onOpenChange?.(value);
+    }
+  );
+
   const {
     elements: { trigger, content },
     states: { open }
@@ -47,6 +59,7 @@
       placement: /** @type {import('@floating-ui/dom').Placement} */ (placement || 'bottom')
     },
     portal: 'body',
+    open: controlledOpen,
     // svelte-ignore state_referenced_locally
     disabled: isDisabled
   }));
@@ -220,6 +233,7 @@
     use:melt={$content}
     data-menu-container
     role="menu"
+    tabindex="-1"
     onkeydown={handleMenuKeydown}
     class="{maxWidth} rounded shadow-xl border focus:outline-none z-[60]"
     style="background-color: var(--ds-surface-raised); border-color: var(--ds-border); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.15);"

frontend/src/lib/layout/MainSidebar.svelte

@@ -11,6 +11,7 @@
   import NavLink from './NavLink.svelte';
   import UserAvatar from '../components/UserAvatar.svelte';
   import NotificationTray from '../features/notifications/NotificationTray.svelte';
+  import ScrollableSidebar from './ScrollableSidebar.svelte';
   import {
     IconSearch, IconSettings, IconPlus, IconGridDots, IconUserScan,
     IconFolders, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse,
@@ -22,7 +23,9 @@
     onShowCommandPalette = () => {},
     onShowCreateModal = () => {},
     onShowChatPanel = () => {},
-    onToggleTerminal = () => {}
+    onToggleTerminal = () => {},
+    activeSurface = null,
+    onSurfaceChange = () => {},
   } = $props();
 
   const isTauri = getIsTauri();
@@ -126,24 +129,41 @@
   function showCreateDropdown() {
     onShowCreateModal();
   }
+
+  function setPopoverSurface(surface, open) {
+    if (open) {
+      onSurfaceChange(surface);
+    } else if (activeSurface === surface) {
+      onSurfaceChange(null);
+    }
+  }
+
+  function closePopoverSurface() {
+    if (activeSurface === 'workspaces' || activeSurface === 'notifications' || activeSurface === 'profile') {
+      onSurfaceChange(null);
+    }
+  }
 </script>
 
-<nav class="main-sidebar {$uiStore.navExpanded ? 'w-[200px]' : 'w-16'} shadow-lg border-r flex flex-col py-4 fixed h-full z-40 themed-nav transition-all duration-200 overflow-x-hidden" style="border-color: var(--ds-border);" aria-label={t('aria.mainNavigation')}>
+{#snippet sidebarHeader()}
   <!-- Logo -->
   <Tooltip content="Windshift" placement="right" disabled={$uiStore.navExpanded}>
     <a
       href="/"
+      onclick={closePopoverSurface}
       class="flex items-center {$uiStore.navExpanded ? 'px-4' : 'justify-center'} w-full h-10 mb-2 hover:opacity-80 transition-opacity cursor-pointer"
     >
-      <img src="windshift-3.svg" alt="Windshift" class="w-8 h-8 flex-shrink-0" />
+      <img src="/windshift-3.svg" alt="Windshift" class="w-8 h-8 flex-shrink-0" />
       {#if $uiStore.navExpanded}
         <span class="ml-3 font-semibold text-sm whitespace-nowrap">Windshift</span>
       {/if}
     </a>
   </Tooltip>
+{/snippet}
 
+{#snippet sidebarContent()}
   <!-- Main Navigation -->
-  <div class="flex mt-6 flex-col {$uiStore.navExpanded ? 'items-stretch px-2.5' : 'items-center'} space-y-1 flex-1">
+  <div class="flex flex-col {$uiStore.navExpanded ? 'items-stretch px-2.5' : 'items-center'} space-y-1 py-4">
 
     <!-- Workspaces -->
     <Tooltip content={t('nav.workspaces')} placement="right" disabled={$uiStore.navExpanded}>
@@ -154,14 +174,16 @@
           triggerGap="gap-3"
           triggerText={$uiStore.navExpanded ? t('nav.workspaces') : ''}
           triggerLabel={t('nav.workspaces')}
-          triggerClass="{$uiStore.navExpanded ? 'w-full px-3' : 'w-10'} h-10 rounded flex items-center {$uiStore.navExpanded ? '' : 'justify-center'} cursor-pointer nav-button nav-button-emphasized {isWorkspaceRoute($currentRoute.view) ? 'nav-button-selected' : ''} {!$workspacesStore.loaded ? 'opacity-50 cursor-wait' : ''}"
+          triggerClass="{$uiStore.navExpanded ? 'w-full px-3' : 'w-10'} h-10 rounded flex items-center {$uiStore.navExpanded ? '' : 'justify-center'} cursor-pointer nav-button nav-button-emphasized {isWorkspaceRoute($currentRoute.view) || activeSurface === 'workspaces' ? 'nav-button-selected' : ''} {!$workspacesStore.loaded ? 'opacity-50 cursor-wait' : ''}"
           triggerTestid="workspaces-dropdown-trigger"
           items={workspacesDropdownItems}
           maxWidth="max-w-xs"
           showChevron={false}
           placement="right-start"
           iconOnly={!$uiStore.navExpanded}
           triggerAlignment={$uiStore.navExpanded ? 'start' : 'center'}
+          isOpen={activeSurface === 'workspaces'}
+          onOpenChange={(open) => setPopoverSurface('workspaces', open)}
         />
       </div>
     </Tooltip>
@@ -175,25 +197,31 @@
         href={item.href}
         isActive={item.activeViews.includes($currentRoute.view)}
         expanded={$uiStore.navExpanded}
+        onclick={closePopoverSurface}
       />
     {/each}
 
-    <!-- Top Actions Section - "Notch" style centered positioning -->
-    <div class="flex flex-col items-stretch space-y-2 my-6 py-4">
+    <!-- Global actions share the same rhythm as navigation, but remain a
+         distinct task group instead of a second navigation section. -->
+    <div class="sidebar-quick-actions flex flex-col items-stretch space-y-1 my-3 py-3 border-y">
       <NavLink
         id="global-create-button"
         icon={IconPlus}
         label={t('nav.create')}
         onclick={showCreateDropdown}
         expanded={$uiStore.navExpanded}
-        variant="primary"
-        tooltipSuffix=" (C)"
+        variant="accent"
+        isActive={activeSurface === 'create'}
+        shortcut={getShortcutDisplay('global', 'create')}
+        tooltipSuffix=" ({getShortcutDisplay('global', 'create')})"
       />
       <NavLink
         icon={IconSearch}
         label={t('nav.search')}
         onclick={onShowCommandPalette}
         expanded={$uiStore.navExpanded}
+        isActive={activeSurface === 'search'}
+        shortcut={getShortcutDisplay('global', 'commandPalette')}
         tooltipSuffix=" ({getShortcutDisplay('global', 'commandPalette')} or Space Space)"
       />
       {#if aiStore.chatAvailable}
@@ -203,6 +231,8 @@
           label={t('nav.aiChat')}
           onclick={onShowChatPanel}
           expanded={$uiStore.navExpanded}
+          isActive={activeSurface === 'chat'}
+          shortcut={getShortcutDisplay('global', 'aiChat')}
           tooltipSuffix=" ({getShortcutDisplay('global', 'aiChat')})"
         />
       {/if}
@@ -217,9 +247,11 @@
       {/if}
     </div>
   </div>
+{/snippet}
 
+{#snippet sidebarFooter()}
   <!-- Bottom Section -->
-  <div class="flex flex-col {$uiStore.navExpanded ? 'items-stretch px-3' : 'items-center'} space-y-1 mt-auto">
+  <div class="flex flex-col {$uiStore.navExpanded ? 'items-stretch px-3' : 'items-center'} space-y-1 pt-2">
     <!-- Nav Toggle Button -->
     <button
       onclick={() => uiStore.toggleNavExpanded()}
@@ -242,24 +274,56 @@
         href={item.href}
         isActive={item.activeViews.includes($currentRoute.view)}
         expanded={$uiStore.navExpanded}
+        onclick={closePopoverSurface}
       />
     {/each}
 
     <!-- Notification Tray -->
     <Tooltip content={t('nav.notifications')} placement="right" disabled={$uiStore.navExpanded}>
-      <NotificationTray expanded={$uiStore.navExpanded} label={t('nav.notifications')} />
+      <NotificationTray
+        expanded={$uiStore.navExpanded}
+        label={t('nav.notifications')}
+        isOpen={activeSurface === 'notifications'}
+        onOpenChange={(open) => setPopoverSurface('notifications', open)}
+      />
     </Tooltip>
 
     <!-- User Profile Avatar -->
     <Tooltip content={t('nav.profile')} placement="right" disabled={$uiStore.navExpanded}>
-      <UserAvatar expanded={$uiStore.navExpanded} label={t('nav.profile')} />
+      <UserAvatar
+        expanded={$uiStore.navExpanded}
+        label={t('nav.profile')}
+        isOpen={activeSurface === 'profile'}
+        onOpenChange={(open) => setPopoverSurface('profile', open)}
+      />
     </Tooltip>
   </div>
-</nav>
+{/snippet}
+
+<ScrollableSidebar
+  as="nav"
+  class="main-sidebar {$uiStore.navExpanded ? 'w-[200px]' : 'w-16'} shadow-lg border-r py-4 fixed inset-y-0 z-40 themed-nav transition-all duration-200"
+  style="border-color: var(--ds-border);"
+  aria-label={t('aria.mainNavigation')}
+  header={sidebarHeader}
+  footer={sidebarFooter}
+  scrollTestid="main-navigation-scroll"
+>
+  {@render sidebarContent()}
+</ScrollableSidebar>
 
 <style>
+  :global(.main-sidebar) {
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  .sidebar-quick-actions {
+    border-color: color-mix(in srgb, var(--ds-border) 75%, transparent);
+  }
+
   @media (max-width: 767px) {
-    .main-sidebar {
+    :global(.main-sidebar) {
       width: 4rem;
     }
   }

frontend/src/lib/layout/NavLink.svelte

@@ -1,5 +1,6 @@
 <script>
   import Tooltip from '../components/Tooltip.svelte';
+  import { t } from '../stores/i18n.svelte.js';
 
   let {
     icon: Icon,
@@ -10,6 +11,7 @@
     expanded = false,
     variant = 'default',
     tooltipSuffix = '',
+    shortcut = '',
     id = undefined
   } = $props();
 
@@ -20,21 +22,37 @@
   const variantClasses = $derived(
     variant === 'primary'
       ? 'bg-[var(--ds-interactive)] bg-primary text-white text-sm font-medium transition'
+      : variant === 'accent'
+        ? `nav-button nav-button-accent ${isActive ? 'nav-button-selected' : ''}`
       : `nav-button ${isActive ? 'nav-button-selected' : ''}`
   );
+
+  const shortcutKeys = $derived(shortcut.trim().split(/\s+/).filter(Boolean));
 </script>
 
 <Tooltip content="{label}{tooltipSuffix}" placement="right" disabled={expanded}>
   {#if href}
     <a
       {id}
       {href}
+      {onclick}
       class="{baseClasses} {variantClasses}"
       aria-label={label}
       aria-current={isActive ? 'page' : undefined}
     >
       <Icon class="w-5 h-5 flex-shrink-0" />
       {#if expanded}<span class="ml-3 min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm">{label}</span>{/if}
+      {#if expanded && shortcut}
+        <span
+          class="nav-shortcut"
+          title={t('commandPalette.pressToOpen', { shortcut })}
+          aria-label={t('commandPalette.pressToOpen', { shortcut })}
+        >
+          {#each shortcutKeys as key, index (`${key}-${index}`)}
+            <kbd class="nav-shortcut-key">{key}</kbd>
+          {/each}
+        </span>
+      {/if}
     </a>
   {:else}
     <button
@@ -45,6 +63,17 @@
     >
       <Icon class="w-5 h-5 flex-shrink-0" />
       {#if expanded}<span class="ml-3 min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{label}</span>{/if}
+      {#if expanded && shortcut}
+        <span
+          class="nav-shortcut"
+          title={t('commandPalette.pressToOpen', { shortcut })}
+          aria-label={t('commandPalette.pressToOpen', { shortcut })}
+        >
+          {#each shortcutKeys as key, index (`${key}-${index}`)}
+            <kbd class="nav-shortcut-key">{key}</kbd>
+          {/each}
+        </span>
+      {/if}
     </button>
   {/if}
 </Tooltip>