chore: git cache cleanup

frontend/src/components/Toast.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { toastCallbacks, Toast } from '../utils/toast'
+
+export function ToastContainer() {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  useEffect(() => {
+    const callback = (toast: Toast) => {
+      setToasts(prev => [...prev, toast])
+      setTimeout(() => {
+        setToasts(prev => prev.filter(t => t.id !== toast.id))
+      }, 5000)
+    }
+    toastCallbacks.add(callback)
+    return () => {
+      toastCallbacks.delete(callback)
+    }
+  }, [])
+
+  const removeToast = (id: number) => {
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none" data-testid="toast-container">
+      {toasts.map(toast => (
+        <div
+          key={toast.id}
+          role={toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'}
+          aria-live={toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite'}
+          data-testid={`toast-${toast.type}`}
+          className={`pointer-events-auto px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px] max-w-[500px] animate-slide-in ${
+            toast.type === 'success'
+              ? 'bg-green-600 text-white'
+              : toast.type === 'error'
+              ? 'bg-red-600 text-white'
+              : toast.type === 'warning'
+              ? 'bg-yellow-600 text-white'
+              : 'bg-blue-600 text-white'
+          }`}
+        >
+          <div className="flex-1">
+            {toast.type === 'success' && <span className="mr-2">✓</span>}
+            {toast.type === 'error' && <span className="mr-2">✗</span>}
+            {toast.type === 'warning' && <span className="mr-2">⚠</span>}
+            {toast.type === 'info' && <span className="mr-2">ℹ</span>}
+            {toast.message}
+          </div>
+          <button
+            onClick={() => removeToast(toast.id)}
+            className="text-white/80 hover:text-white transition-colors"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}