feat: persistent multi-step undo system in TopBar

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">