feat: use mouse-based dragging for clips

fixes an issue where dragging a clip would create a duplicate instead of dragging clip directly, and gives us more control

moved the drag to a hook for cleaner code

apps/web/src/hooks/use-drag-clip.ts

@@ -0,0 +1,213 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useTimelineStore } from "@/stores/timeline-store";
+
+interface DragState {
+  isDragging: boolean;
+  clipId: string | null;
+  trackId: string | null;
+  startMouseX: number;
+  startClipTime: number;
+  clickOffsetTime: number;
+  currentTime: number;
+}
+
+export function useDragClip(zoomLevel: number) {
+  const { tracks, updateClipStartTime, moveClipToTrack } = useTimelineStore();
+
+  const [dragState, setDragState] = useState<DragState>({
+    isDragging: false,
+    clipId: null,
+    trackId: null,
+    startMouseX: 0,
+    startClipTime: 0,
+    clickOffsetTime: 0,
+    currentTime: 0,
+  });
+
+  const timelineRef = useRef<HTMLDivElement>(null);
+
+  const startDrag = useCallback(
+    (
+      e: React.MouseEvent,
+      clipId: string,
+      trackId: string,
+      clipStartTime: number,
+      clickOffsetTime: number
+    ) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      setDragState({
+        isDragging: true,
+        clipId,
+        trackId,
+        startMouseX: e.clientX,
+        startClipTime: clipStartTime,
+        clickOffsetTime,
+        currentTime: clipStartTime,
+      });
+    },
+    []
+  );
+
+  const updateDrag = useCallback(
+    (e: MouseEvent) => {
+      if (!dragState.isDragging || !timelineRef.current) return;
+
+      const timelineRect = timelineRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - timelineRect.left;
+      const mouseTime = Math.max(0, mouseX / (50 * zoomLevel));
+      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
+      const snappedTime = Math.round(adjustedTime * 10) / 10;
+
+      setDragState((prev) => ({
+        ...prev,
+        currentTime: snappedTime,
+      }));
+    },
+    [dragState.isDragging, dragState.clickOffsetTime, zoomLevel]
+  );
+
+  const endDrag = useCallback(
+    (targetTrackId?: string) => {
+      if (!dragState.isDragging || !dragState.clipId || !dragState.trackId)
+        return;
+
+      const finalTrackId = targetTrackId || dragState.trackId;
+      const finalTime = dragState.currentTime;
+
+      // Check for overlaps
+      const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
+      const targetTrack = tracks.find((t) => t.id === finalTrackId);
+      const movingClip = sourceTrack?.clips.find(
+        (c) => c.id === dragState.clipId
+      );
+
+      if (!movingClip || !targetTrack) {
+        setDragState((prev) => ({ ...prev, isDragging: false }));
+        return;
+      }
+
+      const movingClipDuration =
+        movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
+      const movingClipEnd = finalTime + movingClipDuration;
+
+      const hasOverlap = targetTrack.clips.some((existingClip) => {
+        // Skip the clip being moved if it's on the same track
+        if (
+          dragState.trackId === finalTrackId &&
+          existingClip.id === dragState.clipId
+        ) {
+          return false;
+        }
+
+        const existingStart = existingClip.startTime;
+        const existingEnd =
+          existingClip.startTime +
+          (existingClip.duration -
+            existingClip.trimStart -
+            existingClip.trimEnd);
+
+        return finalTime < existingEnd && movingClipEnd > existingStart;
+      });
+
+      if (!hasOverlap) {
+        if (dragState.trackId === finalTrackId) {
+          // Moving within same track
+          updateClipStartTime(finalTrackId, dragState.clipId!, finalTime);
+        } else {
+          // Moving to different track
+          moveClipToTrack(dragState.trackId!, finalTrackId, dragState.clipId!);
+          requestAnimationFrame(() => {
+            updateClipStartTime(finalTrackId, dragState.clipId!, finalTime);
+          });
+        }
+      }
+
+      setDragState({
+        isDragging: false,
+        clipId: null,
+        trackId: null,
+        startMouseX: 0,
+        startClipTime: 0,
+        clickOffsetTime: 0,
+        currentTime: 0,
+      });
+    },
+    [dragState, tracks, updateClipStartTime, moveClipToTrack]
+  );
+
+  const cancelDrag = useCallback(() => {
+    setDragState({
+      isDragging: false,
+      clipId: null,
+      trackId: null,
+      startMouseX: 0,
+      startClipTime: 0,
+      clickOffsetTime: 0,
+      currentTime: 0,
+    });
+  }, []);
+
+  // Global mouse events
+  useEffect(() => {
+    if (!dragState.isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => updateDrag(e);
+    const handleMouseUp = () => endDrag();
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") cancelDrag();
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [dragState.isDragging, updateDrag, endDrag, cancelDrag]);
+
+  const getDraggedClipPosition = useCallback(
+    (clipId: string) => {
+      if (dragState.isDragging && dragState.clipId === clipId) {
+        return dragState.currentTime;
+      }
+      return null;
+    },
+    [dragState]
+  );
+
+  const isValidDropTarget = useCallback(
+    (trackId: string) => {
+      if (!dragState.isDragging) return false;
+
+      const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
+      const targetTrack = tracks.find((t) => t.id === trackId);
+
+      if (!sourceTrack || !targetTrack) return false;
+
+      // For now, allow drops on same track type
+      return sourceTrack.type === targetTrack.type;
+    },
+    [dragState.isDragging, dragState.trackId, tracks]
+  );
+
+  return {
+    // State
+    isDragging: dragState.isDragging,
+    draggedClipId: dragState.clipId,
+
+    // Methods
+    startDrag,
+    endDrag,
+    cancelDrag,
+    getDraggedClipPosition,
+    isValidDropTarget,
+
+    // Refs
+    timelineRef,
+  };
+}