fix(budget): add loading states and name the expense in delete dialogs

[dccakes]

Daily Product Improvement

Summary

Both the budget category and expense delete confirmation dialogs were silent during their async mutations — the action button was disabled but showed no spinner or label change. The expense delete dialog also showed a generic title ("Delete this expense?") and description ("This cannot be undone.") that gave no indication of which expense was about to be removed. This PR fixes both issues in a single focused file.

Recommendations Reviewed

• Area: src/components/budget/category-card.tsx
  Issue: Delete category and delete expense AlertDialogAction buttons disable on mutation but show no loading spinner or text change — the UI appears frozen during the async operation.
  Recommendation: Import Loader2 and render a spinner + "Deleting…" label while isPending.
  Type: UX/UI
  Priority: Medium
  Effort: Small

• Area: src/components/budget/category-card.tsx
  Issue: The expense delete dialog title ("Delete this expense?") and description ("This cannot be undone.") are generic — they don't identify which expense the user is about to permanently remove.
  Recommendation: Resolve the expense object from category.expenses using deleteExpenseId and surface expense.description in the dialog title and a section-scoped description.
  Type: UX/UI
  Priority: Medium
  Effort: Small

• Area: src/app/(authenicated)/events/_components/manage-event-questions-dialog.tsx
  Issue: The RSVP-disabled warning banner uses hardcoded Tailwind amber colors (border-amber-300 bg-amber-50 text-amber-900) that bypass the design token system and break in dark mode.
  Recommendation: Replace with semantic tokens (bg-warning/10 border-warning/30 text-warning-foreground, or a shadcn/ui callout pattern).
  Type: Frontend cleanup
  Priority: Low
  Effort: Small

• Area: src/components/budget/budget-summary.tsx
  Issue: The BudgetSettingsDialog Save button disables during the mutation but shows no loading indicator.
  Recommendation: Add a Loader2 spinner to the Save button when isPending.
  Type: UX/UI
  Priority: Low
  Effort: Small

• Area: src/app/(authenicated)/settings/page.tsx
  Issue: Section h2 ("Wedding Details") and subsection h3s ("Plugins", "Organization Members", "Connected Apps") use identical font sizes — no visual hierarchy.
  Recommendation: Reduce h3 to text-base or text-sm.
  Type: UX/UI
  Priority: Medium
  Effort: Small
  (Already addressed in PR fix(settings): reduce h3 subsection size to create clear heading hierarchy #237 on a parallel branch)

• Area: src/app/(authenicated)/events/_components/event-card.tsx
  Issue: Both "RSVP Questions" and "Edit" dropdown items use the Pencil icon — identical icons for different actions.
  Recommendation: Replace the RSVP Questions icon with HelpCircle or MessageSquare.
  Type: UX/UI
  Priority: Low
  Effort: Small
  (Already addressed in PR fix(events): replace duplicate Pencil icon on RSVP Questions dropdown item #229 on a parallel branch)

Selected Improvement

Budget delete dialogs — loading states + expense identity in src/components/budget/category-card.tsx.

Added a Loader2 spinner and "Deleting…" label to both the category and expense AlertDialogAction buttons while their mutations are in flight. Also resolved the deleting expense from category.expenses and surfaced its name in the dialog title and a section-scoped description.

Why This Was Selected

The budget section is a core workflow (couples track every payment here). Both delete operations could take a noticeable moment on slow connections, and the silent disabled-button state reads as a frozen UI. The expense dialog's generic text was a usability gap — a user who accidentally triggered the dialog had no way to confirm they were about to remove the right item. The fix is contained to one file, touches no shared infrastructure, and the change is easy to verify visually.

Changes Made

• Imported Loader2 from lucide-react alongside the existing ChevronDown.
• Added deletingExpense computed variable that resolves the expense object from category.expenses using the current deleteExpenseId state.
• Delete category dialog action button: renders a Loader2 spinner and changes label to "Deleting…" while deleteCategory.isPending.
• Delete expense dialog: title now reads Delete "Catering deposit"? (using deletingExpense?.description), description reads "This permanently removes the expense from {category.name}. This cannot be undone."
• Delete expense dialog action button: same loading pattern as category — spinner + "Deleting…" while deleteExpense.isPending.

Files Changed

• src/components/budget/category-card.tsx

Verification

• npx --yes @biomejs/biome lint src/components/budget/category-card.tsx — no issues.
• npx tsc --noEmit --skipLibCheck — zero errors in the changed file (only a pre-existing baseUrl deprecation warning in tsconfig.json).
• Diff reviewed line-by-line: 17 insertions, 5 deletions, all within the two delete AlertDialog blocks.

Future Recommendations

• Hardcoded amber colors in RSVP questions warning banner
  Recommendation: Replace border-amber-300 bg-amber-50 text-amber-900 in manage-event-questions-dialog.tsx with design-token-based classes.
  Priority: Low | Effort: Small | Reason not included: Lower priority than the selected item; dark-mode breakage is subtle since the warning only appears when RSVPs are disabled. | Should become GitHub issue: No

• BudgetSettingsDialog Save button has no loading state
  Recommendation: Add Loader2 spinner to Save button in budget-summary.tsx when isPending.
  Priority: Low | Effort: Small | Reason not included: Separate file, kept daily change focused. | Should become GitHub issue: No

• next-auth is an unused dependency
  Recommendation: Remove next-auth from package.json. The project uses better-auth exclusively; next-auth is dead weight adding ~60 KB+ to build time and potential version conflicts.
  Priority: High | Effort: Small | Reason not included: Removing a package touches deployment and CI; warrants a dedicated PR with verification. | Should become GitHub issue: Yes

• Hardcoded colors in RSVP flow components
  Recommendation: src/components/website/forms/steps/ uses bg-gray-700, text-white, border-gray-400 etc. throughout the public RSVP forms. These bypass the design-token system and will look broken or inconsistent on Aurelia/Voyage templates.
  Priority: High | Effort: Medium | Reason not included: Multi-file, requires design review for how token overrides apply per template. | Should become GitHub issue: Yes

• Legacy old_dashboard route and components
  Recommendation: Remove src/app/old_dashboard/ and src/components/old_dashboard/ entirely; an open PR (chore: remove orphaned old_dashboard code and tests #231) already targets this.
  Priority: Medium | Effort: Small | Reason not included: Already in PR chore: remove orphaned old_dashboard code and tests #231. | Should become GitHub issue: No

• Large god-file components
  Recommendation: guests-view.tsx (999 lines), guest-detail-panel-content.tsx (856 lines), and planning-overview.tsx (645 lines with 7 inline sub-components) should be broken into focused files.
  Priority: Low | Effort: Large | Reason not included: Large refactor, cross-cutting risk. | Should become GitHub issue: Yes

GitHub Issues Created or Proposed

No issues were created in this run. Two issues are proposed for follow-up:

1. [Dependencies] Remove unused next-auth package — the project uses better-auth exclusively; next-auth is dead weight. High priority, Small effort.
2. [RSVP] Replace hardcoded gray/white colors in public RSVP form components with design tokens — required for Aurelia/Voyage template correctness. High priority, Medium effort.

These are noted here for the next daily review cycle to create if not already tracked.

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
scv	Error		Aug 13, 2026 10:23am

[github-actions]

Jest Test Coverage

Coverage Summary

Lines	Statements	Branches	Functions
	81.71% (35129/42990)	82.92% (3734/4503)	68.04% (1037/1524)