Enhance Undo system with 5-step history and TopBar badge

src/App.tsx

@@ -32,7 +32,7 @@ export default function App() {
     hasUnsavedChanges: false
   });
   const [activeModule, setActiveModule] = useState<'descriptions' | 'matrix' | 'dimensions'>('descriptions');
-  const [undoState, setUndoState] = useState<{ data: ExcelRow[], message: string } | null>(null);
+  const [undoHistory, setUndoHistory] = useState<{ data: ExcelRow[], message: string }[]>([]);
   const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
   const [isLoadingDefault, setIsLoadingDefault] = useState(true);
   const [defaultLoadError, setDefaultLoadError] = useState<string | null>(null);
@@ -248,20 +248,27 @@ export default function App() {
   };
 
   const captureState = (message: string) => {
-    setUndoState({
-      data: JSON.parse(JSON.stringify(appState.data)), // Deep copy
-      message
+    setUndoHistory(prev => {
+      const newState = {
+        data: JSON.parse(JSON.stringify(appState.data)), // Deep copy
+        message
+      };
+      // Keep only last 5 steps
+      const newHistory = [newState, ...prev].slice(0, 5);
+      return newHistory;
     });
   };
 
   const handleUndo = () => {
-    if (!undoState) return;
+    if (undoHistory.length === 0) return;
+    
+    const [lastAction, ...remainingHistory] = undoHistory;
     setAppState(prev => ({
       ...prev,
-      data: undoState.data,
+      data: lastAction.data,
       hasUnsavedChanges: true
     }));
-    setUndoState(null);
+    setUndoHistory(remainingHistory);
   };
 
   const stats = useMemo(() => {
@@ -305,9 +312,10 @@ export default function App() {
         hasUnsavedChanges={appState.hasUnsavedChanges}
         userEmail={session.user.email}
         onSignOut={handleSignOut}
-        canUndo={!!undoState}
+        canUndo={undoHistory.length > 0}
         onUndo={handleUndo}
-        undoMessage={undoState?.message}
+        undoMessage={undoHistory[0]?.message}
+        undoSteps={undoHistory.length}
       />
       <div className="flex flex-1 overflow-hidden">
         <Sidebar activeModule={activeModule} setActiveModule={setActiveModule} />
@@ -360,9 +368,9 @@ export default function App() {
       </div>
 
       <UndoToast 
-        undoState={undoState} 
+        undoState={undoHistory[0] || null} 
         onUndo={handleUndo} 
-        onClose={() => setUndoState(null)} 
+        onClose={() => setUndoHistory([])} 
       />
 
       {editingRowIndex !== null && (