refactor all timeline components

apps/web/src/components/editor/timeline/timeline-content-click.tsx

@@ -59,7 +59,7 @@ export function useTimelineContentClick({
 
       // Determine if we're clicking in ruler or tracks area
       const isRulerClick = (e.target as HTMLElement).closest(
-				"[data-ruler-area]",
+        "[data-ruler-area]"
       );
 
       let mouseX: number;
@@ -68,7 +68,7 @@ export function useTimelineContentClick({
       if (isRulerClick) {
         // Calculate based on ruler position
         const rulerContent = rulerScrollRef.current?.querySelector(
-					"[data-radix-scroll-area-viewport]",
+          "[data-radix-scroll-area-viewport]"
         ) as HTMLElement;
         if (!rulerContent) return;
         const rect = rulerContent.getBoundingClientRect();
@@ -77,7 +77,7 @@ export function useTimelineContentClick({
       } else {
         // Calculate based on tracks content position
         const tracksContent = tracksScrollRef.current?.querySelector(
-					"[data-radix-scroll-area-viewport]",
+          "[data-radix-scroll-area-viewport]"
         ) as HTMLElement;
         if (!tracksContent) return;
         const rect = tracksContent.getBoundingClientRect();
@@ -90,8 +90,8 @@ export function useTimelineContentClick({
         Math.min(
           duration,
           (mouseX + scrollLeft) /
-						(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
+            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
-				),
+        )
       );
 
       // Use frame snapping for timeline clicking
@@ -111,7 +111,7 @@ export function useTimelineContentClick({
       justFinishedSelecting,
       playheadRef,
       activeProject?.fps,
-		],
+    ]
   );
 
   return { handleTimelineContentClick };

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

@@ -57,14 +57,13 @@ export function TimelineContent({
 }: TimelineContentProps) {
   return (
     <div
-			className="relative min-w-max min-h-max"
+      className="relative min-w-max min-h-max h-full"
       style={{ minWidth: `${dynamicTimelineWidth}px` }}
     >
       <div
         className={`h-full grid grid-cols-[192px_1fr] ${tracks.length > 0 ? `grid-rows-[20px_repeat(${tracks.length},minmax(0,max-content))]` : "grid-rows-[20px_1fr]"}`}
       >
-				{/* Top-Left Corner (Empty space above track labels) */}
+
-				<div className="sticky top-0 left-0 border-inset bg-card"></div>
 
         {/* Top Row (Sticky Ruler Header) */}
         <TimelineRuler

apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useRef } from "react";
 import { toast } from "sonner";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
@@ -66,7 +66,7 @@ export function useTimelineDragHandlers({
 
     // Ignore timeline element drags - they're handled by track-specific handlers
     const hasTimelineElement = e.dataTransfer.types.includes(
-			"application/x-timeline-element",
+      "application/x-timeline-element"
     );
     if (hasTimelineElement) {
       return;
@@ -83,7 +83,7 @@ export function useTimelineDragHandlers({
         } else {
           // Handle media items
           const mediaItem = mediaItems.find(
-						(item: any) => item.id === dragData.id,
+            (item: any) => item.id === dragData.id
           );
           if (!mediaItem) {
             toast.error("Media item not found");
@@ -108,15 +108,14 @@ export function useTimelineDragHandlers({
       try {
         const processedItems = await processMediaFiles(
           e.dataTransfer.files,
-					(p) => setProgress(p),
+          (p) => setProgress(p)
         );
         for (const processedItem of processedItems) {
           await addMediaItem(activeProject.id, processedItem);
           const currentMediaItems = useMediaStore.getState().mediaItems;
           const addedItem = currentMediaItems.find(
             (item) =>
-							item.name === processedItem.name &&
+              item.name === processedItem.name && item.url === processedItem.url
-							item.url === processedItem.url,
           );
           if (addedItem) {
             useTimelineStore.getState().addMediaToNewTrack(addedItem);

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

@@ -1,48 +1,25 @@
 "use client";
 
-import { useState } from "react";
+import { Scissors, Trash2, Copy, RefreshCw } from "lucide-react";
-import { Button } from "../ui/button";
-import {
-  MoreVertical,
-  Scissors,
-  Trash2,
-  SplitSquareHorizontal,
-  Music,
-  ChevronRight,
-  ChevronLeft,
-  Type,
-  Copy,
-  RefreshCw,
-} from "lucide-react";
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
-import AudioWaveform from "./audio-waveform";
+import AudioWaveform from "@/components/editor/audio-waveform";
 import { toast } from "sonner";
-import { TimelineElementProps, TrackType } from "@/types/timeline";
+import { TimelineElementProps } from "@/types/timeline";
 import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
 import {
   getTrackElementClasses,
   TIMELINE_CONSTANTS,
   getTrackHeight,
 } from "@/constants/timeline-constants";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-} from "../ui/dropdown-menu";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
   ContextMenuTrigger,
-} from "../ui/context-menu";
+} from "@/components/ui/context-menu";
 
 export function TimelineElement({
   element,
@@ -59,23 +36,13 @@ export function TimelineElement({
     removeElementFromTrack,
     dragState,
     splitElement,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
     addElementToTrack,
     replaceElementMedia,
   } = useTimelineStore();
   const { currentTime } = usePlaybackStore();
 
-  const [elementMenuOpen, setElementMenuOpen] = useState(false);
+  const { resizing, handleResizeStart, handleResizeMove, handleResizeEnd } =
-
+    useTimelineElementResize({
-  const {
-    resizing,
-    isResizing,
-    handleResizeStart,
-    handleResizeMove,
-    handleResizeEnd,
-  } = useTimelineElementResize({
       element,
       track,
       zoomLevel,
@@ -98,92 +65,6 @@ export function TimelineElement({
       : element.startTime;
   const elementLeft = elementStartTime * 50 * zoomLevel;
 
-  const handleDeleteElement = () => {
-    removeElementFromTrack(track.id, element.id);
-    setElementMenuOpen(false);
-  };
-
-  const handleSplitElement = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within element to split");
-      return;
-    }
-
-    const secondElementId = splitElement(track.id, element.id, currentTime);
-    if (!secondElementId) {
-      toast.error("Failed to split element");
-    }
-    setElementMenuOpen(false);
-  };
-
-  const handleSplitAndKeepLeft = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within element");
-      return;
-    }
-
-    splitAndKeepLeft(track.id, element.id, currentTime);
-    setElementMenuOpen(false);
-  };
-
-  const handleSplitAndKeepRight = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-
-    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-      toast.error("Playhead must be within element");
-      return;
-    }
-
-    splitAndKeepRight(track.id, element.id, currentTime);
-    setElementMenuOpen(false);
-  };
-
-  const handleSeparateAudio = () => {
-    if (element.type !== "media") {
-      toast.error("Audio separation only available for media elements");
-      return;
-    }
-
-    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
-    if (!mediaItem || mediaItem.type !== "video") {
-      toast.error("Audio separation only available for video elements");
-      return;
-    }
-
-    const audioElementId = separateAudio(track.id, element.id);
-    if (!audioElementId) {
-      toast.error("Failed to separate audio");
-    }
-    setElementMenuOpen(false);
-  };
-
-  const canSplitAtPlayhead = () => {
-    const effectiveStart = element.startTime;
-    const effectiveEnd =
-      element.startTime +
-      (element.duration - element.trimStart - element.trimEnd);
-    return currentTime > effectiveStart && currentTime < effectiveEnd;
-  };
-
-  const canSeparateAudio = () => {
-    if (element.type !== "media") return false;
-    const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
-    return mediaItem?.type === "video" && track.type === "media";
-  };
-
   const handleElementSplitContext = () => {
     const effectiveStart = element.startTime;
     const effectiveEnd =

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

@@ -2,10 +2,7 @@
 
 import { useRef } from "react";
 import { TimelineTrack } from "@/types/timeline";
-import {
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-	TIMELINE_CONSTANTS,
-	getTotalTracksHeight,
-} from "@/constants/timeline-constants";
 import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
 
 interface TimelinePlayheadProps {
@@ -50,10 +47,6 @@ export function TimelinePlayhead({
     playheadRef,
   });
 
-	// Use timeline container height minus a few pixels for breathing room
-	const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-	const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
-
   // Get dynamic track labels width, fallback to 192px (ml-48) if no tracks or no ref
   const trackLabelsWidth = 192; // Fixed width from grid layout
   const leftPosition =

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

@@ -101,7 +101,7 @@ export function TimelineRuler({
           >
             {formatTime(time, interval)}
           </span>
-				</div>,
+        </div>
       );
     }
 
@@ -110,7 +110,7 @@ export function TimelineRuler({
 
   return (
     <div
-			className="sticky top-0 bg-card border-b border-muted/30 z-[99]"
+      className="sticky top-0 border-b border-muted/30 z-[99] w-24"
       onMouseDown={handleSelectionMouseDown}
       onClick={handleTimelineContentClick}
       data-ruler-area

apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx

@@ -15,10 +15,10 @@ export function useTimelineScrollSync({
   // --- Horizontal scroll synchronization between ruler and tracks ---
   useEffect(() => {
     const rulerViewport = rulerScrollRef.current?.querySelector(
-			"[data-radix-scroll-area-viewport]",
+      "[data-radix-scroll-area-viewport]"
     ) as HTMLElement;
     const tracksViewport = tracksScrollRef.current?.querySelector(
-			"[data-radix-scroll-area-viewport]",
+      "[data-radix-scroll-area-viewport]"
     ) as HTMLElement;
 
     if (!rulerViewport || !tracksViewport) return;

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

@@ -7,8 +7,6 @@ import { toast } from "sonner";
 import { TimelineElement } from "./timeline-element";
 import {
   TimelineTrack,
-  sortTracksByOrder,
-  ensureMainTrack,
   getMainTrack,
   canElementGoOnTrack,
 } from "@/types/timeline";
@@ -54,7 +52,7 @@ export function TimelineTrackContent({
   const { currentTime } = usePlaybackStore();
 
   // Initialize snapping hook
-  const { snapElementPosition, snapElementEdge } = useTimelineSnapping({
+  const { snapElementEdge } = useTimelineSnapping({
     snapThreshold: 10,
     enableElementSnapping: snappingEnabled,
     enablePlayheadSnapping: snappingEnabled,

apps/web/src/components/editor/timeline/timeline-tracks-area.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from "react";
 import { Plus } from "lucide-react";
 import {
   ContextMenu,
@@ -7,7 +6,7 @@ import {
   ContextMenuTrigger,
 } from "../../ui/context-menu";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { TimelineTrackContent } from "../timeline-track";
+import { TimelineTrackContent } from "./timeline-track";
 import { TrackIcon } from "./track-icon";
 import { getTrackHeight } from "@/constants/timeline-constants";
 import type { TimelineTrack } from "@/types/timeline";
@@ -26,16 +25,17 @@ export function TimelineTracksArea({
   handleSnapPointChange,
   clearSelectedElements,
 }: TimelineTracksAreaProps) {
-  const { addTrack, toggleTrackMute } = useTimelineStore();
+  const { toggleTrackMute } = useTimelineStore();
 
   return (
     <>
-      {/* Track Rows */}
+      <div className="h-full flex flex-col absolute left-0 top-0 w-24 bg-panel border-r border-black z-[100]">
+        <div className="sticky left-0 h-5 border-inset z-[100]"></div>
+
         {tracks.map((track, index) => (
-        <Fragment key={track.id}>
-          {/* Left Column (Sticky Track Labels) */}
           <div
-            className="sticky left-0 flex items-center border-b border-panel border-inset group bg-card z-[100]"
+            key={track.id}
+            className="sticky left-0 flex items-center border-b border-panel border-inset group z-[100]"
             style={{ height: `${getTrackHeight(track.type)}px` }}
           >
             <div className="flex items-center gap-2 px-2">
@@ -45,14 +45,17 @@ export function TimelineTracksArea({
               <span className="text-xs text-red-500 font-semibold">Muted</span>
             )}
           </div>
+        ))}
+      </div>
 
-          {/* Scrollable Track Content */}
+      <div className="h-full flex flex-col pt-5 ml-24">
-          <ContextMenu>
+        {tracks.map((track, index) => (
+          <ContextMenu key={track.id}>
             <ContextMenuTrigger asChild>
               <div
-                className=" h-full"
+                className="h-full"
+                style={{ height: `${getTrackHeight(track.type)}px` }}
                 onClick={(e) => {
-                  // If clicking empty area (not on a element), deselect all elements
                   if (!(e.target as HTMLElement).closest(".timeline-element")) {
                     clearSelectedElements();
                   }
@@ -72,17 +75,9 @@ export function TimelineTracksArea({
               <ContextMenuItem>Track settings (soon)</ContextMenuItem>
             </ContextMenuContent>
           </ContextMenu>
-        </Fragment>
         ))}
-      {/* Add Track Button - spans full width */}
+
-      <div
+        <div style={{ height: `${getTrackHeight("media")}px` }}></div>
-        onClick={() => addTrack("media")}
-        className="col-span-1 sticky left-0 w-full flex items-center border-b border-muted bg-card hover:bg-card/50 transition-colors cursor-pointer z-[100]"
-        style={{ height: `${getTrackHeight("media")}px` }}
-      >
-        <div className="w-full flex  justify-center items-center">
-          <Plus className="w-4 h-4 text-muted-foreground" />
-        </div>
       </div>
     </>
   );