Add modals

frontend/src/components/ui/Toast.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react'
+import { X, CheckCircle, XCircle, AlertTriangle, Info } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useToastStore, type Toast as ToastType } from '@/store/toast'
+
+const icons = {
+  success: CheckCircle,
+  error: XCircle,
+  warning: AlertTriangle,
+  info: Info,
+}
+
+const styles = {
+  success: 'bg-green-500/20 border-green-500/50 text-green-400',
+  error: 'bg-red-500/20 border-red-500/50 text-red-400',
+  warning: 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400',
+  info: 'bg-blue-500/20 border-blue-500/50 text-blue-400',
+}
+
+const iconStyles = {
+  success: 'text-green-500',
+  error: 'text-red-500',
+  warning: 'text-yellow-500',
+  info: 'text-blue-500',
+}
+
+interface ToastItemProps {
+  toast: ToastType
+  onRemove: (id: string) => void
+}
+
+function ToastItem({ toast, onRemove }: ToastItemProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [isLeaving, setIsLeaving] = useState(false)
+  const Icon = icons[toast.type]
+
+  useEffect(() => {
+    // Trigger enter animation
+    requestAnimationFrame(() => setIsVisible(true))
+  }, [])
+
+  const handleRemove = () => {
+    setIsLeaving(true)
+    setTimeout(() => onRemove(toast.id), 200)
+  }
+
+  return (
+    <div
+      className={clsx(
+        'flex items-start gap-3 p-4 rounded-lg border backdrop-blur-sm shadow-lg',
+        'transition-all duration-200 ease-out',
+        styles[toast.type],
+        isVisible && !isLeaving ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+      )}
+    >
+      <Icon className={clsx('w-5 h-5 flex-shrink-0 mt-0.5', iconStyles[toast.type])} />
+      <p className="flex-1 text-sm text-white">{toast.message}</p>
+      <button
+        onClick={handleRemove}
+        className="flex-shrink-0 text-gray-400 hover:text-white transition-colors"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}
+
+export function ToastContainer() {
+  const toasts = useToastStore((state) => state.toasts)
+  const removeToast = useToastStore((state) => state.removeToast)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+      {toasts.map((toast) => (
+        <div key={toast.id} className="pointer-events-auto">
+          <ToastItem toast={toast} onRemove={removeToast} />
+        </div>
+      ))}
+    </div>
+  )
+}