Santhosh Janardhanan
493cb78173
Complete UI foundation and app layout implementation, stabilize container health checks, and archive both OpenSpec changes after verification.
133 lines
4.8 KiB
Markdown
133 lines
4.8 KiB
Markdown
# Tasks: App Layout
|
|
|
|
## Phase 1: Create Layout Components Directory
|
|
|
|
- [x] 2.1 Create `src/lib/components/layout/` directory
|
|
|
|
## Phase 2: Sidebar Components
|
|
|
|
### SidebarItem
|
|
- [x] 2.2 Create `SidebarItem.svelte`
|
|
- [x] 2.3 Add icon prop (Lucide component)
|
|
- [x] 2.4 Add label prop
|
|
- [x] 2.5 Add href prop
|
|
- [x] 2.6 Add active state styling (current path matching)
|
|
- [x] 2.7 Handle collapsed state (icon only, tooltip on hover)
|
|
- [x] 2.8 Write component test: renders with icon and label
|
|
|
|
### SidebarSection
|
|
- [x] 2.9 Create `SidebarSection.svelte`
|
|
- [x] 2.10 Add section prop (NavSection type)
|
|
- [x] 2.11 Add expanded prop (for collapsed sidebar)
|
|
- [x] 2.12 Render section title
|
|
- [x] 2.13 Render SidebarItem for each item
|
|
- [x] 2.14 Write component test: renders all items
|
|
|
|
### Sidebar
|
|
- [x] 2.15 Create `Sidebar.svelte`
|
|
- [x] 2.16 Import and use navigationSections
|
|
- [x] 2.17 Import layoutStore for state
|
|
- [x] 2.18 Implement three visual states (expanded, collapsed, hidden)
|
|
- [x] 2.19 Add toggle button in header
|
|
- [x] 2.20 Add logo/brand in header
|
|
- [x] 2.21 Implement role-based section visibility
|
|
- [x] 2.22 Add dark mode toggle in footer
|
|
- [x] 2.23 Add keyboard shortcut (Cmd/Ctrl + \)
|
|
- [x] 2.24 Implement CSS transitions
|
|
- [x] 2.25 Write component test: toggle state works
|
|
- [x] 2.26 Write component test: role-based visibility
|
|
|
|
## Phase 3: TopBar Components
|
|
|
|
### UserMenu
|
|
- [x] 2.27 Create `UserMenu.svelte` (migrate from Navigation.svelte)
|
|
- [x] 2.28 Import authStore for user info
|
|
- [x] 2.29 Add dropdown with user name/avatar
|
|
- [x] 2.30 Add logout action
|
|
- [x] 2.31 Style with DaisyUI dropdown
|
|
|
|
### MonthSelector
|
|
- [x] 2.32 Create `MonthSelector.svelte`
|
|
- [x] 2.33 Import periodStore
|
|
- [x] 2.34 Display current month (format: Feb 2026)
|
|
- [x] 2.35 Add dropdown with month options (-6 to +6 months)
|
|
- [x] 2.36 Add Previous/Today/Next quick actions
|
|
- [x] 2.37 Style with DaisyUI dropdown
|
|
- [x] 2.38 Write component test: selection updates store
|
|
|
|
### Breadcrumbs
|
|
- [x] 2.39 Create `Breadcrumbs.svelte`
|
|
- [x] 2.40 Import $page store for current path
|
|
- [x] 2.41 Implement generateBreadcrumbs function
|
|
- [x] 2.42 Render Home icon for root
|
|
- [x] 2.43 Render segments as links
|
|
- [x] 2.44 Style last item as current (no link)
|
|
- [x] 2.45 Write component test: generates correct crumbs
|
|
|
|
### TopBar
|
|
- [x] 2.46 Create `TopBar.svelte`
|
|
- [x] 2.47 Import Breadcrumbs, MonthSelector, UserMenu
|
|
- [x] 2.48 Add hamburger toggle for mobile
|
|
- [x] 2.49 Implement sticky positioning
|
|
- [x] 2.50 Style with DaisyUI
|
|
- [x] 2.51 Write component test: renders all components
|
|
|
|
## Phase 4: AppLayout
|
|
|
|
- [x] 2.52 Create `AppLayout.svelte`
|
|
- [x] 2.53 Import Sidebar, TopBar
|
|
- [x] 2.54 Add slot for page content
|
|
- [x] 2.55 Implement flex layout (sidebar + main content)
|
|
- [x] 2.56 Adjust main content margin based on sidebar state
|
|
- [x] 2.57 Handle responsive behavior (mobile drawer)
|
|
- [x] 2.58 Write component test: renders children
|
|
- [x] 2.59 Write component test: sidebar toggle affects layout
|
|
|
|
## Phase 5: Route Integration
|
|
|
|
- [x] 2.60 Update `src/routes/+layout.svelte`
|
|
- [x] 2.61 Add conditional AppLayout wrapper
|
|
- [x] 2.62 Define publicPages array (['/login', '/auth'])
|
|
- [x] 2.63 Test: login page has NO sidebar
|
|
- [x] 2.64 Test: dashboard page has sidebar
|
|
|
|
## Phase 6: Responsive & Mobile
|
|
|
|
- [x] 2.65 Test: Sidebar hidden by default on mobile
|
|
- [x] 2.66 Test: Hamburger shows sidebar on mobile
|
|
- [x] 2.67 Test: Sidebar overlays content on mobile (not push)
|
|
- [x] 2.68 Test: Clicking outside closes sidebar on mobile
|
|
- [x] 2.69 Add backdrop overlay for mobile drawer
|
|
|
|
## Phase 7: E2E Tests
|
|
|
|
- [x] 2.70 E2E test: Login redirects to dashboard with sidebar
|
|
- [x] 2.71 E2E test: Sidebar toggle works
|
|
- [x] 2.72 E2E test: Theme toggle works
|
|
- [x] 2.73 E2E test: Month selector updates period store
|
|
- [x] 2.74 E2E test: Breadcrumbs reflect current route
|
|
|
|
## Phase 8: Verification
|
|
|
|
- [x] 2.75 Run `npm run check` - no type errors
|
|
- [x] 2.76 Run `npm run test:unit` - all component tests pass
|
|
- [x] 2.77 Run `npm run test:e2e` - all E2E tests pass
|
|
- [x] 2.78 Manual test: All breakpoints (320px, 768px, 1024px, 1280px)
|
|
- [x] 2.79 Manual test: Dark mode toggle
|
|
- [x] 2.80 Manual test: Keyboard shortcut (Cmd/Ctrl + \)
|
|
|
|
## Commits
|
|
|
|
1. `feat(layout): Create SidebarItem component with active state`
|
|
2. `feat(layout): Create SidebarSection component`
|
|
3. `feat(layout): Create Sidebar with three states and theme toggle`
|
|
4. `feat(layout): Create UserMenu component (migrated from Navigation)`
|
|
5. `feat(layout): Create MonthSelector with period store integration`
|
|
6. `feat(layout): Create Breadcrumbs with auto-generation`
|
|
7. `feat(layout): Create TopBar with all components`
|
|
8. `feat(layout): Create AppLayout wrapper component`
|
|
9. `feat(layout): Integrate AppLayout into root layout`
|
|
10. `feat(layout): Add responsive mobile drawer behavior`
|
|
11. `test(layout): Add component tests for all layout components`
|
|
12. `test(e2e): Add E2E tests for layout functionality`
|