feat:implemented-undo-feature-for-timeline

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) =>
-        track.id === trackId
-          ? {
-              ...track,
-              clips: track.clips.filter((clip) => clip.id !== clipId),
-            }
-          : track
-      ),
+      tracks: state.tracks
+        .map((track) =>
+          track.id === trackId
+            ? { ...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,25 +168,29 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
       if (!clipToMove) return state;
 
       return {
-        tracks: state.tracks.map((track) => {
-          if (track.id === fromTrackId) {
-            return {
-              ...track,
-              clips: track.clips.filter((clip) => clip.id !== clipId),
-            };
-          } else if (track.id === toTrackId) {
-            return {
-              ...track,
-              clips: [...track.clips, clipToMove],
-            };
-          }
-          return track;
-        }),
+        tracks: state.tracks
+          .map((track) => {
+            if (track.id === fromTrackId) {
+              return {
+                ...track,
+                clips: track.clips.filter((clip) => clip.id !== clipId),
+              };
+            } else if (track.id === toTrackId) {
+              return {
+                ...track,
+                clips: [...track.clips, clipToMove],
+              };
+            }
+            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