docs(03-01): complete collapsible sections foundations plan
This commit is contained in:
@@ -136,5 +136,5 @@ 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 | 0/2 | Planning complete | - |
|
||||
| 3. Collapsible Dashboard Sections | 1/2 | In Progress| |
|
||||
| 4. Full-App Design Consistency | 0/TBD | Not started | - |
|
||||
|
||||
@@ -2,16 +2,16 @@
|
||||
gsd_state_version: 1.0
|
||||
milestone: v1.0
|
||||
milestone_name: milestone
|
||||
status: executing
|
||||
stopped_at: Completed 02-03-PLAN.md — Phase 2 complete
|
||||
last_updated: "2026-03-16T13:29:30.468Z"
|
||||
last_activity: 2026-03-16 — Completed 02-01 (Month Navigation and Chart Infrastructure)
|
||||
status: planning
|
||||
stopped_at: Completed 03-01-PLAN.md — CategorySection, CollapsibleSections, carryover display built
|
||||
last_updated: "2026-03-17T14:09:55.087Z"
|
||||
last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3
|
||||
progress:
|
||||
total_phases: 4
|
||||
completed_phases: 2
|
||||
total_plans: 5
|
||||
completed_plans: 5
|
||||
percent: 80
|
||||
total_plans: 7
|
||||
completed_plans: 6
|
||||
percent: 100
|
||||
---
|
||||
|
||||
# Project State
|
||||
@@ -55,6 +55,7 @@ Progress: [████████████████████] 5/5 pla
|
||||
| Phase 02 P02 | 2min | 2 tasks | 4 files |
|
||||
| Phase 02 P01 | 2min | 2 tasks | 4 files |
|
||||
| Phase 02-dashboard-charts-and-layout P03 | 3min | 2 tasks | 2 files |
|
||||
| Phase 03-collapsible-dashboard-sections P01 | 2min | 2 tasks | 8 files |
|
||||
|
||||
## Accumulated Context
|
||||
|
||||
@@ -76,6 +77,9 @@ Recent decisions affecting current work:
|
||||
- [Phase 02-03]: useMemo hooks declared before early returns (Rules of Hooks compliance)
|
||||
- [Phase 02-03]: QuickAdd button placed below chart grid (SummaryStrip -> charts -> QuickAdd ordering)
|
||||
- [Phase 02-03]: Chart grid uses md:grid-cols-2 lg:grid-cols-3 responsive breakpoints
|
||||
- [Phase 03-collapsible-dashboard-sections]: CategorySection uses controlled open/onOpenChange pattern — Plan 02 will own open state in DashboardContent
|
||||
- [Phase 03-collapsible-dashboard-sections]: Direction-aware diff: spending types (bill, variable_expense, debt) over when actual > budgeted; income/saving/investment over when actual < budgeted
|
||||
- [Phase 03-collapsible-dashboard-sections]: CollapsibleContent wired to CSS keyframes via data-[state=open]:animate-collapsible-open Tailwind variant
|
||||
|
||||
### Pending Todos
|
||||
|
||||
@@ -87,6 +91,6 @@ None yet.
|
||||
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-03-16
|
||||
Stopped at: Phase 2 complete, ready to plan Phase 3
|
||||
Last session: 2026-03-17T14:09:55.085Z
|
||||
Stopped at: Completed 03-01-PLAN.md — CategorySection, CollapsibleSections, carryover display built
|
||||
Resume file: None
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
phase: 03-collapsible-dashboard-sections
|
||||
plan: 01
|
||||
subsystem: ui
|
||||
tags: [react, tailwind, radix-ui, i18n, collapsible, dashboard]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 02-dashboard-charts-and-layout
|
||||
provides: StatCard, SummaryStrip, DashboardPage foundation
|
||||
provides:
|
||||
- CSS animation tokens for collapsible-open/close (index.css)
|
||||
- i18n keys for sections and carryover in en.json and de.json
|
||||
- StatCard with optional subtitle/subtitleClassName props
|
||||
- SummaryStrip with carryoverSubtitle/carryoverIsNegative on balance
|
||||
- DashboardPage carryover subtitle computed and threaded to SummaryStrip
|
||||
- CategorySection presentational collapsible component with header badges and 4-column table
|
||||
- CollapsibleSections container rendering ordered CategorySection list
|
||||
affects:
|
||||
- 03-02 (Plan 02 will wire CollapsibleSections into DashboardContent)
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- "Presentational components accept t() as prop for i18n decoupling"
|
||||
- "Direction-aware difference logic: spending types over when actual > budget; income/saving/investment over when actual < budget"
|
||||
- "Controlled open state pattern: openSections Record<string,boolean> + onToggleSection callback"
|
||||
|
||||
key-files:
|
||||
created:
|
||||
- src/components/dashboard/CategorySection.tsx
|
||||
- src/components/dashboard/CollapsibleSections.tsx
|
||||
modified:
|
||||
- src/index.css
|
||||
- src/i18n/en.json
|
||||
- src/i18n/de.json
|
||||
- src/components/dashboard/StatCard.tsx
|
||||
- src/components/dashboard/SummaryStrip.tsx
|
||||
- src/pages/DashboardPage.tsx
|
||||
|
||||
key-decisions:
|
||||
- "CategorySection accepts controlled open/onOpenChange for external state management (Plan 02 will own state)"
|
||||
- "Spending types (bill, variable_expense, debt): diff = budgeted - actual, over when actual > budgeted"
|
||||
- "Income/saving/investment: diff = actual - budgeted, over when actual < budgeted"
|
||||
- "CollapsibleContent uses data-[state=open]:animate-collapsible-open Tailwind variant tied to CSS keyframes"
|
||||
|
||||
patterns-established:
|
||||
- "Collapsible animation: data-[state=open]:animate-collapsible-open / data-[state=closed]:animate-collapsible-close"
|
||||
- "Category color accent: borderLeftColor via categoryColors[type] inline style"
|
||||
|
||||
requirements-completed: [UI-DASH-01, UI-COLLAPSE-01]
|
||||
|
||||
# Metrics
|
||||
duration: 2min
|
||||
completed: 2026-03-17
|
||||
---
|
||||
|
||||
# Phase 3 Plan 01: Collapsible Dashboard Sections (Foundations) Summary
|
||||
|
||||
**Carryover display wired from DashboardPage through SummaryStrip to StatCard; CategorySection and CollapsibleSections built as pure presentational components with direction-aware difference logic and CSS animation tokens**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 2 min
|
||||
- **Started:** 2026-03-17T14:05:37Z
|
||||
- **Completed:** 2026-03-17T14:07:32Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 8 (6 modified, 2 created)
|
||||
|
||||
## Accomplishments
|
||||
- CSS animation tokens (`collapsible-open` / `collapsible-close`) and keyframes added to `index.css`
|
||||
- i18n keys for `dashboard.sections` and `dashboard.carryoverIncludes` added to both `en.json` and `de.json`
|
||||
- `StatCard` extended with optional `subtitle` / `subtitleClassName` props rendered below the value
|
||||
- `SummaryStrip` balance prop extended with `carryoverSubtitle` / `carryoverIsNegative`; threaded to `StatCard`
|
||||
- `DashboardPage` computes carryover subtitle from `budget.carryover_amount` and passes to `SummaryStrip`
|
||||
- `CategorySection` built: left border accent, chevron rotation, budgeted/actual badges, 4-column line-item table with footer totals, direction-aware color coding
|
||||
- `CollapsibleSections` built: thin container with controlled open state, renders ordered `CategorySection` list
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Add CSS animation tokens, i18n keys, and carryover display** - `21ce6d8` (feat)
|
||||
2. **Task 2: Build CategorySection and CollapsibleSections components** - `f30b846` (feat)
|
||||
|
||||
**Plan metadata:** (docs commit — see below)
|
||||
|
||||
## Files Created/Modified
|
||||
- `src/index.css` - Added collapsible keyframes and animation CSS tokens
|
||||
- `src/i18n/en.json` - Added `dashboard.sections` and `dashboard.carryoverIncludes` keys
|
||||
- `src/i18n/de.json` - Added German equivalents for sections and carryover keys
|
||||
- `src/components/dashboard/StatCard.tsx` - Added optional `subtitle` / `subtitleClassName` props
|
||||
- `src/components/dashboard/SummaryStrip.tsx` - Extended `balance` type with carryover fields
|
||||
- `src/pages/DashboardPage.tsx` - Computed `carryoverSubtitle` / `carryoverIsNegative` and passed to `SummaryStrip`
|
||||
- `src/components/dashboard/CategorySection.tsx` - New: presentational collapsible section component
|
||||
- `src/components/dashboard/CollapsibleSections.tsx` - New: container rendering ordered CategorySection list
|
||||
|
||||
## Decisions Made
|
||||
- `CategorySection` uses controlled `open`/`onOpenChange` pattern — Plan 02 will own the open state in `DashboardContent`
|
||||
- Spending types (`bill`, `variable_expense`, `debt`): over-budget when `actual > budgeted`
|
||||
- Income/saving/investment types: over-budget when `actual < budgeted` (under-earning is the "over" condition)
|
||||
- `CollapsibleContent` wired to CSS keyframes via `data-[state=open]:animate-collapsible-open` Tailwind variant
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
None. Build passed cleanly. The 6 pre-existing lint errors (MonthNavigator, badge, button, sidebar, useBudgets) were present before this plan and are unchanged — documented in STATE.md as a known concern.
|
||||
|
||||
## User Setup Required
|
||||
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
- All presentational building blocks are ready for Plan 02 to wire into `DashboardContent`
|
||||
- `CollapsibleSections` expects: `groups[]`, `currency`, `openSections: Record<string,boolean>`, `onToggleSection`, `t`
|
||||
- Plan 02 needs to: group `items` by `CategoryType`, compute per-group totals, manage `openSections` state in `DashboardContent`
|
||||
|
||||
---
|
||||
*Phase: 03-collapsible-dashboard-sections*
|
||||
*Completed: 2026-03-17*
|
||||
Reference in New Issue
Block a user