SimpleFinanceDash/.planning/phases/03-interaction-quality-and-completeness/03-CONTEXT.md

Phase 3: Interaction Quality and Completeness - Context

Gathered: 2026-03-11 Status: Ready for planning

## Phase Boundary

Every user action and app state gets appropriate visual feedback — loading spinners on form submits, edit affordances on inline-editable cells, save confirmation flashes, delete confirmation dialogs, designed empty states, and pastel-tinted loading skeletons. The app should feel complete and trustworthy, not half-built.

## Implementation Decisions

Edit affordance & save feedback

• Pencil icon appears on hover only, subtle opacity fade-in — not always visible
• Pencil positioned to the right of the cell value
• Save confirmation: soft green row highlight using --success token, fades over ~600ms, applies to entire row
• Save failure: red flash using --destructive token, value reverts to original — no toast, no modal
• All changes go into InlineEditCell.tsx (already extracted in Phase 1)

Empty states & loading skeletons

• Empty state style: icon + text only (lucide-react icon, no custom illustrations)
• Shared template structure (icon + heading + subtext + CTA button), unique content per section
• CTA tone: direct action — "Create your first budget" / "Add a category" — no fluff
• Loading skeletons tinted per section using palette.ts light shades (bills skeleton uses bill light shade, etc.)

Spinner placement & style

• Submit buttons replace text with spinner while loading (button maintains width via min-width)
• Button disabled during loading to prevent double-submit
• All four forms get spinners: Login, Register, Budget Create, Budget Edit
• Use existing shadcn spinner.tsx component as-is

Delete confirmation dialog

• Tone: clear and factual — "Delete [category name]? This cannot be undone."
• Confirm button: "Delete" in destructive variant (red), paired with neutral "Cancel"
• Delete button shows spinner + disables during API call (consistent with form submit pattern)
• Scope: category deletion only (per IXTN-05), not budget deletion

Claude's Discretion

• Exact animation timing and easing curves for hover/flash transitions
• Empty state icon choices per section (appropriate lucide-react icons)
• Skeleton layout structure (number of rows, widths) per section
• Whether to extract a shared EmptyState component or inline per page

## Specific Ideas

• Save flash should use the same --success token established in Phase 1 for positive amounts — visual consistency
• Error flash uses --destructive token — same red as auth Alert errors from Phase 2
• Skeleton tinting reinforces the palette.ts color system from Phase 1 — each section previews its eventual color while loading

<code_context>

Existing Code Insights

Reusable Assets

• InlineEditCell.tsx: Shared edit component — pencil icon and save flash go here
• ui/spinner.tsx: Already installed, ready for button integration
• ui/skeleton.tsx: Already installed, needs tint customization via className
• ui/dialog.tsx: Already installed for delete confirmation
• lib/palette.ts: Light shades available for skeleton tinting per section
• ui/alert.tsx: Destructive variant installed in Phase 2

Established Patterns

• amountColorClass(): Only allowed way to color amounts — save flash should not interfere
• CSS variable customization: All shadcn theming via --token overrides, never edit ui/ source files
• cn() utility for conditional className merging

Integration Points

• LoginPage.tsx / RegisterPage.tsx: Add spinner to submit buttons
• BudgetSetup.tsx: Add spinner to create/edit form submit
• CategoriesPage.tsx: Add delete confirmation dialog, empty state
• DashboardPage.tsx: Add empty state, loading skeletons per section
• BillsTracker.tsx, VariableExpenses.tsx, DebtTracker.tsx: Loading skeletons with section tinting

</code_context>

## Deferred Ideas

None — discussion stayed within phase scope

---

Phase: 03-interaction-quality-and-completeness Context gathered: 2026-03-11