refactor: centralize logic to zustand store

apps/web/src/components/editor/media-panel/views/media.tsx

@@ -3,7 +3,6 @@
 import { useDragDrop } from "@/hooks/use-drag-drop";
 import { processMediaFiles } from "@/lib/media-processing";
 import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { useTimelineStore } from "@/stores/timeline-store";
 import { Image, Music, Plus, Upload, Video } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -85,25 +84,7 @@ export function MediaView() {
       return;
     }
 
-    // Remove elements automatically when delete media
-    const { tracks, removeTrack } = useTimelineStore.getState();
-    tracks.forEach((track) => {
-      const elementsToRemove = track.elements.filter(
-        (element) => element.type === "media" && element.mediaId === id
-      );
-      elementsToRemove.forEach((element) => {
-        useTimelineStore
-          .getState()
-          .removeElementFromTrack(track.id, element.id);
-      });
-      // Only remove track if it becomes empty and has no other elements
-      const updatedTrack = useTimelineStore
-        .getState()
-        .tracks.find((t) => t.id === track.id);
-      if (updatedTrack && updatedTrack.elements.length === 0) {
-        removeTrack(track.id);
-      }
-    });
+    // Media store now handles cascade deletion automatically
     await removeMediaItem(activeProject.id, id);
   };
 

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

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { storageService } from "@/lib/storage/storage-service";
+import { useTimelineStore } from "./timeline-store";
 
 export type MediaType = "image" | "video" | "audio";
 
@@ -192,6 +193,27 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
       }
     }
 
+    // CASCADE DELETION - Remove timeline elements that use this media
+    const { tracks, removeElementFromTrack, removeTrack } =
+      useTimelineStore.getState();
+
+    tracks.forEach((track) => {
+      const elementsToRemove = track.elements.filter(
+        (element) => element.type === "media" && element.mediaId === id
+      );
+      elementsToRemove.forEach((element) => {
+        removeElementFromTrack(track.id, element.id);
+      });
+    });
+
+    // Clean up empty tracks after removing elements
+    const updatedTracks = useTimelineStore.getState().tracks;
+    updatedTracks.forEach((track) => {
+      if (track.elements.length === 0) {
+        removeTrack(track.id);
+      }
+    });
+
     // Remove from local state immediately
     set((state) => ({
       mediaItems: state.mediaItems.filter((media) => media.id !== id),