feat: persistent multi-step undo system in TopBar

src/App.tsx

@@ -275,8 +275,8 @@ export default function App() {
         data: JSON.parse(JSON.stringify(appState.data)), // Deep copy
         message
       };
-      // Keep only last 5 steps
-      const newHistory = [newState, ...prev].slice(0, 5);
+      // Keep last 50 steps
+      const newHistory = [newState, ...prev].slice(0, 50);
       return newHistory;
     });
   };
@@ -412,7 +412,12 @@ export default function App() {
       <UndoToast
         undoState={undoHistory[0] || null}
         onUndo={handleUndo}
-        onClose={() => setUndoHistory([])}
+        onClose={() => {
+          // Instead of clearing history, we can just hide the toast
+          // But since UndoToast is driven by undoHistory[0], 
+          // we might want a way to "acknowledge" the current top of history
+          // For now, let's just not clear the history.
+        }}
       />
 
       {editingRowIndex !== null && (

src/components/TopBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Download, Database, LogOut, Undo2 } from 'lucide-react';
+import { cn } from '../lib/utils';
 
 interface TopBarProps {
   stats: any;
@@ -70,21 +71,25 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail,
           </button>
         )}
         
-        {canUndo && (
-          <button
-            onClick={onUndo}
-            title={`Undo: ${undoMessage}`}
-            className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-md text-sm font-bold transition-all shadow-lg shadow-amber-900/40 animate-in fade-in zoom-in duration-300 relative group"
-          >
-            <Undo2 className="w-4 h-4" />
-            BACK / UNDO
-            {undoSteps > 1 && (
-              <span className="absolute -top-1 -right-1 bg-white text-amber-700 text-[10px] w-4 h-4 rounded-full flex items-center justify-center shadow-md">
-                {undoSteps}
-              </span>
-            )}
-          </button>
-        )}
+        <button
+          onClick={onUndo}
+          disabled={!canUndo}
+          title={canUndo ? `Undo: ${undoMessage}` : 'No changes to undo'}
+          className={cn(
+            "flex items-center gap-2 px-4 py-2 rounded-md text-sm font-bold transition-all shadow-lg relative group",
+            canUndo 
+              ? "bg-amber-600 hover:bg-amber-700 text-white shadow-amber-900/40 cursor-pointer" 
+              : "bg-slate-800 text-slate-600 shadow-none cursor-not-allowed opacity-50"
+          )}
+        >
+          <Undo2 className="w-4 h-4" />
+          BACK / UNDO
+          {canUndo && undoSteps > 1 && (
+            <span className="absolute -top-1 -right-1 bg-white text-amber-700 text-[10px] w-4 h-4 rounded-full flex items-center justify-center shadow-md font-bold">
+              {undoSteps}
+            </span>
+          )}
+        </button>
 
         {userEmail && (
           <div className="flex items-center gap-2 border-l border-slate-700 pl-3">