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
This commit is contained in:
64
openspec/changes/p04-content-patterns/proposal.md
Normal file
64
openspec/changes/p04-content-patterns/proposal.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# Proposal: Content Patterns
|
||||
|
||||
## Overview
|
||||
Create reusable content components for data-dense views: DataTable, FilterBar, EmptyState, and LoadingState.
|
||||
|
||||
## Goals
|
||||
- Create DataTable component wrapping TanStack Table with DaisyUI styling
|
||||
- Create FilterBar component for reusable filter patterns
|
||||
- Create EmptyState component for no-data placeholders
|
||||
- Create LoadingState component with skeleton patterns
|
||||
|
||||
## Non-Goals
|
||||
- Page implementations (done in p05)
|
||||
- Specific business logic
|
||||
|
||||
## Priority
|
||||
**MEDIUM** - Reusable patterns for pages
|
||||
|
||||
## Scope
|
||||
|
||||
### DataTable Component
|
||||
- Wraps @tanstack/svelte-table
|
||||
- DaisyUI table styling
|
||||
- Sorting support
|
||||
- Pagination support
|
||||
- Row selection (optional)
|
||||
- Loading state
|
||||
- Empty state integration
|
||||
|
||||
### FilterBar Component
|
||||
- Search input
|
||||
- Filter dropdowns
|
||||
- Date range picker integration
|
||||
- Clear filters button
|
||||
- Slot for custom filters
|
||||
|
||||
### EmptyState Component
|
||||
- Icon display
|
||||
- Title and description
|
||||
- Optional action button
|
||||
- Consistent styling
|
||||
|
||||
### LoadingState Component
|
||||
- Skeleton patterns for different content types
|
||||
- Table skeleton
|
||||
- Card skeleton
|
||||
- Text skeleton
|
||||
|
||||
## Success Criteria
|
||||
- [ ] DataTable created with TanStack integration
|
||||
- [ ] FilterBar created with search and dropdowns
|
||||
- [ ] EmptyState created with icon and action
|
||||
- [ ] LoadingState created with skeletons
|
||||
- [ ] All tests pass
|
||||
|
||||
## Estimated Effort
|
||||
3-4 hours
|
||||
|
||||
## Dependencies
|
||||
- p02-app-layout
|
||||
- p03-dashboard-enhancement (can start in parallel)
|
||||
|
||||
## Blocks
|
||||
- p05-page-migrations
|
||||
Reference in New Issue
Block a user