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

Phase 7: UI Polish & Ambient Backgrounds

Status: ⬜ Not Started Parent plan: 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