feat(layout): finalize p01 and p02 changes

Complete UI foundation and app layout implementation, stabilize container health checks, and archive both OpenSpec changes after verification.

openspec/changes/archive/2026-02-18-p01-ui-foundation/tasks.md

@@ -0,0 +1,86 @@
+# Tasks: UI Foundation
+
+## Phase 1: Install Dependencies
+
+- [x] 1.1 Install Lucide icons: `npm install lucide-svelte`
+- [x] 1.2 Verify installation in package.json
+- [x] 1.3 Test import in a test file: `import { Menu } from 'lucide-svelte'`
+
+## Phase 2: Create Types
+
+- [x] 1.4 Create `src/lib/types/` directory if not exists
+- [x] 1.5 Create `src/lib/types/layout.ts`
+- [x] 1.6 Define `SidebarState` type
+- [x] 1.7 Define `NavItem` interface
+- [x] 1.8 Define `NavSection` interface
+- [x] 1.9 Define `Theme` type
+- [x] 1.10 Export all types
+
+## Phase 3: Create Stores
+
+### Layout Store
+- [x] 1.11 Create `src/lib/stores/layout.ts`
+- [x] 1.12 Implement `sidebarState` writable with localStorage persistence
+- [x] 1.13 Implement `theme` writable with localStorage persistence
+- [x] 1.14 Implement `toggleSidebar()` function
+- [x] 1.15 Implement `setSidebarState()` function
+- [x] 1.16 Implement `toggleTheme()` function
+- [x] 1.17 Implement `setTheme()` function
+- [x] 1.18 Add system preference detection for initial theme
+
+### Period Store
+- [x] 1.19 Create `src/lib/stores/period.ts`
+- [x] 1.20 Implement `selectedPeriod` writable with localStorage persistence
+- [x] 1.21 Create `selectedMonth` derived store
+- [x] 1.22 Create `selectedDate` derived store
+- [x] 1.23 Implement `setPeriod()` function
+- [x] 1.24 Implement `previousMonth()` function
+- [x] 1.25 Implement `nextMonth()` function
+- [x] 1.26 Implement `currentMonth()` function
+
+## Phase 4: Create Navigation Config
+
+- [x] 1.27 Create `src/lib/config/` directory if not exists
+- [x] 1.28 Create `src/lib/config/navigation.ts`
+- [x] 1.29 Define PLANNING section (Dashboard, Team, Projects, Allocations, Actuals)
+- [x] 1.30 Define REPORTS section (Forecast, Utilization, Costs, Variance, Allocation Matrix)
+- [x] 1.31 Define ADMIN section with `roles: ['superuser']`
+- [x] 1.32 Export `navigationSections` array
+
+## Phase 5: Theme System
+
+- [x] 1.33 Update `src/app.css` with theme CSS variables
+- [x] 1.34 Add sidebar width CSS variables
+- [x] 1.35 Add theme color-scheme definitions
+- [x] 1.36 Test theme switching in browser console
+
+## Phase 6: Testing
+
+### Unit Tests
+- [x] 1.37 Write test: layoutStore initializes with default values
+- [x] 1.38 Write test: layoutStore.toggleSidebar cycles through states
+- [x] 1.39 Write test: layoutStore theme toggle works
+- [x] 1.40 Write test: periodStore initializes with current month
+- [x] 1.41 Write test: periodStore.previousMonth decrements correctly
+- [x] 1.42 Write test: periodStore.nextMonth increments correctly
+- [x] 1.43 Write test: navigationSections has correct structure
+
+### Component Tests
+- [x] 1.44 Create test: Lucide icon renders correctly
+
+## Phase 7: Verification
+
+- [x] 1.45 Run `npm run check` - no type errors
+- [x] 1.46 Run `npm run test:unit` - all tests pass
+- [x] 1.47 Verify stores persist to localStorage
+- [x] 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`