feat: Add toast notification system (Bounty #825)

frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import React, { Suspense } from 'react';
+import { ToastProvider } from './components/ui';
 import { Routes, Route } from 'react-router-dom';
 import { AuthGuard } from './components/auth/AuthGuard';
 
@@ -23,7 +24,8 @@ function PageLoader() {
 
 export default function App() {
   return (
-    <Suspense fallback={<PageLoader />}>
+    <ToastProvider>
+      <Suspense fallback={<PageLoader />}>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/leaderboard" element={<LeaderboardPage />} />
@@ -52,3 +54,4 @@ export default function App() {
     </Suspense>
   );
 }
+

frontend/src/components/ui/Toast.tsx

@@ -0,0 +1,97 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from 'lucide-react';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  type: ToastType;
+  message: string;
+}
+
+interface ToastContextValue {
+  showToast: (type: ToastType, message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue>({ showToast: () => {} });
+
+export const useToast = () => useContext(ToastContext);
+
+const TOAST_STYLES: Record<ToastType, { bg: string; border: string; icon: React.ReactNode }> = {
+  success: {
+    bg: 'bg-emerald-950/90',
+    border: 'border-emerald-500',
+    icon: <CheckCircle className="w-5 h-5 text-emerald-400" />
+  },
+  error: {
+    bg: 'bg-red-950/90',
+    border: 'border-red-500',
+    icon: <AlertCircle className="w-5 h-5 text-red-400" />
+  },
+  warning: {
+    bg: 'bg-amber-950/90',
+    border: 'border-amber-500',
+    icon: <AlertTriangle className="w-5 h-5 text-amber-400" />
+  },
+  info: {
+    bg: 'bg-blue-950/90',
+    border: 'border-blue-500',
+    icon: <Info className="w-5 h-5 text-blue-400" />
+  }
+};
+
+function ToastItem({ toast, onRemove }: { toast: Toast; onRemove: (id: string) => void }) {
+  const { bg, border, icon } = TOAST_STYLES[toast.type];
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => onRemove(toast.id), 5000);
+    return () => clearTimeout(timer);
+  }, [toast.id, onRemove]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: 100, scale: 0.95 }}
+      animate={{ opacity: 1, x: 0, scale: 1 }}
+      exit={{ opacity: 0, x: 100, scale: 0.95 }}
+      className={`${bg} ${border} border rounded-lg px-4 py-3 shadow-lg flex items-center gap-3 min-w-[320px] max-w-[420px] backdrop-blur-sm`}
+      role="alert"
+    >
+      {icon}
+      <p className="text-sm text-white flex-1">{toast.message}</p>
+      <button
+        onClick={() => onRemove(toast.id)}
+        className="text-gray-400 hover:text-white transition-colors"
+        aria-label="Close notification"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </motion.div>
+  );
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback((type: ToastType, message: string) => {
+    const id = Date.now().toString() + Math.random().toString(36);
+    setToasts(prev => [...prev, { id, type, message }]);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
+        <AnimatePresence mode="popLayout">
+          {toasts.map(toast => (
+            <ToastItem key={toast.id} toast={toast} onRemove={removeToast} />
+          ))}
+        </AnimatePresence>
+      </div>
+    </ToastContext.Provider>
+  );
+}

frontend/src/components/ui/index.ts

@@ -0,0 +1 @@
+export { ToastProvider, useToast } from './Toast';