COMPONENT: Toast / Snackbar Component

[nayan458]

Task: Toast / Snackbar Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: M

Component Type

• Design system (no API calls, pure props)

Props Interface

interface Toast {
  id:        string;
  message:   string;
  variant?:  'success' | 'error' | 'warning' | 'info';
  duration?: number;      // ms before auto-dismiss, default 2500
  action?:   {
    label:   string;
    onClick: () => void;
  };
}

// Imperative API (via Zustand toastStore) — not a prop
toast.success('Action applied to RPT-0003');
toast.error('Failed to moderate report');
toast.warning('Another moderator is reviewing this');

Variants / States

Variant	Usage in your app
success	Action applied (Remove, Ban, Warn, Dismiss)
error	API failure, invalid state transition
warning	Claim-lock — another moderator is reviewing
info	AI screening triggered, processing
With action	"Undo" link for reversible actions (future)
Queue	Multiple toasts stack vertically, each dismisses independently

Acceptance Criteria

• Rendered via createPortal fixed to top-right of viewport
• Multiple toasts stack without overlapping, newest on top
• Auto-dismisses after duration ms with a progress bar animation
• Manual dismiss on click of × button
• action button renders inline if provided
• Entrance animation: slide in from right. Exit: fade + slide out.
• Accessible — uses role="alert" so screen readers announce it
• Imperative API via useToast() hook backed by a Zustand slice — no prop drilling
• Zero hardcoded hex values
• Storybook stories: all 4 variants, with action, stacked queue

Notes

• Consumed via useToast() hook, not by passing props — <ToastContainer /> is placed once in root layout, individual toasts are triggered imperatively from anywhere
• ModerationQueue calls toast.success() after every moderation action — this must work without re-rendering the queue