Redesign UI shell with collapsible sidebar and SaaS design system

[xifel]

Replaces top nav with collapsible sidebar, adds design token system, architecture docs page, and redesign skill references.

[xifel]

@claude why so slow?!

[claude]

Claude finished @xifel's task in 2m 18s —— View job

---

Why it feels slow

Two real culprits in this PR, plus one to keep an eye on.

1. Render-blocking Google Fonts (biggest hit on first paint)

client/index.html:7-9 added a synchronous stylesheet from fonts.googleapis.com requesting 6 font weights (DM Sans 400/500/600/700 + DM Mono 400/500). That <link rel="stylesheet"> blocks render until the CSS downloads, then the browser blocks text painting until the WOFF2 files arrive — every cold load eats a CDN round-trip and ~150-300 KB of fonts before anything appears. &display=swap helps with FOIT but not with the stylesheet block.

Fix: either self-host (Vite + @fontsource/dm-sans) or convert the link to async, e.g.

<link rel="preload" as="style"
      href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap"
      onload="this.rel='stylesheet'">

And drop weights you don't actually use — 400 + 600 + 700 is plenty for this UI; 500 in both families is unused as far as I can see.

Fix this →

2. Animating grid-template-columns on every sidebar toggle

client/src/App.vue:281 animates the shell grid track:

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  transition: grid-template-columns var(--motion-base) var(--ease-out);
}

…and Sidebar.vue:202-203 also animates width: var(--sidebar-w). So every animation frame relayouts (a) the grid children — which includes the entire <main> containing charts/tables — and (b) the sidebar itself. That's two full layout passes per frame for ~200ms.

Animating grid track sizes can't be GPU-composited. Cheaper options: animate transform: translateX() on the sidebar with the main column padded by a static var(--sidebar-w) (the var still updates instantly, the animation just rides on transform), or pick one of the two transitions to keep — not both.

Fix this →

3. Worth watching, not urgent

• FilterBar is position: sticky; top: 0 and the sidebar is also position: sticky — repainting on scroll is fine, but if you add backdrop-filter or shadows later it'll get expensive.
• docs/architecture.html (+829 lines) is a static doc, not bundled, so it has zero runtime cost. Just noting in case "slow" was about the build.

TL;DR

The Google Fonts link is doing most of the damage on first load. Fixing that alone should make the app feel snappy again. The grid animation is a second-tap optimization for sidebar toggle smoothness.

---

• Read trigger comment
• Inspect changed files for perf hotspots
• Identify Google Fonts block + grid animation cost
• Report findings
  • Branch: new_features