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

4.0 KiB Raw Blame History