fix(frontend): isolate sidebar scrolling across the app

[oshuej198]

Closes #224

What changed

• introduce shared ScrollableSidebar and NavigationSidebar primitives with fixed header/footer regions and independent content scrolling
• constrain the application shell and full-surface route layouts to the viewport so local navigation no longer creates document-level scrolling
• keep admin navigation inside the viewport and preserve its scroll position while switching between admin routes
• migrate admin, workspace, collections, channels, iterations, milestones, time, logbook, pages, customers, and API documentation navigation to the shared implementation
• cover short-content sidebars so they always stretch to the application footer instead of collapsing to their content height

Additional improvements beyond #224

While validating the shared layout, the main application sidebar received a broader UX pass:

• make workspaces, notifications, profile, create, search, and AI chat mutually exclusive so multiple sidebar surfaces cannot remain open together
• close active popovers and overlays when navigating to another section
• replace the oversized Create action with a compact quick-actions group that follows the navigation rhythm
• render shortcut combinations as distinct keyboard keycaps and clarify that Create uses the single C key
• add consistent focus-visible states and restrained selected/hover styling
• fix the Windshift logo asset path on nested routes
• keep lazy-loading backdrops scoped to overlays that are actually open

Verification

• npm run typecheck
• npm run check
• npx vitest run — 35 tests passed
• npm run build

Coverage

The shared layout contract now covers expanded and collapsed main navigation, global and workspace navigation variants, independently scrolling content panes, and short-content sidebars.

[oshuej198]

[oshuej198]

Follow-up improvements added in 4d0d8c2:

• stabilized the main sidebar expand/collapse transition by keeping navigation icons on a fixed horizontal anchor
• synchronized the sidebar width with the content and footer offsets, using the same easing and honoring prefers-reduced-motion
• kept the profile trigger visually consistent: it now shows the uploaded avatar when available, otherwise the same user icon in both expanded and collapsed states instead of switching to initials

Verified with:

• npm run typecheck
• npm run check
• npx vitest run — 35 tests passed
• npm run build

Also checked both sidebar states in the local Vite app.

[stefan-ernst]

Hey @oshuej198 thank you! Currently verifying this.

Minor issue I noticed:

The missing shortcut help on the right creates a visual gap here

[stefan-ernst]

Another issue, the license page cannot be scrolled:

(/licenses or click Licenses in the footer)

[oshuej198]

Thanks for the feedback!

I found the actual root cause of the delayed sidebar items.
Capability-gated navigation entries, including Channels, were being inserted after the sidebar had already mounted because the shell bootstrap request completed asynchronously. This also shifted the Create action below it.
The desktop shell now waits for the navigation capability snapshot before mounting, and the lifecycle reuses the same bootstrap request. I also removed the previous width-based workaround.
Verified with cold reloads on both /admin/custom-fields and /manage/channels: Channels and Create now appear in the same initial frame without subsequent reflow.
Checks passed:

• Svelte typecheck
• Biome and project checks
• 35 tests
• Production build

[github-actions]

This PR has merge conflicts that need to be resolved before it can be merged. Please rebase on the latest main branch.

[stefan-ernst]

If you collapse the sidebar, the avatar gets squashed:

[stefan-ernst]

I think all the overflow-hidden on the main content areas have to be replaced, it cuts off everything that needs to grow vertically, for example a long milestone list, iteration list etc

[oshuej198]

Thanks for the detailed review!

I’ve addressed all the requested changes:

• restored the relative logo asset path to keep context paths working;
• fixed the missing Create shortcut hint and its alignment;
• restored scrolling on the License Review page;
• replaced clipping route-level overflow-hidden wrappers with vertical scrolling while preserving the layout boundaries required for independent sidebar scrolling;
• fixed the profile avatar being squeezed when the sidebar is collapsed.

As an additional polish beyond the review feedback, I also removed the avatar’s horizontal jump during the sidebar collapse/expand animation. It now remains fixed at 32×32px and keeps the same position throughout the transition.

All frontend checks and Svelte diagnostics pass.

[github-actions]

Merge conflicts have been resolved.

[stefan-ernst]

Review complete, did a visual check and everything looks good too