alexei.dolgolyov
1c0a7cb850
Phase 4 — New Widget Types: - Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown, Metric/Counter, Link Group, Camera/Stream widgets - Backend services with caching for each data source - Full creation form with dynamic config fields per type Phase 5 — Visual & Styling Enhancements: - Glassmorphism card style (solid/glass/outline) - Board-level themes with per-board hue/saturation - Animated SVG status rings replacing static dots - Card size options (compact/medium/large) - Custom CSS injection (admin + per-board, sanitized) - Wallpaper backgrounds with blur/overlay/parallax Phase 6 — Functional Features: - Favorites bar with drag-and-drop reordering - Recent apps tracking with privacy toggle - Uptime dashboard page (/status, guest-accessible) - Notifications system (Discord/Slack/Telegram/HTTP webhooks) - App tags with filtering in board view - Multi-URL app cards with expandable sub-links - Personal API tokens with scoped permissions - Audit log with retention and admin viewer Phase 7 — Quality of Life: - Onboarding wizard (5-step first-launch setup) - App URL health preview with favicon/title detection - Board templates (4 built-in + custom import/export) - Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help) 212 files changed, 15641 insertions, 980 deletions. Build, lint, type check, and 222 tests all pass.
7.9 KiB
Phase 7: UI Polish & Ambient Backgrounds
Status: ✅ Complete 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.sveltesrc/lib/components/layout/Sidebar.sveltesrc/lib/components/layout/Header.sveltesrc/lib/components/layout/ThemeToggle.sveltesrc/lib/stores/theme.svelte.tssrc/lib/stores/ui.svelte.tssrc/lib/stores/search.svelte.tssrc/app.css— updatesrc/lib/components/background/AmbientBackground.sveltesrc/lib/components/background/MeshGradient.sveltesrc/lib/components/background/ParticleField.sveltesrc/lib/components/background/AuroraEffect.sveltesrc/lib/components/search/SearchDialog.sveltesrc/lib/components/search/SearchResult.sveltesrc/lib/components/search/SearchTrigger.sveltesrc/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/searchendpoint 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
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).