feat:implemented-undo-feature-for-timeline

apps/web/src/components/editor/timeline.tsx

@@ -40,7 +40,7 @@ export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.
   // You can drag media here to add it to your project.
   // Clips can be trimmed, deleted, and moved.
-  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim } =
+  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo } =
     useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
   const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();
@@ -98,6 +98,18 @@ export function Timeline() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedClips, removeClipFromTrack, clearSelectedClips]);
 
+  // Keyboard event for undo (Cmd+Z)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [undo]);
+
   // Mouse down on timeline background to start marquee
   const handleTimelineMouseDown = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget && e.button === 0) {

apps/web/src/stores/timeline-store.ts

@@ -20,6 +20,7 @@ export interface TimelineTrack {
 
 interface TimelineStore {
   tracks: TimelineTrack[];
+  history: TimelineTrack[][];
 
   // Multi-selection
   selectedClips: { trackId: string; clipId: string }[];
@@ -53,12 +54,30 @@ interface TimelineStore {
 
   // Computed values
   getTotalDuration: () => number;
+
+  // New actions
+  undo: () => void;
+  pushHistory: () => void;
 }
 
 export const useTimelineStore = create<TimelineStore>((set, get) => ({
   tracks: [],
+  history: [],
   selectedClips: [],
 
+  pushHistory: () => {
+    const { tracks, history } = get();
+    // Deep copy tracks
+    set({ history: [...history, JSON.parse(JSON.stringify(tracks))] });
+  },
+
+  undo: () => {
+    const { history } = get();
+    if (history.length === 0) return;
+    const prev = history[history.length - 1];
+    set({ tracks: prev, history: history.slice(0, -1) });
+  },
+
   selectClip: (trackId, clipId, multi = false) => {
     set((state) => {
       const exists = state.selectedClips.some(
@@ -86,6 +105,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   setSelectedClips: (clips) => set({ selectedClips: clips }),
 
   addTrack: (type) => {
+    get().pushHistory();
     const newTrack: TimelineTrack = {
       id: crypto.randomUUID(),
       name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,
@@ -100,12 +120,14 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   removeTrack: (trackId) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.filter((track) => track.id !== trackId),
     }));
   },
 
   addClipToTrack: (trackId, clipData) => {
+    get().pushHistory();
     const newClip: TimelineClip = {
       ...clipData,
       id: crypto.randomUUID(),
@@ -124,19 +146,21 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   removeClipFromTrack: (trackId, clipId) => {
+    get().pushHistory();
     set((state) => ({
-      tracks: state.tracks.map((track) =>
+      tracks: state.tracks
+        .map((track) =>
           track.id === trackId
-          ? {
-              ...track,
-              clips: track.clips.filter((clip) => clip.id !== clipId),
-            }
+            ? { ...track, clips: track.clips.filter((clip) => clip.id !== clipId) }
             : track
-      ),
+        )
+        // Remove track if it becomes empty
+        .filter((track) => track.clips.length > 0),
     }));
   },
 
   moveClipToTrack: (fromTrackId, toTrackId, clipId) => {
+    get().pushHistory();
     set((state) => {
       const fromTrack = state.tracks.find((track) => track.id === fromTrackId);
       const clipToMove = fromTrack?.clips.find((clip) => clip.id === clipId);
@@ -144,7 +168,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
       if (!clipToMove) return state;
 
       return {
-        tracks: state.tracks.map((track) => {
+        tracks: state.tracks
+          .map((track) => {
             if (track.id === fromTrackId) {
               return {
                 ...track,
@@ -157,12 +182,15 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
               };
             }
             return track;
-        }),
+          })
+          // Remove track if it becomes empty
+          .filter((track) => track.clips.length > 0),
       };
     });
   },
 
   updateClipTrim: (trackId, clipId, trimStart, trimEnd) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.map((track) =>
         track.id === trackId
@@ -178,6 +206,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   updateClipStartTime: (trackId, clipId, startTime) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.map((track) =>
         track.id === trackId
@@ -193,6 +222,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   toggleTrackMute: (trackId) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.map((track) =>
         track.id === trackId ? { ...track, muted: !track.muted } : track