Add modals

frontend/src/store/toast.ts

@@ -0,0 +1,53 @@
+import { create } from 'zustand'
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning'
+
+export interface Toast {
+  id: string
+  type: ToastType
+  message: string
+  duration?: number
+}
+
+interface ToastState {
+  toasts: Toast[]
+  addToast: (type: ToastType, message: string, duration?: number) => void
+  removeToast: (id: string) => void
+}
+
+export const useToastStore = create<ToastState>((set) => ({
+  toasts: [],
+
+  addToast: (type, message, duration = 4000) => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`
+    set((state) => ({
+      toasts: [...state.toasts, { id, type, message, duration }],
+    }))
+
+    if (duration > 0) {
+      setTimeout(() => {
+        set((state) => ({
+          toasts: state.toasts.filter((t) => t.id !== id),
+        }))
+      }, duration)
+    }
+  },
+
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id),
+    }))
+  },
+}))
+
+// Helper hooks for convenience
+export const useToast = () => {
+  const addToast = useToastStore((state) => state.addToast)
+
+  return {
+    success: (message: string, duration?: number) => addToast('success', message, duration),
+    error: (message: string, duration?: number) => addToast('error', message, duration),
+    info: (message: string, duration?: number) => addToast('info', message, duration),
+    warning: (message: string, duration?: number) => addToast('warning', message, duration),
+  }
+}