mirror of
https://github.com/whekin/household-bot.git
synced 2026-03-31 17:44:03 +00:00
whekin
488a488137
Mini App Home Screen: - Add 'Record Payment' button to utilities and rent period cards - Pre-fill payment amount with member's share (rentShare/utilityShare) - Modal dialog with amount input and currency display - Toast notifications for copy and payment success/failure feedback Copy Button Improvements: - Increase spacing between icon and text (4px → 8px) - Add hover background and padding for better touch target - Green background highlight when copied (in addition to icon color change) - Toast notification appears when copying any value Backend: - Add /api/miniapp/payments/add endpoint for quick payments - Payment notifications sent to 'reminders' topic in Telegram - Include member name, payment type, amount, and period in notification Files: - New: apps/miniapp/src/components/ui/toast.tsx - Modified: apps/miniapp/src/routes/home.tsx, apps/miniapp/src/index.css, apps/miniapp/src/theme.css, apps/miniapp/src/i18n.ts, apps/bot/src/miniapp-billing.ts, apps/bot/src/server.ts Quality Gates: ✅ format, lint, typecheck, build, test Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
3.2 KiB
3.2 KiB
Plan - UI Tweaks and Reactive Updates
This plan outlines the changes needed to ensure data reactivity after updates, improve chart visibility with better colors, and enhance the "Latest activity" section with a "show more" functionality.
1. Reactive Data Updates
Analysis
Currently, when a purchase or payment is added in ledger.tsx, refreshHouseholdData(true, true) is called. This function invalidates the TanStack Query cache in session-context.tsx, but DashboardProvider stores data in local signals (setDashboard) and does not automatically refetch when the cache is invalidated.
Proposed Changes
- session-context.tsx:
- Add a way to register "data listeners" or simply a list of refresh callbacks.
- Update
refreshHouseholdDatato execute these callbacks.
- dashboard-context.tsx:
- In
DashboardProvider, registerloadDashboardDataas a listener in the session context on mount.
- In
- App.tsx:
- Ensure
DashboardProvideris correctly integrated with the session's refresh mechanism.
- Ensure
2. Chart Colors Improvement
Analysis
Current chart colors in dashboard-context.tsx and theme.css are somewhat similar, making them hard to distinguish.
Proposed Changes
- dashboard-context.tsx:
- Update
chartPalettewith more distinct, high-contrast colors. - Proposed palette:
#3ecf8e(Emerald),#3b82f6(Blue),#ef4444(Red),#f59e0b(Amber),#8b5cf6(Violet),#ec4899(Pink).
- Update
- theme.css:
- Update
--chart-1through--chart-6variables to match the new palette for consistency across the app.
- Update
3. "Show More" for Latest Activity
Analysis
The "Latest activity" section in home.tsx currently only shows the first 5 entries of the ledger.
Proposed Changes
- home.tsx:
- Add a local signal
showAllActivity(defaultfalse). - Update the
Forloop to show eitherslice(0, 5)or the fullledgerbased on the signal. - Add a "Show more" button that appears if
ledger.length > 5. - Style the button to match the app's UI.
- Add a local signal
- i18n.ts:
- Add translations for "Show more" and "Show less" (or "Collapse").
Verification Plan
Automated Tests
- Since this is mostly UI/UX, manual verification in the browser is preferred.
- Check if
invalidateQueriesis called after adding a purchase (can be checked via network tab).
Manual Verification
- Reactivity: Add a purchase and verify that the dashboard balances and "Latest activity" update immediately without manual page refresh.
- Chart Colors: Navigate to the balances page and verify that chart slices are easily distinguishable.
- Show More: On the home page, ensure "Show more" appears when there are > 5 activities and correctly expands the list.