docs(05-02): complete shared component rounding and spacing cleanup plan

2026-04-20 17:12:39 +02:00
parent e7282fa3d6
commit 1547fe350c
1 changed files with 108 additions and 0 deletions
--- a/.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md
+++ b/.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md
@@ -0,0 +1,108 @@
+---
+phase: 05-design-system-token-rework
+plan: "02"
+subsystem: frontend-components
+tags: [design-system, sharp-corners, spacing, shared-components]
+dependency_graph:
+  requires: []
+  provides: [sharp-corners-in-shared-components, gap-8-page-spacing]
+  affects: [all-9-pages, dashboard-skeleton, category-sections, chart-empty-states, quick-add-picker]
+tech_stack:
+  added: []
+  patterns: [remove-hardcoded-rounded-classes, upgrade-gap-spacing]
+key_files:
+  modified:
+    - src/components/shared/PageShell.tsx
+    - src/components/dashboard/DashboardSkeleton.tsx
+    - src/components/dashboard/CategorySection.tsx
+    - src/components/dashboard/charts/ChartEmptyState.tsx
+    - src/components/QuickAddPicker.tsx
+decisions:
+  - "Upgraded DashboardSkeleton summary-cards grid from gap-4 to gap-6 (not gap-8) to match plan spec for the inner card grid"
+  - "Upgraded DashboardSkeleton chart grid from gap-6 to gap-8 as specified"
+metrics:
+  duration: "91s"
+  completed: "2026-04-20"
+  tasks_completed: 2
+  tasks_total: 2
+  files_modified: 5
+---
+
+# Phase 05 Plan 02: Shared Component Rounding and Spacing Cleanup Summary
+
+Sharp corners enforced across all 5 shared components by removing hardcoded `rounded-*` classes, and page-level spacing upgraded from `gap-6` to `gap-8` in PageShell propagating to all 9 pages.
+
+## Tasks Completed
+
+| Task | Name | Commit | Files Modified |
+|------|------|--------|----------------|
+| 1 | Upgrade PageShell spacing and remove rounded-* from DashboardSkeleton | e8f13c9 | PageShell.tsx, DashboardSkeleton.tsx |
+| 2 | Remove rounded-* from CategorySection, ChartEmptyState, QuickAddPicker | e7282fa | CategorySection.tsx, ChartEmptyState.tsx, QuickAddPicker.tsx |
+
+## Changes Made
+
+### Task 1: PageShell + DashboardSkeleton
+
+**PageShell.tsx**
+- `gap-6` → `gap-8` in the root flex container (line 15) — applies generous section spacing across all 9 pages
+
+**DashboardSkeleton.tsx**
+- Outer flex: `gap-6` → `gap-8`
+- Summary cards grid: `gap-4` → `gap-6`
+- Chart area grid: `gap-6` → `gap-8`
+- Removed `rounded-md` from 3 chart skeleton `<Skeleton>` elements
+- Removed `rounded-md` from collapsible section row `<div>`
+- Removed `rounded-full` from 2 badge `<Skeleton>` elements (2 occurrences via replace_all)
+
+### Task 2: CategorySection + ChartEmptyState + QuickAddPicker
+
+**CategorySection.tsx**
+- Removed `rounded-md` from collapsible trigger `<button>` — sharp left-bordered row maintained via `border-l-4`
+
+**ChartEmptyState.tsx**
+- Removed `rounded-lg` from the dashed-border container div — sharp rectangular empty state
+
+**QuickAddPicker.tsx**
+- Removed `rounded-sm` from picker item `<button>` elements in the popover list
+- Removed `rounded-full` from the category type dot indicator `<div>`
+
+## Verification
+
+```
+bun run build  →  exit 0  (both tasks)
+grep rounded-md  PageShell.tsx           →  0 matches
+grep rounded-md  DashboardSkeleton.tsx   →  0 matches
+grep rounded-full DashboardSkeleton.tsx  →  0 matches
+grep rounded-md  CategorySection.tsx     →  0 matches
+grep rounded-lg  ChartEmptyState.tsx     →  0 matches
+grep rounded-sm  QuickAddPicker.tsx      →  0 matches
+grep rounded-full QuickAddPicker.tsx     →  0 matches
+grep gap-8       PageShell.tsx           →  1 match ✓
+```
+
+## Deviations from Plan
+
+None — plan executed exactly as written.
+
+## Known Stubs
+
+None — this plan modifies only CSS class strings. No data wiring or UI stubs introduced.
+
+## Threat Flags
+
+None — pure CSS class changes, no security-relevant surface modified.
+
+## Self-Check
+
+**Commits exist:**
+- e8f13c9: feat(05-02): upgrade PageShell spacing to gap-8 and remove rounded-* from DashboardSkeleton
+- e7282fa: feat(05-02): remove hardcoded rounded-* from CategorySection, ChartEmptyState, QuickAddPicker
+
+**Files exist:**
+- src/components/shared/PageShell.tsx — modified
+- src/components/dashboard/DashboardSkeleton.tsx — modified
+- src/components/dashboard/CategorySection.tsx — modified
+- src/components/dashboard/charts/ChartEmptyState.tsx — modified
+- src/components/QuickAddPicker.tsx — modified
+
+## Self-Check: PASSED