From 8a4d0c5cfa83d710e6963bda1b3b160c02a9d664 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Sun, 29 Mar 2026 17:37:58 +0200
Subject: [PATCH] Add persistent Undo button to TopBar

---
 src/App.tsx               |  3 +++
 src/components/TopBar.tsx | 19 +++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ef7c4ba..3879e97 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -305,6 +305,9 @@ export default function App() {
         hasUnsavedChanges={appState.hasUnsavedChanges}
         userEmail={session.user.email}
         onSignOut={handleSignOut}
+        canUndo={!!undoState}
+        onUndo={handleUndo}
+        undoMessage={undoState?.message}
       />
       <div className="flex flex-1 overflow-hidden">
         <Sidebar activeModule={activeModule} setActiveModule={setActiveModule} />
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 713e08d..c6c81aa 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Download, Database, LogOut } from 'lucide-react';
+import { Download, Database, LogOut, Undo2 } from 'lucide-react';
 
 interface TopBarProps {
   stats: any;
@@ -8,9 +8,12 @@ interface TopBarProps {
   hasUnsavedChanges: boolean;
   userEmail?: string;
   onSignOut?: () => void;
+  canUndo: boolean;
+  onUndo: () => void;
+  undoMessage?: string;
 }
 
-export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut }: TopBarProps) {
+export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage }: TopBarProps) {
   return (
     <header className="bg-[#020812] border-b border-slate-700/30 h-32 flex items-center justify-between px-10 shrink-0 z-10 shadow-2xl">
       <div className="flex items-center -ml-4">
@@ -65,6 +68,18 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail,
             {hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
           </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"
+          >
+            <Undo2 className="w-4 h-4" />
+            BACK / UNDO
+          </button>
+        )}
+
         {userEmail && (
           <div className="flex items-center gap-2 border-l border-slate-700 pl-3">
             <span className="text-xs text-slate-400">{userEmail}</span>