feat: timeline and folder import

2026-04-07 00:42:22 +02:00
parent 6d1b227fb9
commit 78e12e8309
20 changed files with 1036 additions and 75 deletions
--- a/frontend/src/components/ToastContainer.tsx
+++ b/frontend/src/components/ToastContainer.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react'
+import { CheckCircle, XCircle, Info, AlertCircle, X } from 'lucide-react'
+import clsx from 'clsx'
+
+export interface Toast {
+  id: string
+  type: 'success' | 'error' | 'info' | 'warning'
+  title: string
+  message?: string
+  duration?: number
+}
+
+// Global toast state (in production, use Zustand or Context)
+let toastListeners: ((toasts: Toast[]) => void)[] = []
+let toastList: Toast[] = []
+
+export const toast = {
+  success: (title: string, message?: string) => addToast('success', title, message),
+  error: (title: string, message?: string) => addToast('error', title, message),
+  info: (title: string, message?: string) => addToast('info', title, message),
+  warning: (title: string, message?: string) => addToast('warning', title, message),
+}
+
+function addToast(type: Toast['type'], title: string, message?: string, duration = 5000) {
+  const id = Date.now().toString()
+  const newToast: Toast = { id, type, title, message, duration }
+  toastList = [...toastList, newToast]
+  toastListeners.forEach(listener => listener(toastList))
+  
+  // Auto-remove after duration
+  setTimeout(() => {
+    removeToast(id)
+  }, duration)
+}
+
+function removeToast(id: string) {
+  toastList = toastList.filter(t => t.id !== id)
+  toastListeners.forEach(listener => listener(toastList))
+}
+
+export function ToastContainer() {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  useEffect(() => {
+    const listener = (newToasts: Toast[]) => setToasts(newToasts)
+    toastListeners.push(listener)
+    return () => {
+      toastListeners = toastListeners.filter(l => l !== listener)
+    }
+  }, [])
+
+  const icons = {
+    success: <CheckCircle className="h-5 w-5 text-pick" />,
+    error: <XCircle className="h-5 w-5 text-reject" />,
+    info: <Info className="h-5 w-5 text-primary" />,
+    warning: <AlertCircle className="h-5 w-5 text-star" />,
+  }
+
+  const colors = {
+    success: 'border-pick bg-pick/10',
+    error: 'border-reject bg-reject/10',
+    info: 'border-primary bg-primary/10',
+    warning: 'border-star bg-star/10',
+  }
+
+  return (
+    <div className="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={clsx(
+            'pointer-events-auto flex items-start gap-3 rounded-lg border p-3 shadow-lg backdrop-blur-sm transition-all duration-300',
+            'animate-slide-up',
+            colors[toast.type]
+          )}
+          style={{ minWidth: '300px', maxWidth: '400px' }}
+        >
+          {icons[toast.type]}
+          <div className="flex-1">
+            <div className="font-medium text-text">{toast.title}</div>
+            {toast.message && (
+              <div className="mt-0.5 text-sm text-text-muted">{toast.message}</div>
+            )}
+          </div>
+          <button
+            onClick={() => removeToast(toast.id)}
+            className="pointer-events-auto rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}