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]

this causes context paths not to work, I would just leave the relative src here

[oshuej198]

You're right — thanks for pointing this out. The relative path was broken for me only in the local Vite dev server on nested routes (which is visible in the earlier screenshots), so I changed it while fixing the local sidebar. Production does inject a <base> element, so the relative asset path resolves correctly there and also preserves context-path deployments. I overlooked that distinction. I'll restore the relative src; the local dev-server base-path mismatch should be handled separately rather than with a root-relative URL.

[oshuej198]

Fixed in 54f355b2.

You’re right — the leading slash was accidental and slipped into the broader sidebar refactoring commit.

The relative URL appeared broken locally on nested routes because the Vite dev server does not inject the production element. In production, the Go server injects the correct base URL, including the configured context path.

I’ve restored src="windshift-3.svg". Thanks for catching this!

[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