headroom/openspec/changes/p01-ui-foundation/tasks.md

Tasks: UI Foundation

Phase 1: Install Dependencies

• 1.1 Install Lucide icons: npm install lucide-svelte
• 1.2 Verify installation in package.json
• 1.3 Test import in a test file: import { Menu } from 'lucide-svelte'

Phase 2: Create Types

• 1.4 Create src/lib/types/ directory if not exists
• 1.5 Create src/lib/types/layout.ts
• 1.6 Define SidebarState type
• 1.7 Define NavItem interface
• 1.8 Define NavSection interface
• 1.9 Define Theme type
• 1.10 Export all types

Phase 3: Create Stores

Layout Store

• 1.11 Create src/lib/stores/layout.ts
• 1.12 Implement sidebarState writable with localStorage persistence
• 1.13 Implement theme writable with localStorage persistence
• 1.14 Implement toggleSidebar() function
• 1.15 Implement setSidebarState() function
• 1.16 Implement toggleTheme() function
• 1.17 Implement setTheme() function
• 1.18 Add system preference detection for initial theme

Period Store

• 1.19 Create src/lib/stores/period.ts
• 1.20 Implement selectedPeriod writable with localStorage persistence
• 1.21 Create selectedMonth derived store
• 1.22 Create selectedDate derived store
• 1.23 Implement setPeriod() function
• 1.24 Implement previousMonth() function
• 1.25 Implement nextMonth() function
• 1.26 Implement currentMonth() function

Phase 4: Create Navigation Config

• 1.27 Create src/lib/config/ directory if not exists
• 1.28 Create src/lib/config/navigation.ts
• 1.29 Define PLANNING section (Dashboard, Team, Projects, Allocations, Actuals)
• 1.30 Define REPORTS section (Forecast, Utilization, Costs, Variance, Allocation Matrix)
• 1.31 Define ADMIN section with roles: ['superuser']
• 1.32 Export navigationSections array

Phase 5: Theme System

• 1.33 Update src/app.css with theme CSS variables
• 1.34 Add sidebar width CSS variables
• 1.35 Add theme color-scheme definitions
• 1.36 Test theme switching in browser console

Phase 6: Testing

Unit Tests

• 1.37 Write test: layoutStore initializes with default values
• 1.38 Write test: layoutStore.toggleSidebar cycles through states
• 1.39 Write test: layoutStore theme toggle works
• 1.40 Write test: periodStore initializes with current month
• 1.41 Write test: periodStore.previousMonth decrements correctly
• 1.42 Write test: periodStore.nextMonth increments correctly
• 1.43 Write test: navigationSections has correct structure

Component Tests

• 1.44 Create test: Lucide icon renders correctly

Phase 7: Verification

• 1.45 Run npm run check - no type errors
• 1.46 Run npm run test:unit - all tests pass
• 1.47 Verify stores persist to localStorage
• 1.48 Verify theme applies to document

Commits

1. feat(ui): Install lucide-svelte for icon library
2. feat(ui): Add layout types (SidebarState, NavItem, NavSection, Theme)
3. feat(ui): Create layoutStore for sidebar state and theme management
4. feat(ui): Create periodStore for global month/period selection
5. feat(ui): Add navigation configuration for sidebar menu
6. feat(ui): Add CSS variables for theme and layout
7. test(ui): Add unit tests for layout and period stores