refactor: move timeline element context menu into timeline-element.tsx

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

@@ -11,6 +11,7 @@ import {
   ChevronRight,
   ChevronLeft,
   Type,
+  Copy,
 } from "lucide-react";
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
@@ -33,6 +34,13 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
 } from "../ui/dropdown-menu";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
 
 export function TimelineElement({
   element,
@@ -52,6 +60,7 @@ export function TimelineElement({
     splitAndKeepLeft,
     splitAndKeepRight,
     separateAudio,
+    addElementToTrack,
   } = useTimelineStore();
   const { currentTime } = usePlaybackStore();
 
@@ -172,6 +181,38 @@ export function TimelineElement({
     return mediaItem?.type === "video" && track.type === "media";
   };
 
+  const handleElementSplitContext = () => {
+    const effectiveStart = element.startTime;
+    const effectiveEnd =
+      element.startTime +
+      (element.duration - element.trimStart - element.trimEnd);
+
+    if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+      const secondElementId = splitElement(track.id, element.id, currentTime);
+      if (!secondElementId) {
+        toast.error("Failed to split element");
+      }
+    } else {
+      toast.error("Playhead must be within element to split");
+    }
+  };
+
+  const handleElementDuplicateContext = () => {
+    const { id, ...elementWithoutId } = element;
+    addElementToTrack(track.id, {
+      ...elementWithoutId,
+      name: element.name + " (copy)",
+      startTime:
+        element.startTime +
+        (element.duration - element.trimStart - element.trimEnd) +
+        0.1,
+    });
+  };
+
+  const handleElementDeleteContext = () => {
+    removeElementFromTrack(track.id, element.id);
+  };
+
   const renderElementContent = () => {
     if (element.type === "text") {
       return (
@@ -255,6 +296,8 @@ export function TimelineElement({
   };
 
   return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
         <div
           className={`absolute top-0 h-full select-none timeline-element ${
             isBeingDragged ? "z-50" : "z-10"
@@ -297,5 +340,25 @@ export function TimelineElement({
             )}
           </div>
         </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={handleElementSplitContext}>
+          <Scissors className="h-4 w-4 mr-2" />
+          Split at playhead
+        </ContextMenuItem>
+        <ContextMenuItem onClick={handleElementDuplicateContext}>
+          <Copy className="h-4 w-4 mr-2" />
+          Duplicate {element.type === "text" ? "text" : "clip"}
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          onClick={handleElementDeleteContext}
+          className="text-destructive focus:text-destructive"
+        >
+          <Trash2 className="h-4 w-4 mr-2" />
+          Delete {element.type === "text" ? "text" : "clip"}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   );
 }

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

@@ -4,15 +4,7 @@ import { useRef, useState, useEffect } from "react";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
 import { toast } from "sonner";
-import { Copy, Scissors, Trash2 } from "lucide-react";
 import { TimelineElement } from "./timeline-element";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "../ui/context-menu";
 import {
   TimelineTrack,
   sortTracksByOrder,
@@ -882,10 +874,8 @@ export function TimelineTrackContent({
               };
 
               return (
-                <ContextMenu key={element.id}>
-                  <ContextMenuTrigger asChild>
-                    <div>
                 <TimelineElement
+                  key={element.id}
                   element={element}
                   track={track}
                   zoomLevel={zoomLevel}
@@ -893,27 +883,6 @@ export function TimelineTrackContent({
                   onElementMouseDown={handleElementMouseDown}
                   onElementClick={handleElementClick}
                 />
-                    </div>
-                  </ContextMenuTrigger>
-                  <ContextMenuContent>
-                    <ContextMenuItem onClick={handleElementSplit}>
-                      <Scissors className="h-4 w-4 mr-2" />
-                      Split at playhead
-                    </ContextMenuItem>
-                    <ContextMenuItem onClick={handleElementDuplicate}>
-                      <Copy className="h-4 w-4 mr-2" />
-                      Duplicate {element.type === "text" ? "text" : "clip"}
-                    </ContextMenuItem>
-                    <ContextMenuSeparator />
-                    <ContextMenuItem
-                      onClick={handleElementDelete}
-                      className="text-destructive focus:text-destructive"
-                    >
-                      <Trash2 className="h-4 w-4 mr-2" />
-                      Delete {element.type === "text" ? "text" : "clip"}
-                    </ContextMenuItem>
-                  </ContextMenuContent>
-                </ContextMenu>
               );
             })}
           </>