SimpleFinanceDash/.planning/phases/05-design-system-token-rework/05-02-PLAN.md

---
phase: 05-design-system-token-rework
plan: 02
type: execute
wave: 1
depends_on: []
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
autonomous: true
requirements:
  - DS-01
  - DS-03

must_haves:
  truths:
    - "PageShell gap is gap-8 providing generous header-to-content spacing on all pages"
    - "All shared component hardcoded rounded-* classes are removed"
    - "DashboardSkeleton spacing matches the upgraded gap/space-y values"
    - "No pill-shaped skeleton placeholders remain in shared components"
  artifacts:
    - path: "src/components/shared/PageShell.tsx"
      provides: "Layout shell with gap-8 section spacing"
      contains: "gap-8"
    - path: "src/components/dashboard/DashboardSkeleton.tsx"
      provides: "Dashboard loading skeleton with sharp corners and upgraded spacing"
    - path: "src/components/dashboard/CategorySection.tsx"
      provides: "Category section trigger without rounded-md"
    - path: "src/components/dashboard/charts/ChartEmptyState.tsx"
      provides: "Chart empty state without rounded-lg"
    - path: "src/components/QuickAddPicker.tsx"
      provides: "Quick add picker without rounded-sm or rounded-full"
  key_links:
    - from: "src/components/shared/PageShell.tsx"
      to: "all 9 pages"
      via: "PageShell wrapper component"
      pattern: "gap-8"
---

<objective>
Remove hardcoded rounded-* classes and upgrade spacing in shared components (PageShell, DashboardSkeleton, CategorySection, ChartEmptyState, QuickAddPicker).

Purpose: These shared components are used across multiple pages. Fixing them first ensures consistent sharp corners and generous spacing everywhere they appear.
Output: 5 modified component files with no hardcoded rounding and upgraded spacing values.
</objective>

<execution_context>
@.planning/phases/05-design-system-token-rework/05-RESEARCH.md
@.planning/phases/05-design-system-token-rework/05-PATTERNS.md
</execution_context>

<context>
@.planning/ROADMAP.md
@.planning/STATE.md

<interfaces>
From src/components/shared/PageShell.tsx (line 15):
```tsx
<div className="flex flex-col gap-6">  <!-- gap-6 --> gap-8 -->
```

From src/components/dashboard/DashboardSkeleton.tsx:
```tsx
// Line 20: <div className="flex flex-col gap-6">          -- gap-8
// Line 22: <div className="grid gap-4 sm:grid-cols-2..."> -- gap-6
// Line 29: <div className="grid gap-6 md:grid-cols-2..."> -- gap-8
// Line 35,43,51: <Skeleton className="h-[250px] w-full rounded-md" /> -- remove rounded-md
// Line 59: <div className="... rounded-md border-l-4 ..."> -- remove rounded-md
// Lines 63-64: <Skeleton className="h-5 w-24 rounded-full" /> -- remove rounded-full
```

From src/components/dashboard/CategorySection.tsx (line 73):
```tsx
<button className="... rounded-md border-l-4 bg-card px-4 py-3 ...">
```

From src/components/dashboard/charts/ChartEmptyState.tsx (line 12):
```tsx
className={cn("... rounded-lg border border-dashed ...", className)}
```

From src/components/QuickAddPicker.tsx:
```tsx
// Line 156: className="... rounded-sm px-2 py-1.5 ..."
// Line 201: <div className="size-2 rounded-full" .../>
```
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Upgrade PageShell spacing and remove rounded-* from DashboardSkeleton</name>
  <files>src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx</files>
  <read_first>src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx</read_first>
  <action>
1. In PageShell.tsx line 15: Change `gap-6` to `gap-8` in the className string `"flex flex-col gap-6"`.

2. In DashboardSkeleton.tsx, make all of the following changes:
   - Line 20: Change `gap-6` to `gap-8` in `"flex flex-col gap-6"`
   - Line 22: Change `gap-4` to `gap-6` in `"grid gap-4 sm:grid-cols-2 lg:grid-cols-3"`
   - Line 29: Change `gap-6` to `gap-8` in `"grid gap-6 md:grid-cols-2 lg:grid-cols-3"`
   - Lines 35, 43, 51: Remove `rounded-md` from `<Skeleton className="h-[250px] w-full rounded-md" />` (3 occurrences). Result: `className="h-[250px] w-full"`
   - Line 59: Remove `rounded-md` from the div className `"flex items-center gap-3 rounded-md border-l-4 ..."`. The border-l-4 remains.
   - Lines 63, 64: Remove `rounded-full` from `<Skeleton className="h-5 w-24 rounded-full" />` (2 occurrences). Result: `className="h-5 w-24"`
  </action>
  <verify>
    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
  </verify>
  <acceptance_criteria>
    - PageShell.tsx contains `gap-8` and does NOT contain `gap-6`
    - DashboardSkeleton.tsx does NOT contain `rounded-md` or `rounded-full`
    - DashboardSkeleton.tsx contains `gap-8` (2 occurrences) and `gap-6` (1 occurrence for the summary cards grid)
    - `bun run build` exits 0
  </acceptance_criteria>
  <done>PageShell uses gap-8 for header-to-content spacing; DashboardSkeleton has no hardcoded rounding and upgraded spacing</done>
</task>

<task type="auto">
  <name>Task 2: Remove rounded-* from CategorySection, ChartEmptyState, and QuickAddPicker</name>
  <files>src/components/dashboard/CategorySection.tsx, src/components/dashboard/charts/ChartEmptyState.tsx, src/components/QuickAddPicker.tsx</files>
  <read_first>src/components/dashboard/CategorySection.tsx, src/components/dashboard/charts/ChartEmptyState.tsx, src/components/QuickAddPicker.tsx</read_first>
  <action>
1. In CategorySection.tsx line 73: Remove `rounded-md` from the button className. The className goes from `"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"` to `"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"`.

2. In ChartEmptyState.tsx line 12: Remove `rounded-lg` from the cn() className string. The class goes from `"flex min-h-[250px] w-full items-center justify-center rounded-lg border border-dashed ..."` to `"flex min-h-[250px] w-full items-center justify-center border border-dashed ..."`.

3. In QuickAddPicker.tsx:
   - Line 156: Remove `rounded-sm` from the picker item className. Goes from `"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 ..."` to `"flex w-full items-center gap-2 px-2 py-1.5 ..."`.
   - Line 201: Remove `rounded-full` from the category dot className. Goes from `className="size-2 rounded-full"` to `className="size-2"`.
  </action>
  <verify>
    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
  </verify>
  <acceptance_criteria>
    - CategorySection.tsx does NOT contain `rounded-md`
    - ChartEmptyState.tsx does NOT contain `rounded-lg`
    - QuickAddPicker.tsx does NOT contain `rounded-sm` or `rounded-full`
    - `bun run build` exits 0
  </acceptance_criteria>
  <done>All 3 shared components have no hardcoded rounding classes; sharp corners enforced everywhere they appear</done>
</task>

</tasks>

<threat_model>
## Trust Boundaries

No trust boundaries affected. This plan modifies CSS class strings in component JSX only. No user input handling, no data access, no authentication changes.

## STRIDE Threat Register

| Threat ID | Category | Component | Disposition | Mitigation Plan |
|-----------|----------|-----------|-------------|-----------------|
| — | — | — | — | No applicable threats — pure CSS class changes |
</threat_model>

<verification>
- `bun run build` passes after both tasks
- grep confirms no `rounded-md`, `rounded-full`, `rounded-lg`, `rounded-sm` remain in the 5 modified files
- grep confirms `gap-8` in PageShell.tsx
</verification>

<success_criteria>
- PageShell provides gap-8 section spacing to all pages
- DashboardSkeleton has sharp skeletons and upgraded spacing
- CategorySection trigger button has no rounded corners
- ChartEmptyState border has no rounded corners
- QuickAddPicker items and dots have no rounded corners
- Build passes cleanly
</success_criteria>

<output>
After completion, create `.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md`
</output>