94 lines
4.0 KiB
Markdown
94 lines
4.0 KiB
Markdown
# 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*
|