feat(ui): Toast Notification System - Bounty #825

[yw13931835525-cyber]

Bounty: Toast Notification System (#825)

Reward: 150,000 FNDRY

Summary

Implements a reusable toast notification system with React Context and Framer Motion.

Features

• ToastProvider — Context provider managing toast state and auto-dismiss timers
• useToast hook — Clean API for triggering toasts from any component
• 4 variants — success (emerald), error (red), warning (amber), info (blue) with unique Lucide icons
• Auto-dismiss — 5 second countdown with animated progress bar
• Slide-in animation — Top-right entry using Framer Motion spring physics
• Stacking — Multiple toasts stack vertically with popLayout mode
• Accessible — role="alert", aria-live="assertive", aria-atomic="true"
• Manual close — X button on each toast for instant dismissal

Usage

import { ToastProvider, useToast } from "../components/Toast";

// Wrap app with ToastProvider (in main.tsx or App.tsx)
// <ToastProvider>...</ToastProvider>

// In any component:
const { showToast } = useToast();
showToast("Bounty claimed successfully!", "success");
showToast("Connection failed", "error");

Files Changed

• frontend/src/components/Toast.tsx — Full implementation
• frontend/src/hooks/useToast.ts — Hook export

Closes #825