Merge branch 'main' of https://github.com/mazeincoding/AppCut

apps/web/src/app/(auth)/login/page.tsx

@@ -52,8 +52,8 @@ function LoginForm() {
     try {
       await signIn.social({
         provider: "google",
+        callbackURL: "/editor",
       });
-      router.push("/editor");
     } catch (error) {
       setError("Failed to sign in with Google. Please try again.");
       setIsGoogleLoading(false);

apps/web/src/app/api/waitlist/route.ts

@@ -1,7 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
-import { db } from "@opencut/db";
+import { db, eq } from "@opencut/db";
 import { waitlist } from "@opencut/db/schema";
-import { eq } from "drizzle-orm";
 import { nanoid } from "nanoid";
 import { waitlistRateLimit } from "@/lib/rate-limit";
 import { z } from "zod";

apps/web/src/components/auth-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { signUp, signIn } from "@opencut/auth/client";
+import { signIn, signUp } from "@opencut/auth/client";
 import { Button } from "@/components/ui/button";
 import {
   Card,

apps/web/src/components/editor/preview-panel.tsx

@@ -249,7 +249,7 @@ export function PreviewPanel() {
           {activeClips.length === 0 ? (
             <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
               {tracks.length === 0
-                ? "Drop media to start editing"
+                ? "No media added to timeline"
                 : "No clips at current time"}
             </div>
           ) : (

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

@@ -1,37 +1,27 @@
 "use client";
 
-import { ScrollArea } from "../ui/scroll-area";
+import { processMediaFiles } from "@/lib/media-processing";
-import { Button } from "../ui/button";
-import {
-  Scissors,
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  Trash2,
-  Snowflake,
-  Copy,
-  SplitSquareHorizontal,
-  Volume2,
-  VolumeX,
-  Pause,
-  Play,
-} from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipProvider,
-} from "../ui/tooltip";
-import {
-  useTimelineStore,
-  type TimelineTrack,
-  type TimelineClip as TypeTimelineClip,
-} from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
-import { useDragClip } from "@/hooks/use-drag-clip";
+import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
-import { processMediaFiles } from "@/lib/media-processing";
+import {
+  ArrowLeftToLine,
+  ArrowRightToLine,
+  Copy,
+  MoreVertical,
+  Pause,
+  Play,
+  Scissors,
+  Snowflake,
+  SplitSquareHorizontal,
+  Trash2,
+  Volume2,
+  VolumeX,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { useState, useRef, useEffect, useCallback } from "react";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -39,8 +29,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
-import { TimelineClip } from "./timeline-clip";
+
-import { ContextMenuState } from "@/types/timeline";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+import AudioWaveform from "./audio-waveform";
+
 
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.
@@ -60,14 +58,6 @@ export function Timeline() {
     updateClipTrim,
     undo,
     redo,
-    moveClipToTrack,
-    updateClipStartTime,
-    selectClip,
-    deselectClip,
-    dragState,
-    startDrag: startDragAction,
-    updateDragTime,
-    endDrag: endDragAction,
   } = useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
   const {
@@ -82,14 +72,19 @@ export function Timeline() {
   } = usePlaybackStore();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
-  const [progress, setProgress] = useState(0);
   const [zoomLevel, setZoomLevel] = useState(1);
   const dragCounterRef = useRef(0);
   const timelineRef = useRef<HTMLDivElement>(null);
   const [isInTimeline, setIsInTimeline] = useState(false);
 
   // Unified context menu state
-  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [contextMenu, setContextMenu] = useState<{
+    type: "track" | "clip";
+    trackId: string;
+    clipId?: string;
+    x: number;
+    y: number;
+  } | null>(null);
 
   // Marquee selection state
   const [marquee, setMarquee] = useState<{
@@ -222,7 +217,7 @@ export function Timeline() {
     const bx2 = clamp(x2, 0, rect.width);
     const by1 = clamp(y1, 0, rect.height);
     const by2 = clamp(y2, 0, rect.height);
-    let newSelection: { trackId: string; clipId: string }[] = [];
+    let newSelection: { trackId: string; clipId: string; }[] = [];
     tracks.forEach((track, trackIdx) => {
       track.clips.forEach((clip) => {
         const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
@@ -342,12 +337,8 @@ export function Timeline() {
     } else if (e.dataTransfer.files?.length > 0) {
       // Handle file drops by creating new tracks
       setIsProcessing(true);
-      setProgress(0);
       try {
-        const processedItems = await processMediaFiles(
+        const processedItems = await processMediaFiles(e.dataTransfer.files);
-          e.dataTransfer.files,
-          (p) => setProgress(p)
-        );
         for (const processedItem of processedItems) {
           addMediaItem(processedItem);
           const currentMediaItems = useMediaStore.getState().mediaItems;
@@ -375,7 +366,6 @@ export function Timeline() {
         toast.error("Failed to process dropped files");
       } finally {
         setIsProcessing(false);
-        setProgress(0);
       }
     }
   };
@@ -607,9 +597,8 @@ export function Timeline() {
           <div className="w-px h-6 bg-border mx-1" />
 
           {/* Time Display */}
-          <div
+          <div className="text-xs text-muted-foreground font-mono px-2"
-            className="text-xs text-muted-foreground font-mono px-2"
+            style={{ minWidth: '18ch', textAlign: 'center' }}
-            style={{ minWidth: "18ch", textAlign: "center" }}
           >
             {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
           </div>
@@ -792,16 +781,14 @@ export function Timeline() {
                     return (
                       <div
                         key={i}
-                        className={`absolute top-0 bottom-0 ${
+                        className={`absolute top-0 bottom-0 ${isMainMarker
-                          isMainMarker
                           ? "border-l border-muted-foreground/40"
                           : "border-l border-muted-foreground/20"
                           }`}
                         style={{ left: `${time * 50 * zoomLevel}px` }}
                       >
                         <span
-                          className={`absolute top-1 left-1 text-xs ${
+                          className={`absolute top-1 left-1 text-xs ${isMainMarker
-                            isMainMarker
                             ? "text-muted-foreground font-medium"
                             : "text-muted-foreground/70"
                             }`}
@@ -865,8 +852,7 @@ export function Timeline() {
                   >
                     <div className="flex items-center flex-1 min-w-0">
                       <div
-                        className={`w-3 h-3 rounded-full flex-shrink-0 ${
+                        className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === "video"
-                          track.type === "video"
                           ? "bg-blue-500"
                           : track.type === "audio"
                             ? "bg-green-500"
@@ -936,16 +922,6 @@ export function Timeline() {
                             y: e.clientY,
                           });
                         }}
-                        onClick={(e) => {
-                          // If clicking empty area (not on a clip), deselect all clips
-                          if (
-                            !(e.target as HTMLElement).closest(".timeline-clip")
-                          ) {
-                            const { clearSelectedClips } =
-                              useTimelineStore.getState();
-                            clearSelectedClips();
-                          }
-                        }}
                       >
                         <TimelineTrackContent
                           track={track}
@@ -959,7 +935,7 @@ export function Timeline() {
                     {/* Playhead for tracks area (scrubbable) */}
                     {tracks.length > 0 && (
                       <div
-                        className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-20"
+                        className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-20 cursor-ew-resize"
                         style={{
                           left: `${playheadPosition * 50 * zoomLevel}px`,
                           height: `${tracks.length * 60}px`,
@@ -970,12 +946,14 @@ export function Timeline() {
                   </>
                 )}
                 {isDragOver && (
-                  <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">
+                  <div
-                    <div>
+                    className="absolute left-0 right-0 border-2 border-dashed border-accent flex items-center justify-center text-muted-foreground"
-                      {isProcessing
+                    style={{
-                        ? `Processing ${progress}%`
+                      top: `${tracks.length * 60}px`,
-                        : "Drop media here to add to timeline"}
+                      height: "60px",
-                    </div>
+                    }}
+                  >
+                    <div>Drop media here to add a new track</div>
                   </div>
                 )}
               </div>
@@ -1149,193 +1127,136 @@ function TimelineTrackContent({
 }: {
   track: TimelineTrack;
   zoomLevel: number;
-  setContextMenu: (menu: ContextMenuState | null) => void;
+  setContextMenu: (
-  contextMenu: ContextMenuState | null;
+    menu: {
+      type: "track" | "clip";
+      trackId: string;
+      clipId?: string;
+      x: number;
+      y: number;
+    } | null
+  ) => void;
+  contextMenu: {
+    type: "track" | "clip";
+    trackId: string;
+    clipId?: string;
+    x: number;
+    y: number;
+  } | null;
 }) {
   const { mediaItems } = useMediaStore();
   const {
     tracks,
     moveClipToTrack,
+    updateClipTrim,
     updateClipStartTime,
     addClipToTrack,
+    removeClipFromTrack,
+    toggleTrackMute,
     selectedClips,
     selectClip,
     deselectClip,
-    dragState,
-    startDrag: startDragAction,
-    updateDragTime,
-    endDrag: endDragAction,
   } = useTimelineStore();
-
+  const { currentTime } = usePlaybackStore();
-  const timelineRef = useRef<HTMLDivElement>(null);
   const [isDropping, setIsDropping] = useState(false);
   const [dropPosition, setDropPosition] = useState<number | null>(null);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
   const [wouldOverlap, setWouldOverlap] = useState(false);
-  const dragCounterRef = useRef(0);
+  const [resizing, setResizing] = useState<{
-  const [mouseDownLocation, setMouseDownLocation] = useState<{
+    clipId: string;
-    x: number;
+    side: "left" | "right";
-    y: number;
+    startX: number;
+    initialTrimStart: number;
+    initialTrimEnd: number;
   } | null>(null);
+  const dragCounterRef = useRef(0);
+  const [clipMenuOpen, setClipMenuOpen] = useState<string | null>(null);
 
-  // Set up mouse event listeners for drag
+  // Handle clip deletion
-  useEffect(() => {
+  const handleDeleteClip = (clipId: string) => {
-    if (!dragState.isDragging) return;
+    removeClipFromTrack(track.id, clipId);
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!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;
-
-      updateDragTime(snappedTime);
   };
 
-    const handleMouseUp = () => {
+  const handleResizeStart = (
-      if (!dragState.clipId || !dragState.trackId) return;
+    e: React.MouseEvent,
-
+    clipId: string,
-      const finalTime = dragState.currentTime;
+    side: "left" | "right"
-
+  ) => {
-      // Check for overlaps and update position
-      const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-      const movingClip = sourceTrack?.clips.find(
-        (c) => c.id === dragState.clipId
-      );
-
-      if (movingClip) {
-        const movingClipDuration =
-          movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
-        const movingClipEnd = finalTime + movingClipDuration;
-
-        const targetTrack = tracks.find((t) => t.id === track.id);
-        const hasOverlap = targetTrack?.clips.some((existingClip) => {
-          if (
-            dragState.trackId === track.id &&
-            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 === track.id) {
-            updateClipStartTime(track.id, dragState.clipId, finalTime);
-          } else {
-            moveClipToTrack(dragState.trackId, track.id, dragState.clipId);
-            requestAnimationFrame(() => {
-              updateClipStartTime(track.id, dragState.clipId!, finalTime);
-            });
-          }
-        }
-      }
-
-      endDragAction();
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [
-    dragState.isDragging,
-    dragState.clickOffsetTime,
-    dragState.clipId,
-    dragState.trackId,
-    dragState.currentTime,
-    zoomLevel,
-    tracks,
-    track.id,
-    updateDragTime,
-    updateClipStartTime,
-    moveClipToTrack,
-    endDragAction,
-  ]);
-
-  const handleClipMouseDown = (e: React.MouseEvent, clip: TypeTimelineClip) => {
-    setMouseDownLocation({ x: e.clientX, y: e.clientY });
-    // Handle multi-selection only in mousedown
-    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-      selectClip(track.id, clip.id, true);
-    }
-
-    // Calculate the offset from the left edge of the clip to where the user clicked
-    const clipElement = e.currentTarget as HTMLElement;
-    const clipRect = clipElement.getBoundingClientRect();
-    const clickOffsetX = e.clientX - clipRect.left;
-    const clickOffsetTime = clickOffsetX / (50 * zoomLevel);
-
-    startDragAction(
-      clip.id,
-      track.id,
-      e.clientX,
-      clip.startTime,
-      clickOffsetTime
-    );
-  };
-
-  const handleClipClick = (e: React.MouseEvent, clip: TypeTimelineClip) => {
     e.stopPropagation();
-
-    // Check if mouse moved significantly
-    if (mouseDownLocation) {
-      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);
-      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);
-      // If it moved more than a few pixels, consider it a drag and not a click.
-      if (deltaX > 5 || deltaY > 5) {
-        setMouseDownLocation(null); // Reset for next interaction
-        return;
-      }
-    }
-
-    // Close context menu if it's open
-    if (contextMenu) {
-      setContextMenu(null);
-      return; // Don't handle selection when closing context menu
-    }
-
-    // Skip selection logic for multi-selection (handled in mousedown)
-    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-      return;
-    }
-
-    // Handle single selection/deselection
-    const isSelected = selectedClips.some(
-      (c) => c.trackId === track.id && c.clipId === clip.id
-    );
-
-    if (isSelected) {
-      // If clip is selected, deselect it
-      deselectClip(track.id, clip.id);
-    } else {
-      // If clip is not selected, select it (replacing other selections)
-      selectClip(track.id, clip.id, false);
-    }
-  };
-
-  const handleClipContextMenu = (e: React.MouseEvent, clipId: string) => {
     e.preventDefault();
-    e.stopPropagation();
+
-    setContextMenu({
+    const clip = track.clips.find((c) => c.id === clipId);
-      type: "clip",
+    if (!clip) return;
-      trackId: track.id,
+
-      clipId: clipId,
+    setResizing({
-      x: e.clientX,
+      clipId,
-      y: e.clientY,
+      side,
+      startX: e.clientX,
+      initialTrimStart: clip.trimStart,
+      initialTrimEnd: clip.trimEnd,
     });
   };
 
+  const updateTrimFromMouseMove = (e: { clientX: number; }) => {
+    if (!resizing) return;
+
+    const clip = track.clips.find((c) => c.id === resizing.clipId);
+    if (!clip) return;
+
+    const deltaX = e.clientX - resizing.startX;
+    const deltaTime = deltaX / (50 * zoomLevel);
+
+    if (resizing.side === "left") {
+      const newTrimStart = Math.max(
+        0,
+        Math.min(
+          clip.duration - clip.trimEnd - 0.1,
+          resizing.initialTrimStart + deltaTime
+        )
+      );
+      updateClipTrim(track.id, clip.id, newTrimStart, clip.trimEnd);
+    } else {
+      const newTrimEnd = Math.max(
+        0,
+        Math.min(
+          clip.duration - clip.trimStart - 0.1,
+          resizing.initialTrimEnd - deltaTime
+        )
+      );
+      updateClipTrim(track.id, clip.id, clip.trimStart, newTrimEnd);
+    }
+  };
+
+  const handleResizeMove = (e: React.MouseEvent) => {
+    updateTrimFromMouseMove(e);
+  };
+
+  const handleResizeEnd = () => {
+    setResizing(null);
+  };
+
+  const handleClipDragStart = (e: React.DragEvent, clip: any) => {
+    const dragData = { clipId: clip.id, trackId: track.id, name: clip.name };
+
+    e.dataTransfer.setData(
+      "application/x-timeline-clip",
+      JSON.stringify(dragData)
+    );
+    e.dataTransfer.effectAllowed = "move";
+
+    // Add visual feedback to the dragged element
+    const target = e.currentTarget.parentElement as HTMLElement;
+    target.style.opacity = "0.5";
+    target.style.transform = "scale(0.95)";
+  };
+
+  const handleClipDragEnd = (e: React.DragEvent) => {
+    // Reset visual feedback
+    const target = e.currentTarget.parentElement as HTMLElement;
+    target.style.opacity = "";
+    target.style.transform = "";
+  };
+
   const handleTrackDragOver = (e: React.DragEvent) => {
     e.preventDefault();
 
@@ -1366,7 +1287,9 @@ function TimelineTrackContent({
             return;
           }
         }
-      } catch (error) {}
+      } catch (error) {
+        console.error("Error parsing dropped media item:", error);
+      }
     }
 
     // Calculate drop position for overlap checking
@@ -1421,7 +1344,7 @@ function TimelineTrackContent({
             (t: TimelineTrack) => t.id === fromTrackId
           );
           const movingClip = sourceTrack?.clips.find(
-            (c: TypeTimelineClip) => c.id === clipId
+            (c: any) => c.id === clipId
           );
 
           if (movingClip) {
@@ -1451,12 +1374,14 @@ function TimelineTrackContent({
 
     if (wouldOverlap) {
       e.dataTransfer.dropEffect = "none";
+      setIsDraggedOver(true);
       setWouldOverlap(true);
       setDropPosition(Math.round(dropTime * 10) / 10);
       return;
     }
 
     e.dataTransfer.dropEffect = hasTimelineClip ? "move" : "copy";
+    setIsDraggedOver(true);
     setWouldOverlap(false);
     setDropPosition(Math.round(dropTime * 10) / 10);
   };
@@ -1475,6 +1400,7 @@ function TimelineTrackContent({
 
     dragCounterRef.current++;
     setIsDropping(true);
+    setIsDraggedOver(true);
   };
 
   const handleTrackDragLeave = (e: React.DragEvent) => {
@@ -1493,6 +1419,7 @@ function TimelineTrackContent({
 
     if (dragCounterRef.current === 0) {
       setIsDropping(false);
+      setIsDraggedOver(false);
       setWouldOverlap(false);
       setDropPosition(null);
     }
@@ -1505,6 +1432,7 @@ function TimelineTrackContent({
     // Reset all drag states
     dragCounterRef.current = 0;
     setIsDropping(false);
+    setIsDraggedOver(false);
     setWouldOverlap(false);
     const currentDropPosition = dropPosition;
     setDropPosition(null);
@@ -1536,36 +1464,23 @@ function TimelineTrackContent({
         );
         if (!timelineClipData) return;
 
-        const {
+        const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData);
-          clipId,
-          trackId: fromTrackId,
-          clickOffsetTime = 0,
-        } = JSON.parse(timelineClipData);
 
         // Find the clip being moved
         const sourceTrack = tracks.find(
           (t: TimelineTrack) => t.id === fromTrackId
         );
-        const movingClip = sourceTrack?.clips.find(
+        const movingClip = sourceTrack?.clips.find((c: any) => c.id === clipId);
-          (c: TypeTimelineClip) => c.id === clipId
-        );
 
         if (!movingClip) {
           toast.error("Clip not found");
           return;
         }
 
-        // Adjust position based on where user clicked on the clip
-        const adjustedStartTime = snappedTime - clickOffsetTime;
-        const finalStartTime = Math.max(
-          0,
-          Math.round(adjustedStartTime * 10) / 10
-        );
-
         // Check for overlaps with existing clips (excluding the moving clip itself)
         const movingClipDuration =
           movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
-        const movingClipEnd = finalStartTime + movingClipDuration;
+        const movingClipEnd = snappedTime + movingClipDuration;
 
         const hasOverlap = track.clips.some((existingClip) => {
           // Skip the clip being moved if it's on the same track
@@ -1580,7 +1495,7 @@ function TimelineTrackContent({
               existingClip.trimEnd);
 
           // Check if clips overlap
-          return finalStartTime < existingEnd && movingClipEnd > existingStart;
+          return snappedTime < existingEnd && movingClipEnd > existingStart;
         });
 
         if (hasOverlap) {
@@ -1592,12 +1507,12 @@ function TimelineTrackContent({
 
         if (fromTrackId === track.id) {
           // Moving within same track
-          updateClipStartTime(track.id, clipId, finalStartTime);
+          updateClipStartTime(track.id, clipId, snappedTime);
         } else {
           // Moving to different track
           moveClipToTrack(fromTrackId, track.id, clipId);
           requestAnimationFrame(() => {
-            updateClipStartTime(track.id, clipId, finalStartTime);
+            updateClipStartTime(track.id, clipId, snappedTime);
           });
         }
       } else if (hasMediaItem) {
@@ -1665,9 +1580,113 @@ function TimelineTrackContent({
     }
   };
 
+  const getTrackColor = (type: string) => {
+    switch (type) {
+      case "video":
+        return "bg-blue-500/20 border-blue-500/30";
+      case "audio":
+        return "bg-green-500/20 border-green-500/30";
+      case "effects":
+        return "bg-purple-500/20 border-purple-500/30";
+      default:
+        return "bg-gray-500/20 border-gray-500/30";
+    }
+  };
+
+  const renderClipContent = (clip: any) => {
+    const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+
+    if (!mediaItem) {
+      return (
+        <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
+      );
+    }
+
+    if (mediaItem.type === "image") {
+      return (
+        <div className="w-full h-full flex items-center justify-center">
+          <img
+            src={mediaItem.url}
+            alt={mediaItem.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      );
+    }
+
+    if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
+      return (
+        <div className="w-full h-full flex items-center gap-2">
+          <div className="w-8 h-8 flex-shrink-0">
+            <img
+              src={mediaItem.thumbnailUrl}
+              alt={mediaItem.name}
+              className="w-full h-full object-cover rounded-sm"
+            />
+          </div>
+          <span className="text-xs text-foreground/80 truncate flex-1">
+            {clip.name}
+          </span>
+        </div>
+      );
+    }
+
+    if (mediaItem.type === "audio") {
+    return (
+      <div className="w-full h-full flex items-center gap-2">
+        <div className="flex-1 min-w-0">
+          <AudioWaveform 
+            audioUrl={mediaItem.url} 
+            height={24}
+            className="w-full"
+          />
+        </div>
+      </div>
+    );
+  }
+
+    // Fallback for videos without thumbnails
+    return (
+      <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
+    );
+  };
+
+  const handleSplitClip = (clip: any) => {
+    // Use current playback time as split point
+    const splitTime = currentTime;
+    // Only split if splitTime is within the clip's effective range
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
+    const firstDuration = splitTime - effectiveStart;
+    const secondDuration = effectiveEnd - splitTime;
+    // First part: adjust original clip
+    updateClipTrim(
+      track.id,
+      clip.id,
+      clip.trimStart,
+      clip.trimEnd + secondDuration
+    );
+    // Second part: add new clip after split
+    addClipToTrack(track.id, {
+      mediaId: clip.mediaId,
+      name: clip.name + " (cut)",
+      duration: clip.duration,
+      startTime: splitTime,
+      trimStart: clip.trimStart + firstDuration,
+      trimEnd: clip.trimEnd,
+    });
+  };
+
   return (
     <div
-      className="w-full h-full hover:bg-muted/20"
+      className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
+        ? wouldOverlap
+          ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
+          : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
+        : "hover:bg-muted/20"
+        }`}
       onContextMenu={(e) => {
         e.preventDefault();
         // Only show track menu if we didn't click on a clip
@@ -1680,26 +1699,18 @@ function TimelineTrackContent({
           });
         }
       }}
-      onClick={(e) => {
-        // If clicking empty area (not on a clip), deselect all clips
-        if (!(e.target as HTMLElement).closest(".timeline-clip")) {
-          const { clearSelectedClips } = useTimelineStore.getState();
-          clearSelectedClips();
-        }
-      }}
       onDragOver={handleTrackDragOver}
       onDragEnter={handleTrackDragEnter}
       onDragLeave={handleTrackDragLeave}
       onDrop={handleTrackDrop}
+      onMouseMove={handleResizeMove}
+      onMouseUp={handleResizeEnd}
+      onMouseLeave={handleResizeEnd}
     >
-      <div
+      <div className="h-full relative track-clips-container min-w-full">
-        ref={timelineRef}
-        className="h-full relative track-clips-container min-w-full"
-      >
         {track.clips.length === 0 ? (
           <div
-            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
+            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping
-              isDropping
               ? wouldOverlap
                 ? "border-red-500 bg-red-500/10 text-red-600"
                 : "border-blue-500 bg-blue-500/10 text-blue-600"
@@ -1715,26 +1726,138 @@ function TimelineTrackContent({
         ) : (
           <>
             {track.clips.map((clip) => {
+              const effectiveDuration =
+                clip.duration - clip.trimStart - clip.trimEnd;
+              const clipWidth = Math.max(
+                80,
+                effectiveDuration * 50 * zoomLevel
+              );
+              const clipLeft = clip.startTime * 50 * zoomLevel;
+              const isSelected = selectedClips.some(
+                (c) => c.trackId === track.id && c.clipId === clip.id
+              );
+              return (
+                <div
+                  key={clip.id}
+                  className={`timeline-clip absolute h-full border transition-all-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`}
+                  style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+
+                    // Close context menu if it's open
+                    if (contextMenu) {
+                      setContextMenu(null);
+                      return; // Don't handle selection when closing context menu
+                    }
+
                     const isSelected = selectedClips.some(
                       (c) => c.trackId === track.id && c.clipId === clip.id
                     );
 
-              return (
+                    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-                <TimelineClip
+                      // Multi-selection mode: toggle the clip
-                  key={clip.id}
+                      selectClip(track.id, clip.id, true);
-                  clip={clip}
+                    } else if (isSelected) {
-                  track={track}
+                      // If clip is already selected, deselect it
-                  zoomLevel={zoomLevel}
+                      deselectClip(track.id, clip.id);
-                  isSelected={isSelected}
+                    } else {
-                  onContextMenu={handleClipContextMenu}
+                      // If clip is not selected, select it (replacing other selections)
-                  onClipMouseDown={handleClipMouseDown}
+                      selectClip(track.id, clip.id, false);
-                  onClipClick={handleClipClick}
+                    }
+                  }}
+                  tabIndex={0}
+                  onContextMenu={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setContextMenu({
+                      type: "clip",
+                      trackId: track.id,
+                      clipId: clip.id,
+                      x: e.clientX,
+                      y: e.clientY,
+                    });
+                  }}
+                >
+                  {/* Left trim handle */}
+                  <div
+                    className="absolute left-0 top-0 bottom-0 w-2 cursor-w-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
+                    onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
                   />
+                  {/* Clip content */}
+                  <div
+                    className="flex-1 cursor-grab active:cursor-grabbing relative"
+                    draggable={true}
+                    onDragStart={(e) => handleClipDragStart(e, clip)}
+                    onDragEnd={handleClipDragEnd}
+                  >
+                    {renderClipContent(clip)}
+                    {/* Clip options menu */}
+                    <div className="absolute top-1 right-1 z-10">
+                      <Button
+                        variant="text"
+                        size="icon"
+                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                        onClick={() => setClipMenuOpen(clip.id)}
+                      >
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                      {clipMenuOpen === clip.id && (
+                        <div className="absolute right-0 mt-2 w-32 bg-white text-black border rounded shadow z-50">
+                          <button
+                            className="flex items-center w-full px-3 py-2 text-sm hover:bg-muted/30"
+                            onClick={() => {
+                              handleSplitClip(clip);
+                              setClipMenuOpen(null);
+                            }}
+                          >
+                            <Scissors className="h-4 w-4 mr-2" /> Split
+                          </button>
+                          <button
+                            className="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+                            onClick={() => handleDeleteClip(clip.id)}
+                          >
+                            <Trash2 className="h-4 w-4 mr-2" /> Delete
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  {/* Right trim handle */}
+                  <div
+                    className="absolute right-0 top-0 bottom-0 w-2 cursor-e-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
+                    onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
+                  />
+                </div>
               );
             })}
+
+            {/* Drop position indicator */}
+            {isDraggedOver && dropPosition !== null && (
+              <div
+                className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
+                style={{
+                  left: `${dropPosition * 50 * zoomLevel}px`,
+                  transform: "translateX(-50%)",
+                }}
+              >
+                <div
+                  className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
+                />
+                <div
+                  className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
+                />
+                <div
+                  className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
+                >
+                  {wouldOverlap ? "⚠️" : ""}
+                  {dropPosition.toFixed(1)}s
+                </div>
+              </div>
+            )}
           </>
         )}
       </div>
     </div>
   );
 }
+

apps/web/src/lib/waitlist.ts

@@ -1,6 +1,5 @@
-import { db } from "@opencut/db";
+import { db, sql } from "@opencut/db";
 import { waitlist } from "@opencut/db/schema";
-import { sql } from "drizzle-orm";
 
 export async function getWaitlistCount() {
   try {

packages/db/src/index.ts

@@ -14,3 +14,6 @@ export const db = drizzle(client, { schema });
 
 // Re-export schema for convenience
 export * from "./schema";
+
+// Re-export drizzle-orm functions to ensure version consistency
+export { eq, and, or, not, isNull, isNotNull, inArray, notInArray, exists, notExists, sql } from "drizzle-orm";