Add persistent Undo button to TopBar

This commit is contained in:
Christian Vidal Wolf
2026-03-29 17:37:58 +02:00
parent e498325975
commit 8a4d0c5cfa
2 changed files with 20 additions and 2 deletions
+3
View File
@@ -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} />
+17 -2
View File
@@ -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>