# Phase 7: UI Polish & Ambient Backgrounds

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Polish the entire UI: implement the root layout with sidebar and header, dark/light/system theme with HSL customization, ambient animated backgrounds, page transitions, animations, skeleton loading states, and responsive design.

## 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

## Files to Modify/Create
- `src/lib/components/layout/MainLayout.svelte`
- `src/lib/components/layout/Sidebar.svelte`
- `src/lib/components/layout/Header.svelte`
- `src/lib/components/layout/ThemeToggle.svelte`
- `src/lib/stores/theme.svelte.ts`
- `src/lib/stores/ui.svelte.ts`
- `src/lib/stores/search.svelte.ts`
- `src/app.css` — update
- `src/lib/components/background/AmbientBackground.svelte`
- `src/lib/components/background/MeshGradient.svelte`
- `src/lib/components/background/ParticleField.svelte`
- `src/lib/components/background/AuroraEffect.svelte`
- `src/lib/components/search/SearchDialog.svelte`
- `src/lib/components/search/SearchResult.svelte`
- `src/lib/components/search/SearchTrigger.svelte`
- `src/routes/+layout.svelte` — update
- Various existing component files — add animations, polish styling

## Acceptance Criteria
- Dark/Light/System theme works with smooth CSS transitions
- HSL-based primary color customization works
- At least one ambient background (mesh gradient) animates smoothly
- Sidebar is collapsible and shows board list
- Header has search trigger, user menu, theme toggle
- Cmd/Ctrl+K opens search dialog
- Page transitions are smooth
- Section collapse is animated
- Card hover has scale + shadow effect
- Status dots pulse when online
- Skeleton loaders appear during data fetches
- Layout is responsive at desktop (>1024px), tablet (768-1024px), mobile (<768px)

## Notes
- Use Svelte 5 runes for stores, NOT legacy `writable`/`readable`
- Use `svelte/motion` (tweened, spring) for ambient animations
- AmbientBackground should be configurable and toggleable
- Search dialog uses the `/api/search` endpoint from Phase 6
- Keep animations performant — prefer CSS transforms/opacity over layout-triggering properties
- Use Tailwind utility classes as primary styling approach

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. -->