feat: Add undo/redo functionality

components/editor/action-bar/components/action-bar-buttons.tsx

@@ -10,6 +10,7 @@ import { EditButton } from "./edit-button";
 import { MoreOptions } from "./more-options";
 import { AIGenerateButton } from "./ai-generate-button";
 import { ShareButton } from "./share-button";
+import { UndoRedoButtons } from "./undo-redo-buttons";
 
 interface ActionBarButtonsProps {
   onImportClick: () => void;
@@ -28,7 +29,7 @@ export function ActionBarButtons({
   onShareClick,
   isSaving,
 }: ActionBarButtonsProps) {
-  const { themeState, resetToCurrentPreset, hasThemeChangedFromCheckpoint } = useEditorStore();
+  const { themeState, resetToCurrentPreset, hasUnsavedChanges } = useEditorStore();
 
   const { getPreset } = useThemePresetStore();
   const currentPreset = themeState?.preset ? getPreset(themeState?.preset) : undefined;
@@ -40,7 +41,9 @@ export function ActionBarButtons({
       <Separator orientation="vertical" className="mx-1 h-8" />
       <ThemeToggle />
       <Separator orientation="vertical" className="mx-1 h-8" />
-      <ResetButton onReset={resetToCurrentPreset} isDisabled={!hasThemeChangedFromCheckpoint()} />
+      <UndoRedoButtons />
+      <Separator orientation="vertical" className="mx-1 h-8" />
+      <ResetButton onReset={resetToCurrentPreset} isDisabled={!hasUnsavedChanges()} />
       <ImportButton onImportClick={onImportClick} />
       <AIGenerateButton onClick={onAiGenerateClick} />
       <Separator orientation="vertical" className="mx-1 h-8" />

components/editor/action-bar/components/undo-redo-buttons.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useDialogActions } from "@/hooks/use-dialog-actions";
+import { Redo, Undo } from "lucide-react";
+
+export function UndoRedoButtons() {
+  const { handleUndo, handleRedo, canUndo, canRedo } = useDialogActions();
+
+  return (
+    <TooltipProvider>
+      <div className="flex items-center">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" onClick={handleUndo} disabled={!canUndo}>
+              <Undo className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Undo</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" onClick={handleRedo} disabled={!canRedo}>
+              <Redo className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Redo</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  );
+}