Skip to content

feat: add centralized toast notification system with ToastContext, Toast component, and integrated error displays - #215

Open
waterWang wants to merge 1 commit into
Epta-Node:mainfrom
waterWang:feat/centralized-toast-system-157
Open

feat: add centralized toast notification system with ToastContext, Toast component, and integrated error displays#215
waterWang wants to merge 1 commit into
Epta-Node:mainfrom
waterWang:feat/centralized-toast-system-157

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Implements Issue #157 — Creates a centralized toast/notification system to replace the inconsistent inline error/success message patterns scattered across components.

Changes

New files

  • frontend/src/context/ToastContext.tsx — ToastProvider with queue management, useToast hook, and ToastContainer component
  • frontend/src/components/common/Toast.css — Toast styles with slide-in animation, type variants (success/error/warning/info), and responsive mobile layout

Modified files

  • frontend/src/App.tsx — Wrap app with ToastProvider and import Toast.css
  • frontend/src/components/agents/TaskSubmissionForm.tsx — Replace inline fixed-position error div with centralized useToast('error')
  • frontend/src/pages/dashboard.tsx — Add error toast when network stats fetch fails
  • frontend/src/components/dashboard/RecentTasksTable.tsx — Replace silent console.error with visible error toast

Acceptance Criteria

  • ✅ Toast notifications appear in the top-right corner with slide-in animation
  • ✅ Four toast types: success (green), error (red), warning (amber), info (blue)
  • ✅ Auto-dismiss after 5 seconds with manual dismiss button
  • ✅ TaskSubmissionForm shows error toast instead of inline error div
  • ✅ Dashboard shows error toast on network stats fetch failure
  • ✅ RecentTasksTable shows error toast on fetch failure instead of silent console.error
  • ✅ Responsive: full-width on mobile (< 480px)

Testing

  • TypeScript compiles without new errors (pre-existing @stellar/stellar-sdk errors are unrelated)

…ast component, and integrated error displays

- Create ToastContext.tsx with ToastProvider, useToast hook, and ToastContainer
- Add Toast.css with slide-in animation, responsive styles, and type variants
- Wrap App with ToastProvider and import Toast.css
- Replace inline error div in TaskSubmissionForm with useToast
- Add error toast in dashboard for failed network stats fetch
- Replace console.error in RecentTasksTable with error toast
@vercel

vercel Bot commented Jul 29, 2026

Copy link
Copy Markdown

@water is attempting to deploy a commit to the Jaja's projects Team on Vercel.

A member of the Team first needs to authorize it.

@devJaja
devJaja self-requested a review July 29, 2026 20:24
@devJaja

devJaja commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Solid implementation @waterWang
make the CI frontend to passed

@devJaja

devJaja commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

@waterWang

Link the PR number this PR close

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants