# Phase 3: Interaction Quality and Completeness - Context

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

<domain>
## 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.

</domain>

<decisions>
## 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

</decisions>

<specifics>
## 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

</specifics>

<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>
## Deferred Ideas

None — discussion stayed within phase scope

</deferred>

---

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