Files

Santhosh Janardhanan 493cb78173 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.

2026-02-18 16:12:11 -05:00

1.8 KiB

Raw Blame History

Proposal: UI Foundation

Overview

Establish the foundational UI building blocks for Headroom's layout system. This includes types, stores, icon library, and theme configuration that all subsequent UI changes will depend on.

Goals

Install and configure Lucide icons for Svelte
Create layout-related TypeScript types
Create layout/period stores for state management
Set up theme system (light/dark mode with persistence)
Define navigation configuration structure

Non-Goals

Creating visual components (done in p02-app-layout)
Building actual pages (done in p03+)
API documentation (done in p00-api-documentation)

Priority

HIGH - Foundation for all UI changes (p02-p05 depend on this)

Scope

Icon Library

Install lucide-svelte package
Create icon usage patterns/documentation
Replace existing inline SVGs where applicable

Types

SidebarState - 'expanded' | 'collapsed' | 'hidden'
NavItem - label, href, icon, roles
NavSection - title, items, roles (for role-based visibility)

Stores

layoutStore - sidebar state, theme preference
periodStore - global month/period selection

Theme System

DaisyUI theme switching via data-theme attribute
Light mode default ("light" theme)
Dark mode option ("dark" theme)
Persistence to localStorage
Respect system preference on first visit

Centralized navigation structure
Role-based visibility for admin section

Success Criteria

Lucide icons installed and working
Types defined and exported
Stores created with localStorage persistence
Theme toggle functional
Navigation config exported
All tests pass

Estimated Effort

1-2 hours

Dependencies

None (foundation change)

Blocks

p02-app-layout
p03-dashboard-enhancement
p04-content-patterns
p05-page-migrations

1.8 KiB Raw Blame History