Merge branch 'main' into implement-workflows

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

@@ -40,10 +40,32 @@ export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.
   // You can drag media here to add it to your project.
   // Clips can be trimmed, deleted, and moved.
-  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo, redo } =
+  const {
-    useTimelineStore();
+    tracks,
+    addTrack,
+    addClipToTrack,
+    removeTrack,
+    toggleTrackMute,
+    removeClipFromTrack,
+    getTotalDuration,
+    selectedClips,
+    clearSelectedClips,
+    setSelectedClips,
+    updateClipTrim,
+    undo,
+    redo,
+  } = useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
-  const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();
+  const {
+    currentTime,
+    duration,
+    seek,
+    setDuration,
+    isPlaying,
+    toggle,
+    setSpeed,
+    speed,
+  } = usePlaybackStore();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [zoomLevel, setZoomLevel] = useState(1);
@@ -53,7 +75,7 @@ export function Timeline() {
 
   // Unified context menu state
   const [contextMenu, setContextMenu] = useState<{
-    type: 'track' | 'clip';
+    type: "track" | "clip";
     trackId: string;
     clipId?: string;
     x: number;
@@ -92,7 +114,10 @@ export function Timeline() {
   // Keyboard event for deleting selected clips
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.key === "Delete" || e.key === "Backspace") && selectedClips.length > 0) {
+      if (
+        (e.key === "Delete" || e.key === "Backspace") &&
+        selectedClips.length > 0
+      ) {
         selectedClips.forEach(({ trackId, clipId }) => {
           removeClipFromTrack(trackId, clipId);
         });
@@ -148,10 +173,15 @@ export function Timeline() {
   useEffect(() => {
     if (!marquee || !marquee.active) return;
     const handleMouseMove = (e: MouseEvent) => {
-      setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY });
+      setMarquee(
+        (prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY }
+      );
     };
     const handleMouseUp = (e: MouseEvent) => {
-      setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false });
+      setMarquee(
+        (prev) =>
+          prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false }
+      );
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
@@ -177,7 +207,8 @@ export function Timeline() {
       return;
     }
     // Clamp to timeline bounds
-    const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));
+    const clamp = (val: number, min: number, max: number) =>
+      Math.max(min, Math.min(max, val));
     const bx1 = clamp(x1, 0, rect.width);
     const bx2 = clamp(x2, 0, rect.width);
     const by1 = clamp(y1, 0, rect.height);
@@ -203,10 +234,14 @@ export function Timeline() {
     });
     if (newSelection.length > 0) {
       if (marquee.additive) {
-        const selectedSet = new Set(selectedClips.map((c) => c.trackId + ':' + c.clipId));
+        const selectedSet = new Set(
+          selectedClips.map((c) => c.trackId + ":" + c.clipId)
+        );
         newSelection = [
           ...selectedClips,
-          ...newSelection.filter((c) => !selectedSet.has(c.trackId + ':' + c.clipId)),
+          ...newSelection.filter(
+            (c) => !selectedSet.has(c.trackId + ":" + c.clipId)
+          ),
         ];
       }
       setSelectedClips(newSelection);
@@ -214,7 +249,14 @@ export function Timeline() {
       clearSelectedClips();
     }
     setMarquee(null);
-  }, [marquee, tracks, zoomLevel, selectedClips, setSelectedClips, clearSelectedClips]);
+  }, [
+    marquee,
+    tracks,
+    zoomLevel,
+    selectedClips,
+    setSelectedClips,
+    clearSelectedClips,
+  ]);
 
   const handleDragEnter = (e: React.DragEvent) => {
     // When something is dragged over the timeline, show overlay
@@ -254,7 +296,9 @@ export function Timeline() {
     dragCounterRef.current = 0;
 
     // Ignore timeline clip drags - they're handled by track-specific handlers
-    const hasTimelineClip = e.dataTransfer.types.includes("application/x-timeline-clip");
+    const hasTimelineClip = e.dataTransfer.types.includes(
+      "application/x-timeline-clip"
+    );
     if (hasTimelineClip) {
       return;
     }
@@ -351,21 +395,27 @@ export function Timeline() {
   };
 
   // --- Playhead Scrubbing Handlers ---
-  const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => {
+  const handlePlayheadMouseDown = useCallback(
-    e.preventDefault();
+    (e: React.MouseEvent) => {
-    setIsScrubbing(true);
+      e.preventDefault();
-    handleScrub(e);
+      setIsScrubbing(true);
-  }, [duration, zoomLevel]);
+      handleScrub(e);
+    },
+    [duration, zoomLevel]
+  );
 
-  const handleScrub = useCallback((e: MouseEvent | React.MouseEvent) => {
+  const handleScrub = useCallback(
-    const timeline = timelineRef.current;
+    (e: MouseEvent | React.MouseEvent) => {
-    if (!timeline) return;
+      const timeline = timelineRef.current;
-    const rect = timeline.getBoundingClientRect();
+      if (!timeline) return;
-    const x = e.clientX - rect.left;
+      const rect = timeline.getBoundingClientRect();
-    const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
+      const x = e.clientX - rect.left;
-    setScrubTime(time);
+      const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
-    seek(time); // update video preview in real time
+      setScrubTime(time);
-  }, [duration, zoomLevel, seek]);
+      seek(time); // update video preview in real time
+    },
+    [duration, zoomLevel, seek]
+  );
 
   useEffect(() => {
     if (!isScrubbing) return;
@@ -383,7 +433,8 @@ export function Timeline() {
     };
   }, [isScrubbing, scrubTime, seek, handleScrub]);
 
-  const playheadPosition = isScrubbing && scrubTime !== null ? scrubTime : currentTime;
+  const playheadPosition =
+    isScrubbing && scrubTime !== null ? scrubTime : currentTime;
 
   const dragProps = {
     onDragEnter: handleDragEnter,
@@ -399,14 +450,20 @@ export function Timeline() {
       return;
     }
     selectedClips.forEach(({ trackId, clipId }) => {
-      const track = tracks.find(t => t.id === trackId);
+      const track = tracks.find((t) => t.id === trackId);
-      const clip = track?.clips.find(c => c.id === clipId);
+      const clip = track?.clips.find((c) => c.id === clipId);
       if (clip && track) {
         const splitTime = currentTime;
         const effectiveStart = clip.startTime;
-        const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+        const effectiveEnd =
+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
         if (splitTime > effectiveStart && splitTime < effectiveEnd) {
-          updateClipTrim(track.id, clip.id, clip.trimStart, clip.trimEnd + (effectiveEnd - splitTime));
+          updateClipTrim(
+            track.id,
+            clip.id,
+            clip.trimStart,
+            clip.trimEnd + (effectiveEnd - splitTime)
+          );
           addClipToTrack(track.id, {
             mediaId: clip.mediaId,
             name: clip.name + " (split)",
@@ -427,14 +484,17 @@ export function Timeline() {
       return;
     }
     selectedClips.forEach(({ trackId, clipId }) => {
-      const track = tracks.find(t => t.id === trackId);
+      const track = tracks.find((t) => t.id === trackId);
-      const clip = track?.clips.find(c => c.id === clipId);
+      const clip = track?.clips.find((c) => c.id === clipId);
       if (clip && track) {
         addClipToTrack(track.id, {
           mediaId: clip.mediaId,
           name: clip.name + " (copy)",
           duration: clip.duration,
-          startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,
+          startTime:
+            clip.startTime +
+            (clip.duration - clip.trimStart - clip.trimEnd) +
+            0.1,
           trimStart: clip.trimStart,
           trimEnd: clip.trimEnd,
         });
@@ -449,8 +509,8 @@ export function Timeline() {
       return;
     }
     selectedClips.forEach(({ trackId, clipId }) => {
-      const track = tracks.find(t => t.id === trackId);
+      const track = tracks.find((t) => t.id === trackId);
-      const clip = track?.clips.find(c => c.id === clipId);
+      const clip = track?.clips.find((c) => c.id === clipId);
       if (clip && track) {
         // Add a new freeze frame clip at the playhead
         addClipToTrack(track.id, {
@@ -478,20 +538,23 @@ export function Timeline() {
     toast.success("Deleted selected clip(s)");
   };
 
-
   // Prevent explorer zooming in/out when in timeline
   useEffect(() => {
     const preventZoom = (e: WheelEvent) => {
       // if (isInTimeline && (e.ctrlKey || e.metaKey)) {
-      if (isInTimeline && (e.ctrlKey || e.metaKey) && timelineRef.current?.contains(e.target as Node)) {
+      if (
+        isInTimeline &&
+        (e.ctrlKey || e.metaKey) &&
+        timelineRef.current?.contains(e.target as Node)
+      ) {
         e.preventDefault();
       }
     };
 
-    document.addEventListener('wheel', preventZoom, { passive: false });
+    document.addEventListener("wheel", preventZoom, { passive: false });
 
     return () => {
-      document.removeEventListener('wheel', preventZoom);
+      document.removeEventListener("wheel", preventZoom);
     };
   }, [isInTimeline]);
 
@@ -524,17 +587,24 @@ export function Timeline() {
                 onClick={toggle}
                 className="mr-2"
               >
-                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                {isPlaying ? (
+                  <Pause className="h-4 w-4" />
+                ) : (
+                  <Play className="h-4 w-4" />
+                )}
               </Button>
             </TooltipTrigger>
-            <TooltipContent>{isPlaying ? "Pause (Space)" : "Play (Space)"}</TooltipContent>
+            <TooltipContent>
+              {isPlaying ? "Pause (Space)" : "Play (Space)"}
+            </TooltipContent>
           </Tooltip>
 
           <div className="w-px h-6 bg-border mx-1" />
 
           {/* Time Display */}
           <div className="text-xs text-muted-foreground font-mono px-2">
-            {Math.floor(currentTime * 10) / 10}s / {Math.floor(duration * 10) / 10}s
+            {Math.floor(currentTime * 10) / 10}s /{" "}
+            {Math.floor(duration * 10) / 10}s
           </div>
 
           <div className="w-px h-6 bg-border mx-1" />
@@ -606,7 +676,11 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="text" size="icon" onClick={handleDuplicateSelected}>
+              <Button
+                variant="text"
+                size="icon"
+                onClick={handleDuplicateSelected}
+              >
                 <Copy className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -710,17 +784,19 @@ export function Timeline() {
                     return (
                       <div
                         key={i}
-                        className={`absolute top-0 bottom-0 ${isMainMarker
+                        className={`absolute top-0 bottom-0 ${
-                          ? "border-l border-muted-foreground/40"
+                          isMainMarker
-                          : "border-l border-muted-foreground/20"
+                            ? "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 ${isMainMarker
+                          className={`absolute top-1 left-1 text-xs ${
-                            ? "text-muted-foreground font-medium"
+                            isMainMarker
-                            : "text-muted-foreground/70"
+                              ? "text-muted-foreground font-medium"
-                            }`}
+                              : "text-muted-foreground/70"
+                          }`}
                         >
                           {(() => {
                             const formatTime = (seconds: number) => {
@@ -762,18 +838,8 @@ export function Timeline() {
         {/* Tracks Area */}
         <div className="flex-1 flex overflow-hidden">
           {/* Track Labels */}
-          <div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto">
+          {tracks.length > 0 && (
-            {tracks.length === 0 ? (
+            <div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto">
-              <div className="flex flex-col items-center justify-center h-full py-8 text-center px-4">
-                <div className="w-12 h-12 rounded-full bg-muted/30 flex items-center justify-center mb-3">
-                  <SplitSquareHorizontal className="h-6 w-6 text-muted-foreground" />
-                </div>
-                <p className="text-sm text-muted-foreground">No tracks</p>
-                <p className="text-xs text-muted-foreground/70 mt-1">
-                  Drop media to create tracks
-                </p>
-              </div>
-            ) : (
               <div className="flex flex-col">
                 {tracks.map((track) => (
                   <div
@@ -782,7 +848,7 @@ export function Timeline() {
                     onContextMenu={(e) => {
                       e.preventDefault();
                       setContextMenu({
-                        type: 'track',
+                        type: "track",
                         trackId: track.id,
                         x: e.clientX,
                         y: e.clientY,
@@ -795,8 +861,8 @@ export function Timeline() {
                           track.type === "video"
                             ? "bg-blue-500"
                             : track.type === "audio"
-                            ? "bg-green-500"
+                              ? "bg-green-500"
-                            : "bg-purple-500"
+                              : "bg-purple-500"
                         }`}
                       />
                       <span className="ml-2 text-sm font-medium truncate">
@@ -811,17 +877,21 @@ export function Timeline() {
                   </div>
                 ))}
               </div>
-            )}
+            </div>
-          </div>
+          )}
 
           {/* Timeline Tracks Content */}
           <div className="flex-1 relative overflow-hidden">
-            <div className="w-full h-[600px] overflow-hidden flex" ref={timelineRef} style={{ position: 'relative' }}>
+            <div
-              {/* Timeline grid and clips area (with left margin for sidebar) */}
+              className="w-full h-full overflow-hidden flex"
+              ref={timelineRef}
+              style={{ position: "relative" }}
+            >
+              {/* Timeline grid and clips area (with left margin for sifdebar) */}
               <div
                 className="relative flex-1"
                 style={{
-                  height: `${tracks.length * 60}px`,
+                  height: `${Math.max(200, Math.min(800, tracks.length * 60))}px`,
                   width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
                 }}
                 onClick={handleTimelineAreaClick}
@@ -852,7 +922,7 @@ export function Timeline() {
                         onContextMenu={(e) => {
                           e.preventDefault();
                           setContextMenu({
-                            type: 'track',
+                            type: "track",
                             trackId: track.id,
                             x: e.clientX,
                             y: e.clientY,
@@ -893,19 +963,23 @@ export function Timeline() {
           style={{ left: contextMenu.x, top: contextMenu.y }}
           onContextMenu={(e) => e.preventDefault()}
         >
-          {contextMenu.type === 'track' ? (
+          {contextMenu.type === "track" ? (
             // Track context menu
             <>
               <button
                 className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
                 onClick={() => {
-                  const track = tracks.find(t => t.id === contextMenu.trackId);
+                  const track = tracks.find(
+                    (t) => t.id === contextMenu.trackId
+                  );
                   if (track) toggleTrackMute(track.id);
                   setContextMenu(null);
                 }}
               >
                 {(() => {
-                  const track = tracks.find(t => t.id === contextMenu.trackId);
+                  const track = tracks.find(
+                    (t) => t.id === contextMenu.trackId
+                  );
                   return track?.muted ? (
                     <>
                       <Volume2 className="h-4 w-4 mr-2" />
@@ -939,14 +1013,23 @@ export function Timeline() {
                 className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
                 onClick={() => {
                   if (contextMenu.clipId) {
-                    const track = tracks.find(t => t.id === contextMenu.trackId);
+                    const track = tracks.find(
-                    const clip = track?.clips.find(c => c.id === contextMenu.clipId);
+                      (t) => t.id === contextMenu.trackId
+                    );
+                    const clip = track?.clips.find(
+                      (c) => c.id === contextMenu.clipId
+                    );
                     if (clip && track) {
                       const splitTime = currentTime;
                       const effectiveStart = clip.startTime;
-                      const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+                      const effectiveEnd =
+                        clip.startTime +
+                        (clip.duration - clip.trimStart - clip.trimEnd);
 
-                      if (splitTime > effectiveStart && splitTime < effectiveEnd) {
+                      if (
+                        splitTime > effectiveStart &&
+                        splitTime < effectiveEnd
+                      ) {
                         updateClipTrim(
                           track.id,
                           clip.id,
@@ -958,7 +1041,8 @@ export function Timeline() {
                           name: clip.name + " (split)",
                           duration: clip.duration,
                           startTime: splitTime,
-                          trimStart: clip.trimStart + (splitTime - effectiveStart),
+                          trimStart:
+                            clip.trimStart + (splitTime - effectiveStart),
                           trimEnd: clip.trimEnd,
                         });
                         toast.success("Clip split successfully");
@@ -977,14 +1061,21 @@ export function Timeline() {
                 className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
                 onClick={() => {
                   if (contextMenu.clipId) {
-                    const track = tracks.find(t => t.id === contextMenu.trackId);
+                    const track = tracks.find(
-                    const clip = track?.clips.find(c => c.id === contextMenu.clipId);
+                      (t) => t.id === contextMenu.trackId
+                    );
+                    const clip = track?.clips.find(
+                      (c) => c.id === contextMenu.clipId
+                    );
                     if (clip && track) {
                       useTimelineStore.getState().addClipToTrack(track.id, {
                         mediaId: clip.mediaId,
                         name: clip.name + " (copy)",
                         duration: clip.duration,
-                        startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,
+                        startTime:
+                          clip.startTime +
+                          (clip.duration - clip.trimStart - clip.trimEnd) +
+                          0.1,
                         trimStart: clip.trimStart,
                         trimEnd: clip.trimEnd,
                       });
@@ -1002,7 +1093,10 @@ export function Timeline() {
                 className="flex items-center w-full px-3 py-2 text-destructive hover:bg-destructive/10 transition-colors text-left"
                 onClick={() => {
                   if (contextMenu.clipId) {
-                    removeClipFromTrack(contextMenu.trackId, contextMenu.clipId);
+                    removeClipFromTrack(
+                      contextMenu.trackId,
+                      contextMenu.clipId
+                    );
                     toast.success("Clip deleted");
                   }
                   setContextMenu(null);
@@ -1026,7 +1120,15 @@ function TimelineTrackContent({
 }: {
   track: TimelineTrack;
   zoomLevel: number;
-  setContextMenu: (menu: { type: 'track' | 'clip'; trackId: string; clipId?: string; x: number; y: number; } | null) => void;
+  setContextMenu: (
+    menu: {
+      type: "track" | "clip";
+      trackId: string;
+      clipId?: string;
+      x: number;
+      y: number;
+    } | null
+  ) => void;
 }) {
   const { mediaItems } = useMediaStore();
   const {
@@ -1171,7 +1273,7 @@ function TimelineTrackContent({
             return;
           }
         }
-      } catch (error) { }
+      } catch (error) {}
     }
 
     // Calculate drop position for overlap checking
@@ -1549,18 +1651,19 @@ function TimelineTrackContent({
 
   return (
     <div
-      className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
+      className={`w-full h-full transition-all duration-150 ease-out ${
-        ? wouldOverlap
+        isDraggedOver
-          ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
+          ? wouldOverlap
-          : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
+            ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
-        : "hover:bg-muted/20"
+            : "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
         if (!(e.target as HTMLElement).closest(".timeline-clip")) {
           setContextMenu({
-            type: 'track',
+            type: "track",
             trackId: track.id,
             x: e.clientX,
             y: e.clientY,
@@ -1578,12 +1681,13 @@ function TimelineTrackContent({
       <div 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 ${isDropping
+            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
-              ? wouldOverlap
+              isDropping
-                ? "border-red-500 bg-red-500/10 text-red-600"
+                ? wouldOverlap
-                : "border-blue-500 bg-blue-500/10 text-blue-600"
+                  ? "border-red-500 bg-red-500/10 text-red-600"
-              : "border-muted/30"
+                  : "border-blue-500 bg-blue-500/10 text-blue-600"
-              }`}
+                : "border-muted/30"
+            }`}
           >
             {isDropping
               ? wouldOverlap
@@ -1631,7 +1735,7 @@ function TimelineTrackContent({
                     e.preventDefault();
                     e.stopPropagation();
                     setContextMenu({
-                      type: 'clip',
+                      type: "clip",
                       trackId: track.id,
                       clipId: clip.id,
                       x: e.clientX,

apps/web/src/lib/waitlist.ts

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