chore: add plan files and gitignore for MVP feature

2026-03-24 19:46:26 +03:00
parent 6d415ac97d
commit dc9bd3bba4
11 changed files with 676 additions and 0 deletions
@@ -0,0 +1,86 @@
+# 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. -->