From 9a440db9d269818c6e65a20bb509344cc03b2806 Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 15:42:20 +0300
Subject: [PATCH 01/11] feat(frontend): unify navigation sidebar scrolling

---
 .../features/api-docs/ApiDocsSidebar.svelte   |  21 +-
 .../channels/ChannelNavigation.svelte         |  37 ++-
 .../src/lib/features/channels/Channels.svelte |   6 +-
 .../collections/CollectionNavigation.svelte   | 164 ++++++------
 .../collections/CollectionsList.svelte        |   4 +-
 .../collections/CollectionsNavigation.svelte  |  30 +--
 .../iterations/IterationNavigation.svelte     |   9 +-
 .../lib/features/iterations/Iterations.svelte |   4 +-
 .../features/logbook/BucketNavigation.svelte  |  41 ++-
 .../src/lib/features/logbook/Logbook.svelte   |   4 +-
 .../milestones/MilestoneNavigation.svelte     |  37 ++-
 .../lib/features/milestones/Milestones.svelte |   4 +-
 .../lib/features/pages/PagesNavSidebar.svelte |  23 +-
 frontend/src/lib/features/time/Time.svelte    |  51 ++--
 .../src/lib/layout/NavigationSidebar.svelte   |  34 +++
 .../src/lib/layout/ScrollableSidebar.svelte   |  94 +++++++
 frontend/src/lib/pages/Admin.svelte           | 124 ++++-----
 frontend/src/lib/pages/ApiDocs.svelte         |   2 +-
 .../src/lib/pages/MainRouteContent.svelte     |  29 +--
 .../CustomerOrganisationNavigation.svelte     |  53 ++--
 frontend/src/lib/workspaces/Customers.svelte  |   6 +-
 .../lib/workspaces/WorkspaceAdminNav.svelte   |   2 +-
 .../lib/workspaces/WorkspaceNavigation.svelte | 243 ++++++++++--------
 23 files changed, 604 insertions(+), 418 deletions(-)
 create mode 100644 frontend/src/lib/layout/NavigationSidebar.svelte
 create mode 100644 frontend/src/lib/layout/ScrollableSidebar.svelte

diff --git a/frontend/src/lib/features/api-docs/ApiDocsSidebar.svelte b/frontend/src/lib/features/api-docs/ApiDocsSidebar.svelte
index a0f801ad5..039be645c 100644
--- a/frontend/src/lib/features/api-docs/ApiDocsSidebar.svelte
+++ b/frontend/src/lib/features/api-docs/ApiDocsSidebar.svelte
@@ -2,6 +2,7 @@
   import MethodBadge from './MethodBadge.svelte';
   import Input from '../../components/Input.svelte';
   import { filterGroups } from './openapi-store.svelte.js';
+  import ScrollableSidebar from '../../layout/ScrollableSidebar.svelte';
 
   let {
     groups,
@@ -21,7 +22,7 @@
   }
 </script>
 
-<aside class="sidebar" data-testid="api-docs-sidebar">
+{#snippet sidebarHeader()}
   <header class="sidebar-head">
     <h1 class="sidebar-title">API reference</h1>
     <p class="sidebar-meta">{groups.reduce((n, g) => n + g.operations.length, 0)} operations</p>
@@ -41,7 +42,16 @@
       <span class="filter-count">{visibleCount}</span>
     {/if}
   </div>
+{/snippet}
 
+<ScrollableSidebar
+  as="aside"
+  class="sidebar"
+  data-testid="api-docs-sidebar"
+  aria-label="API reference"
+  header={sidebarHeader}
+  scrollTestid="api-docs-navigation-scroll"
+>
   <nav class="groups">
     {#each visibleGroups as group (group.tag)}
       <section class="group">
@@ -70,18 +80,15 @@
       <p class="empty">No operations match “{query}”.</p>
     {/if}
   </nav>
-</aside>
+</ScrollableSidebar>
 
 <style>
-  .sidebar {
+  :global(.sidebar) {
     width: 280px;
     flex-shrink: 0;
     border-right: 1px solid var(--ds-border);
     background: var(--ds-surface);
-    overflow-y: auto;
     height: 100%;
-    display: flex;
-    flex-direction: column;
   }
   .sidebar-head {
     padding: 18px 18px 8px;
@@ -127,8 +134,6 @@
   }
   .groups {
     padding: 4px 0 24px;
-    flex: 1 1 auto;
-    overflow-y: auto;
   }
   .group {
     margin-top: 14px;
diff --git a/frontend/src/lib/features/channels/ChannelNavigation.svelte b/frontend/src/lib/features/channels/ChannelNavigation.svelte
index d8b2355c2..e80185882 100644
--- a/frontend/src/lib/features/channels/ChannelNavigation.svelte
+++ b/frontend/src/lib/features/channels/ChannelNavigation.svelte
@@ -6,7 +6,7 @@
   import Button from '../../components/Button.svelte';
   import { getHexFromColorName } from '../../utils/colors.js';
   import { t } from '../../stores/i18n.svelte.js';
-  import SidebarHeader from '../../layout/SidebarHeader.svelte';
+  import NavigationSidebar from '../../layout/NavigationSidebar.svelte';
   import { channelTypes as channelTypeDefs, allTypesEntry } from './channelTypes.js';
   import { isSystemAdmin } from '../../stores/permissions.svelte.js';
 
@@ -51,11 +51,23 @@
   }
 </script>
 
-<!-- Channel Navigation Sidebar -->
-<div class="w-64 border-r flex flex-col p-6" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-  <!-- Header -->
-  <SidebarHeader title={t('channels.title')} description={t('channels.subtitle')} noBorder />
+{#snippet sidebarFooter()}
+  {#if $isSystemAdmin}
+    <div class="px-6 pb-6 pt-4 border-t" style="border-color: var(--ds-border);">
+      <Button
+        variant="default"
+        icon={IconTag}
+        onclick={handleManageCategories}
+        class="w-full justify-center"
+      >
+        {t('channels.manageCategories')}
+      </Button>
+    </div>
+  {/if}
+{/snippet}
 
+<!-- Channel Navigation Sidebar -->
+<NavigationSidebar title={t('channels.title')} description={t('channels.subtitle')} footer={sidebarFooter}>
   <!-- Navigation -->
   <nav class="flex-1 space-y-4">
     <!-- Channel Types Section -->
@@ -118,17 +130,4 @@
     </div>
   </nav>
 
-  <!-- Footer - Manage Categories -->
-  {#if $isSystemAdmin}
-    <div class="pt-4 border-t" style="border-color: var(--ds-border);">
-      <Button
-        variant="default"
-        icon={IconTag}
-        onclick={handleManageCategories}
-        class="w-full justify-center"
-      >
-        {t('channels.manageCategories')}
-      </Button>
-    </div>
-  {/if}
-</div>
+</NavigationSidebar>
diff --git a/frontend/src/lib/features/channels/Channels.svelte b/frontend/src/lib/features/channels/Channels.svelte
index e83c70841..29500c19e 100644
--- a/frontend/src/lib/features/channels/Channels.svelte
+++ b/frontend/src/lib/features/channels/Channels.svelte
@@ -434,14 +434,14 @@
 </script>
 
 <!-- Main container with sidebar layout -->
-<div class="flex min-h-screen" style="background-color: var(--ds-surface);">
+<div class="flex h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
   <!-- Left Sidebar - Category Navigation (only when not embedded in Admin) -->
   {#if !embedded}
     <ChannelNavigation />
   {/if}
 
   <!-- Main Content -->
-  <div class="flex-1 {embedded ? '' : 'p-6'}">
+  <div class="flex-1 min-h-0 overflow-y-auto {embedded ? '' : 'p-6'}">
     <!-- Embedded Tab Navigation -->
     {#if embedded}
       <div class="border-b mb-6" style="border-color: var(--ds-border);">
@@ -651,7 +651,7 @@
       <div>
         <Label color="default" class="mb-2">Type</Label>
         <div class="flex flex-wrap gap-2">
-          {#each channelTypeDefs as option}
+          {#each channelTypeDefs as option (option.id)}
             <button
               type="button"
               onclick={() => channelFormData.type = option.id}
diff --git a/frontend/src/lib/features/collections/CollectionNavigation.svelte b/frontend/src/lib/features/collections/CollectionNavigation.svelte
index 37e3ab453..ef60a35fb 100644
--- a/frontend/src/lib/features/collections/CollectionNavigation.svelte
+++ b/frontend/src/lib/features/collections/CollectionNavigation.svelte
@@ -7,6 +7,7 @@
   import { useEventListener } from 'runed';
   import { uiStore } from '../../stores/ui.svelte.js';
   import { collectionStore } from '../../stores/collectionContext.js';
+  import ScrollableSidebar from '../../layout/ScrollableSidebar.svelte';
 
 
   const MIN_WIDTH = 180;
@@ -74,13 +75,81 @@
   const sidebarBgStyle = 'background-color: var(--ds-surface); border-color: var(--ds-border);';
 </script>
 
+{#snippet resizeHandle()}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="ws-resize-handle"
+    onmousedown={onResizeStart}
+    ondblclick={onResizeHandleDblClick}
+  ></div>
+{/snippet}
+
+{#snippet expandedHeader()}
+  <div class="px-4 mb-4 pb-4 border-b" style="border-color: var(--ds-border);">
+    <div class="flex items-center gap-3 w-full p-1">
+      <div class="flex items-center justify-center w-10 h-10 flex-shrink-0">
+        <div class="w-8 h-8 rounded-md flex items-center justify-center" style="background-color: var(--ds-accent-blue-subtle);">
+          <FolderOpen size={18} style="color: var(--ds-text-info);" />
+        </div>
+      </div>
+      <div class="flex-1 min-w-0">
+        <Tooltip content={collectionName}>
+          <div class="font-medium text-sm truncate" style="color: var(--ds-text);">{collectionName}</div>
+        </Tooltip>
+        <div class="text-xs" style="color: var(--ds-text-subtle);">Collection{#if itemCount > 0} · {itemCount} items{/if}</div>
+      </div>
+    </div>
+  </div>
+{/snippet}
+
+{#snippet collapsedFooter()}
+  <div class="w-8 border-t mb-2" style="border-color: var(--ds-border);"></div>
+  <Tooltip content="Back to Collections" placement="right">
+    <a
+      href="/collections"
+      class="w-10 h-10 rounded flex items-center justify-center cursor-pointer transition-colors mb-1 no-underline"
+      style="color: var(--ds-text-subtle);"
+      onmouseenter={(e) => e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'}
+      onmouseleave={(e) => e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'}
+    >
+      <FolderOpen size={20} />
+    </a>
+  </Tooltip>
+  <Tooltip content="Expand sidebar" placement="right">
+    <button
+      onclick={() => uiStore.wsSidebarCollapsed = false}
+      class="w-10 h-10 rounded flex items-center justify-center transition-colors"
+      style="color: var(--ds-text-subtle);"
+      onmouseenter={(e) => e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'}
+      onmouseleave={(e) => e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'}
+    >
+      <IconChevronRight size={20} />
+    </button>
+  </Tooltip>
+  {@render resizeHandle()}
+{/snippet}
+
+{#snippet expandedFooter()}
+  <div class="px-4 pt-4 border-t" style="border-color: var(--ds-border);">
+    <Button variant="default" icon={FolderOpen} href="/collections" class="w-full justify-center">
+      Back to Collections
+    </Button>
+  </div>
+  {@render resizeHandle()}
+{/snippet}
+
 {#if isCollapsed}
   <!-- Collapsed icon-only sidebar -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="relative h-full flex-shrink-0 border-r flex flex-col items-center py-4"
-       style="width: 48px; {sidebarBgStyle}">
+  <ScrollableSidebar
+    class="relative h-full flex-shrink-0 border-r items-center py-4"
+    style="width: 48px; {sidebarBgStyle}"
+    aria-label="Collection navigation"
+    footer={collapsedFooter}
+    reserveScrollbarSpace={false}
+    scrollClass="w-full"
+  >
     <div class="flex flex-col items-center space-y-1 mt-2">
-      {#each collectionViewItems as view}
+      {#each collectionViewItems as view (view.id)}
         {@const isActive = $currentRoute.view === view.routeView}
         {@const ViewIcon = view.icon}
         <Tooltip content={view.label} placement="right">
@@ -112,63 +181,20 @@
         </a>
       </Tooltip>
     </div>
-
-    <!-- Spacer -->
-    <div class="flex-1"></div>
-
-    <!-- Back to Collections -->
-    <div class="w-8 border-t mb-2" style="border-color: var(--ds-border);"></div>
-    <Tooltip content="Back to Collections" placement="right">
-      <a
-        href="/collections"
-        class="w-10 h-10 rounded flex items-center justify-center cursor-pointer transition-colors mb-1 no-underline"
-        style="color: var(--ds-text-subtle);"
-        onmouseenter={(e) => e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'}
-        onmouseleave={(e) => e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'}
-      >
-        <FolderOpen size={20} />
-      </a>
-    </Tooltip>
-
-    <!-- Expand button -->
-    <Tooltip content="Expand sidebar" placement="right">
-      <button onclick={() => uiStore.wsSidebarCollapsed = false}
-              class="w-10 h-10 rounded flex items-center justify-center transition-colors"
-              style="color: var(--ds-text-subtle);"
-              onmouseenter={(e) => e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'}
-              onmouseleave={(e) => e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'}>
-        <IconChevronRight size={20} />
-      </button>
-    </Tooltip>
-
-    <!-- Resize handle -->
-    <div class="ws-resize-handle" onmousedown={onResizeStart} ondblclick={onResizeHandleDblClick}></div>
-  </div>
+  </ScrollableSidebar>
 {:else}
   <!-- Expanded Collection Navigation Sidebar -->
-  <div class="relative h-full flex-shrink-0 border-r flex flex-col py-4" style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}">
-
-    <!-- Collection Header -->
-    <div class="px-4 mb-4 pb-4 border-b" style="border-color: var(--ds-border);">
-      <!-- Collection info (static) -->
-      <div class="flex items-center gap-3 w-full p-1">
-        <div class="flex items-center justify-center w-10 h-10 flex-shrink-0">
-          <div class="w-8 h-8 rounded-md flex items-center justify-center" style="background-color: var(--ds-accent-blue-subtle);">
-            <FolderOpen size={18} style="color: var(--ds-text-info);" />
-          </div>
-        </div>
-        <div class="flex-1 min-w-0">
-          <Tooltip content={collectionName}>
-            <div class="font-medium text-sm truncate" style="color: var(--ds-text);">{collectionName}</div>
-          </Tooltip>
-          <div class="text-xs" style="color: var(--ds-text-subtle);">Collection{#if itemCount > 0} · {itemCount} items{/if}</div>
-        </div>
-      </div>
-    </div>
-
-    <nav class="flex-1 px-4 space-y-2">
+  <ScrollableSidebar
+    class="relative h-full flex-shrink-0 border-r py-4"
+    style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}"
+    aria-label="Collection navigation"
+    header={expandedHeader}
+    footer={expandedFooter}
+    scrollClass="px-4"
+  >
+    <nav class="space-y-2 pb-2">
       <!-- View Items -->
-      {#each collectionViewItems as view}
+      {#each collectionViewItems as view (view.id)}
         {@const isActive = $currentRoute.view === view.routeView}
         {@const ViewIcon = view.icon}
         <Tooltip content={view.tooltip} placement="right">
@@ -206,27 +232,7 @@
         </Tooltip>
       </div>
     </nav>
-
-    <!-- Footer - Back to Collections -->
-    <div class="px-4 pt-4 border-t" style="border-color: var(--ds-border);">
-      <Button
-        variant="default"
-        icon={FolderOpen}
-        href="/collections"
-        class="w-full justify-center"
-      >
-        Back to Collections
-      </Button>
-    </div>
-
-    <!-- Resize handle -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="ws-resize-handle"
-      onmousedown={onResizeStart}
-      ondblclick={onResizeHandleDblClick}
-    ></div>
-  </div>
+  </ScrollableSidebar>
 {/if}
 
 <style>
diff --git a/frontend/src/lib/features/collections/CollectionsList.svelte b/frontend/src/lib/features/collections/CollectionsList.svelte
index 8ea4ba0f8..510f3106f 100644
--- a/frontend/src/lib/features/collections/CollectionsList.svelte
+++ b/frontend/src/lib/features/collections/CollectionsList.svelte
@@ -229,10 +229,10 @@
   }
 </script>
 
-<div class="flex min-h-screen" style="background-color: var(--ds-surface);">
+<div class="flex h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
   <CollectionsNavigation />
 
-  <div class="flex-1">
+  <div class="flex-1 min-h-0 overflow-y-auto">
     <div class="p-6">
       <!-- Header -->
       <PageHeader
diff --git a/frontend/src/lib/features/collections/CollectionsNavigation.svelte b/frontend/src/lib/features/collections/CollectionsNavigation.svelte
index 59402d27a..55fe6b200 100644
--- a/frontend/src/lib/features/collections/CollectionsNavigation.svelte
+++ b/frontend/src/lib/features/collections/CollectionsNavigation.svelte
@@ -3,7 +3,7 @@
   import { Tag, FolderOpen } from '@lucide/svelte';
   import { navigate, currentRoute } from '../../router.js';
   import { t } from '../../stores/i18n.svelte.js';
-  import SidebarHeader from '../../layout/SidebarHeader.svelte';
+  import NavigationSidebar from '../../layout/NavigationSidebar.svelte';
   import { collectionCategoriesStore } from '../../stores/collectionCategories.js';
   import Button from '../../components/Button.svelte';
   import { getHexFromColorName } from '../../utils/colors.js';
@@ -27,9 +27,20 @@
   }
 </script>
 
-<div class="w-64 border-r flex flex-col p-6" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-  <SidebarHeader title={t('collections.title')} description={t('collections.subtitle')} noBorder />
+{#snippet sidebarFooter()}
+  <div class="px-6 pb-6 pt-4 border-t" style="border-color: var(--ds-border);">
+    <Button
+      variant="default"
+      icon={Tag}
+      onclick={handleManageCategories}
+      class="w-full justify-center"
+    >
+      {t('collections.manageCategories')}
+    </Button>
+  </div>
+{/snippet}
 
+<NavigationSidebar title={t('collections.title')} description={t('collections.subtitle')} footer={sidebarFooter}>
   <nav class="flex-1 space-y-1">
     <!-- All Global Collections -->
     <a
@@ -78,15 +89,4 @@
     </a>
   </nav>
 
-  <!-- Footer - Manage Categories -->
-  <div class="pt-4 border-t" style="border-color: var(--ds-border);">
-    <Button
-      variant="default"
-      icon={Tag}
-      onclick={handleManageCategories}
-      class="w-full justify-center"
-    >
-      {t('collections.manageCategories')}
-    </Button>
-  </div>
-</div>
+</NavigationSidebar>
diff --git a/frontend/src/lib/features/iterations/IterationNavigation.svelte b/frontend/src/lib/features/iterations/IterationNavigation.svelte
index 5bf0bcafa..cf8ba153e 100644
--- a/frontend/src/lib/features/iterations/IterationNavigation.svelte
+++ b/frontend/src/lib/features/iterations/IterationNavigation.svelte
@@ -4,7 +4,7 @@
   import { api } from '../../api.js';
   import { getHexFromColorName } from '../../utils/colors.js';
   import { t } from '../../stores/i18n.svelte.js';
-  import SidebarHeader from '../../layout/SidebarHeader.svelte';
+  import NavigationSidebar from '../../layout/NavigationSidebar.svelte';
 
   let iterationTypes = $state([]);
 
@@ -32,10 +32,7 @@
 </script>
 
 <!-- Iteration Navigation Sidebar -->
-<div class="w-64 border-r flex flex-col p-6" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-  <!-- Header -->
-  <SidebarHeader title={t('iterations.title')} description={t('iterations.subtitle')} noBorder />
-
+<NavigationSidebar title={t('iterations.title')} description={t('iterations.subtitle')}>
   <!-- Navigation -->
   <nav class="flex-1 space-y-1">
     <!-- All Types -->
@@ -70,4 +67,4 @@
     {/each}
   </nav>
 
-</div>
+</NavigationSidebar>
diff --git a/frontend/src/lib/features/iterations/Iterations.svelte b/frontend/src/lib/features/iterations/Iterations.svelte
index f6bb457f1..5383074c7 100644
--- a/frontend/src/lib/features/iterations/Iterations.svelte
+++ b/frontend/src/lib/features/iterations/Iterations.svelte
@@ -269,14 +269,14 @@
 </script>
 
 <!-- Main container with conditional two-panel layout for global view -->
-<div class="flex min-h-screen" style="background-color: var(--ds-surface);">
+<div class="flex h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
   <!-- Left Sidebar - Navigation (only in global view) -->
   {#if isGlobalView}
     <IterationNavigation />
   {/if}
 
   <!-- Main Content -->
-  <div class="flex-1">
+  <div class="flex-1 min-h-0 overflow-y-auto">
     <div class="p-6">
       <!-- Header -->
       <PageHeader
diff --git a/frontend/src/lib/features/logbook/BucketNavigation.svelte b/frontend/src/lib/features/logbook/BucketNavigation.svelte
index c23b626e5..f7ccb46fd 100644
--- a/frontend/src/lib/features/logbook/BucketNavigation.svelte
+++ b/frontend/src/lib/features/logbook/BucketNavigation.svelte
@@ -13,7 +13,7 @@
   import Input from '../../components/Input.svelte';
   import Textarea from '../../components/Textarea.svelte';
   import { IconPlus as Plus, IconFolderOpen as FolderOpen } from '@tabler/icons-svelte-runes';
-  import SidebarHeader from '../../layout/SidebarHeader.svelte';
+  import NavigationSidebar from '../../layout/NavigationSidebar.svelte';
 
   let { activeBucketId = null } = $props();
 
@@ -44,11 +44,25 @@
   let isAllActive = $derived(activeBucketId === null);
 </script>
 
-<!-- Bucket Navigation Sidebar -->
-<div class="w-64 border-r flex flex-col p-6 flex-shrink-0" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-  <!-- Header -->
-  <SidebarHeader title={t('logbook.title')} description={t('logbook.subtitle')} noBorder />
+{#snippet sidebarFooter()}
+  {#if $permissionStore.isSystemAdmin}
+    <div class="px-6 pb-6 pt-4 border-t" style="border-color: var(--ds-border);">
+      <!-- shortcut-guard-exempt: contextual sidebar action; the modal owns its submit behavior -->
+      <Button
+        dataTestid="logbook-create-bucket"
+        variant="default"
+        icon={Plus}
+        onclick={() => showCreateForm = true}
+        class="w-full justify-center"
+      >
+        {t('logbook.createBucket')}
+      </Button>
+    </div>
+  {/if}
+{/snippet}
 
+<!-- Bucket Navigation Sidebar -->
+<NavigationSidebar title={t('logbook.title')} description={t('logbook.subtitle')} footer={sidebarFooter}>
   <!-- Navigation -->
   <nav class="flex-1 space-y-1">
     <!-- All Documents -->
@@ -84,22 +98,7 @@
     {/each}
   </nav>
 
-  <!-- Footer - Create Bucket (admin only) -->
-  {#if $permissionStore.isSystemAdmin}
-    <div class="pt-4 border-t" style="border-color: var(--ds-border);">
-      <!-- shortcut-guard-exempt: contextual sidebar action; the modal owns its submit behavior -->
-      <Button
-        dataTestid="logbook-create-bucket"
-        variant="default"
-        icon={Plus}
-        onclick={() => showCreateForm = true}
-        class="w-full justify-center"
-      >
-        {t('logbook.createBucket')}
-      </Button>
-    </div>
-  {/if}
-</div>
+</NavigationSidebar>
 
 <!-- Create Bucket Modal -->
 <Modal
diff --git a/frontend/src/lib/features/logbook/Logbook.svelte b/frontend/src/lib/features/logbook/Logbook.svelte
index 57b1c0b28..3ee1ccdeb 100644
--- a/frontend/src/lib/features/logbook/Logbook.svelte
+++ b/frontend/src/lib/features/logbook/Logbook.svelte
@@ -38,12 +38,12 @@
 </script>
 
 <!-- Main container with two-panel layout -->
-<div class="flex min-h-screen" style="background-color: var(--ds-surface);">
+<div class="flex h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
   <!-- Left Sidebar - Bucket Navigation -->
   <BucketNavigation {activeBucketId} />
 
   <!-- Main Content -->
-  <div class="flex-1 flex flex-col">
+  <div class="flex-1 min-h-0 overflow-y-auto flex flex-col">
     {#if logbookStore.bucketsLoading && !logbookStore.bucketsLoaded}
       <div class="flex items-center justify-center h-64">
         <Spinner />
diff --git a/frontend/src/lib/features/milestones/MilestoneNavigation.svelte b/frontend/src/lib/features/milestones/MilestoneNavigation.svelte
index af62814e3..464ce9f78 100644
--- a/frontend/src/lib/features/milestones/MilestoneNavigation.svelte
+++ b/frontend/src/lib/features/milestones/MilestoneNavigation.svelte
@@ -7,7 +7,7 @@
   import Button from '../../components/Button.svelte';
   import { getHexFromColorName } from '../../utils/colors.js';
   import { t } from '../../stores/i18n.svelte.js';
-  import SidebarHeader from '../../layout/SidebarHeader.svelte';
+  import NavigationSidebar from '../../layout/NavigationSidebar.svelte';
   
   // Get active category from URL params
   let activeCategoryId = $derived($currentRoute.params?.categoryId || null);
@@ -33,11 +33,23 @@
   );
 </script>
 
+{#snippet sidebarFooter()}
+  {#if canManageCategories}
+    <div class="px-6 pb-6 pt-4 border-t" style="border-color: var(--ds-border);">
+      <Button
+        variant="default"
+        icon={Tag}
+        onclick={handleManageCategories}
+        class="w-full justify-center"
+      >
+        {t('milestones.manageCategories')}
+      </Button>
+    </div>
+  {/if}
+{/snippet}
+
 <!-- Milestone Navigation Sidebar -->
-<div class="w-64 border-r flex flex-col p-6" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-  <!-- Header -->
-  <SidebarHeader title={t('milestones.title')} description={t('milestones.subtitle')} noBorder />
-  
+<NavigationSidebar title={t('milestones.title')} description={t('milestones.subtitle')} footer={sidebarFooter}>
   <!-- Navigation -->
   <nav class="flex-1 space-y-1">
     <!-- All Categories -->
@@ -72,17 +84,4 @@
     {/each}
   </nav>
   
-  <!-- Footer - Manage Categories -->
-  {#if canManageCategories}
-    <div class="pt-4 border-t" style="border-color: var(--ds-border);">
-      <Button
-        variant="default"
-        icon={Tag}
-        onclick={handleManageCategories}
-        class="w-full justify-center"
-      >
-        {t('milestones.manageCategories')}
-      </Button>
-    </div>
-  {/if}
-</div>
+</NavigationSidebar>
diff --git a/frontend/src/lib/features/milestones/Milestones.svelte b/frontend/src/lib/features/milestones/Milestones.svelte
index 3310db424..e6bd79ba3 100644
--- a/frontend/src/lib/features/milestones/Milestones.svelte
+++ b/frontend/src/lib/features/milestones/Milestones.svelte
@@ -519,14 +519,14 @@
 </script>
 
 <!-- Main container with two-panel layout -->
-<div class="flex min-h-screen" style="background-color: var(--ds-surface);">
+<div class="flex h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
   <!-- Left Sidebar - Navigation (only in global view) -->
   {#if isGlobalView}
     <MilestoneNavigation />
   {/if}
 
   <!-- Main Content -->
-  <div class="flex-1">
+  <div class="flex-1 min-h-0 overflow-y-auto">
     <div class="p-6">
       <!-- Header -->
       <PageHeader
diff --git a/frontend/src/lib/features/pages/PagesNavSidebar.svelte b/frontend/src/lib/features/pages/PagesNavSidebar.svelte
index 8f89256f5..772707984 100644
--- a/frontend/src/lib/features/pages/PagesNavSidebar.svelte
+++ b/frontend/src/lib/features/pages/PagesNavSidebar.svelte
@@ -21,6 +21,7 @@
     IconArchive as Archive
   } from '@tabler/icons-svelte-runes';
   import DropdownMenu from '../../layout/DropdownMenu.svelte';
+  import ScrollableSidebar from '../../layout/ScrollableSidebar.svelte';
   import EmptyState from '../../components/EmptyState.svelte';
   import Tooltip from '../../components/Tooltip.svelte';
   import Input from '../../components/Input.svelte';
@@ -638,7 +639,7 @@
   }
 </script>
 
-<aside class="pages-sidebar" class:pages-sidebar--embedded={embedded} data-testid="pages-nav-sidebar">
+{#snippet sidebarHeader()}
   <header class="header">
     <div class="title-row">
       <h2>{t('pages.treeHeading')}</h2>
@@ -778,7 +779,16 @@
       </button>
     {/if}
   </div>
-
+{/snippet}
+
+<ScrollableSidebar
+  as="aside"
+  class="pages-sidebar {embedded ? 'pages-sidebar--embedded' : ''}"
+  data-testid="pages-nav-sidebar"
+  aria-label={t('pages.treeHeading')}
+  header={sidebarHeader}
+  scrollTestid="pages-navigation-scroll"
+>
   {#if loading}
     <p class="status">{t('pages.treeLoading')}</p>
   {:else if pages.length === 0}
@@ -870,7 +880,7 @@
       {/each}
     </ul>
   {/if}
-</aside>
+</ScrollableSidebar>
 
 {#if moveDialogPage}
   <PageMoveDialog
@@ -891,16 +901,13 @@
 {/if}
 
 <style>
-  .pages-sidebar {
-    display: flex;
-    flex-direction: column;
+  :global(.pages-sidebar) {
     height: 100%;
     background: var(--ds-surface);
     border-right: 1px solid var(--ds-border);
-    overflow-y: auto;
   }
 
-  .pages-sidebar--embedded {
+  :global(.pages-sidebar--embedded) {
     height: 100%;
     min-height: 0;
     flex: 1;
diff --git a/frontend/src/lib/features/time/Time.svelte b/frontend/src/lib/features/time/Time.svelte
index 04bc25cac..6b5ff7a31 100644
--- a/frontend/src/lib/features/time/Time.svelte
+++ b/frontend/src/lib/features/time/Time.svelte
@@ -8,7 +8,7 @@
   import { currentRoute, navigate } from '../../router.js';
   import { t } from '../../stores/i18n.svelte.js';
   import { permissionStore, isSystemAdmin } from '../../stores';
-  import SidebarHeader from '../../layout/SidebarHeader.svelte';
+  import NavigationSidebar from '../../layout/NavigationSidebar.svelte';
 
   let activeTab = $state('time-entry');
 
@@ -51,35 +51,30 @@
 </script>
 
 <!-- Main container with sidebar layout -->
-<div class="flex min-h-screen" style="background-color: var(--ds-surface);">
+<div class="flex h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
   <!-- Left Sidebar -->
-  <div class="w-64 border-r flex-shrink-0" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-    <div class="p-6">
-      <SidebarHeader title={t('time.title')} description={t('time.subtitle')} noBorder />
-      
-      <!-- Navigation -->
-      <nav class="space-y-1">
-        {#each tabs as tab}
-          {@const isTabActive = activeTab === tab.id}
-          {@const TabIcon = tab.icon}
-          <button
-            onclick={() => handleTabClick(tab)}
-            class="w-full group flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer"
-            style={isTabActive ? 'background: var(--ds-surface-selected); color: var(--ds-text);' : 'color: var(--ds-text-subtle);'}
-            onmouseenter={(e) => { if (!isTabActive) e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'; }}
-            onmouseleave={(e) => { if (!isTabActive) e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'; }}
-          >
-            <TabIcon class="flex-shrink-0 -ml-1 mr-3 w-5 h-5" />
-            {tab.label}
-          </button>
-        {/each}
-      </nav>
-    </div>
-  </div>
+  <NavigationSidebar title={t('time.title')} description={t('time.subtitle')}>
+    <nav class="space-y-1">
+      {#each tabs as tab (tab.id)}
+        {@const isTabActive = activeTab === tab.id}
+        {@const TabIcon = tab.icon}
+        <button
+          onclick={() => handleTabClick(tab)}
+          class="w-full group flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer"
+          style={isTabActive ? 'background: var(--ds-surface-selected); color: var(--ds-text);' : 'color: var(--ds-text-subtle);'}
+          onmouseenter={(e) => { if (!isTabActive) e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'; }}
+          onmouseleave={(e) => { if (!isTabActive) e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'; }}
+        >
+          <TabIcon class="flex-shrink-0 -ml-1 mr-3 w-5 h-5" />
+          {tab.label}
+        </button>
+      {/each}
+    </nav>
+  </NavigationSidebar>
 
   <!-- Main Content -->
-  <div class="flex-1">
-    {#each tabs as tab}
+  <div class="flex-1 min-h-0 overflow-y-auto">
+    {#each tabs as tab (tab.id)}
       {#if activeTab === tab.id}
         {@const TabComponent = tab.component}
         <div class="p-6">
@@ -88,4 +83,4 @@
       {/if}
     {/each}
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/lib/layout/NavigationSidebar.svelte b/frontend/src/lib/layout/NavigationSidebar.svelte
new file mode 100644
index 000000000..1fff75811
--- /dev/null
+++ b/frontend/src/lib/layout/NavigationSidebar.svelte
@@ -0,0 +1,34 @@
+<script>
+  import SidebarHeader from './SidebarHeader.svelte';
+  import ScrollableSidebar from './ScrollableSidebar.svelte';
+
+  let {
+    title,
+    description = '',
+    header = undefined,
+    children,
+    footer = undefined,
+    class: className = '',
+    contentClass = 'px-6 pb-6',
+    ariaLabel = undefined,
+    ...restProps
+  } = $props();
+</script>
+
+{#snippet defaultHeader()}
+  <div class="px-6 pt-6 pb-3">
+    <SidebarHeader {title} {description} noBorder />
+  </div>
+{/snippet}
+
+<ScrollableSidebar
+  {...restProps}
+  class="navigation-sidebar h-full min-h-0 w-64 min-w-64 flex-shrink-0 border-r {className}"
+  style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);"
+  aria-label={ariaLabel || title}
+  header={header || defaultHeader}
+  {footer}
+  scrollClass={contentClass}
+>
+  {@render children?.()}
+</ScrollableSidebar>
diff --git a/frontend/src/lib/layout/ScrollableSidebar.svelte b/frontend/src/lib/layout/ScrollableSidebar.svelte
new file mode 100644
index 000000000..b183a329d
--- /dev/null
+++ b/frontend/src/lib/layout/ScrollableSidebar.svelte
@@ -0,0 +1,94 @@
+<script>
+  let {
+    as = 'aside',
+    class: className = '',
+    header = undefined,
+    children,
+    footer = undefined,
+    scrollClass = '',
+    scrollTestid = undefined,
+    reserveScrollbarSpace = true,
+    scrollContent = true,
+    ...restProps
+  } = $props();
+</script>
+
+<svelte:element this={as} {...restProps} class={['scrollable-sidebar', className]}>
+  {#if header}
+    <div class="scrollable-sidebar-header">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div
+    class={[
+      'scrollable-sidebar-content',
+      { 'scrollable-sidebar-content-static': !scrollContent },
+      { 'scrollable-sidebar-content-stable-gutter': reserveScrollbarSpace },
+      scrollClass,
+    ]}
+    data-testid={scrollTestid}
+  >
+    {@render children?.()}
+  </div>
+
+  {#if footer}
+    <div class="scrollable-sidebar-footer">
+      {@render footer()}
+    </div>
+  {/if}
+</svelte:element>
+
+<style>
+  .scrollable-sidebar {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    max-height: 100%;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .scrollable-sidebar-header,
+  .scrollable-sidebar-footer {
+    flex: 0 0 auto;
+  }
+
+  .scrollable-sidebar-content {
+    min-height: 0;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    scrollbar-color: var(--ds-border) transparent;
+    scrollbar-width: thin;
+  }
+
+  .scrollable-sidebar-content-stable-gutter {
+    scrollbar-gutter: stable;
+  }
+
+  .scrollable-sidebar-content-static {
+    overflow: hidden;
+    scrollbar-gutter: auto;
+  }
+
+  .scrollable-sidebar-content::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scrollable-sidebar-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollable-sidebar-content::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background: var(--ds-border);
+    background-clip: content-box;
+  }
+
+  .scrollable-sidebar-content::-webkit-scrollbar-thumb:hover {
+    background-color: var(--ds-text-subtlest);
+  }
+</style>
diff --git a/frontend/src/lib/pages/Admin.svelte b/frontend/src/lib/pages/Admin.svelte
index cd02e5382..65ab7289b 100644
--- a/frontend/src/lib/pages/Admin.svelte
+++ b/frontend/src/lib/pages/Admin.svelte
@@ -46,6 +46,7 @@
   import PluginModalContainer from '../layout/PluginModalContainer.svelte';
   import LinkComponent from '../components/Link.svelte';
   import SidebarHeader from '../layout/SidebarHeader.svelte';
+  import ScrollableSidebar from '../layout/ScrollableSidebar.svelte';
   import { IconFileText, IconMenu2, IconPuzzle, IconSearch, IconX } from '@tabler/icons-svelte-runes';
   import { useEventListener } from 'runed';
   import PermissionGuard from '../layout/PermissionGuard.svelte';
@@ -298,8 +299,58 @@
   }
 </script>
 
+{#snippet adminSidebarHeader()}
+  <div class="p-6 pb-3">
+    <div class="admin-sidebar-heading">
+      <div class="admin-sidebar-title">
+        <SidebarHeader title={t('settings.admin')} description={t('settings.systemSettings')} noBorder />
+      </div>
+      <button
+        type="button"
+        class="admin-navigation-close"
+        data-testid="admin-navigation-close"
+        aria-label="Close admin navigation"
+        onclick={() => closeAdminNavigation(true)}
+      >
+        <IconX size={20} stroke={1.5} aria-hidden="true" />
+      </button>
+    </div>
+
+    <!-- Search stays available while the navigation list scrolls. -->
+    <div class="relative">
+      <label for="admin-search" class="sr-only">Search admin settings</label>
+      <div class="relative">
+        <IconSearch size={16} stroke={1.5} class="absolute left-3 top-1/2 transform -translate-y-1/2" style="color: var(--ds-icon-subtle);" aria-hidden="true" />
+        <Input
+          id="admin-search"
+          bind:this={searchInput}
+          bind:value={searchQuery}
+          onkeydown={handleSearchKeydown}
+          type="search"
+          placeholder={t('common.search')}
+          class="pl-10 pr-8"
+          ariaDescribedby={searchQuery && filteredGroups.length === 0 ? 'search-no-results' : undefined}
+          size="small"
+        />
+        {#if searchQuery}
+          <button
+            onclick={clearSearch}
+            class="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 transition-colors"
+            style="color: var(--ds-icon-subtle);"
+            onmouseenter={(e) => e.currentTarget.style.color = 'var(--ds-icon)'}
+            onmouseleave={(e) => e.currentTarget.style.color = 'var(--ds-icon-subtle)'}
+            aria-label={t('search.clearSearch')}
+          >
+            <IconX size={12} stroke={1.5} aria-hidden="true" />
+          </button>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/snippet}
+
 <!-- Main container with sidebar layout -->
-<div class="admin-shell flex min-h-screen min-w-0" style="background-color: var(--ds-surface);">
+<div class="admin-shell flex h-full min-h-0 min-w-0 overflow-hidden" style="background-color: var(--ds-surface);">
   <!-- Channel managers can use channel routes without seeing the rest of the
        system-administration navigation. Non-channel admin routes remain
        guarded in MainApp. -->
@@ -313,63 +364,19 @@
         onclick={() => closeAdminNavigation(true)}
       ></button>
     {/if}
-    <aside
+    <ScrollableSidebar
+      as="aside"
       id="admin-navigation"
-      class:admin-navigation-open={adminNavigationOpen}
-      class="admin-sidebar w-64 border-r flex-shrink-0"
+      class="admin-sidebar w-64 border-r flex-shrink-0 {adminNavigationOpen ? 'admin-navigation-open' : ''}"
       style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);"
       aria-label="Admin settings"
+      header={adminSidebarHeader}
+      scrollClass="px-6"
+      scrollTestid="admin-navigation-scroll"
     >
-    <div class="p-6">
-      <div class="admin-sidebar-heading">
-        <div class="admin-sidebar-title">
-          <SidebarHeader title={t('settings.admin')} description={t('settings.systemSettings')} noBorder />
-        </div>
-        <button
-          type="button"
-          class="admin-navigation-close"
-          data-testid="admin-navigation-close"
-          aria-label="Close admin navigation"
-          onclick={() => closeAdminNavigation(true)}
-        >
-          <IconX size={20} stroke={1.5} aria-hidden="true" />
-        </button>
-      </div>
-      
-      <!-- Search -->
-      <div class="mb-4 relative">
-        <label for="admin-search" class="sr-only">Search admin settings</label>
-        <div class="relative">
-          <IconSearch size={16} stroke={1.5} class="absolute left-3 top-1/2 transform -translate-y-1/2" style="color: var(--ds-icon-subtle);" aria-hidden="true" />
-          <Input
-            id="admin-search"
-            bind:this={searchInput}
-            bind:value={searchQuery}
-            onkeydown={handleSearchKeydown}
-            type="search"
-            placeholder={t('common.search')}
-            class="pl-10 pr-8"
-            ariaDescribedby={searchQuery && filteredGroups.length === 0 ? 'search-no-results' : undefined}
-            size="small"
-          />
-          {#if searchQuery}
-            <button
-              onclick={clearSearch}
-              class="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 transition-colors"
-              style="color: var(--ds-icon-subtle);"
-              onmouseenter={(e) => e.currentTarget.style.color = 'var(--ds-icon)'}
-              onmouseleave={(e) => e.currentTarget.style.color = 'var(--ds-icon-subtle)'}
-              aria-label={t('search.clearSearch')}
-            >
-              <IconX size={12} stroke={1.5} aria-hidden="true" />
-            </button>
-          {/if}
-        </div>
-      </div>
-
       <!-- Navigation -->
       <nav class="space-y-6 pb-6" aria-label="Admin settings">
-        {#each filteredGroups as group}
+        {#each filteredGroups as group (group.id)}
           <div role="group" aria-labelledby="group-{group.id}">
             <!-- Group Header -->
             <div class="px-2 pt-3 pb-1 mb-1">
@@ -380,7 +387,7 @@
 
             <!-- Group Items -->
             <div class="space-y-1">
-              {#each group.items as item}
+              {#each group.items as item (item.id)}
                 {@const buttonIndex = buttonIndices.get(item.id)}
                 {@const isItemActive = activeTab === item.id}
                 <LinkComponent
@@ -429,8 +436,7 @@
           {/if}
         </div>
       </nav>
-    </div>
-    </aside>
+    </ScrollableSidebar>
   {/if}
 
   <!-- Main Content -->
@@ -623,7 +629,7 @@
   {/if}
 
   <!-- Plugin Components -->
-  {#each allAdminItems.filter(item => item.isPlugin) as pluginItem}
+  {#each allAdminItems.filter(item => item.isPlugin) as pluginItem (pluginItem.id)}
     {#if activeTab === pluginItem.id}
       {@const pluginName = pluginItem.pluginData?.pluginName || 'unknown'}
       {@const iframeSrc = `/api/plugins/${pluginName}/assets/${pluginItem.pluginData?.component || 'index.html'}`}
@@ -659,7 +665,7 @@
   }
 
   @media (max-width: 1100px) {
-    .admin-sidebar {
+    :global(.admin-sidebar) {
       position: absolute;
       z-index: 30;
       inset: 0 auto 0 0;
@@ -673,7 +679,7 @@
       box-shadow: var(--ds-shadow-overlay, 0 8px 24px rgb(9 30 66 / 25%));
     }
 
-    .admin-sidebar.admin-navigation-open {
+    :global(.admin-sidebar.admin-navigation-open) {
       visibility: visible;
       transform: translateX(0);
     }
@@ -761,7 +767,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .admin-sidebar {
+    :global(.admin-sidebar) {
       transition: none;
     }
   }
diff --git a/frontend/src/lib/pages/ApiDocs.svelte b/frontend/src/lib/pages/ApiDocs.svelte
index 28202f2ea..7137580f5 100644
--- a/frontend/src/lib/pages/ApiDocs.svelte
+++ b/frontend/src/lib/pages/ApiDocs.svelte
@@ -71,7 +71,7 @@
 <style>
   .api-docs {
     display: flex;
-    height: calc(100vh - var(--ds-app-header-height, 0px));
+    height: 100%;
     min-height: 0;
     width: 100%;
     background: var(--ds-surface);
diff --git a/frontend/src/lib/pages/MainRouteContent.svelte b/frontend/src/lib/pages/MainRouteContent.svelte
index bcedb4cc2..61e0f965d 100644
--- a/frontend/src/lib/pages/MainRouteContent.svelte
+++ b/frontend/src/lib/pages/MainRouteContent.svelte
@@ -102,7 +102,7 @@
 {:else if view === 'collections-edit'}
   <Collections collectionId={route.params.id} />
 {:else if view === 'channels'}
-  <div style="background-color: var(--ds-surface);">
+  <div class="h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
     <Channels />
   </div>
 {:else if view === 'hub' || view === 'hub-inbox'}
@@ -146,28 +146,25 @@
     <NotFound />
   </div>
 {:else if view === 'admin'}
-  {#if route.path.startsWith('/admin/channels')}
+  <!-- Keep one guard/component tree for every admin route. Switching between
+       Channels and another admin tab must not remount Admin and reset its
+       independently scrollable navigation. -->
+  <PermissionGuard requireSystemAdmin={!route.path.startsWith('/admin/channels')}>
     {@render lazyLoadedComponent(view, routeProps)}
-  {:else}
-    <PermissionGuard requireSystemAdmin={true}>
-      {#snippet children()}
-        {@render lazyLoadedComponent(view, routeProps)}
-      {/snippet}
-      {#snippet fallback(requiredPermissionDisplay)}
-        <UnauthorizedAccess
-          message="You need system administrator privileges to access the administration panel."
-          requiredPermission={requiredPermissionDisplay}
-        />
-      {/snippet}
-    </PermissionGuard>
-  {/if}
+    {#snippet fallback(requiredPermissionDisplay)}
+      <UnauthorizedAccess
+        message="You need system administrator privileges to access the administration panel."
+        requiredPermission={requiredPermissionDisplay}
+      />
+    {/snippet}
+  </PermissionGuard>
 {:else if view === 'workspace-actions'}
   <div class="h-full" style="background-color: var(--ds-surface); height: calc(100vh - 56px);">
     {@render lazyLoadedComponent(view, routeProps)}
   </div>
 {:else if routeEntry.config}
   {#if wrapper === 'surface-full'}
-    <div style="background-color: var(--ds-surface);">
+    <div class="h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
       {@render lazyLoadedComponent(view, routeProps)}
     </div>
   {:else if wrapper === 'surface-padded'}
diff --git a/frontend/src/lib/workspaces/CustomerOrganisationNavigation.svelte b/frontend/src/lib/workspaces/CustomerOrganisationNavigation.svelte
index c46246054..519d30ecb 100644
--- a/frontend/src/lib/workspaces/CustomerOrganisationNavigation.svelte
+++ b/frontend/src/lib/workspaces/CustomerOrganisationNavigation.svelte
@@ -5,6 +5,7 @@
   import Avatar from '../components/Avatar.svelte';
   import { t } from '../stores/i18n.svelte.js';
   import SidebarHeader from '../layout/SidebarHeader.svelte';
+  import NavigationSidebar from '../layout/NavigationSidebar.svelte';
 
   let {
     organisations = [],
@@ -34,24 +35,40 @@
   }
 </script>
 
-<div class="w-64 min-w-64 flex-shrink-0 border-r flex flex-col p-6" style="border-color: var(--ds-border); background-color: var(--ds-surface-raised);">
-  <!-- Header -->
-  <SidebarHeader title={t('workspaces.customers.title')} description={t('workspaces.customers.subtitle')} noBorder />
+{#snippet sidebarHeader()}
+  <div class="px-6 pt-6 pb-3">
+    <SidebarHeader title={t('workspaces.customers.title')} description={t('workspaces.customers.subtitle')} noBorder />
 
-  <!-- Search -->
-  <div class="relative mb-4">
-    <Search class="w-4 h-4 absolute left-2.5 top-1/2 -translate-y-1/2" style="color: var(--ds-icon-subtle);" />
-    <Input
-      type="text"
-      bind:value={searchQuery}
-      placeholder={t('workspaces.customers.searchOrganisations')}
-      class="pl-9"
-      size="small"
-    />
+    <!-- Search remains available while the organisation list scrolls. -->
+    <div class="relative">
+      <Search class="w-4 h-4 absolute left-2.5 top-1/2 -translate-y-1/2" style="color: var(--ds-icon-subtle);" />
+      <Input
+        type="text"
+        bind:value={searchQuery}
+        placeholder={t('workspaces.customers.searchOrganisations')}
+        class="pl-9"
+        size="small"
+      />
+    </div>
   </div>
+{/snippet}
 
+{#snippet sidebarFooter()}
+  <div class="px-6 pb-6 pt-4 border-t" style="border-color: var(--ds-border);">
+    <Button variant="default" icon={Plus} onclick={onManageOrgs} class="w-full justify-center">
+      {t('workspaces.customers.manageOrganisations')}
+    </Button>
+  </div>
+{/snippet}
+
+<NavigationSidebar
+  title={t('workspaces.customers.title')}
+  header={sidebarHeader}
+  footer={sidebarFooter}
+  contentClass="px-6 pb-6"
+>
   <!-- Navigation -->
-  <nav class="flex-1 overflow-y-auto space-y-1 -mx-1 px-1 -mt-1 pt-1">
+  <nav class="space-y-1 -mx-1 px-1 -mt-1 pt-1">
     <!-- Unassigned -->
     <button
       data-org-id="null"
@@ -107,10 +124,4 @@
     {/if}
   </nav>
 
-  <!-- Footer -->
-  <div class="pt-4 border-t" style="border-color: var(--ds-border);">
-    <Button variant="default" icon={Plus} onclick={onManageOrgs} class="w-full justify-center">
-      {t('workspaces.customers.manageOrganisations')}
-    </Button>
-  </div>
-</div>
+</NavigationSidebar>
diff --git a/frontend/src/lib/workspaces/Customers.svelte b/frontend/src/lib/workspaces/Customers.svelte
index 3b8b29377..39da9c7cf 100644
--- a/frontend/src/lib/workspaces/Customers.svelte
+++ b/frontend/src/lib/workspaces/Customers.svelte
@@ -343,7 +343,7 @@
 </script>
 
 <div
-  class="flex min-h-screen"
+  class="flex h-full min-h-0 overflow-hidden"
   style="background-color: var(--ds-surface);"
   data-testid="portal-customers-page"
   data-ready={!loading && !error}
@@ -362,7 +362,7 @@
   />
 
   <!-- Main Content -->
-  <div class="flex-1 min-w-0 p-6">
+  <div class="flex-1 min-w-0 min-h-0 overflow-y-auto p-6">
     {#if loading}
       <div class="flex items-center justify-center h-64">
         <Spinner />
@@ -453,7 +453,7 @@
         <div class="col-span-full pt-4 border-t" style="border-color: var(--ds-border);">
           <h3 class="text-sm font-medium mb-3" style="color: var(--ds-text);">{t('workspaces.customers.customFields')}</h3>
           <div class="space-y-4">
-            {#each portalCustomerFields as field}
+            {#each portalCustomerFields as field (field.id ?? field.name)}
               <CustomFieldRenderer
                 {field}
                 bind:value={formData.custom_field_values[field.name]}
diff --git a/frontend/src/lib/workspaces/WorkspaceAdminNav.svelte b/frontend/src/lib/workspaces/WorkspaceAdminNav.svelte
index 13fd0df2d..8e48ea7df 100644
--- a/frontend/src/lib/workspaces/WorkspaceAdminNav.svelte
+++ b/frontend/src/lib/workspaces/WorkspaceAdminNav.svelte
@@ -11,7 +11,7 @@
 </script>
 
 {#if canAdmin}
-  <nav class="flex-1 px-4 pt-2 space-y-1 overflow-y-auto" data-testid="workspace-admin-nav" aria-label={t('workspaceSettings.title')}>
+  <nav class="px-4 pt-2 pb-2 space-y-1" data-testid="workspace-admin-nav" aria-label={t('workspaceSettings.title')}>
     {#each workspaceSettingsItems as item (item.id)}
       {@const ItemIcon = item.icon}
       {@const active = $currentRoute.view === item.view}
diff --git a/frontend/src/lib/workspaces/WorkspaceNavigation.svelte b/frontend/src/lib/workspaces/WorkspaceNavigation.svelte
index 5f08c9fd6..5836df905 100644
--- a/frontend/src/lib/workspaces/WorkspaceNavigation.svelte
+++ b/frontend/src/lib/workspaces/WorkspaceNavigation.svelte
@@ -23,6 +23,7 @@
   import { moduleSettings } from '../stores/moduleSettings.js';
   import { api } from '../api.js';
   import DropdownMenu from '../layout/DropdownMenu.svelte';
+  import ScrollableSidebar from '../layout/ScrollableSidebar.svelte';
   import Tooltip from '../components/Tooltip.svelte';
   import PagesNavSidebar from '../features/pages/PagesNavSidebar.svelte';
   import WorkspaceAdminNav from './WorkspaceAdminNav.svelte';
@@ -511,135 +512,173 @@
   <div class="w-8 border-t my-1" style="border-color: var(--ds-border);"></div>
 {/snippet}
 
-{#if isCollapsed}
-  <!-- Collapsed icon-only sidebar -->
-  <div class="relative h-full flex-shrink-0 border-r flex flex-col items-center py-4 {sidebarBgClass}" style="width: {COLLAPSED_WIDTH}px; {sidebarBgStyle}">
-    <div class="h-10 mb-2 w-full flex items-center justify-center">
-      {@render workspaceAvatar(true)}
+{#snippet regularSidebarHeader()}
+  {@render workspaceHeader()}
+
+  <!-- Keep workspace context visible while its navigation scrolls. -->
+  <div class="px-4 pt-2 mb-6">
+    <Tooltip content={t('collections.collection')} placement="right">
+      <DropdownMenu
+        triggerText={collectionDisplayName}
+        items={collectionDropdownItems}
+        maxWidth="max-w-full"
+        showChevron={true}
+        placement="bottom-start"
+        triggerClass="w-full text-left font-medium rounded !px-3 !py-2.5 !text-sm transition-colors"
+        triggerStyle="background-color: var(--ds-surface); border: 1px solid var(--ds-border); color: var(--ds-text);"
+        triggerAlignment="between"
+      />
+    </Tooltip>
+  </div>
+{/snippet}
+
+{#snippet sidebarResizeHandle()}
+  {@render resizeHandle()}
+{/snippet}
+
+{#snippet drilldownSidebarHeader()}
+  {@render workspaceHeader({ backLink: true })}
+{/snippet}
+
+{#snippet collapsedSidebarHeader()}
+  <div class="h-10 mb-2 w-full flex items-center justify-center">
+    {@render workspaceAvatar(true)}
+  </div>
+{/snippet}
+
+{#snippet collapsedSidebarContent()}
+  {#if isSettingsView}
+    <!-- Collapsed admin rail: back arrow + a module icon per settings page. -->
+    <div class="flex flex-col items-center space-y-1 mt-6">
+      {@render collapsedNavIcon({ href: `/workspaces/${workspaceId}`, label: t('workspaceSettings.backToWorkspace'), icon: ArrowLeft, isActive: false })}
+      {@render sectionDivider()}
+      {#each workspaceSettingsItems as item (item.id)}
+        {@render collapsedNavIcon({ href: workspaceSettingsRoute(workspaceId, item.id), label: t(item.labelKey), icon: item.icon, isActive: $currentRoute.view === item.view })}
+      {/each}
     </div>
+  {:else if $currentWorkspace?.is_personal}
+    <div class="flex flex-col items-center space-y-1 mt-6">
+      {#each PERSONAL_NAV_ITEMS as item (item.route)}
+        {@render collapsedNavIcon({ href: item.route, label: t(item.labelKey), icon: item.icon, isActive: $currentRoute.view === item.view })}
+      {/each}
+    </div>
+  {:else}
+    <div class="flex flex-col items-center space-y-1 mt-6">
+      {@render collapsedNavIcon({ href: getNavigationUrl('overview'), label: t('workspaceSettings.views.overview'), icon: Home, isActive: $currentRoute.view === 'workspace-overview' })}
+
+      {#each workspaceViewItems as view (view.id)}
+        {@render collapsedNavIcon({ href: getNavigationUrl(view.id), label: viewLabel(view), icon: view.icon, isActive: $currentRoute.view === `workspace-${view.id}` })}
+      {/each}
 
-    {#if isSettingsView}
-      <!-- Collapsed admin rail: back arrow + a module icon per settings page. -->
-      <div class="flex flex-col items-center space-y-1 mt-6">
-        {@render collapsedNavIcon({ href: `/workspaces/${workspaceId}`, label: t('workspaceSettings.backToWorkspace'), icon: ArrowLeft, isActive: false })}
+      {#if $moduleSettings.test_management_enabled && canViewTests && !currentCollectionId}
         {@render sectionDivider()}
-        {#each workspaceSettingsItems as item}
-          {@render collapsedNavIcon({ href: workspaceSettingsRoute(workspaceId, item.id), label: t(item.labelKey), icon: item.icon, isActive: $currentRoute.view === item.view })}
-        {/each}
-      </div>
-    {:else if $currentWorkspace?.is_personal}
-      <div class="flex flex-col items-center space-y-1 mt-6">
-        {#each PERSONAL_NAV_ITEMS as item}
-          {@render collapsedNavIcon({ href: item.route, label: t(item.labelKey), icon: item.icon, isActive: $currentRoute.view === item.view })}
+        {#each testNavigationItems as view (view.id)}
+          {@render collapsedNavIcon({ href: getTestNavigationUrl(view.id), label: viewLabel(view), icon: view.icon, isActive: activeTestNavId === view.id })}
         {/each}
-      </div>
-    {:else}
-      <div class="flex flex-col items-center space-y-1 mt-6">
-        {@render collapsedNavIcon({ href: getNavigationUrl('overview'), label: t('workspaceSettings.views.overview'), icon: Home, isActive: $currentRoute.view === 'workspace-overview' })}
+      {/if}
 
-        {#each workspaceViewItems as view}
-          {@render collapsedNavIcon({ href: getNavigationUrl(view.id), label: viewLabel(view), icon: view.icon, isActive: $currentRoute.view === `workspace-${view.id}` })}
-        {/each}
+      {@render sectionDivider()}
+      {#each filteredWorkspaceOnlyViews as view (view.id)}
+        {@render collapsedNavIcon({ href: getNavigationUrl(view.id), label: viewLabel(view), icon: view.icon, testId: view.testId, isActive: isWorkspaceViewActive(view) })}
+      {/each}
 
-        {#if $moduleSettings.test_management_enabled && canViewTests && !currentCollectionId}
-          {@render sectionDivider()}
-          {#each testNavigationItems as view}
-            {@render collapsedNavIcon({ href: getTestNavigationUrl(view.id), label: viewLabel(view), icon: view.icon, isActive: activeTestNavId === view.id })}
-          {/each}
-        {/if}
+      {#if canAdmin}
+        {@render collapsedNavIcon({ href: `/workspaces/${workspaceId}/settings/general`, label: t('workspaceSettings.title'), icon: Settings, isActive: isSettingsActive() })}
+      {/if}
+    </div>
+  {/if}
+{/snippet}
 
-        {@render sectionDivider()}
-        {#each filteredWorkspaceOnlyViews as view}
-          {@render collapsedNavIcon({ href: getNavigationUrl(view.id), label: viewLabel(view), icon: view.icon, testId: view.testId, isActive: isWorkspaceViewActive(view) })}
-        {/each}
+{#snippet collapsedSidebarFooter()}
+  <Tooltip content={t('collections.expandSidebar')} placement="right">
+    <button
+      type="button"
+      onclick={() => uiStore.wsSidebarCollapsed = false}
+      class="w-10 h-10 rounded flex items-center justify-center transition-colors"
+      style="color: var(--ds-text-subtle);"
+      onmouseenter={(e) => e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'}
+      onmouseleave={(e) => e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'}
+    >
+      <IconChevronRight size={20} />
+    </button>
+  </Tooltip>
 
-        {#if canAdmin}
-          {@render collapsedNavIcon({ href: `/workspaces/${workspaceId}/settings/general`, label: t('workspaceSettings.title'), icon: Settings, isActive: isSettingsActive() })}
-        {/if}
-      </div>
-    {/if}
-
-    <div class="flex-1"></div>
-
-    <Tooltip content={t('collections.expandSidebar')} placement="right">
-      <button
-        type="button"
-        onclick={() => uiStore.wsSidebarCollapsed = false}
-        class="w-10 h-10 rounded flex items-center justify-center transition-colors"
-        style="color: var(--ds-text-subtle);"
-        onmouseenter={(e) => e.currentTarget.style.cssText = 'background: var(--ds-background-neutral-hovered); color: var(--ds-text);'}
-        onmouseleave={(e) => e.currentTarget.style.cssText = 'color: var(--ds-text-subtle);'}
-      >
-        <IconChevronRight size={20} />
-      </button>
-    </Tooltip>
+  {@render resizeHandle()}
+{/snippet}
 
-    {@render resizeHandle()}
-  </div>
+{#if isCollapsed}
+  <!-- Collapsed icon-only sidebar -->
+  <ScrollableSidebar
+    class="relative h-full flex-shrink-0 border-r items-center py-4 {sidebarBgClass}"
+    style="width: {COLLAPSED_WIDTH}px; {sidebarBgStyle}"
+    aria-label={t('aria.mainNavigation')}
+    header={collapsedSidebarHeader}
+    footer={collapsedSidebarFooter}
+    reserveScrollbarSpace={false}
+    scrollClass="w-full"
+    scrollTestid="workspace-navigation-scroll"
+  >
+    {@render collapsedSidebarContent()}
+  </ScrollableSidebar>
 {:else if isSettingsView}
   <!-- Workspace admin drilldown: keep the workspace identity header (with a
        back link) and swap the body for the folded admin module nav. -->
-  <div
+  <ScrollableSidebar
     class="sidebar-mode-panel relative h-full flex-shrink-0 {sidebarBgClass} border-r flex flex-col py-4"
     style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}"
     data-testid="workspace-admin-sidebar"
+    aria-label={t('workspaceSettings.title')}
+    header={drilldownSidebarHeader}
+    footer={sidebarResizeHandle}
+    scrollTestid="workspace-admin-navigation-scroll"
   >
-    {@render workspaceHeader({ backLink: true })}
-    <div class="flex flex-1 min-h-0">
-      <WorkspaceAdminNav {workspaceId} />
-    </div>
-    {@render resizeHandle()}
-  </div>
+    <WorkspaceAdminNav {workspaceId} />
+  </ScrollableSidebar>
 {:else if $currentRoute.view === 'workspace-pages' || $currentRoute.view === 'workspace-pages-archived'}
   <!-- Pages drilldown keeps the common workspace identity header and swaps the body for the page tree. -->
-  <div
+  <ScrollableSidebar
     class="sidebar-mode-panel relative h-full flex-shrink-0 {sidebarBgClass} border-r flex flex-col py-4"
     style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}"
+    aria-label={t('pages.treeHeading')}
+    header={drilldownSidebarHeader}
+    footer={sidebarResizeHandle}
+    scrollContent={false}
+    reserveScrollbarSpace={false}
   >
-    {@render workspaceHeader({ backLink: true })}
     <div class="flex flex-1 min-h-0">
       <PagesNavSidebar {workspaceId} embedded />
     </div>
-    {@render resizeHandle()}
-  </div>
+  </ScrollableSidebar>
 {:else if $currentWorkspace?.is_personal}
   <!-- Simplified Personal Workspace Sidebar -->
-  <div class="sidebar-mode-panel relative h-full flex-shrink-0 {sidebarBgClass} border-r flex flex-col py-4" style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}">
-    {@render workspaceHeader()}
-
-    <nav class="flex-1 px-4 pt-2 space-y-1">
-      {#each PERSONAL_NAV_ITEMS as item}
+  <ScrollableSidebar
+    class="sidebar-mode-panel relative h-full flex-shrink-0 {sidebarBgClass} border-r py-4"
+    style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}"
+    aria-label={t('aria.mainNavigation')}
+    header={workspaceHeader}
+    footer={sidebarResizeHandle}
+    scrollTestid="workspace-navigation-scroll"
+  >
+    <nav class="px-4 pt-2 space-y-1 pb-2">
+      {#each PERSONAL_NAV_ITEMS as item (item.route)}
         {@render navLink({ href: item.route, label: t(item.labelKey), icon: item.icon, isActive: $currentRoute.view === item.view })}
       {/each}
     </nav>
-
-    {@render resizeHandle()}
-  </div>
+  </ScrollableSidebar>
 {:else}
   <!-- Regular Workspace Navigation Sidebar -->
-  <div class="sidebar-mode-panel relative h-full flex-shrink-0 {sidebarBgClass} border-r flex flex-col py-4" style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}">
-    {@render workspaceHeader()}
-
-    <!-- Collection Selector -->
-    <div class="px-4 pt-2 mb-6">
-      <Tooltip content={t('collections.collection')} placement="right">
-        <DropdownMenu
-          triggerText={collectionDisplayName}
-          items={collectionDropdownItems}
-          maxWidth="max-w-full"
-          showChevron={true}
-          placement="bottom-start"
-          triggerClass="w-full text-left font-medium rounded !px-3 !py-2.5 !text-sm transition-colors"
-          triggerStyle="background-color: var(--ds-surface); border: 1px solid var(--ds-border); color: var(--ds-text);"
-          triggerAlignment="between"
-        />
-      </Tooltip>
-    </div>
-
-    <nav class="flex-1 px-4 space-y-1">
+  <ScrollableSidebar
+    class="sidebar-mode-panel relative h-full flex-shrink-0 {sidebarBgClass} border-r py-4"
+    style="width: {sidebarWidth}px; min-width: {MIN_WIDTH}px; max-width: {MAX_WIDTH}px; {sidebarBgStyle}"
+    aria-label={t('aria.mainNavigation')}
+    header={regularSidebarHeader}
+    footer={sidebarResizeHandle}
+    scrollTestid="workspace-navigation-scroll"
+  >
+    <nav class="px-4 space-y-1 pb-2">
       {@render navLink({ href: getNavigationUrl('overview'), label: t('workspaceSettings.views.overview'), tooltip: t('commandPalette.commands.workspaceOverview.description'), icon: Home, isActive: $currentRoute.view === 'workspace-overview' })}
 
-      {#each workspaceViewItems as view}
+      {#each workspaceViewItems as view (view.id)}
         {@render navLink({ href: getNavigationUrl(view.id), label: viewLabel(view), tooltip: viewTooltip(view), icon: view.icon, testId: view.testId, isActive: $currentRoute.view === `workspace-${view.id}` })}
       {/each}
 
@@ -671,7 +710,7 @@
 
           {#if testsExpanded}
             <div id="workspace-tests-navigation" class="space-y-1" data-testid="workspace-tests-navigation">
-              {#each testNavigationItems as view}
+              {#each testNavigationItems as view (view.id)}
                 {@render navLink({ href: getTestNavigationUrl(view.id), label: viewLabel(view), tooltip: viewTooltip(view), icon: view.icon, isActive: activeTestNavId === view.id })}
               {/each}
             </div>
@@ -694,7 +733,7 @@
 
         {#if workspaceToolsExpanded}
           <div class="space-y-1" data-testid="workspace-tools-navigation">
-            {#each filteredWorkspaceOnlyViews as view}
+            {#each filteredWorkspaceOnlyViews as view (view.id)}
               {@render navLink({ href: getNavigationUrl(view.id), label: viewLabel(view), tooltip: viewTooltip(view), icon: view.icon, testId: view.testId, isActive: isWorkspaceViewActive(view) })}
             {/each}
 
@@ -706,13 +745,11 @@
         {/if}
       </div>
     </nav>
-
-    {@render resizeHandle()}
-  </div>
+  </ScrollableSidebar>
 {/if}
 
 <style>
-  .sidebar-mode-panel {
+  :global(.sidebar-mode-panel) {
     animation: sidebar-mode-enter 180ms var(--ease-smooth, ease) both;
   }
 
@@ -796,7 +833,7 @@
       transform: none;
     }
 
-    .sidebar-mode-panel,
+    :global(.sidebar-mode-panel),
     nav,
     nav .border-t {
       animation: none;

From ce3c72c6fbe975cb8dbde071490ae55f2eea4a0f Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 15:42:50 +0300
Subject: [PATCH 02/11] feat(frontend): refine main sidebar interactions

---
 frontend/src/lib/components/UserAvatar.svelte |   6 +-
 .../notifications/NotificationTray.svelte     |  16 +-
 frontend/src/lib/layout/DropdownMenu.svelte   |  14 ++
 frontend/src/lib/layout/MainSidebar.svelte    |  92 +++++++++--
 frontend/src/lib/layout/NavLink.svelte        |  29 ++++
 frontend/src/lib/pages/MainApp.svelte         | 145 ++++++++++++++----
 frontend/src/lib/pages/MainAppOverlays.svelte |  14 +-
 7 files changed, 265 insertions(+), 51 deletions(-)

diff --git a/frontend/src/lib/components/UserAvatar.svelte b/frontend/src/lib/components/UserAvatar.svelte
index 67b7cf026..89b50445b 100644
--- a/frontend/src/lib/components/UserAvatar.svelte
+++ b/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',
diff --git a/frontend/src/lib/features/notifications/NotificationTray.svelte b/frontend/src/lib/features/notifications/NotificationTray.svelte
index f3b04d43b..4b5fb7b14 100644
--- a/frontend/src/lib/features/notifications/NotificationTray.svelte
+++ b/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 }}
diff --git a/frontend/src/lib/layout/DropdownMenu.svelte b/frontend/src/lib/layout/DropdownMenu.svelte
index 2c30716e8..b7a352775 100644
--- a/frontend/src/lib/layout/DropdownMenu.svelte
+++ b/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);"
diff --git a/frontend/src/lib/layout/MainSidebar.svelte b/frontend/src/lib/layout/MainSidebar.svelte
index 3df2b08a7..4b691f766 100644
--- a/frontend/src/lib/layout/MainSidebar.svelte
+++ b/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,7 +174,7 @@
           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"
@@ -162,6 +182,8 @@
           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;
     }
   }
diff --git a/frontend/src/lib/layout/NavLink.svelte b/frontend/src/lib/layout/NavLink.svelte
index 1a3295ac0..44b3d8985 100644
--- a/frontend/src/lib/layout/NavLink.svelte
+++ b/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,8 +22,12 @@
   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}>
@@ -29,12 +35,24 @@
     <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>
diff --git a/frontend/src/lib/pages/MainApp.svelte b/frontend/src/lib/pages/MainApp.svelte
index 6f4a736a8..ab8ff940f 100644
--- a/frontend/src/lib/pages/MainApp.svelte
+++ b/frontend/src/lib/pages/MainApp.svelte
@@ -47,6 +47,7 @@
   let showCommandPalette = $state(false);
   let showCreateModal = $state(false);
   let showChatPanel = $state(false);
+  let activeSidebarSurface = $state(null);
   let createModalInitialType = $state('work-item');
   let createModalSkipNavigate = $state(false);
   let createModalWorkspaceId = $state(null);
@@ -83,6 +84,7 @@
   }
 
   function toggleTerminal() {
+    closeAllSidebarSurfaces();
     terminalStore.toggle();
     if (!TerminalPanelComponent) void loadTerminalPanel();
   }
@@ -139,32 +141,78 @@
 
   function closeCreateModal() {
     showCreateModal = false;
+    if (activeSidebarSurface === 'create') activeSidebarSurface = null;
     createModalInitialType = 'work-item';
     createModalSkipNavigate = false;
     createModalWorkspaceId = null;
   }
 
+  function closeAllSidebarSurfaces() {
+    activeSidebarSurface = null;
+    showCommandPalette = false;
+    showCreateModal = false;
+    showChatPanel = false;
+    createModalInitialType = 'work-item';
+    createModalSkipNavigate = false;
+    createModalWorkspaceId = null;
+  }
+
+  function activateSidebarSurface(surface) {
+    const shouldClose = activeSidebarSurface === surface;
+    closeAllSidebarSurfaces();
+    if (shouldClose) return;
+
+    activeSidebarSurface = surface;
+    showCommandPalette = surface === 'search';
+    showCreateModal = surface === 'create';
+    showChatPanel = surface === 'chat';
+  }
+
+  function handleSidebarSurfaceChange(surface) {
+    if (surface === null) {
+      if (['workspaces', 'notifications', 'profile'].includes(activeSidebarSurface)) {
+        activeSidebarSurface = null;
+      }
+      return;
+    }
+    activateSidebarSurface(surface);
+  }
+
+  function closeCommandPalette() {
+    showCommandPalette = false;
+    if (activeSidebarSurface === 'search') activeSidebarSurface = null;
+  }
+
+  function closeChatPanel() {
+    showChatPanel = false;
+    if (activeSidebarSurface === 'chat') activeSidebarSurface = null;
+  }
+
   function showCreateDropdown() {
+    closeAllSidebarSurfaces();
     createModalWorkspaceId = null;
     const currentWorkspaceId = $currentRoute.params?.id;
     if (currentWorkspaceId && CREATE_MODAL_WORKSPACE_VIEWS.has($currentRoute.view)) {
       createModalWorkspaceId = Number.parseInt(currentWorkspaceId, 10);
     }
+    activeSidebarSurface = 'create';
     showCreateModal = true;
   }
 
   function showCreateModalFromEvent(detail) {
+    closeAllSidebarSurfaces();
     if (detail.type) createModalInitialType = detail.type;
     createModalSkipNavigate = detail.skipNavigate || false;
     createModalWorkspaceId = detail.workspaceId
       ? Number.parseInt(String(detail.workspaceId), 10)
       : null;
+    activeSidebarSurface = 'create';
     showCreateModal = true;
   }
 
   useMainAppLifecycle({
     onEmailVerificationChange: (show) => showEmailVerificationBanner = show,
-    onShowCommandPalette: () => showCommandPalette = true,
+    onShowCommandPalette: () => activateSidebarSurface('search'),
     onShowCreateModal: showCreateModalFromEvent,
   });
 
@@ -183,6 +231,15 @@
     !$uiStore.reviewFullscreen && GLOBAL_COLLECTION_VIEWS.has($currentRoute.view)
   );
 
+  let previousRoutePath = $state(null);
+  $effect(() => {
+    const routePath = $currentRoute.path;
+    if (previousRoutePath !== null && previousRoutePath !== routePath) {
+      closeAllSidebarSurfaces();
+    }
+    previousRoutePath = routePath;
+  });
+
   $effect(() => {
     const route = $currentRoute;
     const context = resolveMainAppWorkspaceContext(
@@ -215,7 +272,7 @@
   });
 </script>
 
-<div class="min-h-screen flex flex-col" style="background-color: var(--ds-surface);">
+<div class="desktop-app-shell h-dvh min-h-0 overflow-hidden flex flex-col" style="background-color: var(--ds-surface);">
   <EmailVerificationBanner
     show={showEmailVerificationBanner}
     ondismiss={() => showEmailVerificationBanner = false}
@@ -223,22 +280,24 @@
 
   {#if !$uiStore.reviewFullscreen}
     <MainSidebar
-      onShowCommandPalette={() => showCommandPalette = true}
+      onShowCommandPalette={() => activateSidebarSurface('search')}
       onShowCreateModal={showCreateDropdown}
-      onShowChatPanel={() => showChatPanel = true}
+      onShowChatPanel={() => activateSidebarSurface('chat')}
       onToggleTerminal={toggleTerminal}
+      activeSurface={activeSidebarSurface}
+      onSurfaceChange={handleSidebarSurfaceChange}
     />
   {/if}
 
-  <Button class="sr-only" onclick={() => showCommandPalette = true} hotkeyConfig={{ key: toHotkeyString('global', 'commandPalette') }}>Command Palette</Button>
+  <Button class="sr-only" onclick={() => activateSidebarSurface('search')} hotkeyConfig={{ key: toHotkeyString('global', 'commandPalette') }}>Command Palette</Button>
   <Button class="sr-only" onclick={showCreateDropdown} hotkeyConfig={{ key: toHotkeyString('global', 'create') }}>Create</Button>
   {#if aiStore.chatAvailable}
-    <Button class="sr-only" onclick={() => showChatPanel = !showChatPanel} hotkeyConfig={{ key: toHotkeyString('global', 'aiChat') }}>AI Chat</Button>
+    <Button class="sr-only" onclick={() => activateSidebarSurface('chat')} hotkeyConfig={{ key: toHotkeyString('global', 'aiChat') }}>AI Chat</Button>
   {/if}
   <Button class="sr-only" onclick={toggleTerminal} hotkeyConfig={{ key: 'Mod+`' }}>Toggle Terminal</Button>
 
   <div
-    class="authenticated-content flex flex-1 transition-[margin] duration-200 ease-out"
+    class="authenticated-content flex flex-1 min-h-0 overflow-hidden transition-[margin] duration-200 ease-out"
     class:has-mobile-context-nav={showWorkspaceNav}
     style={!$uiStore.reviewFullscreen ? `margin-left: ${$uiStore.navExpanded ? '200px' : '64px'}` : ''}
   >
@@ -264,7 +323,7 @@
         ></button>
       {/if}
       <div
-        class="workspace-context-nav"
+        class="workspace-context-nav h-full min-h-0"
         class:mobile-open={mobileWorkspaceNavOpen}
         out:slide={{ duration: 200, axis: 'x' }}
       >
@@ -275,19 +334,19 @@
         />
       </div>
     {:else if showCollectionNav}
-      <div out:slide={{ duration: 200, axis: 'x' }}>
+      <div class="h-full min-h-0" out:slide={{ duration: 200, axis: 'x' }}>
         <CollectionNavigation collectionId={$currentRoute.params.id} />
       </div>
     {/if}
 
-    <div class="flex-1 flex min-w-0 main-split-container">
+    <div class="flex-1 flex min-w-0 min-h-0 overflow-hidden main-split-container">
       <div
-        class="flex flex-col min-w-0"
+        class="flex flex-col min-w-0 min-h-0"
         style={terminalState.visible
           ? `width: ${terminalState.splitPercent}%; flex-shrink: 0;`
           : 'flex: 1;'}
       >
-        <main class="flex-1">
+        <main class="flex-1 min-h-0 overflow-y-auto overscroll-contain">
           <MainRouteContent view={effectiveView} route={$currentRoute} {lazyComponents} />
         </main>
       </div>
@@ -316,7 +375,7 @@
   </div>
 
   <footer
-    class="authenticated-footer transition-[margin] duration-200 ease-out"
+    class="authenticated-footer flex-shrink-0 transition-[margin] duration-200 ease-out"
     style={!$uiStore.reviewFullscreen
       ? `margin-left: ${$uiStore.navExpanded ? '200px' : '64px'}`
       : ''}
@@ -334,6 +393,8 @@
   {createModalWorkspaceId}
   {createModalSkipNavigate}
   onclosecreate={closeCreateModal}
+  onclosecommand={closeCommandPalette}
+  onclosechat={closeChatPanel}
 />
 
 <style>
@@ -416,30 +477,56 @@
       box-shadow var(--duration-normal, 200ms) var(--ease-smooth, ease);
   }
 
-  :global(.themed-nav .nav-button::before) {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border-radius: 8px;
-    background: radial-gradient(circle at center, var(--ds-interactive) 0%, transparent 70%);
-    opacity: 0;
-    transition: opacity var(--duration-normal, 200ms) var(--ease-smooth, ease);
-    pointer-events: none;
-    z-index: -1;
-  }
-
   :global(.themed-nav .nav-button:hover) {
     background-color: var(--ds-background-neutral-hovered);
   }
 
-  :global(.themed-nav .nav-button:hover::before) {
-    opacity: 0.12;
-  }
-
   :global(.themed-nav .nav-button.nav-button-emphasized) {
     background-color: color-mix(in srgb, var(--ds-interactive) 8%, transparent);
   }
 
+  :global(.themed-nav .nav-button.nav-button-accent) {
+    color: var(--ds-text-link);
+    background-color: color-mix(in srgb, var(--ds-interactive-subtle) 72%, transparent);
+  }
+
+  :global(.themed-nav .nav-button.nav-button-accent:hover),
+  :global(.themed-nav .nav-button.nav-button-accent.nav-button-selected) {
+    color: var(--ds-text-link-hovered);
+    background-color: var(--ds-interactive-subtle);
+  }
+
+  :global(.themed-nav .nav-shortcut) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.1875rem;
+  }
+
+  :global(.themed-nav .nav-shortcut-key) {
+    display: inline-flex;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    padding-inline: 0.3125rem;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ds-border);
+    border-radius: 0.25rem;
+    color: var(--ds-text-subtle);
+    background: color-mix(in srgb, var(--ds-surface) 65%, transparent);
+    box-shadow: 0 1px 0 var(--ds-border-bold);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-weight: 600;
+    font-size: 0.6875rem;
+    line-height: 1rem;
+    text-align: center;
+  }
+
+  :global(.themed-nav .nav-button:focus-visible) {
+    outline: 2px solid var(--ds-border-focused);
+    outline-offset: 2px;
+  }
+
   :global(.themed-nav .bg-primary) {
     color: var(--ds-text-inverse) !important;
     background-color: var(--ds-interactive) !important;
diff --git a/frontend/src/lib/pages/MainAppOverlays.svelte b/frontend/src/lib/pages/MainAppOverlays.svelte
index 8aa165f87..191253b3f 100644
--- a/frontend/src/lib/pages/MainAppOverlays.svelte
+++ b/frontend/src/lib/pages/MainAppOverlays.svelte
@@ -19,6 +19,8 @@
     createModalWorkspaceId = null,
     createModalSkipNavigate = false,
     onclosecreate,
+    onclosecommand = () => {},
+    onclosechat = () => {},
   } = $props();
 
   let PomodoroSettingsModalComponent = $state(null);
@@ -65,7 +67,7 @@
   });
 </script>
 
-{#if commandPaletteState.loading}
+{#if commandPaletteState.loading && showCommandPalette}
   <ModalBackdrop
     show={true}
     opacity={0.4}
@@ -85,22 +87,22 @@
   </ModalBackdrop>
 {:else if commandPaletteState.component && showCommandPalette}
   {@const CommandPalette = commandPaletteState.component}
-  <CommandPalette bind:isOpen={showCommandPalette} onclose={() => showCommandPalette = false} />
+  <CommandPalette bind:isOpen={showCommandPalette} onclose={onclosecommand} />
 {:else if commandPaletteState.error && showCommandPalette}
   <!-- shortcut-guard-exempt: retrying a failed lazy import is a recovery action, not a form submission. -->
-  <ModalBackdrop show={true} opacity={0.4} zIndex={60} closeOnClick={false} onclose={() => showCommandPalette = false}>
+  <ModalBackdrop show={true} opacity={0.4} zIndex={60} closeOnClick={false} onclose={onclosecommand}>
     <div class="rounded-lg p-6 text-center" role="alert" style="background-color: var(--ds-surface-raised); color: var(--ds-text);">
       <p class="font-semibold">Failed to load Search</p>
       <p class="mt-1 text-sm" style="color: var(--ds-text-subtle);">Check your connection, then try again.</p>
       <div class="mt-4 flex justify-center gap-2">
-        <Button variant="secondary" onclick={() => showCommandPalette = false}>{t('common.close')}</Button>
+        <Button variant="secondary" onclick={onclosecommand}>{t('common.close')}</Button>
         <Button variant="primary" onclick={() => lazyComponents.retry('command-palette')}>{t('nav.retry')}</Button>
       </div>
     </div>
   </ModalBackdrop>
 {/if}
 
-{#if createModalState.loading}
+{#if createModalState.loading && showCreateModal}
   <ModalBackdrop show={true} opacity={0.4} closeOnClick={false} closeOnEscape={false} transition={false}>
     <div class="rounded-lg p-6" style="background-color: var(--ds-surface-raised); color: var(--ds-text-subtle);">
       <Spinner class="mx-auto mb-4" />
@@ -142,7 +144,7 @@
 
 {#if aiStore.chatAvailable && showChatPanel && chatPanelState.component}
   {@const ChatPanelComponent = chatPanelState.component}
-  <ChatPanelComponent bind:isOpen={showChatPanel} onclose={() => showChatPanel = false} />
+  <ChatPanelComponent bind:isOpen={showChatPanel} onclose={onclosechat} />
 {/if}
 
 <ToastContainer />

From 4d0d8c22dbf8e537c3797cfc38a10f0ce7749b4a Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 16:32:37 +0300
Subject: [PATCH 03/11] fix(frontend): stabilize main sidebar toggle

---
 frontend/src/lib/components/UserAvatar.svelte | 24 ++++++-------------
 .../notifications/NotificationTray.svelte     |  2 +-
 frontend/src/lib/layout/MainSidebar.svelte    | 14 +++++------
 frontend/src/lib/layout/NavLink.svelte        |  2 +-
 frontend/src/lib/pages/MainApp.svelte         |  4 ++--
 5 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/components/UserAvatar.svelte b/frontend/src/lib/components/UserAvatar.svelte
index 89b50445b..24920a781 100644
--- a/frontend/src/lib/components/UserAvatar.svelte
+++ b/frontend/src/lib/components/UserAvatar.svelte
@@ -25,13 +25,6 @@
   // Subscribe to personal workspace from store
   const personalWorkspace = $derived($workspacesStore.personalWorkspace);
 
-  // Generate user initials
-  const userInitials = $derived(
-    authStore.currentUser
-      ? (authStore.currentUser.first_name?.[0]?.toUpperCase() || '') + (authStore.currentUser.last_name?.[0]?.toUpperCase() || '')
-      : ''
-  );
-
   // Only show avatar if attachments are enabled and user has an avatar
   const showAvatar = $derived(attachmentStatus.enabled && authStore.currentUser?.avatar_url);
 
@@ -111,19 +104,16 @@
 <div data-testid="user-avatar-menu" onmouseenter={loadPersonalWorkspaceIfNeeded} onfocusin={loadPersonalWorkspaceIfNeeded}>
 <DropdownMenu
   triggerAvatar={showAvatar ? authStore.currentUser?.avatar_url : null}
-  triggerText={expanded && label ? label : (showAvatar ? '' : userInitials)}
+  triggerText={expanded && label ? label : ''}
   triggerLabel={label || t('nav.profile')}
-  triggerIcon={expanded && !showAvatar ? User : null}
+  triggerIcon={!showAvatar ? User : null}
   triggerIconClass="w-5 h-5"
-  triggerClass={expanded
-    ? "w-full px-3 h-10 rounded flex items-center cursor-pointer nav-button"
-    : (showAvatar
-      ? "w-8 h-8 rounded-full cursor-pointer hover:opacity-80 transition-opacity overflow-hidden"
-      : "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer nav-button text-xs font-bold select-none"
-    )
+  triggerClass={showAvatar
+    ? "w-full pl-1.5 pr-3 h-10 rounded flex items-center cursor-pointer nav-button overflow-hidden"
+    : "w-full px-3 h-10 rounded flex items-center cursor-pointer nav-button"
   }
-  triggerGap={expanded ? "gap-3" : ""}
-  triggerAlignment={expanded ? "start" : "center"}
+  triggerGap="gap-3"
+  triggerAlignment="start"
   showChevron={false}
   triggerTestid="user-avatar-trigger"
   {isOpen}
diff --git a/frontend/src/lib/features/notifications/NotificationTray.svelte b/frontend/src/lib/features/notifications/NotificationTray.svelte
index 4b5fb7b14..ca6953d8e 100644
--- a/frontend/src/lib/features/notifications/NotificationTray.svelte
+++ b/frontend/src/lib/features/notifications/NotificationTray.svelte
@@ -93,7 +93,7 @@
   <!-- Notification Bell Button -->
   <button
     use:melt={$trigger}
-    class="{expanded ? 'w-full px-3' : 'w-10 justify-center'} h-10 rounded flex items-center cursor-pointer nav-button {$open ? 'nav-button-selected' : ''}"
+    class="w-full px-3 h-10 rounded flex items-center justify-start cursor-pointer nav-button {$open ? 'nav-button-selected' : ''}"
     title={t('notifications.title')}
     aria-label={t('notifications.title')}
   >
diff --git a/frontend/src/lib/layout/MainSidebar.svelte b/frontend/src/lib/layout/MainSidebar.svelte
index 4b691f766..62b381e9d 100644
--- a/frontend/src/lib/layout/MainSidebar.svelte
+++ b/frontend/src/lib/layout/MainSidebar.svelte
@@ -151,7 +151,7 @@
     <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"
+      class="flex items-center justify-start px-4 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" />
       {#if $uiStore.navExpanded}
@@ -163,18 +163,18 @@
 
 {#snippet sidebarContent()}
   <!-- Main Navigation -->
-  <div class="flex flex-col {$uiStore.navExpanded ? 'items-stretch px-2.5' : 'items-center'} space-y-1 py-4">
+  <div class="flex flex-col items-stretch px-2.5 space-y-1 py-4">
 
     <!-- Workspaces -->
     <Tooltip content={t('nav.workspaces')} placement="right" disabled={$uiStore.navExpanded}>
-      <div class="{$uiStore.navExpanded ? 'w-full' : ''}">
+      <div class="w-full">
         <DropdownMenu
           triggerIcon={IconGridDots}
           triggerIconClass="w-5 h-5"
           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) || activeSurface === 'workspaces' ? 'nav-button-selected' : ''} {!$workspacesStore.loaded ? 'opacity-50 cursor-wait' : ''}"
+          triggerClass="w-full px-3 h-10 rounded flex items-center justify-start 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"
@@ -251,11 +251,11 @@
 
 {#snippet sidebarFooter()}
   <!-- Bottom Section -->
-  <div class="flex flex-col {$uiStore.navExpanded ? 'items-stretch px-3' : 'items-center'} space-y-1 pt-2">
+  <div class="flex flex-col items-stretch px-2.5 space-y-1 pt-2">
     <!-- Nav Toggle Button -->
     <button
       onclick={() => uiStore.toggleNavExpanded()}
-      class="flex items-center {$uiStore.navExpanded ? 'w-full px-3' : 'w-10 justify-center'} h-10 mb-2 rounded cursor-pointer nav-button"
+      class="flex items-center justify-start w-full px-3 h-10 mb-2 rounded cursor-pointer nav-button"
       aria-label={$uiStore.navExpanded ? t('nav.collapse') : t('nav.expand')}
     >
       {#if $uiStore.navExpanded}
@@ -302,7 +302,7 @@
 
 <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"
+  class="main-sidebar {$uiStore.navExpanded ? 'w-[200px]' : 'w-16'} shadow-lg border-r py-4 fixed inset-y-0 z-40 themed-nav transition-[width] duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] motion-reduce:transition-none"
   style="border-color: var(--ds-border);"
   aria-label={t('aria.mainNavigation')}
   header={sidebarHeader}
diff --git a/frontend/src/lib/layout/NavLink.svelte b/frontend/src/lib/layout/NavLink.svelte
index 44b3d8985..78fbbce32 100644
--- a/frontend/src/lib/layout/NavLink.svelte
+++ b/frontend/src/lib/layout/NavLink.svelte
@@ -16,7 +16,7 @@
   } = $props();
 
   const baseClasses = $derived(
-    `${expanded ? 'w-full px-3' : 'w-10'} h-10 rounded flex items-center ${expanded ? '' : 'justify-center'} cursor-pointer`
+    'w-full px-3 h-10 rounded flex items-center justify-start cursor-pointer'
   );
 
   const variantClasses = $derived(
diff --git a/frontend/src/lib/pages/MainApp.svelte b/frontend/src/lib/pages/MainApp.svelte
index ab8ff940f..c02f3756d 100644
--- a/frontend/src/lib/pages/MainApp.svelte
+++ b/frontend/src/lib/pages/MainApp.svelte
@@ -297,7 +297,7 @@
   <Button class="sr-only" onclick={toggleTerminal} hotkeyConfig={{ key: 'Mod+`' }}>Toggle Terminal</Button>
 
   <div
-    class="authenticated-content flex flex-1 min-h-0 overflow-hidden transition-[margin] duration-200 ease-out"
+    class="authenticated-content flex flex-1 min-h-0 overflow-hidden transition-[margin] duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] motion-reduce:transition-none"
     class:has-mobile-context-nav={showWorkspaceNav}
     style={!$uiStore.reviewFullscreen ? `margin-left: ${$uiStore.navExpanded ? '200px' : '64px'}` : ''}
   >
@@ -375,7 +375,7 @@
   </div>
 
   <footer
-    class="authenticated-footer flex-shrink-0 transition-[margin] duration-200 ease-out"
+    class="authenticated-footer flex-shrink-0 transition-[margin] duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] motion-reduce:transition-none"
     style={!$uiStore.reviewFullscreen
       ? `margin-left: ${$uiStore.navExpanded ? '200px' : '64px'}`
       : ''}

From 598ec08be1f169d92bb17064a98c7c5e01e95721 Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 19:34:24 +0300
Subject: [PATCH 04/11] fix(frontend): align sidebar action labels

---
 frontend/src/lib/layout/NavLink.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/layout/NavLink.svelte b/frontend/src/lib/layout/NavLink.svelte
index 78fbbce32..7172cffcb 100644
--- a/frontend/src/lib/layout/NavLink.svelte
+++ b/frontend/src/lib/layout/NavLink.svelte
@@ -16,7 +16,7 @@
   } = $props();
 
   const baseClasses = $derived(
-    'w-full px-3 h-10 rounded flex items-center justify-start cursor-pointer'
+    'w-full px-3 h-10 rounded flex items-center justify-start text-left cursor-pointer'
   );
 
   const variantClasses = $derived(

From 30cbd412981ee26fefdc91af7ae1ca17a17dfca0 Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 19:50:13 +0300
Subject: [PATCH 05/11] fix(frontend): restore license page scrolling

---
 frontend/src/lib/pages/Licenses.svelte  | 2 +-
 frontend/src/lib/pages/mainAppRoutes.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/pages/Licenses.svelte b/frontend/src/lib/pages/Licenses.svelte
index 2d4eb45d5..f3825f2ad 100644
--- a/frontend/src/lib/pages/Licenses.svelte
+++ b/frontend/src/lib/pages/Licenses.svelte
@@ -99,7 +99,7 @@
   }
 </script>
 
-<div class="min-h-screen license-page">
+<div class="min-h-full license-page">
   <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
     <header class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
       <div>
diff --git a/frontend/src/lib/pages/mainAppRoutes.js b/frontend/src/lib/pages/mainAppRoutes.js
index a196e124d..9769cc838 100644
--- a/frontend/src/lib/pages/mainAppRoutes.js
+++ b/frontend/src/lib/pages/mainAppRoutes.js
@@ -264,7 +264,7 @@ export const MAIN_APP_ROUTE_CONFIG = {
     wrapper: 'surface-full',
   }),
   licenses: route('Loading Licenses...', 'Failed to load Licenses', {
-    wrapper: 'surface-full',
+    wrapper: 'none',
   }),
   'item-detail': route('Loading Item Details...', 'Failed to load Item Details', {
     getProps: (currentRoute, context) => {

From 53c47b63e219faecd6061dc9df9c9927e22bd683 Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 21:12:10 +0300
Subject: [PATCH 06/11] fix(frontend): prevent sidebar item reflow

---
 frontend/src/lib/layout/MainSidebar.svelte | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/layout/MainSidebar.svelte b/frontend/src/lib/layout/MainSidebar.svelte
index 62b381e9d..1e2c97d7a 100644
--- a/frontend/src/lib/layout/MainSidebar.svelte
+++ b/frontend/src/lib/layout/MainSidebar.svelte
@@ -151,7 +151,7 @@
     <a
       href="/"
       onclick={closePopoverSurface}
-      class="flex items-center justify-start px-4 w-full h-10 mb-2 hover:opacity-80 transition-opacity cursor-pointer"
+      class="main-sidebar-track flex h-10 items-center justify-start px-4 mb-2 hover:opacity-80 transition-opacity cursor-pointer"
     >
       <img src="/windshift-3.svg" alt="Windshift" class="w-8 h-8 flex-shrink-0" />
       {#if $uiStore.navExpanded}
@@ -163,7 +163,7 @@
 
 {#snippet sidebarContent()}
   <!-- Main Navigation -->
-  <div class="flex flex-col items-stretch px-2.5 space-y-1 py-4">
+  <div class="main-sidebar-track flex flex-col items-stretch px-2.5 space-y-1 py-4">
 
     <!-- Workspaces -->
     <Tooltip content={t('nav.workspaces')} placement="right" disabled={$uiStore.navExpanded}>
@@ -251,7 +251,7 @@
 
 {#snippet sidebarFooter()}
   <!-- Bottom Section -->
-  <div class="flex flex-col items-stretch px-2.5 space-y-1 pt-2">
+  <div class="main-sidebar-track flex flex-col items-stretch px-2.5 space-y-1 pt-2">
     <!-- Nav Toggle Button -->
     <button
       onclick={() => uiStore.toggleNavExpanded()}
@@ -318,6 +318,14 @@
     height: 100dvh;
   }
 
+  /* Keep navigation rows at their final width while the sidebar shell reveals
+     them. Active backgrounds and shortcut hints then move as one surface
+     instead of reflowing independently during expansion. */
+  .main-sidebar-track {
+    width: 12.5rem;
+    flex-shrink: 0;
+  }
+
   .sidebar-quick-actions {
     border-color: color-mix(in srgb, var(--ds-border) 75%, transparent);
   }

From e6eac43a89f797d06dfdc9ae13557b4c4b4a2514 Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 21:25:29 +0300
Subject: [PATCH 07/11] fix(frontend): stabilize sidebar bootstrap

---
 frontend/src/App.svelte                       | 47 ++++++++++++++
 frontend/src/lib/layout/MainSidebar.svelte    | 14 +---
 frontend/src/lib/pages/useMainAppLifecycle.js | 13 +---
 .../src/lib/services/authenticatedShellUI.js  | 64 +++++++++++++++++++
 4 files changed, 116 insertions(+), 22 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index ddde452e7..b7f7a400f 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -9,6 +9,10 @@
   import { i18n, SUPPORTED_LOCALES, t } from './lib/stores/i18n.svelte.js';
   import { safeLoginReturnPath } from './lib/utils/loginReturnPath.js';
   import { getStartupCopy } from './lib/utils/startupCopy.js';
+  import {
+    loadAuthenticatedShellUI,
+    resetAuthenticatedShellUILoad,
+  } from './lib/services/authenticatedShellUI.js';
   import BrandedLoader from './lib/components/BrandedLoader.svelte';
   import LazyRootDialog from './lib/components/LazyRootDialog.svelte';
   import LazyRootView from './lib/components/LazyRootView.svelte';
@@ -38,6 +42,10 @@
   let startupError = $state('');
   let startupSlow = $state(false);
   let i18nReady = $state(false);
+  let authenticatedShellUIReady = $state(false);
+  let authenticatedShellUILoading = $state(false);
+  let authenticatedShellUIAudience = $state(null);
+  let authenticatedShellUILoadGeneration = 0;
   let startupAttempt = 0;
   let themeAudience = null;
   let themeLoadGeneration = 0;
@@ -122,6 +130,28 @@
     }
   }
 
+  async function prepareAuthenticatedShellUI(userId) {
+    const audience = `user:${userId ?? 'authenticated'}`;
+    if (
+      authenticatedShellUIAudience === audience &&
+      (authenticatedShellUIReady || authenticatedShellUILoading)
+    ) {
+      return;
+    }
+
+    const generation = ++authenticatedShellUILoadGeneration;
+    authenticatedShellUIAudience = audience;
+    authenticatedShellUIReady = false;
+    authenticatedShellUILoading = true;
+    await loadAuthenticatedShellUI(userId);
+
+    if (generation !== authenticatedShellUILoadGeneration) return;
+    if (!$authStore.isAuthenticated || authStore.currentUser?.id !== userId) return;
+
+    authenticatedShellUILoading = false;
+    authenticatedShellUIReady = true;
+  }
+
   // Show login dialog when setup is completed but user is not authenticated and app is initialized
   // But NOT for portal routes (they are public)
   const shouldShowLoginDialog = $derived(
@@ -146,6 +176,17 @@
     if ($authStore.isAuthenticated && setupCompleted) {
       showLoginDialog = false;
       appInitialized = true;
+      void prepareAuthenticatedShellUI(authStore.currentUser?.id);
+    } else if (
+      authenticatedShellUIAudience !== null ||
+      authenticatedShellUIReady ||
+      authenticatedShellUILoading
+    ) {
+      authenticatedShellUILoadGeneration += 1;
+      authenticatedShellUIAudience = null;
+      authenticatedShellUIReady = false;
+      authenticatedShellUILoading = false;
+      resetAuthenticatedShellUILoad();
     }
   });
 
@@ -355,6 +396,12 @@
   <!-- Mobile PWA surface (phone-focused shell, bypasses desktop MainApp chrome) -->
   {:else if $authStore.isAuthenticated && appInitialized && isMobileRoute($currentRoute.view)}
     <LazyRootView loader={ROOT_VIEW_LOADERS.mobile} label="mobile workspace" />
+  <!-- Mount desktop navigation only after its permission/capability snapshot is stable. -->
+  {:else if $authStore.isAuthenticated && appInitialized && !authenticatedShellUIReady}
+    <BrandedLoader
+      label={getStartupCopy('common.loading', i18nReady, t)}
+      fullViewport={false}
+    />
   <!-- Show main app when user is authenticated -->
   {:else if $authStore.isAuthenticated && appInitialized}
     <LazyRootView loader={ROOT_VIEW_LOADERS.desktop} label="workspace" />
diff --git a/frontend/src/lib/layout/MainSidebar.svelte b/frontend/src/lib/layout/MainSidebar.svelte
index 1e2c97d7a..62b381e9d 100644
--- a/frontend/src/lib/layout/MainSidebar.svelte
+++ b/frontend/src/lib/layout/MainSidebar.svelte
@@ -151,7 +151,7 @@
     <a
       href="/"
       onclick={closePopoverSurface}
-      class="main-sidebar-track flex h-10 items-center justify-start px-4 mb-2 hover:opacity-80 transition-opacity cursor-pointer"
+      class="flex items-center justify-start px-4 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" />
       {#if $uiStore.navExpanded}
@@ -163,7 +163,7 @@
 
 {#snippet sidebarContent()}
   <!-- Main Navigation -->
-  <div class="main-sidebar-track flex flex-col items-stretch px-2.5 space-y-1 py-4">
+  <div class="flex flex-col items-stretch px-2.5 space-y-1 py-4">
 
     <!-- Workspaces -->
     <Tooltip content={t('nav.workspaces')} placement="right" disabled={$uiStore.navExpanded}>
@@ -251,7 +251,7 @@
 
 {#snippet sidebarFooter()}
   <!-- Bottom Section -->
-  <div class="main-sidebar-track flex flex-col items-stretch px-2.5 space-y-1 pt-2">
+  <div class="flex flex-col items-stretch px-2.5 space-y-1 pt-2">
     <!-- Nav Toggle Button -->
     <button
       onclick={() => uiStore.toggleNavExpanded()}
@@ -318,14 +318,6 @@
     height: 100dvh;
   }
 
-  /* Keep navigation rows at their final width while the sidebar shell reveals
-     them. Active backgrounds and shortcut hints then move as one surface
-     instead of reflowing independently during expansion. */
-  .main-sidebar-track {
-    width: 12.5rem;
-    flex-shrink: 0;
-  }
-
   .sidebar-quick-actions {
     border-color: color-mix(in srgb, var(--ds-border) 75%, transparent);
   }
diff --git a/frontend/src/lib/pages/useMainAppLifecycle.js b/frontend/src/lib/pages/useMainAppLifecycle.js
index f38ee4ad4..f97f606a4 100644
--- a/frontend/src/lib/pages/useMainAppLifecycle.js
+++ b/frontend/src/lib/pages/useMainAppLifecycle.js
@@ -1,14 +1,13 @@
 import { useEventListener } from 'runed';
 import { onMount } from 'svelte';
 import { ADMIN_UI_MUTATION_EVENT } from '../api/core.js';
-import { api } from '../api.js';
 import { desktopBridge } from '../desktop/bridge.svelte.js';
 import {
   resetAuthenticatedShellState,
   runAuthenticatedShellBootstrap,
 } from '../services/authenticatedShellBootstrap.js';
 import {
-  hydrateAuthenticatedShellUI,
+  loadAuthenticatedShellUI,
   refreshAuthenticatedShellUI,
 } from '../services/authenticatedShellUI.js';
 import {
@@ -90,15 +89,7 @@ export function useMainAppLifecycle({
 
     const deferredTasks = [
       () => workspacesStore.loadPersonalWorkspace(),
-      async () => {
-        try {
-          const bootstrap = await api.shellBootstrap.get();
-          hydrateAuthenticatedShellUI(bootstrap);
-        } catch (error) {
-          capabilitiesStore.failHydration();
-          console.warn('Failed to load shell capabilities:', error);
-        }
-      },
+      () => loadAuthenticatedShellUI(userId),
       async () => {
         if (ssoStore.checkForEmailVerificationPending()) {
           onEmailVerificationChange(true);
diff --git a/frontend/src/lib/services/authenticatedShellUI.js b/frontend/src/lib/services/authenticatedShellUI.js
index 068ed52e5..32224ae9e 100644
--- a/frontend/src/lib/services/authenticatedShellUI.js
+++ b/frontend/src/lib/services/authenticatedShellUI.js
@@ -12,6 +12,15 @@ import { workspaceDataStore } from '../stores/workspaceDataStore.svelte.js';
 import { currentWorkspace, workspacesStore } from '../stores/workspaces.svelte.js';
 
 let refreshGeneration = 0;
+let shellUILoadGeneration = 0;
+let shellUILoadAudience = null;
+let shellUILoadPromise = null;
+let shellUISettledAudience = null;
+let shellUISettledResult = false;
+
+function shellUIAudience(userId) {
+  return `user:${userId ?? 'authenticated'}`;
+}
 
 export function hydrateAuthenticatedShellUI(bootstrap) {
   if (!bootstrap) return false;
@@ -29,6 +38,61 @@ export function hydrateAuthenticatedShellUI(bootstrap) {
   return true;
 }
 
+/**
+ * Hydrate the navigation-facing shell state once per authenticated audience.
+ * App.svelte waits for this promise before mounting the desktop shell so
+ * capability-gated navigation entries cannot appear after the sidebar and
+ * shift the action group below them.
+ */
+export function loadAuthenticatedShellUI(userId, { force = false } = {}) {
+  const audience = shellUIAudience(userId);
+
+  if (!force && shellUISettledAudience === audience) {
+    return Promise.resolve(shellUISettledResult);
+  }
+  if (!force && shellUILoadAudience === audience && shellUILoadPromise) {
+    return shellUILoadPromise;
+  }
+
+  const generation = ++shellUILoadGeneration;
+  shellUILoadAudience = audience;
+
+  const request = api.shellBootstrap
+    .get()
+    .then((bootstrap) => {
+      if (generation !== shellUILoadGeneration) return false;
+      const hydrated = hydrateAuthenticatedShellUI(bootstrap);
+      shellUISettledAudience = audience;
+      shellUISettledResult = hydrated;
+      return hydrated;
+    })
+    .catch((error) => {
+      if (generation !== shellUILoadGeneration) return false;
+      shellUISettledAudience = audience;
+      shellUISettledResult = false;
+      capabilitiesStore.failHydration();
+      console.warn('Failed to load shell capabilities:', error);
+      return false;
+    })
+    .finally(() => {
+      if (generation !== shellUILoadGeneration) return;
+      shellUILoadAudience = null;
+      shellUILoadPromise = null;
+    });
+
+  shellUILoadPromise = request;
+  return request;
+}
+
+/** Clear request identity when the authenticated audience changes. */
+export function resetAuthenticatedShellUILoad() {
+  shellUILoadGeneration += 1;
+  shellUILoadAudience = null;
+  shellUILoadPromise = null;
+  shellUISettledAudience = null;
+  shellUISettledResult = false;
+}
+
 /**
  * Keep the shell workspace aligned with the routed workspace while the shared
  * workspace snapshot loads. The previous workspace is cleared synchronously

From 54f355b2921af09d587bd667afbc16876ca37098 Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 23:01:53 +0300
Subject: [PATCH 08/11] fix(frontend): restore context-path-safe logo URL

---
 frontend/src/lib/layout/MainSidebar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/layout/MainSidebar.svelte b/frontend/src/lib/layout/MainSidebar.svelte
index 62b381e9d..e6ee04de1 100644
--- a/frontend/src/lib/layout/MainSidebar.svelte
+++ b/frontend/src/lib/layout/MainSidebar.svelte
@@ -153,7 +153,7 @@
       onclick={closePopoverSurface}
       class="flex items-center justify-start px-4 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}

From 7c64db03438c753142c84cdbcc72d9ee90f01c81 Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 23:19:17 +0300
Subject: [PATCH 09/11] fix(frontend): preserve collapsed profile avatar shape

---
 frontend/src/lib/components/UserAvatar.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/UserAvatar.svelte b/frontend/src/lib/components/UserAvatar.svelte
index 24920a781..1a11581b9 100644
--- a/frontend/src/lib/components/UserAvatar.svelte
+++ b/frontend/src/lib/components/UserAvatar.svelte
@@ -109,11 +109,13 @@
   triggerIcon={!showAvatar ? User : null}
   triggerIconClass="w-5 h-5"
   triggerClass={showAvatar
-    ? "w-full pl-1.5 pr-3 h-10 rounded flex items-center cursor-pointer nav-button overflow-hidden"
+    ? (expanded
+      ? "w-full pl-1.5 pr-3 h-10 rounded flex items-center cursor-pointer nav-button overflow-hidden"
+      : "w-full h-10 rounded flex items-center justify-center cursor-pointer nav-button overflow-hidden")
     : "w-full px-3 h-10 rounded flex items-center cursor-pointer nav-button"
   }
-  triggerGap="gap-3"
-  triggerAlignment="start"
+  triggerGap={expanded ? "gap-3" : ""}
+  triggerAlignment={expanded ? "start" : "center"}
   showChevron={false}
   triggerTestid="user-avatar-trigger"
   {isOpen}

From 2e62afdaee0edb6274f1d98acd711744d8ab239b Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 23:19:29 +0300
Subject: [PATCH 10/11] fix(frontend): allow full-page routes to scroll

---
 frontend/src/lib/pages/MainRouteContent.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/pages/MainRouteContent.svelte b/frontend/src/lib/pages/MainRouteContent.svelte
index 61e0f965d..e224cacaf 100644
--- a/frontend/src/lib/pages/MainRouteContent.svelte
+++ b/frontend/src/lib/pages/MainRouteContent.svelte
@@ -102,7 +102,7 @@
 {:else if view === 'collections-edit'}
   <Collections collectionId={route.params.id} />
 {:else if view === 'channels'}
-  <div class="h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
+  <div class="h-full min-h-0 overflow-y-auto" style="background-color: var(--ds-surface);">
     <Channels />
   </div>
 {:else if view === 'hub' || view === 'hub-inbox'}
@@ -164,7 +164,7 @@
   </div>
 {:else if routeEntry.config}
   {#if wrapper === 'surface-full'}
-    <div class="h-full min-h-0 overflow-hidden" style="background-color: var(--ds-surface);">
+    <div class="h-full min-h-0 overflow-y-auto" style="background-color: var(--ds-surface);">
       {@render lazyLoadedComponent(view, routeProps)}
     </div>
   {:else if wrapper === 'surface-padded'}

From 6c04514dcd1701d2823e002dfcc5869c5d30993a Mon Sep 17 00:00:00 2001
From: Kostenko Nikita <244571@niuitmo.ru>
Date: Mon, 31 Aug 2026 23:24:10 +0300
Subject: [PATCH 11/11] fix(frontend): stabilize avatar during sidebar collapse

---
 frontend/src/lib/components/UserAvatar.svelte | 8 +++-----
 frontend/src/lib/layout/DropdownMenu.svelte   | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/UserAvatar.svelte b/frontend/src/lib/components/UserAvatar.svelte
index 1a11581b9..cfdde79eb 100644
--- a/frontend/src/lib/components/UserAvatar.svelte
+++ b/frontend/src/lib/components/UserAvatar.svelte
@@ -109,13 +109,11 @@
   triggerIcon={!showAvatar ? User : null}
   triggerIconClass="w-5 h-5"
   triggerClass={showAvatar
-    ? (expanded
-      ? "w-full pl-1.5 pr-3 h-10 rounded flex items-center cursor-pointer nav-button overflow-hidden"
-      : "w-full h-10 rounded flex items-center justify-center cursor-pointer nav-button overflow-hidden")
+    ? "w-full pl-1.5 pr-3 h-10 rounded flex items-center cursor-pointer nav-button overflow-hidden"
     : "w-full px-3 h-10 rounded flex items-center cursor-pointer nav-button"
   }
-  triggerGap={expanded ? "gap-3" : ""}
-  triggerAlignment={expanded ? "start" : "center"}
+  triggerGap={showAvatar || expanded ? "gap-3" : ""}
+  triggerAlignment={showAvatar || expanded ? "start" : "center"}
   showChevron={false}
   triggerTestid="user-avatar-trigger"
   {isOpen}
diff --git a/frontend/src/lib/layout/DropdownMenu.svelte b/frontend/src/lib/layout/DropdownMenu.svelte
index b7a352775..391967f1f 100644
--- a/frontend/src/lib/layout/DropdownMenu.svelte
+++ b/frontend/src/lib/layout/DropdownMenu.svelte
@@ -189,7 +189,7 @@
         <ChevronDown class="w-3 h-3" />
       {/if}
     {:else if triggerAvatar}
-      <img src={triggerAvatar} alt={t('common.profile')} class="w-8 h-8 rounded-full object-cover flex-shrink-0" />
+      <img src={triggerAvatar} alt={t('common.profile')} class="w-8 min-w-8 h-8 rounded-full object-cover flex-none" />
       {#if triggerText}
         <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm">{triggerText}</span>
       {/if}