feat(ui): enhance UI with animations, dark mode support and and improved components

- Add framer-motion page transitions and AnimatePresence support - Add dark mode support across all components - Create reusable UI components (Button, Badge, Card, EmptyState, Input, Toast, Skeleton) - Add CSS custom properties for consistent theming - Add animation variants and utility functions - Improve ChatArea, Sidebar, TriggersPanel with animations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-15 17:24:40 +08:00
parent 308994121c
commit e3d164e9d2
18 changed files with 772 additions and 108 deletions
--- a/desktop/src/components/ui/Toast.tsx
+++ b/desktop/src/components/ui/Toast.tsx
@@ -0,0 +1,89 @@
+import { useState, useCallback, createContext, useContext } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastContextType {
+  toast: (message: string, type?: ToastType) => void;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+const iconMap: Record<ToastType, React.ReactNode> = {
+  success: <CheckCircle className="w-5 h-5 text-green-500" />,
+  error: <AlertCircle className="w-5 h-5 text-red-500" />,
+  info: <Info className="w-5 h-5 text-blue-500" />,
+  warning: <AlertTriangle className="w-5 h-5 text-yellow-500" />,
+};
+
+const styleMap: Record<ToastType, string> = {
+  success: 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800',
+  error: 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800',
+  info: 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800',
+  warning: 'bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800',
+};
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const toast = useCallback((message: string, type: ToastType = 'info') => {
+    const id = Date.now().toString();
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3000);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 space-y-2">
+        <AnimatePresence>
+          {toasts.map((t) => (
+            <motion.div
+              key={t.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className={cn(
+                'flex items-center gap-3 px-4 py-3 rounded-lg border shadow-lg',
+                'bg-white dark:bg-gray-800',
+                styleMap[t.type]
+              )}
+            >
+              {iconMap[t.type]}
+              <span className="text-sm text-gray-700 dark:text-gray-200">{t.message}</span>
+              <button
+                onClick={() => removeToast(t.id)}
+                className="ml-2 text-gray-400 hover:text-gray-600"
+                aria-label="Close"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </ToastContext.Provider>
+  );
+}