feat(frontend): theme a11y + optimistic rollback, balance-sync refactor and animations

[nanlebenthel-web]

Summary

Four small frontend UX enhancements across the Dark Mode Theme Engine and Real-time Balance Sync modules, bundled into one PR.

• [Frontend] Improve screen reader support for Dark Mode Theme Engine #801 — screen reader / a11y for the Dark Mode Theme Engine (ThemeToggle.tsx): respect prefers-reduced-motion (via framer-motion's useReducedMotion) so the icon swap doesn't animate for motion-sensitive users, and removed the redundant role="button" on the native <button> (both flagged by standard a11y audits). Also restored a missing </button> closing tag that prevented the component from compiling (see note below).
• [Frontend] Enable optimistic updates in Dark Mode Theme Engine #802 — optimistic updates in the Dark Mode Theme Engine (theme-context.tsx): the optimistic theme switch already rolled back state + the document class on a failed persist, but left the <meta name="theme-color"> on the new value. The rollback now also reverts the meta theme-color, so no part of the optimistic change lingers after an error.
• [Frontend] Refactor state logic for Real-time Balance Sync #803 — refactor state logic for Real-time Balance Sync (useBalanceSync.ts): consolidated the separate balances/isLoading/lastUpdated state into a single useReducer with explicit FETCH_START/FETCH_SUCCESS/FETCH_ERROR transitions, and surfaced the previously-swallowed error to consumers. Public return shape is unchanged (plus the new error).
• [Frontend] Implement framer-motion animations for Real-time Balance Sync #804 — framer-motion animations for Real-time Balance Sync (SupportPanel.tsx): wrapped the balance status (loading / unfunded / available) in AnimatePresence with keyed motion elements so it cross-fades, and keyed the available figure by value so it animates each time polling syncs a new balance.

Test plan

• npx tsc --noEmit — no type errors in any of the four edited files
• vitest run src/hooks/useBalanceSync.test.ts — passes (2/2) after the reducer refactor
• ThemeToggle.test.tsx / theme-context.test.tsx not runnable — see pre-existing issues below

Pre-existing issues (not introduced by this PR)

While working on these files I found main is currently broken in a few ways unrelated to these issues. I fixed only the one inside a file I was already editing:

• Fixed (required): ThemeToggle.tsx was missing the closing </button> for its main render, so the file did not compile. I added it as part of [Frontend] Improve screen reader support for Dark Mode Theme Engine #801 since the component couldn't render otherwise.
• Left as-is (out of scope): tsc also reports pre-existing syntax errors in src/components/RecentPayments.tsx and src/app/pay/[id]/page.tsx. src/components/ThemeToggle.test.tsx is a 2-line truncated stub (no test suite), and the component test environment fails for theme-context.test.tsx with a jsdom appendChild error on main (verified identical on the unmodified file).

Closes #801
Closes #802
Closes #803
Closes #804

[vercel]

@nanlebenthel-web is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@nanlebenthel-web Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits