From e8f13c91c661e9f27e020a73259fe5a11a88c017 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 20 Apr 2026 17:11:20 +0200
Subject: [PATCH 1/3] feat(05-02): upgrade PageShell spacing to gap-8 and
 remove rounded-* from DashboardSkeleton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PageShell: gap-6 → gap-8 for header-to-content spacing on all pages
- DashboardSkeleton: gap-6 → gap-8 (outer flex), gap-4 → gap-6 (summary cards), gap-6 → gap-8 (chart grid)
- DashboardSkeleton: remove rounded-md from 3 chart skeleton placeholders
- DashboardSkeleton: remove rounded-md from collapsible section row divs
- DashboardSkeleton: remove rounded-full from 2 badge skeleton placeholders
---
 src/components/dashboard/DashboardSkeleton.tsx | 18 +++++++++---------
 src/components/shared/PageShell.tsx            |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/dashboard/DashboardSkeleton.tsx b/src/components/dashboard/DashboardSkeleton.tsx
index 3d0836b..a9cc827 100644
--- a/src/components/dashboard/DashboardSkeleton.tsx
+++ b/src/components/dashboard/DashboardSkeleton.tsx
@@ -17,22 +17,22 @@ function SkeletonStatCard() {
 
 export function DashboardSkeleton() {
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-8">
       {/* Summary cards skeleton */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         <SkeletonStatCard />
         <SkeletonStatCard />
         <SkeletonStatCard />
       </div>
 
       {/* 3-column chart area skeleton */}
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
         <Card>
           <CardHeader>
             <Skeleton className="h-5 w-40" />
           </CardHeader>
           <CardContent>
-            <Skeleton className="h-[250px] w-full rounded-md" />
+            <Skeleton className="h-[250px] w-full" />
           </CardContent>
         </Card>
         <Card>
@@ -40,7 +40,7 @@ export function DashboardSkeleton() {
             <Skeleton className="h-5 w-40" />
           </CardHeader>
           <CardContent>
-            <Skeleton className="h-[250px] w-full rounded-md" />
+            <Skeleton className="h-[250px] w-full" />
           </CardContent>
         </Card>
         <Card>
@@ -48,7 +48,7 @@ export function DashboardSkeleton() {
             <Skeleton className="h-5 w-40" />
           </CardHeader>
           <CardContent>
-            <Skeleton className="h-[250px] w-full rounded-md" />
+            <Skeleton className="h-[250px] w-full" />
           </CardContent>
         </Card>
       </div>
@@ -56,12 +56,12 @@ export function DashboardSkeleton() {
       {/* Collapsible sections skeleton */}
       <div className="space-y-3">
         {[1, 2, 3].map((i) => (
-          <div key={i} className="flex items-center gap-3 rounded-md border-l-4 border-muted bg-card px-4 py-3">
+          <div key={i} className="flex items-center gap-3 border-l-4 border-muted bg-card px-4 py-3">
             <Skeleton className="size-4" />
             <Skeleton className="h-4 w-32" />
             <div className="ml-auto flex items-center gap-2">
-              <Skeleton className="h-5 w-24 rounded-full" />
-              <Skeleton className="h-5 w-24 rounded-full" />
+              <Skeleton className="h-5 w-24" />
+              <Skeleton className="h-5 w-24" />
               <Skeleton className="h-4 w-16" />
             </div>
           </div>
diff --git a/src/components/shared/PageShell.tsx b/src/components/shared/PageShell.tsx
index 32907a1..8eade6e 100644
--- a/src/components/shared/PageShell.tsx
+++ b/src/components/shared/PageShell.tsx
@@ -12,7 +12,7 @@ export function PageShell({
   children,
 }: PageShellProps) {
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-8">
       <div className="flex items-start justify-between gap-4">
         <div>
           <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>

From e7282fa3d66c2bc35adf27446822b0091800d3c7 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 20 Apr 2026 17:12:03 +0200
Subject: [PATCH 2/3] feat(05-02): remove hardcoded rounded-* from
 CategorySection, ChartEmptyState, QuickAddPicker

- CategorySection: remove rounded-md from collapsible trigger button
- ChartEmptyState: remove rounded-lg from empty state border container
- QuickAddPicker: remove rounded-sm from picker item buttons
- QuickAddPicker: remove rounded-full from category dot indicator
---
 src/components/QuickAddPicker.tsx                   | 4 ++--
 src/components/dashboard/CategorySection.tsx        | 2 +-
 src/components/dashboard/charts/ChartEmptyState.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/QuickAddPicker.tsx b/src/components/QuickAddPicker.tsx
index 8a3fcba..198c7e3 100644
--- a/src/components/QuickAddPicker.tsx
+++ b/src/components/QuickAddPicker.tsx
@@ -153,7 +153,7 @@ export default function QuickAddPicker({ budgetId }: QuickAddPickerProps) {
                     type="button"
                     role="option"
                     aria-selected={false}
-                    className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    className="flex w-full items-center gap-2 px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                     onClick={() => handlePickItem(item)}
                   >
                     {item.icon && (
@@ -198,7 +198,7 @@ export default function QuickAddPicker({ budgetId }: QuickAddPickerProps) {
                       <SelectGroup key={type}>
                         <SelectLabel className="flex items-center gap-1.5">
                           <div
-                            className="size-2 rounded-full"
+                            className="size-2"
                             style={{ backgroundColor: categoryColors[type] }}
                           />
                           {t(`categories.types.${type}`)}
diff --git a/src/components/dashboard/CategorySection.tsx b/src/components/dashboard/CategorySection.tsx
index 74b3b58..1aa095a 100644
--- a/src/components/dashboard/CategorySection.tsx
+++ b/src/components/dashboard/CategorySection.tsx
@@ -70,7 +70,7 @@ export function CategorySection({
     <Collapsible open={open} onOpenChange={onOpenChange}>
       <CollapsibleTrigger asChild>
         <button
-          className="group flex w-full items-center gap-3 rounded-md border-l-4 bg-card px-4 py-3 text-left hover:bg-muted/40 transition-colors"
+          className="group flex w-full items-center gap-3 border-l-4 bg-card px-4 py-3 text-left hover:bg-muted/40 transition-colors"
           style={{ borderLeftColor: categoryColors[type] }}
         >
           <ChevronRight
diff --git a/src/components/dashboard/charts/ChartEmptyState.tsx b/src/components/dashboard/charts/ChartEmptyState.tsx
index 5df74a1..b0ec28e 100644
--- a/src/components/dashboard/charts/ChartEmptyState.tsx
+++ b/src/components/dashboard/charts/ChartEmptyState.tsx
@@ -9,7 +9,7 @@ export function ChartEmptyState({ message, className }: ChartEmptyStateProps) {
   return (
     <div
       className={cn(
-        "flex min-h-[250px] w-full items-center justify-center rounded-lg border border-dashed border-muted-foreground/20 bg-muted/30",
+        "flex min-h-[250px] w-full items-center justify-center border border-dashed border-muted-foreground/20 bg-muted/30",
         className
       )}
     >

From 1547fe350ce02c5e62107a4a0842e3b893c31533 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 20 Apr 2026 17:12:39 +0200
Subject: [PATCH 3/3] docs(05-02): complete shared component rounding and
 spacing cleanup plan

---
 .../05-02-SUMMARY.md                          | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 .planning/phases/05-design-system-token-rework/05-02-SUMMARY.md

diff --git a/.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md b/.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md
new file mode 100644
index 0000000..9038cbb
--- /dev/null
+++ 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