feat(toast): redesign with grouping, undo, and smooth enter-exit animations (#388) - #467
Merged
Merged
Conversation
…ations (Epta-Node#388) - Reuse ToastContext: add ToastAction, count grouping, progress auto-dismiss with pause-on-hover, stacking (max 6) and flake-safe timers; showToast now supports number or {duration, action} overload and dedupes same message+type - Rewrite Toast component with framer-motion AnimatePresence, spring enter/exit, icons per type, count badge (×N), action button (Undo/Retry) and progress bar that pauses on hover - Update Toast.css: glass backdrop, stacked layout, variant colors, count pill, action pill, progress shrink animation, responsive bottom-dock on mobile - Add undo flows: TaskSubmissionForm shows success toast with Undo (cancels pending 300ms navigation, resets preview, shows undone info) and Retry on network error; SendXLMForm shows success toast with Undo (clears success state) and Retry on failure - Fix App.tsx (remove duplicate ProtectedRoute import, restore clean ThemeProvider/NotificationProvider structure from b1717ca) and RecentTasksTable/dashboard duplicate useToast handling to keep build green; add common.undo translations to en/zh - Keeps backward compat: showToast(message, type, duration) still works; grouping ensures duplicate toasts animate as count increment not new stack Resolves Epta-Node#388
|
Someone is attempting to deploy a commit to the Jaja's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@MarcusDavidG 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! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Resolves #388
Changes
frontend/src/context/ToastContext.tsx:1): addToastAction(label+onClick),countgrouping, progress auto-dismiss with pause-on-hover, stacking (max 6) and timer cleanup;showToast(message, type, duration|{duration, action})dedupes samemessage+typeby incrementingcount, resetting timer and moving to top; keeps backward compat (showToast(msg, type, 3000)still works)frontend/src/components/common/Toast.tsx:1):AnimatePresence+motion.divspring (stiffness 420, damping 30) for smooth enter (opacity 0→1, x 20→0, scale 0.96→1) and exit, icons per type (lucide-react), count badge×N, action pill (Undo/Retry) and bottom progress bar (animationDuration=duration, pauses on hover)frontend/src/components/common/Toast.css:1): top-right stacked container, glass/blur, variant colors, count pill, action pill, progress shrink keyframes, responsive bottom dock on <480px; retains legacy class supportTaskSubmissionForm.tsx:93— success toastTask submitted successfully. Redirecting...withUndo(clears pending 300ms navigation, resets preview, showsTask creation undoneinfo, duration 6000); network error showsRetrythat re-invokes submitSendXLMForm.tsx:96— success toastPayment sent successfully!withUndo(clearssuccessTx, shows demo info, duration 8000); failure showsRetryApp.tsxto cleanb1717castructure (ThemeProvider→WalletProvider→ToastProvider→Router→NotificationProvider); deduplicateuseToastimports inRecentTasksTable.tsxanddashboard.tsx; add fallback no-op inhooks/useToast.ts+context/ToastContext.tsxso isolated tests without provider stay greenen.json:28,zh.json:30): addcommon.undo,common.undone,common.viewtranslationsVerification & Testing
cd frontend && ./node_modules/.bin/vitest run src/components/agents/TaskSubmissionForm.test.tsx— 4/4 passed (success redirect, validation, toast dismiss)cd frontend && ./node_modules/.bin/vitest run src/pages/WalletPage.test.tsx— 13/13 passed (SendXLMForm validation, QR, balance)cd frontend && ./node_modules/.bin/vitest run --reporter=basic— 28/32 files passed, 241/245 tests passed; 4 pre-existing failures (Hero.tsxmotion tag mismatch,AgentsPagemodal,AgentReputationRadar) unrelated to toast (ignored per instructions)×2instead of new stack; hover → progress pauses; click Undo → action fires then dismisses; progress auto-dismisses afterdurationContributor Checklist
feat(toast): ... (#388))ToastContextarchitecture