feat: Toast Notification System

frontend/src/components/ui/Toast.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+
+type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+interface Toast {
+  id: string;
+  type: ToastType;
+  title: string;
+  message?: string;
+  duration?: number;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, 'id'>) => void;
+  removeToast: (id: string) => void;
+}
+
+export const ToastContext = React.createContext<ToastContextValue>({
+  toasts: [],
+  addToast: () => {},
+  removeToast: () => {},
+});
+
+export function useToast() {
+  return React.useContext(ToastContext);
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    const newToast: Toast = { ...toast, id };
+    setToasts((prev) => [...prev, newToast]);
+
+    // Auto-dismiss after duration
+    const duration = toast.duration ?? 5000;
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, duration);
+    }
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </ToastContext.Provider>
+  );
+}
+
+const ICONS: Record<ToastType, React.ReactNode> = {
+  success: <CheckCircle className="w-5 h-5 text-emerald" />,
+  error: <AlertCircle className="w-5 h-5 text-status-error" />,
+  info: <Info className="w-5 h-5 text-status-info" />,
+  warning: <AlertTriangle className="w-5 h-5 text-status-warning" />,
+};
+
+const BORDER_COLORS: Record<ToastType, string> = {
+  success: 'border-emerald/30',
+  error: 'border-status-error/30',
+  info: 'border-status-info/30',
+  warning: 'border-status-warning/30',
+};
+
+function ToastContainer({
+  toasts,
+  onRemove,
+}: {
+  toasts: Toast[];
+  onRemove: (id: string) => void;
+}) {
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <motion.div
+            key={toast.id}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, x: 100, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className={`pointer-events-auto bg-forge-900 border ${BORDER_COLORS[toast.type]} rounded-lg p-4 shadow-lg shadow-black/20`}
+          >
+            <div className="flex items-start gap-3">
+              <div className="flex-shrink-0 mt-0.5">{ICONS[toast.type]}</div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-text-primary">{toast.title}</p>
+                {toast.message && (
+                  <p className="mt-1 text-xs text-text-muted">{toast.message}</p>
+                )}
+              </div>
+              <button
+                onClick={() => onRemove(toast.id)}
+                className="flex-shrink-0 text-text-muted hover:text-text-primary transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}