Files

Santhosh Janardhanan 3e36ea8888 docs(ui): Add UI layout refactor plan and OpenSpec changes

- Update decision-log with UI layout decisions (Feb 18, 2026)
- Update architecture with frontend layout patterns
- Update config.yaml with TDD, documentation, UI standards rules
- Create p00-api-documentation change (Scribe annotations)
- Create p01-ui-foundation change (types, stores, Lucide)
- Create p02-app-layout change (AppLayout, Sidebar, TopBar)
- Create p03-dashboard-enhancement change (PageHeader, StatCard)
- Create p04-content-patterns change (DataTable, FilterBar)
- Create p05-page-migrations change (page migrations)
- Fix E2E auth tests (11/11 passing)
- Add JWT expiry validation to dashboard guard

2026-02-18 13:03:08 -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