headroom/openspec/changes/p02-app-layout/tasks.md

Tasks: App Layout

Phase 1: Create Layout Components Directory

• 2.1 Create src/lib/components/layout/ directory

Phase 2: Sidebar Components

SidebarItem

• 2.2 Create SidebarItem.svelte
• 2.3 Add icon prop (Lucide component)
• 2.4 Add label prop
• 2.5 Add href prop
• 2.6 Add active state styling (current path matching)
• 2.7 Handle collapsed state (icon only, tooltip on hover)
• 2.8 Write component test: renders with icon and label

SidebarSection

• 2.9 Create SidebarSection.svelte
• 2.10 Add section prop (NavSection type)
• 2.11 Add expanded prop (for collapsed sidebar)
• 2.12 Render section title
• 2.13 Render SidebarItem for each item
• 2.14 Write component test: renders all items

Sidebar

• 2.15 Create Sidebar.svelte
• 2.16 Import and use navigationSections
• 2.17 Import layoutStore for state
• 2.18 Implement three visual states (expanded, collapsed, hidden)
• 2.19 Add toggle button in header
• 2.20 Add logo/brand in header
• 2.21 Implement role-based section visibility
• 2.22 Add dark mode toggle in footer
• 2.23 Add keyboard shortcut (Cmd/Ctrl + )
• 2.24 Implement CSS transitions
• 2.25 Write component test: toggle state works
• 2.26 Write component test: role-based visibility

Phase 3: TopBar Components

UserMenu

• 2.27 Create UserMenu.svelte (migrate from Navigation.svelte)
• 2.28 Import authStore for user info
• 2.29 Add dropdown with user name/avatar
• 2.30 Add logout action
• 2.31 Style with DaisyUI dropdown

MonthSelector

• 2.32 Create MonthSelector.svelte
• 2.33 Import periodStore
• 2.34 Display current month (format: Feb 2026)
• 2.35 Add dropdown with month options (-6 to +6 months)
• 2.36 Add Previous/Today/Next quick actions
• 2.37 Style with DaisyUI dropdown
• 2.38 Write component test: selection updates store

Breadcrumbs

• 2.39 Create Breadcrumbs.svelte
• 2.40 Import $page store for current path
• 2.41 Implement generateBreadcrumbs function
• 2.42 Render Home icon for root
• 2.43 Render segments as links
• 2.44 Style last item as current (no link)
• 2.45 Write component test: generates correct crumbs

TopBar

• 2.46 Create TopBar.svelte
• 2.47 Import Breadcrumbs, MonthSelector, UserMenu
• 2.48 Add hamburger toggle for mobile
• 2.49 Implement sticky positioning
• 2.50 Style with DaisyUI
• 2.51 Write component test: renders all components

Phase 4: AppLayout

• 2.52 Create AppLayout.svelte
• 2.53 Import Sidebar, TopBar
• 2.54 Add slot for page content
• 2.55 Implement flex layout (sidebar + main content)
• 2.56 Adjust main content margin based on sidebar state
• 2.57 Handle responsive behavior (mobile drawer)
• 2.58 Write component test: renders children
• 2.59 Write component test: sidebar toggle affects layout

Phase 5: Route Integration

• 2.60 Update src/routes/+layout.svelte
• 2.61 Add conditional AppLayout wrapper
• 2.62 Define publicPages array (['/login', '/auth'])
• 2.63 Test: login page has NO sidebar
• 2.64 Test: dashboard page has sidebar

Phase 6: Responsive & Mobile

• 2.65 Test: Sidebar hidden by default on mobile
• 2.66 Test: Hamburger shows sidebar on mobile
• 2.67 Test: Sidebar overlays content on mobile (not push)
• 2.68 Test: Clicking outside closes sidebar on mobile
• 2.69 Add backdrop overlay for mobile drawer

Phase 7: E2E Tests

• 2.70 E2E test: Login redirects to dashboard with sidebar
• 2.71 E2E test: Sidebar toggle works
• 2.72 E2E test: Theme toggle works
• 2.73 E2E test: Month selector updates period store
• 2.74 E2E test: Breadcrumbs reflect current route

Phase 8: Verification

• 2.75 Run npm run check - no type errors
• 2.76 Run npm run test:unit - all component tests pass
• 2.77 Run npm run test:e2e - all E2E tests pass
• 2.78 Manual test: All breakpoints (320px, 768px, 1024px, 1280px)
• 2.79 Manual test: Dark mode toggle
• 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