Sidebar and AdminSidebar were re-instantiated on every page navigation
(17 pages total), causing unnecessary DOM teardown/rebuild and redundant
localStorage reads. Now each lives in its respective +layout.svelte as a
single persistent instance.
Also adds onDestroy cleanup for leaked timers (settings, team, login RAF
loop) and CSS containment on <main> to isolate layout recalculations.
- app.css: replace flat --shadow-sm token with real shadows; add
--shadow-card and --shadow-dialog tokens; add @keyframes status-ping
and .animate-status-ping utility (outward ring ripple, GPU-composited
via will-change) for live running status dots
- login: headline 5rem → 6.5rem with tighter leading/tracking; expand
container to 460px; add sage-green dot grid texture layer beneath the
mouse-reactive glow for industrial depth
- capsules: upgrade all running dots (header chip + row indicators +
status bar) from opacity-fade to ring ripple; apply --shadow-dialog
to Launch and Snapshot dialogs
- keys: apply --shadow-dialog to all three dialogs
- audit: remove duplicate @keyframes fadeUp and iconFloat (redundant
with app.css definitions, audit's fadeUp also subtly diverged)
- sidebar: active indicator bar taller and thicker (h-5 w-[3px] → h-6
w-1); active bg more vivid (accent/12%); label font-medium →
font-semibold; team dialog gets --shadow-dialog
Delight (keys page):
- Animated checkmark draw + circle pop on key reveal dialog open
- Key display area pulses accent glow on open to draw eye to "copy this"
- Copy button spring-bounces on successful copy (re-triggers on repeat)
- Empty state key icon floats (iconFloat, now global)
- Row hover uses scaleY left-accent stripe (matches capsules pattern)
- New key row flashes accent on reveal dialog dismiss (matches capsule-born)
Audit fixes (all dashboard pages):
- Page titles standardized to em dash: "Wrenn — X" across all four pages
- formatDate/timeAgo extracted to src/lib/utils/format.ts (string | undefined
signatures); keys and snapshots now import from there instead of duplicating
- team formatDate gains undefined guard (kept local, date-only format differs)
- spin-once and iconFloat keyframes moved to app.css as globals; scoped copies
removed from capsules and keys
- Snapshots empty state icon was referencing undefined @keyframes float; fixed
to iconFloat
Normalization:
- Snapshots table rows: replaced ::before pseudo-element accent (opacity-only,
single color) with DOM row-stripe element using scaleY transition, type-keyed
color (green for snapshots, blue for images) — matches capsules pattern
- Create Key dialog: max-w-[400px] → max-w-[420px] to align with form dialogs
- Snapshots count and empty-state heading are now terminology-aware: shows
"templates/snapshots/images" based on active filter; empty heading for all
filter reads "No templates yet" instead of "No snapshots yet"
Not done (documented in audit, deferred):
- Sidebar nav items pointing to unimplemented routes (audit, usage, billing,
notifications, settings) — left as-is, needs product decision
- Dialog max-widths fully normalized beyond Create Key — minor, deferred
- capsules timeAgo not imported from shared util (formatTime differs intentionally)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Increase content padding (p-7→p-8) and table cell padding (px-4→px-5,
py-3→py-4 for data rows) across capsules, keys, and snapshots pages
- Improve animation performance: wrenn-glow uses opacity instead of
box-shadow (compositor-only, no paint cost)
- Add prefers-reduced-motion media query covering inline style animations
- Fix OAuth error display on login page (read ?error= param on mount)
- Harden clipboard copy with try-catch and toast fallback
- Improve empty state copy, dialog microcopy, and error messages
- Add retry button to error banners on keys page
- Replace "All systems operational" footer bar with a clean 1px divider
- Fix text truncation on long capsule/snapshot names (min-w-0 + truncate)
