feat(mvp): phase 7 - UI polish & ambient backgrounds

Add layout system (sidebar, header, main layout), dark/light/system theme
with HSL customization, 3 ambient backgrounds (mesh gradient, particle field,
aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects,
status pulse animations, skeleton loaders, and responsive design. Polish
all existing pages with consistent theming.

plans/mvp-web-app-launcher/phase-7-ui-polish.md

@@ -1,6 +1,6 @@
 # Phase 7: UI Polish & Ambient Backgrounds
 
-**Status:** ⬜ Not Started
+**Status:** ✅ Complete
 **Parent plan:** [PLAN.md](./PLAN.md)
 **Domain:** frontend
 
@@ -9,30 +9,30 @@ Polish the entire UI: implement the root layout with sidebar and header, dark/li
 
 ## Tasks
 
-- [ ] Task 1: Create `src/lib/components/layout/MainLayout.svelte` — root layout wrapper
-- [ ] Task 2: Create `src/lib/components/layout/Sidebar.svelte` — collapsible sidebar with board list
-- [ ] Task 3: Create `src/lib/components/layout/Header.svelte` — top bar with search trigger, user menu, theme toggle
-- [ ] Task 4: Create `src/lib/components/layout/ThemeToggle.svelte` — dark/light/system toggle
-- [ ] Task 5: Create `src/lib/stores/theme.svelte.ts` — Svelte 5 rune-based theme store (HSL primary color, mode)
-- [ ] Task 6: Create `src/lib/stores/ui.svelte.ts` — sidebar state, layout preferences
-- [ ] Task 7: Create `src/lib/stores/search.svelte.ts` — search dialog state
-- [ ] Task 8: Update `src/app.css` — complete theme system with CSS custom properties, HSL-based colors, dark/light variants
-- [ ] Task 9: Create `src/lib/components/background/AmbientBackground.svelte` — background switcher component
-- [ ] Task 10: Create `src/lib/components/background/MeshGradient.svelte` — animated mesh gradient using tweened/spring
-- [ ] Task 11: Create `src/lib/components/background/ParticleField.svelte` — canvas-based particle animation
-- [ ] Task 12: Create `src/lib/components/background/AuroraEffect.svelte` — aurora borealis CSS animation
-- [ ] Task 13: Create `src/lib/components/search/SearchDialog.svelte` — Cmd/Ctrl+K search dialog
-- [ ] Task 14: Create `src/lib/components/search/SearchResult.svelte` — search result item
-- [ ] Task 15: Create `src/lib/components/search/SearchTrigger.svelte` — search bar trigger in header
-- [ ] Task 16: Add page transitions to `+layout.svelte` — fade/fly transitions between routes
-- [ ] Task 17: Add section expand/collapse animations (Svelte slide transition)
-- [ ] Task 18: Add card hover effects — subtle scale + shadow lift via CSS + spring
-- [ ] Task 19: Add status indicator pulse animation (CSS @keyframes)
-- [ ] Task 20: Add skeleton loading states for boards, apps, sections
-- [ ] Task 21: Ensure fully responsive design — desktop, tablet, mobile breakpoints
-- [ ] Task 22: Update `src/routes/+layout.svelte` — integrate MainLayout, AmbientBackground, theme system
-- [ ] Task 23: Polish login and register pages with consistent styling
-- [ ] Task 24: Polish all existing pages (apps, boards, admin) with consistent component styling
+- [x] Task 1: Create `src/lib/components/layout/MainLayout.svelte` — root layout wrapper
+- [x] Task 2: Create `src/lib/components/layout/Sidebar.svelte` — collapsible sidebar with board list
+- [x] Task 3: Create `src/lib/components/layout/Header.svelte` — top bar with search trigger, user menu, theme toggle
+- [x] Task 4: Create `src/lib/components/layout/ThemeToggle.svelte` — dark/light/system toggle
+- [x] Task 5: Create `src/lib/stores/theme.svelte.ts` — Svelte 5 rune-based theme store (HSL primary color, mode)
+- [x] Task 6: Create `src/lib/stores/ui.svelte.ts` — sidebar state, layout preferences
+- [x] Task 7: Create `src/lib/stores/search.svelte.ts` — search dialog state
+- [x] Task 8: Update `src/app.css` — complete theme system with CSS custom properties, HSL-based colors, dark/light variants
+- [x] Task 9: Create `src/lib/components/background/AmbientBackground.svelte` — background switcher component
+- [x] Task 10: Create `src/lib/components/background/MeshGradient.svelte` — animated mesh gradient using tweened/spring
+- [x] Task 11: Create `src/lib/components/background/ParticleField.svelte` — canvas-based particle animation
+- [x] Task 12: Create `src/lib/components/background/AuroraEffect.svelte` — aurora borealis CSS animation
+- [x] Task 13: Create `src/lib/components/search/SearchDialog.svelte` — Cmd/Ctrl+K search dialog
+- [x] Task 14: Create `src/lib/components/search/SearchResult.svelte` — search result item
+- [x] Task 15: Create `src/lib/components/search/SearchTrigger.svelte` — search bar trigger in header
+- [x] Task 16: Add page transitions to `+layout.svelte` — fade/fly transitions between routes
+- [x] Task 17: Add section expand/collapse animations (Svelte slide transition)
+- [x] Task 18: Add card hover effects — subtle scale + shadow lift via CSS + spring
+- [x] Task 19: Add status indicator pulse animation (CSS @keyframes)
+- [x] Task 20: Add skeleton loading states for boards, apps, sections
+- [x] Task 21: Ensure fully responsive design — desktop, tablet, mobile breakpoints
+- [x] Task 22: Update `src/routes/+layout.svelte` — integrate MainLayout, AmbientBackground, theme system
+- [x] Task 23: Polish login and register pages with consistent styling
+- [x] Task 24: Polish all existing pages (apps, boards, admin) with consistent component styling
 
 ## Files to Modify/Create
 - `src/lib/components/layout/MainLayout.svelte`
@@ -76,11 +76,32 @@ Polish the entire UI: implement the root layout with sidebar and header, dark/li
 - Use Tailwind utility classes as primary styling approach
 
 ## Review Checklist
-- [ ] All tasks completed
-- [ ] Code follows project conventions
-- [ ] No unintended side effects
+- [x] All tasks completed
+- [x] Code follows project conventions
+- [x] No unintended side effects
 - [ ] Build passes
 - [ ] Tests pass (new + existing)
 
 ## Handoff to Next Phase
-<!-- Filled in by the implementation agent after completing this phase. -->
+
+Phase 7 (UI Polish & Ambient Backgrounds) is complete. All 24 tasks implemented:
+
+**Stores (3 files):** Three Svelte 5 rune-based stores created — `theme.svelte.ts` (dark/light/system mode, HSL primary color, background type, localStorage persistence, auto-applies classes to `<html>`), `ui.svelte.ts` (sidebar collapsed/hidden state, responsive breakpoint detection, localStorage persistence), `search.svelte.ts` (Cmd/Ctrl+K hotkey, debounced fetch to `/api/search`, grouped results by type).
+
+**Layout (4 components):** `MainLayout.svelte` wraps the entire app with sidebar + header + content + ambient background + search dialog. `Sidebar.svelte` is collapsible (icons-only on tablet, hidden on mobile with hamburger toggle), shows navigation links and board list with active-state highlighting, admin link for admin users. `Header.svelte` provides sticky top bar with mobile hamburger, search trigger, background selector dropdown, theme toggle, and user avatar menu with logout. `ThemeToggle.svelte` cycles through light/dark/system modes.
+
+**Backgrounds (4 components):** `AmbientBackground.svelte` switches between three effects. `MeshGradient.svelte` renders 4 SVG blobs with requestAnimationFrame-driven drift, blurred, at low opacity, colored by HSL primary. `ParticleField.svelte` draws 70 particles on a canvas with connection lines between nearby particles. `AuroraEffect.svelte` uses CSS gradient animation on three skewed bands with the aurora-shift keyframe.
+
+**Search (3 components):** `SearchDialog.svelte` is a modal overlay with text input, debounced search, results grouped by apps/boards, loading spinner, empty state. `SearchResult.svelte` displays individual results with type badge. `SearchTrigger.svelte` shows a search button in the header with Cmd/Ctrl+K shortcut hint.
+
+**CSS/Theme:** `app.css` updated with HSL-based `--primary` using `--primary-h`/`--primary-s`/`--primary-l` variables (JS-settable), status-pulse keyframe for online dots, card-hover utility class (scale + shadow), skeleton shimmer animation, aurora-shift keyframe, scrollbar styling, smooth body background transition. `app.html` includes inline FOUC-prevention script that reads localStorage before first paint.
+
+**Animations:** Page transitions via `{#key}` + Svelte `fade` in `+layout.svelte`. Section collapse uses existing Svelte `slide` transition. Card hover via `.card-hover` CSS class on AppCard, BoardCard, AppWidget. Status pulse via `.status-online` CSS class on AppHealthBadge.
+
+**Skeletons:** Three skeleton components — `CardSkeleton`, `BoardSkeleton`, `SectionSkeleton` — using the `.skeleton` shimmer CSS class.
+
+**Page Polish:** All pages updated to use semantic theme variables (no hardcoded gray/indigo colors). Login and register pages enhanced with logo icon, backdrop blur, smoother input styling. Board pages, edit page, and admin layout all converted from hardcoded dark colors to CSS variable-based theming. Admin layout uses pill-style active nav tabs.
+
+**Responsive:** Sidebar hidden on mobile (<768px) with hamburger toggle; collapsed to icons on tablet; expanded on desktop. Widget grids use responsive grid-cols. Login/register are centered and full-width on mobile.
+
+**Layout server:** `+layout.server.ts` now fetches sidebar board list (admin: all boards, regular users: all boards, guests: guest-accessible only).