87 lines
4.7 KiB
Markdown
87 lines
4.7 KiB
Markdown
# 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. -->
|