From f166f1ac5e83777e634380d79eaf2de37cc6bcd9 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Tue, 17 Mar 2026 16:18:11 +0100 Subject: [PATCH] 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 | 2 +- .planning/STATE.md | 13 +- .../04-02-SUMMARY.md | 123 ++++++++++++++++++ 3 files changed, 132 insertions(+), 6 deletions(-) create mode 100644 .planning/phases/04-full-app-design-consistency/04-02-SUMMARY.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 96e268d..2a22394 100644 --- a/.planning/ROADMAP.md +++ b/.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| | diff --git a/.planning/STATE.md b/.planning/STATE.md index f25696a..a2b50d8 100644 --- a/.planning/STATE.md +++ b/.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 diff --git a/.planning/phases/04-full-app-design-consistency/04-02-SUMMARY.md b/.planning/phases/04-full-app-design-consistency/04-02-SUMMARY.md new file mode 100644 index 0000000..6a4574c --- /dev/null +++ b/.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)