| 04-full-app-design-consistency |
02 |
ui |
| react |
| tailwind |
| i18n |
| skeleton |
| pageshell |
| design-system |
|
| phase |
provides |
| 04-full-app-design-consistency |
PageShell component built in Plan 01 with title/description/action/children API |
|
|
| CategoriesPage with PageShell header, left-border accent group headers, skeleton loading |
| TemplatePage with PageShell-mirrored layout, inline-editable name, left-border accent group headers, skeleton loading |
| QuickAddPage with PageShell header and action button, skeleton loading |
| SettingsPage with PageShell header, removed duplicate h1, removed CardHeader/CardTitle, skeleton loading |
|
| any future pages that follow CRUD page conventions |
|
| added |
patterns |
|
|
| PageShell adoption: all CRUD pages use PageShell (or mirror its flex-col gap-6 layout) for header |
| Skeleton loading: replace return null with PageShell-wrapped skeleton matching page structure |
| Left-border accent group headers: border-l-4 with categoryColors borderLeftColor replacing dot+h2 pattern |
|
|
| created |
modified |
|
|
| src/pages/CategoriesPage.tsx |
| src/pages/TemplatePage.tsx |
| src/pages/QuickAddPage.tsx |
| src/pages/SettingsPage.tsx |
|
|
| TemplatePage uses manual PageShell-mirrored layout (flex flex-col gap-6) instead of PageShell directly — preserves inline-editable TemplateName component which cannot be a plain string title prop |
| TemplateName h1 gains tracking-tight class to match PageShell h1 typographic style |
| SettingsPage CardHeader and CardTitle removed entirely — PageShell provides the page-level title, Card just wraps the form |
| SettingsPage CardContent gets pt-6 to compensate for removed CardHeader top padding |
|
| Loading skeleton pattern: wrap skeleton rows in same PageShell to preserve header during load |
| Group header pattern: border-l-4 bg-muted/30 px-3 py-2 with borderLeftColor from categoryColors |
|
| UI-CATEGORIES-01 |
| UI-TEMPLATE-01 |
| UI-QUICKADD-01 |
| UI-SETTINGS-01 |
| UI-DESIGN-01 |
|
3min |
2026-03-17 |
