Implement Undo system for AI and bulk actions

2026-08-03 18:25:24 +02:00 · 2026-03-29 17:35:07 +02:00
parent 3db2bc0dae
commit e498325975
5 changed files with 105 additions and 2 deletions
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { Undo2, X, AlertCircle } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { ExcelRow } from '../types';
+
+interface UndoToastProps {
+  undoState: { data: ExcelRow[], message: string } | null;
+  onUndo: () => void;
+  onClose: () => void;
+}
+
+export function UndoToast({ undoState, onUndo, onClose }: UndoToastProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (undoState) {
+      setIsVisible(true);
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+        setTimeout(onClose, 300); // Wait for transition
+      }, 8000);
+      return () => clearTimeout(timer);
+    } else {
+      setIsVisible(false);
+    }
+  }, [undoState, onClose]);
+
+  if (!undoState && !isVisible) return null;
+
+  return (
+    <div className={cn(
+      "fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] transition-all duration-300 transform",
+      isVisible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
+    )}>
+      <div className="bg-slate-900 border border-slate-700 rounded-lg shadow-2xl p-1 pr-2 flex items-center gap-4 min-w-[320px]">
+        <div className="bg-blue-600/10 p-3 rounded-l-md border-r border-slate-700/50">
+          <AlertCircle className="w-5 h-5 text-blue-500" />
+        </div>
+        
+        <div className="flex-1 py-2">
+          <div className="text-xs text-slate-500 uppercase font-bold tracking-widest">Action Completed</div>
+          <div className="text-sm text-white font-medium">{undoState?.message}</div>
+        </div>
+
+        <div className="flex items-center gap-1 pr-2">
+          <button
+            onClick={() => {
+              onUndo();
+              setIsVisible(false);
+            }}
+            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded transition-colors"
+          >
+            <Undo2 className="w-3.5 h-3.5" />
+            UNDO
+          </button>
+          
+          <button
+            onClick={() => setIsVisible(false)}
+            className="p-1.5 text-slate-500 hover:text-white rounded transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}