docs(04-02): complete CRUD pages design consistency plan

- 04-02-SUMMARY.md: documents PageShell adoption, skeleton loading, group headers
- STATE.md: position advanced to 04-02 complete, decisions recorded
- ROADMAP.md: phase 4 progress updated (2 of 3 plans complete)

.planning/ROADMAP.md

@@ -138,4 +138,4 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4
 | 1. Design Foundation and Primitives | 2/2 | Complete    | 2026-03-16 |
 | 2. Dashboard Charts and Layout | 3/3 | Complete   | 2026-03-16 |
 | 3. Collapsible Dashboard Sections | 1/2 | In Progress|  |
-| 4. Full-App Design Consistency | 1/3 | In Progress|  |
+| 4. Full-App Design Consistency | 2/3 | In Progress|  |

.planning/STATE.md

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
 milestone: v1.0
 milestone_name: milestone
 status: planning
-stopped_at: Completed 04-01-PLAN.md
-last_updated: "2026-03-17T15:11:52.126Z"
+stopped_at: Completed 04-02-PLAN.md
+last_updated: "2026-03-17T15:17:56.263Z"
 last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3
 progress:
   total_phases: 4
   completed_phases: 3
   total_plans: 10
-  completed_plans: 8
+  completed_plans: 9
   percent: 100
 ---
 
@@ -58,6 +58,7 @@ Progress: [████████████████████] 5/5 pla
 | Phase 03-collapsible-dashboard-sections P01 | 2min | 2 tasks | 8 files |
 | Phase 03-collapsible-dashboard-sections P02 | 2min | 1 tasks | 2 files |
 | Phase 04-full-app-design-consistency P01 | 2min | 2 tasks | 4 files |
+| Phase 04-full-app-design-consistency P02 | 3min | 2 tasks | 4 files |
 
 ## Accumulated Context
 
@@ -85,6 +86,8 @@ Recent decisions affecting current work:
 - [Phase 03-collapsible-dashboard-sections]: key prop state reset over useEffect: keying DashboardContent by budgetId causes full remount on month change, cleanly resetting openSections without violating react-hooks linter rules
 - [Phase 04-full-app-design-consistency]: Inline SVG paths used for Google and GitHub icons — avoids dependency on external icon library while keeping icons fully styled
 - [Phase 04-full-app-design-consistency]: Auth card accent pattern established: border-t-4 border-t-primary shadow-lg on Card with bg-muted/60 background and favicon.svg logo
+- [Phase 04-full-app-design-consistency]: TemplatePage uses manual PageShell-mirrored layout (flex flex-col gap-6) instead of PageShell directly — preserves inline-editable TemplateName component
+- [Phase 04-full-app-design-consistency]: SettingsPage CardHeader and CardTitle removed — PageShell provides page-level title, CardContent gets pt-6 to compensate
 
 ### Pending Todos
 
@@ -96,6 +99,6 @@ None yet.
 
 ## Session Continuity
 
-Last session: 2026-03-17T15:11:52.124Z
-Stopped at: Completed 04-01-PLAN.md
+Last session: 2026-03-17T15:17:56.261Z
+Stopped at: Completed 04-02-PLAN.md
 Resume file: None

.planning/phases/04-full-app-design-consistency/04-02-SUMMARY.md

@@ -0,0 +1,123 @@
+---
+phase: 04-full-app-design-consistency
+plan: "02"
+subsystem: ui
+tags: [react, tailwind, i18n, skeleton, pageshell, design-system]
+
+# Dependency graph
+requires:
+  - phase: 04-full-app-design-consistency
+    provides: PageShell component built in Plan 01 with title/description/action/children API
+
+provides:
+  - 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
+
+affects:
+  - any future pages that follow CRUD page conventions
+
+# Tech tracking
+tech-stack:
+  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"
+
+key-files:
+  created: []
+  modified:
+    - src/pages/CategoriesPage.tsx
+    - src/pages/TemplatePage.tsx
+    - src/pages/QuickAddPage.tsx
+    - src/pages/SettingsPage.tsx
+
+key-decisions:
+  - "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"
+
+patterns-established:
+  - "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"
+
+requirements-completed: [UI-CATEGORIES-01, UI-TEMPLATE-01, UI-QUICKADD-01, UI-SETTINGS-01, UI-DESIGN-01]
+
+# Metrics
+duration: 3min
+completed: 2026-03-17
+---
+
+# Phase 04 Plan 02: CRUD Pages Design Consistency Summary
+
+**PageShell adoption, skeleton loading states, and left-border accent group headers applied to all four CRUD/settings pages (Categories, Template, QuickAdd, Settings)**
+
+## Performance
+
+- **Duration:** 3 min
+- **Started:** 2026-03-17T15:13:33Z
+- **Completed:** 2026-03-17T15:16:40Z
+- **Tasks:** 2
+- **Files modified:** 4
+
+## Accomplishments
+
+- All four pages now use PageShell-consistent headers (flex-col gap-6, items-start justify-between gap-4) — consistent with dashboard design language
+- All four pages show skeleton loading states instead of blank screens while data loads
+- Categories and Template pages show left-border accent group headers replacing plain dot+h2 pattern
+- Settings page now has exactly one "Settings" heading — removed duplicate h1 and CardHeader/CardTitle
+- TemplateName inline-edit functionality preserved by mirroring PageShell DOM structure manually
+
+## Task Commits
+
+1. **Task 1: Upgrade CategoriesPage and TemplatePage** - `e9497e4` (feat)
+2. **Task 2: Upgrade QuickAddPage and SettingsPage** - `ba19c30` (feat)
+
+**Plan metadata:** (docs commit follows)
+
+## Files Created/Modified
+
+- `src/pages/CategoriesPage.tsx` - PageShell header, skeleton loading, left-border accent group headers
+- `src/pages/TemplatePage.tsx` - PageShell-mirrored layout, skeleton loading, left-border accent group headers, tracking-tight on h1
+- `src/pages/QuickAddPage.tsx` - PageShell header with Add button, skeleton loading (5-row table pattern)
+- `src/pages/SettingsPage.tsx` - PageShell header, removed duplicate h1 and CardHeader/CardTitle, skeleton loading
+
+## Decisions Made
+
+- TemplatePage uses manually-mirrored PageShell layout (flex-col gap-6) instead of importing PageShell directly, because TemplateName is a custom interactive component (inline-edit) that cannot be passed as a plain string `title` prop
+- SettingsPage CardHeader and CardTitle are removed; PageShell handles the page title; Card now only wraps form content with pt-6 on CardContent
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+
+None.
+
+## User Setup Required
+
+None - no external service configuration required.
+
+## Next Phase Readiness
+
+- All four authenticated CRUD/settings pages now match the dashboard's design language
+- Phase 04 fully complete — all pages use consistent PageShell headers, skeleton loading states, and (where applicable) left-border accent group headers
+- No blockers
+
+---
+*Phase: 04-full-app-design-consistency*
+*Completed: 2026-03-17*
+
+## Self-Check: PASSED
+
+- FOUND: src/pages/CategoriesPage.tsx
+- FOUND: src/pages/TemplatePage.tsx
+- FOUND: src/pages/QuickAddPage.tsx
+- FOUND: src/pages/SettingsPage.tsx
+- FOUND: .planning/phases/04-full-app-design-consistency/04-02-SUMMARY.md
+- FOUND commit: e9497e4 (Task 1)
+- FOUND commit: ba19c30 (Task 2)