From 9606a508412e41b75da1f22ea4f0c3af275209ad Mon Sep 17 00:00:00 2001
From: ida-jemi <idajemi.9i@gmail.com>
Date: Sat, 20 Jun 2026 18:45:48 +0300
Subject: [PATCH] feat: add undo/redo support for editing actions

- Add generic useUndoRedo hook with debounced history stack (max 25 entries)
- Wire into useVideoEditor: push EditRecipe snapshots, expose undo/redo/canUndo/canRedo
- Add Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y keyboard shortcuts
- Add Undo/Redo buttons next to Reset All Settings
- Update KeyboardShortcutsPanel with new shortcuts
- Add unit tests for useUndoRedo

Closes #1591
---
 src/components/VideoEditor.tsx          |  34 +++++++-
 src/hooks/__tests__/useUndoRedo.test.ts | 104 ++++++++++++++++++++++++
 src/hooks/useKeyboardShortcuts.ts       |  23 +++++-
 src/hooks/useUndoRedo.ts                |  98 ++++++++++++++++++++++
 src/hooks/useVideoEditor.ts             |  50 +++++++++++-
 5 files changed, 305 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/__tests__/useUndoRedo.test.ts
 create mode 100644 src/hooks/useUndoRedo.ts

diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index a12c1f41..88c920c7 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -22,7 +22,7 @@ import { getPresetById } from "@/lib/presets";
 import { cn } from "@/lib/utils";
 import {
   Layers, Crop, Scissors, RotateCw, Volume2, Type,
-  SlidersHorizontal, Zap, AlertTriangle, Github, Copy
+  SlidersHorizontal, Zap, AlertTriangle, Github, Copy, Undo2, Redo2,
 } from "lucide-react";
 import OnboardingTour from "./OnboardingTour";
 import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
@@ -153,6 +153,14 @@ function KeyboardShortcutsPanel() {
     keys: [<Kbd key="question">?</Kbd>],
     label: "Toggle this panel",
   },
+  {
+    keys: [<Kbd key="ctrl2">Ctrl</Kbd>, <span key="p1" className="text-[var(--muted)] text-xs">+</span>, <Kbd key="z">Z</Kbd>],
+    label: "Undo",
+  },
+  {
+    keys: [<Kbd key="ctrl3">Ctrl</Kbd>, <span key="p2" className="text-[var(--muted)] text-xs">+</span>, <Kbd key="shift2">Shift</Kbd>, <span key="p3" className="text-[var(--muted)] text-xs">+</span>, <Kbd key="z2">Z</Kbd>],
+    label: "Redo",
+  },
 ];
 
   return (
@@ -211,6 +219,7 @@ export default function VideoEditor() {
     recommendedPreset,
     currentTime,
     toggleSound,
+    undo, redo, canUndo, canRedo,
   } = useVideoEditor();
 
   useKeyboardShortcuts({
@@ -222,6 +231,7 @@ export default function VideoEditor() {
     status,
     cancelExport,
     onToggleShortcutsModal: () => {},
+    undo, redo,
   });
 
   const [copied, setCopied] = useState(false);
@@ -704,6 +714,28 @@ return () => {
               </AccordionSection>
 
               <div className="pt-2 flex justify-center items-center gap-6">
+                <button
+                  type="button"
+                  onClick={undo}
+                  disabled={!canUndo}
+                  aria-label="Undo last change"
+                  title="Undo (Ctrl+Z)"
+                  className="flex items-center gap-1.5 text-xs font-heading font-bold uppercase tracking-widest text-film-500 hover:text-film-600 transition-all cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:text-film-500"
+                >
+                  <Undo2 size={12} />
+                  Undo
+                </button>
+                <button
+                  type="button"
+                  onClick={redo}
+                  disabled={!canRedo}
+                  aria-label="Redo last undone change"
+                  title="Redo (Ctrl+Shift+Z)"
+                  className="flex items-center gap-1.5 text-xs font-heading font-bold uppercase tracking-widest text-film-500 hover:text-film-600 transition-all cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:text-film-500"
+                >
+                  <Redo2 size={12} />
+                  Redo
+                </button>
                 <button
                   type="button"
                   onClick={handleCopyLink}
diff --git a/src/hooks/__tests__/useUndoRedo.test.ts b/src/hooks/__tests__/useUndoRedo.test.ts
new file mode 100644
index 00000000..8b6c7db6
--- /dev/null
+++ b/src/hooks/__tests__/useUndoRedo.test.ts
@@ -0,0 +1,104 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useUndoRedo } from "../useUndoRedo";
+
+describe("useUndoRedo", () => {
+  it("starts with canUndo and canRedo false", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.canRedo).toBe(false);
+  });
+
+  it("push enables canUndo and undo returns the previous snapshot", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+
+    act(() => {
+      result.current.push({ a: 2 });
+    });
+    expect(result.current.canUndo).toBe(true);
+
+    let undone: { a: number } | null = null;
+    act(() => {
+      undone = result.current.undo();
+    });
+    expect(undone).toEqual({ a: 1 });
+  });
+
+  it("redo replays the snapshot that was just undone", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+
+    act(() => {
+      result.current.push({ a: 2 });
+    });
+    act(() => {
+      result.current.undo();
+    });
+    expect(result.current.canRedo).toBe(true);
+
+    let redone: { a: number } | null = null;
+    act(() => {
+      redone = result.current.redo();
+    });
+    expect(redone).toEqual({ a: 2 });
+  });
+
+  it("pushing after an undo clears the redo stack (new branch)", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+
+    act(() => result.current.push({ a: 2 }));
+    act(() => result.current.undo());
+    act(() => result.current.push({ a: 3 }));
+
+    expect(result.current.canRedo).toBe(false);
+  });
+
+  it("ignores a push that is identical to the current snapshot", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+
+    act(() => result.current.push({ a: 1 })); // same value, no-op
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it("caps history depth at maxHistory", () => {
+    const { result } = renderHook(() =>
+      useUndoRedo({ n: 0 }, { maxHistory: 2 })
+    );
+
+    act(() => result.current.push({ n: 1 }));
+    act(() => result.current.push({ n: 2 }));
+    act(() => result.current.push({ n: 3 }));
+
+    // Only 2 steps back should be possible — the n:0 entry should have been dropped.
+    act(() => result.current.undo());
+    act(() => result.current.undo());
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it("reset clears both stacks and sets a new current snapshot", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+
+    act(() => result.current.push({ a: 2 }));
+    act(() => result.current.reset({ a: 99 }));
+
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.canRedo).toBe(false);
+  });
+
+  it("undo on an empty stack returns null", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+    let undone: unknown = "not-null";
+    act(() => {
+      undone = result.current.undo();
+    });
+    expect(undone).toBeNull();
+  });
+
+  it("redo on an empty stack returns null", () => {
+    const { result } = renderHook(() => useUndoRedo({ a: 1 }));
+    let redone: unknown = "not-null";
+    act(() => {
+      redone = result.current.redo();
+    });
+    expect(redone).toBeNull();
+  });
+});
\ No newline at end of file
diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts
index a21a24b4..62530419 100644
--- a/src/hooks/useKeyboardShortcuts.ts
+++ b/src/hooks/useKeyboardShortcuts.ts
@@ -11,6 +11,8 @@ interface UseKeyboardShortcutsProps {
   status: ExportStatus;
   cancelExport: () => void;
   onToggleShortcutsModal: () => void;
+  undo: () => void;     
+  redo: () => void; 
 }
 
 export function useKeyboardShortcuts({
@@ -22,6 +24,8 @@ export function useKeyboardShortcuts({
   status,
   cancelExport,
   onToggleShortcutsModal,
+  undo,
+  redo,
 }: UseKeyboardShortcutsProps) {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -42,6 +46,23 @@ export function useKeyboardShortcuts({
         return;
       }
 
+      // Undo: Ctrl/Cmd+Z (without Shift)
+      if (isCtrlOrCmd && !e.shiftKey && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        if (file) undo();
+        return;
+      }
+
+      // Redo: Ctrl/Cmd+Shift+Z, or Ctrl+Y (Windows convention)
+      if (
+        (isCtrlOrCmd && e.shiftKey && e.key.toLowerCase() === "z") ||
+        (isCtrlOrCmd && !isMac && e.key.toLowerCase() === "y")
+      ) {
+        e.preventDefault();
+        if (file) redo();
+        return;
+      }
+
       if (!file) return;
 
       switch (e.key) {
@@ -75,5 +96,5 @@ export function useKeyboardShortcuts({
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [file, recipe, resetSettings, updateRecipe, handleExport, status, cancelExport, onToggleShortcutsModal]);
+  }, [file, recipe, resetSettings, updateRecipe, handleExport, status, cancelExport, onToggleShortcutsModal, undo, redo]);
 }
diff --git a/src/hooks/useUndoRedo.ts b/src/hooks/useUndoRedo.ts
new file mode 100644
index 00000000..cde56979
--- /dev/null
+++ b/src/hooks/useUndoRedo.ts
@@ -0,0 +1,98 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+const DEFAULT_MAX_HISTORY = 25;
+
+export interface UseUndoRedoOptions<T> {
+  maxHistory?: number;
+}
+
+export interface UseUndoRedoResult<T> {
+  /** Push a new snapshot. No-op if deepEqual to the current top of stack. */
+  push: (snapshot: T) => void;
+  /** Move back one step. Returns the snapshot to apply, or null if nothing to undo. */
+  undo: () => T | null;
+  /** Move forward one step. Returns the snapshot to apply, or null if nothing to redo. */
+  redo: () => T | null;
+  canUndo: boolean;
+  canRedo: boolean;
+  /** Clear all history and reset to a single base snapshot (e.g. on file reset/load). */
+  reset: (snapshot: T) => void;
+}
+
+/**
+ * Generic undo/redo history stack.
+ * Stores snapshots by value (caller should pass plain serializable objects).
+ */
+export function useUndoRedo<T>(
+  initial: T,
+  options: UseUndoRedoOptions<T> = {}
+): UseUndoRedoResult<T> {
+  const maxHistory = options.maxHistory ?? DEFAULT_MAX_HISTORY;
+
+  // past: oldest -> newest, NOT including current
+  // current: the present snapshot
+  // future: nearest -> furthest redo targets
+  const pastRef = useRef<T[]>([]);
+  const currentRef = useRef<T>(initial);
+  const futureRef = useRef<T[]>([]);
+
+  // Mirror counts into state purely to trigger re-renders for canUndo/canRedo/buttons.
+  const [, forceRender] = useState(0);
+  const bump = useCallback(() => forceRender((n) => n + 1), []);
+
+  const push = useCallback(
+    (snapshot: T) => {
+      const serializedNew = JSON.stringify(snapshot);
+      const serializedCurrent = JSON.stringify(currentRef.current);
+      if (serializedNew === serializedCurrent) return; // no-op, avoid duplicate entries
+
+      pastRef.current.push(currentRef.current);
+      if (pastRef.current.length > maxHistory) {
+        pastRef.current.shift(); // cap history depth
+      }
+      currentRef.current = snapshot;
+      futureRef.current = []; // new branch invalidates redo stack
+      bump();
+    },
+    [maxHistory, bump]
+  );
+
+  const undo = useCallback((): T | null => {
+    if (pastRef.current.length === 0) return null;
+    const previous = pastRef.current.pop()!;
+    futureRef.current.unshift(currentRef.current);
+    currentRef.current = previous;
+    bump();
+    return previous;
+  }, [bump]);
+
+  const redo = useCallback((): T | null => {
+    if (futureRef.current.length === 0) return null;
+    const next = futureRef.current.shift()!;
+    pastRef.current.push(currentRef.current);
+    currentRef.current = next;
+    bump();
+    return next;
+  }, [bump]);
+
+  const reset = useCallback(
+    (snapshot: T) => {
+      pastRef.current = [];
+      futureRef.current = [];
+      currentRef.current = snapshot;
+      bump();
+    },
+    [bump]
+  );
+
+  return {
+    push,
+    undo,
+    redo,
+    canUndo: pastRef.current.length > 0,
+    canRedo: futureRef.current.length > 0,
+    reset,
+  };
+}
\ No newline at end of file
diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index f2edb45c..a2f7aea5 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -6,6 +6,7 @@ import { DEFAULT_RECIPE, SPEED_STEPS } from "@/lib/constants";
 import { getPresetById } from "@/lib/presets";
 import { loadFFmpeg, exportVideo, terminateFFmpeg, FFmpegLoadError } from "@/lib/ffmpeg";
 import { suggestPreset } from "@/lib/presetSuggestion";
+import { useUndoRedo } from "@/hooks/useUndoRedo";
 import { validateDimensions, getDownscaledDimensions } from "@/utils/video-validation";
 import {
   createMultiTrackState,
@@ -169,6 +170,11 @@ export function useVideoEditor() {
       soundOnCompletion: getStoredSoundPreference(localStorage),
     }));
   });
+
+  const history = useUndoRedo<EditRecipe>(recipe, { maxHistory: 25 });
+  const isApplyingHistoryRef = useRef(false);
+  const historyDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const [status, setStatus] = useState<ExportStatus>("idle");
   const [progress, setProgress] = useState(0);
   const [result, setResult] = useState<ExportResult | null>(null);
@@ -339,6 +345,39 @@ export function useVideoEditor() {
     return () => clearTimeout(timer);
   }, [recipe]);
 
+  // Commit a history snapshot ~400ms after the recipe stops changing.
+  // This coalesces rapid slider drags (brightness/contrast/trim) into one entry.
+  useEffect(() => {
+    if (isApplyingHistoryRef.current) {
+      // This change came from undo/redo itself — don't re-push it.
+      isApplyingHistoryRef.current = false;
+      return;
+    }
+    if (historyDebounceRef.current) clearTimeout(historyDebounceRef.current);
+    historyDebounceRef.current = setTimeout(() => {
+      history.push(recipe);
+    }, 400);
+    return () => {
+      if (historyDebounceRef.current) clearTimeout(historyDebounceRef.current);
+    };
+  }, [recipe, history]);
+
+  const undo = useCallback(() => {
+    const previous = history.undo();
+    if (previous) {
+      isApplyingHistoryRef.current = true;
+      setRecipe(previous);
+    }
+  }, [history]);
+
+  const redo = useCallback(() => {
+    const next = history.redo();
+    if (next) {
+      isApplyingHistoryRef.current = true;
+      setRecipe(next);
+    }
+  }, [history]);
+
   const recommendedPreset = useMemo(() => {
     if (!videoMetadata) return null;
     return getPresetById(suggestPreset(videoMetadata.width, videoMetadata.height)) ?? null;
@@ -623,13 +662,14 @@ export function useVideoEditor() {
 
   const resetSettings = useCallback(() => {
     setRecipe(DEFAULT_RECIPE);
+    history.reset(DEFAULT_RECIPE);
     try {
       localStorage.removeItem(RECIPE_STORAGE_KEY);
       localStorage.removeItem(LEGACY_SETTINGS_KEY);
     } catch {
       // ignore
     }
-  }, []);
+  }, [history]);
 
   const cancelExport = useCallback(() => {
     exportCancelledRef.current = true;
@@ -649,6 +689,7 @@ export function useVideoEditor() {
     setVideoMetadata(null);
     setDuration(0);
     setRecipe(DEFAULT_RECIPE);
+    history.reset(DEFAULT_RECIPE);
     setStatus("idle");
     setProgress(0);
     setResult(null);
@@ -660,7 +701,7 @@ export function useVideoEditor() {
     } catch {
       // ignore
     }
-  }, [result]);
+  }, [result, history]);
 
 
   useEffect(() => {
@@ -726,5 +767,10 @@ export function useVideoEditor() {
     removeTrack,
     updateTrack,
     addVideoTrack,
+    // undo/redo support
+    undo,
+    redo,
+    canUndo: history.canUndo,
+    canRedo: history.canRedo,
   };
 }