Jean-Luc Makiola
57c4963a75
- Add 03-03-SUMMARY.md for row flash feedback and pastel-tinted skeleton plan - Update STATE.md: progress 100%, new decisions, session record - Update ROADMAP.md: Phase 03 marked Complete (4/4 plans with summaries)
86 lines
4.5 KiB
Markdown
86 lines
4.5 KiB
Markdown
---
|
|
phase: 03-interaction-quality-and-completeness
|
|
plan: 03
|
|
subsystem: frontend/components
|
|
tags: [flash-feedback, skeleton, inline-edit, ux, palette]
|
|
dependency_graph:
|
|
requires: [03-01, 03-00]
|
|
provides: [row-flash-feedback, tinted-skeletons]
|
|
affects: [BillsTracker, VariableExpenses, DebtTracker, DashboardPage]
|
|
tech_stack:
|
|
added: []
|
|
patterns:
|
|
- color-mix() inline style for ephemeral flash colors (avoids Tailwind class generation issues)
|
|
- palette.*.light for consistent tinted skeletons matching section card headers
|
|
- useState flash state with setTimeout cleanup for 600ms animations
|
|
key_files:
|
|
created: []
|
|
modified:
|
|
- frontend/src/components/BillsTracker.tsx
|
|
- frontend/src/components/VariableExpenses.tsx
|
|
- frontend/src/components/DebtTracker.tsx
|
|
- frontend/src/pages/DashboardPage.tsx
|
|
decisions:
|
|
- triggerFlash uses separate flashRowId/errorRowId state (not a union) for clarity and concurrent flash isolation
|
|
- Tinted skeleton shows when items array is empty (early return pattern) — distinct from DashboardPage loading skeleton
|
|
- DebtTracker previously returned null for empty state; now shows tinted skeleton instead
|
|
key_decisions:
|
|
- triggerFlash uses two separate state vars (flashRowId/errorRowId) for success and error to avoid race conditions
|
|
- Empty tracker sections show tinted skeleton (not null) — section is always visible, just shows placeholders when no items
|
|
requirements: [IXTN-03, STATE-03]
|
|
metrics:
|
|
duration: 5m
|
|
completed_date: "2026-03-11"
|
|
tasks_completed: 2
|
|
tasks_total: 2
|
|
files_modified: 4
|
|
---
|
|
|
|
# Phase 03 Plan 03: Row Flash Feedback and Tinted Skeletons Summary
|
|
|
|
**One-liner:** Row-level green/red flash on inline edit save and palette-tinted loading skeletons across all three tracker components and the dashboard.
|
|
|
|
## What Was Built
|
|
|
|
### Task 1: Row Flash Feedback (BillsTracker, VariableExpenses, DebtTracker)
|
|
|
|
All three tracker components received:
|
|
- `flashRowId` and `errorRowId` state vars (both `string | null`)
|
|
- `triggerFlash(id, type)` helper that sets the appropriate ID and clears it after 600ms via `setTimeout`
|
|
- Inline `style` on each data `<TableRow>` using `color-mix(in oklch, var(--success/--destructive) 20%, transparent)` — avoids relying on Tailwind JIT to generate flash classes at runtime
|
|
- `onSaveSuccess` and `onSaveError` callbacks wired to each `<InlineEditCell>`, calling `triggerFlash` with the item's ID
|
|
|
|
The totals row is untouched. Only data rows get the flash style.
|
|
|
|
### Task 2: Tinted Skeletons (DashboardPage + tracker empty states)
|
|
|
|
**DashboardPage:** The loading skeleton block (shown before any budget list loads) now uses palette-tinted Skeleton elements:
|
|
- `palette.saving.light` for the main overview skeleton
|
|
- `palette.bill.light` / `palette.variable_expense.light` in a 2-col grid row
|
|
- `palette.debt.light` / `palette.investment.light` in a second 2-col grid row
|
|
|
|
**Tracker empty states:** Each tracker now renders a Card with a tinted skeleton placeholder instead of returning `null` (DebtTracker) or an empty table (BillsTracker, VariableExpenses) when the budget has no items of that category type:
|
|
- BillsTracker: 3 skeleton rows tinted with `palette.bill.light`
|
|
- VariableExpenses: 3 skeleton rows tinted with `palette.variable_expense.light`
|
|
- DebtTracker: 3 skeleton rows tinted with `palette.debt.light`
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-combined Changes
|
|
|
|
**Task 2 tracker skeleton was combined with Task 1:** The plan listed skeleton addition as part of Task 2, but since Task 1 already touched all three tracker files, the skeleton empty-state logic was added in the same edit pass to avoid double-touching files. Both tasks' tracker changes were committed together in Task 1's commit. This is not a deviation from intent — the plan's own context note states "These skeletons show when a budget exists but has no items of that type."
|
|
|
|
**[Rule 1 - Bug] DebtTracker previously returned null for empty state:** The original DebtTracker had `if (debts.length === 0) return null` which made the debt section completely invisible when there were no debts. Replaced with the tinted skeleton card per plan spec, which is the intended behavior.
|
|
|
|
## Self-Check: PASSED
|
|
|
|
| Item | Status |
|
|
|------|--------|
|
|
| frontend/src/components/BillsTracker.tsx | FOUND |
|
|
| frontend/src/components/VariableExpenses.tsx | FOUND |
|
|
| frontend/src/components/DebtTracker.tsx | FOUND |
|
|
| frontend/src/pages/DashboardPage.tsx | FOUND |
|
|
| 03-03-SUMMARY.md | FOUND |
|
|
| Commit 4ef10da (Task 1) | FOUND |
|
|
| Commit c60a865 (Task 2) | FOUND |
|