docs(04-03): complete budget pages design consistency plan
- BudgetListPage: PageShell, locale-aware months via Intl.DateTimeFormat, skeleton, i18n month/year/total labels - BudgetDetailPage: semantic tokens, direction-aware diff, group headers, skeleton, PageShell, locale heading - STATE.md: advance plan, record metrics, add decisions, update session - ROADMAP.md: phase 04 marked 3/3 plans complete
This commit is contained in:
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
|
||||
milestone: v1.0
|
||||
milestone_name: milestone
|
||||
status: planning
|
||||
stopped_at: Completed 04-02-PLAN.md
|
||||
last_updated: "2026-03-17T15:17:56.263Z"
|
||||
stopped_at: Completed 04-03-PLAN.md
|
||||
last_updated: "2026-03-17T15:23:32.631Z"
|
||||
last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3
|
||||
progress:
|
||||
total_phases: 4
|
||||
completed_phases: 3
|
||||
completed_phases: 4
|
||||
total_plans: 10
|
||||
completed_plans: 9
|
||||
completed_plans: 10
|
||||
percent: 100
|
||||
---
|
||||
|
||||
@@ -59,6 +59,7 @@ Progress: [████████████████████] 5/5 pla
|
||||
| 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 |
|
||||
| Phase 04-full-app-design-consistency P03 | 2min | 2 tasks | 4 files |
|
||||
|
||||
## Accumulated Context
|
||||
|
||||
@@ -88,6 +89,9 @@ Recent decisions affecting current work:
|
||||
- [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
|
||||
- [Phase 04-full-app-design-consistency]: Direction-aware diff pattern replicated from CategorySection: SPENDING_TYPES array + isSpendingType() covers all 6 category types correctly
|
||||
- [Phase 04-full-app-design-consistency]: TierBadge column removed from BudgetDetailPage to reduce visual noise and align with CategorySection display style
|
||||
- [Phase 04-full-app-design-consistency]: budgets.month/year/total keys added to en.json and de.json — i18next interpolation pattern for translated total labels
|
||||
|
||||
### Pending Todos
|
||||
|
||||
@@ -99,6 +103,6 @@ None yet.
|
||||
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-03-17T15:17:56.261Z
|
||||
Stopped at: Completed 04-02-PLAN.md
|
||||
Last session: 2026-03-17T15:23:32.629Z
|
||||
Stopped at: Completed 04-03-PLAN.md
|
||||
Resume file: None
|
||||
|
||||
113
.planning/phases/04-full-app-design-consistency/04-03-SUMMARY.md
Normal file
113
.planning/phases/04-full-app-design-consistency/04-03-SUMMARY.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
plan: "03"
|
||||
subsystem: ui
|
||||
tags: [react, i18n, react-i18next, tailwind, typescript, design-system]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 04-full-app-design-consistency
|
||||
provides: PageShell component, semantic CSS tokens (text-over-budget/text-on-budget), categoryColors palette
|
||||
|
||||
provides:
|
||||
- BudgetListPage upgraded with PageShell, locale-aware Intl.DateTimeFormat month names, skeleton loading, i18n labels
|
||||
- BudgetDetailPage upgraded with semantic color tokens, direction-aware diff, left-border group headers, PageShell, skeleton
|
||||
- budgets.month/year/total i18n keys in en.json and de.json
|
||||
|
||||
affects: [budget pages, design system completeness, i18n coverage]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- Intl.DateTimeFormat locale-aware month generation via useMemo with i18n.language dependency
|
||||
- Direction-aware diff logic: SPENDING_TYPES array + isSpendingType() helper replaces isIncome boolean
|
||||
- Semantic color tokens (text-over-budget/text-on-budget) replacing hardcoded Tailwind color classes
|
||||
|
||||
key-files:
|
||||
created: []
|
||||
modified:
|
||||
- src/pages/BudgetListPage.tsx
|
||||
- src/pages/BudgetDetailPage.tsx
|
||||
- src/i18n/en.json
|
||||
- src/i18n/de.json
|
||||
|
||||
key-decisions:
|
||||
- "Direction-aware diff pattern replicated from CategorySection: SPENDING_TYPES array + isSpendingType() covers all 6 category types correctly"
|
||||
- "TierBadge column removed from BudgetDetailPage to reduce visual noise and align with CategorySection display style"
|
||||
- "budgets.month/year/total keys added to both en.json and de.json to eliminate all hardcoded English labels in dialogs"
|
||||
- "return null loading state in BudgetListPage placed after useMemo hooks to satisfy Rules of Hooks - hooks declared before early return"
|
||||
|
||||
patterns-established:
|
||||
- "Locale-aware months: useMemo + Array.from(12) + Intl.DateTimeFormat(locale, {month:'long'}) replacing hardcoded MONTHS arrays"
|
||||
- "Budget heading with locale: Intl.DateTimeFormat(i18n.language, {month:'long', year:'numeric'}) replacing toLocaleDateString('en')"
|
||||
- "Skeleton loading in PageShell: replaces return null with typed skeleton rows matching page structure"
|
||||
|
||||
requirements-completed: [UI-BUDGETS-01, UI-RESPONSIVE-01, UI-DESIGN-01]
|
||||
|
||||
# Metrics
|
||||
duration: 2min
|
||||
completed: 2026-03-17
|
||||
---
|
||||
|
||||
# Phase 4 Plan 03: Budget Pages Design Consistency Summary
|
||||
|
||||
**BudgetListPage and BudgetDetailPage upgraded with PageShell, locale-aware Intl.DateTimeFormat month names, semantic color tokens (text-over-budget/text-on-budget), direction-aware diff for all 6 category types, left-border accent group headers, skeleton loading, and i18n translations for month/year/total labels**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 2 min
|
||||
- **Started:** 2026-03-17T15:19:03Z
|
||||
- **Completed:** 2026-03-17T15:21:00Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 4
|
||||
|
||||
## Accomplishments
|
||||
|
||||
- Eliminated hardcoded English `MONTHS` array and `toLocaleDateString("en")` — both pages now use `Intl.DateTimeFormat(locale)` fed by `i18n.language`
|
||||
- Replaced `text-green-600`/`text-red-600`/`text-green-400`/`text-red-400` with `text-on-budget`/`text-over-budget` semantic tokens — zero hardcoded color classes remain
|
||||
- Rewrote `DifferenceCell` with `SPENDING_TYPES` + `isSpendingType()` direction-aware logic covering all 6 category types (spending over when actual > budgeted; income/saving/investment over when actual < budgeted)
|
||||
- Both pages wrapped in `PageShell` — completing consistent header layout across all 9 app pages
|
||||
- `return null` loading states replaced with `PageShell + Skeleton` — no blank screen flash during data load
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Upgrade BudgetListPage with PageShell, locale-aware months, skeleton, and i18n labels** - `89dd3de` (feat)
|
||||
2. **Task 2: Upgrade BudgetDetailPage with semantic tokens, direction-aware diff, PageShell, group headers, and skeleton** - `24d071c` (feat)
|
||||
|
||||
**Plan metadata:** _(pending final commit)_
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `src/pages/BudgetListPage.tsx` - PageShell, locale-aware monthItems useMemo, Skeleton loading, i18n month/year Labels, budgetLabel accepts locale param
|
||||
- `src/pages/BudgetDetailPage.tsx` - PageShell, semantic tokens, direction-aware DifferenceCell, left-border group headers, locale-aware headingLabel, Skeleton loading, TierBadge removed, budgets.total i18n
|
||||
- `src/i18n/en.json` - Added budgets.month, budgets.year, budgets.total keys
|
||||
- `src/i18n/de.json` - Added budgets.month (Monat), budgets.year (Jahr), budgets.total (Gesamt)
|
||||
|
||||
## Decisions Made
|
||||
|
||||
- **Direction-aware diff replicated from CategorySection:** Same `SPENDING_TYPES` array pattern as `CategorySection.tsx` ensures consistent diff direction across dashboard and budget detail views
|
||||
- **TierBadge column removed:** Plan specification to remove tier column for cleaner display — reduces visual noise, aligns with CategorySection which doesn't show tier badges
|
||||
- **i18n keys added for month/year/total:** Enables full German locale support in budget dialogs and footer totals; `{{label}} Total` / `{{label}} Gesamt` pattern uses i18next interpolation
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
- 6 pre-existing lint errors in unrelated files (MonthNavigator.tsx, badge.tsx, button.tsx, sidebar.tsx, useBudgets.ts) — pre-existing, documented in STATE.md, not caused by this plan's changes
|
||||
- `return null` in BudgetDetailPage.tsx line 492 is inside a JSX render callback (`CATEGORY_TYPES.map()`), not a loading state — plan's verification intent (no loading-state nulls) is fully satisfied
|
||||
|
||||
## Next Phase Readiness
|
||||
|
||||
- All 4 phases of the design consistency roadmap are complete
|
||||
- All 9 pages use consistent PageShell layout
|
||||
- All semantic color tokens applied throughout the app
|
||||
- German locale fully supported on all pages including budget dialogs
|
||||
|
||||
---
|
||||
*Phase: 04-full-app-design-consistency*
|
||||
*Completed: 2026-03-17*
|
||||
Reference in New Issue
Block a user