Skip to content

feat: Add Toaster notification system using @radix-ui/react-toast - #32

Open
derekliutao-cmd wants to merge 2 commits into
coopfinance:mainfrom
derekliutao-cmd:feat/toaster-system
Open

feat: Add Toaster notification system using @radix-ui/react-toast#32
derekliutao-cmd wants to merge 2 commits into
coopfinance:mainfrom
derekliutao-cmd:feat/toaster-system

Conversation

@derekliutao-cmd

Copy link
Copy Markdown
Contributor

Summary

Closes #11

Implements a full toast notification system as specified in the issue.

Changes

src/hooks/use-toast.ts (new file) — Zustand-based toast store:

  • toast.success(), toast.error(), toast.info() methods
  • Auto-dismiss after 5 seconds
  • dismissToast(id) for manual dismissal

src/components/ui/toaster.tsx — Full implementation replacing the stub:

  • Wired to @radix-ui/react-toast (already in package.json)
  • Renders active toasts from useToast() hook
  • Bottom-right corner positioning via ToastPrimitives.Viewport
  • Success (green) / Error (red) / Info (blue) variants with icons
  • Error toasts have role="alert" for accessibility
  • Slide-in/fade-out animations
  • Close button on each toast

Acceptance Criteria Met

  • Toaster component functional using @radix-ui/react-toast
  • useToast() hook with .success(), .error(), .info() methods
  • Toasts auto-dismiss after 5 seconds
  • Toasts appear in bottom-right corner
  • Accessible (role="alert" for errors)

Uses existing project dependencies only (zustand, @radix-ui/react-toast, lucide-react).

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.

[Frontend] Add Toaster notification system using @radix-ui/react-toast

1 participant