14 files changed, 968 insertions, 1322 deletions
diff --git a/apps/web/src/components/editor/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline-toolbar.tsx
deleted file mode 100644
index e887efa0..00000000
--- a/apps/web/src/components/editor/timeline-toolbar.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-"use client";
-
-import type { TrackType } from "@/types/timeline";
-import {
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  Copy,
-  Pause,
-  Play,
-  Scissors,
-  Snowflake,
-  SplitSquareHorizontal,
-  Trash2,
-} from "lucide-react";
-import { Button } from "../ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../ui/tooltip";
-
-interface TimelineToolbarProps {
-  isPlaying: boolean;
-  currentTime: number;
-  duration: number;
-  speed: number;
-  tracks: any[];
-  toggle: () => void;
-  setSpeed: (speed: number) => void;
-  addTrack: (type: TrackType) => string;
-  addClipToTrack: (trackId: string, clip: any) => void;
-  handleSplitSelected: () => void;
-  handleDuplicateSelected: () => void;
-  handleFreezeSelected: () => void;
-  handleDeleteSelected: () => void;
-}
-
-export function TimelineToolbar({
-  isPlaying,
-  currentTime,
-  duration,
-  speed,
-  tracks,
-  toggle,
-  setSpeed,
-  addTrack,
-  addClipToTrack,
-  handleSplitSelected,
-  handleDuplicateSelected,
-  handleFreezeSelected,
-  handleDeleteSelected,
-}: TimelineToolbarProps) {
-  return (
-    <div className="border-b flex items-center px-2 py-1 gap-1">
-      <TooltipProvider delayDuration={500}>
-        {/* Play/Pause Button */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="text"
-              size="icon"
-              onClick={toggle}
-              className="mr-2"
-            >
-              {isPlaying ? (
-                <Pause className="h-4 w-4" />
-              ) : (
-                <Play className="h-4 w-4" />
-              )}
-            </Button>
-          </TooltipTrigger>
-          <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"
-          style={{ minWidth: "18ch", textAlign: "center" }}
-        >
-          {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
-        </div>
-
-        {/* Test Clip Button - for debugging */}
-        {tracks.length === 0 && (
-          <>
-            <div className="w-px h-6 bg-border mx-1" />
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    const trackId = addTrack("media");
-                    addClipToTrack(trackId, {
-                      mediaId: "test",
-                      name: "Test Clip",
-                      duration: 5,
-                      startTime: 0,
-                      trimStart: 0,
-                      trimEnd: 0,
-                    });
-                  }}
-                  className="text-xs"
-                >
-                  Add Test Clip
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Add a test clip to try playback</TooltipContent>
-            </Tooltip>
-          </>
-        )}
-
-        <div className="w-px h-6 bg-border mx-1" />
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="text" size="icon" onClick={handleSplitSelected}>
-              <Scissors className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Split clip (S)</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="text" size="icon">
-              <ArrowLeftToLine className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Split and keep left (A)</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="text" size="icon">
-              <ArrowRightToLine className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Split and keep right (D)</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="text" size="icon">
-              <SplitSquareHorizontal className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Separate audio (E)</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="text"
-              size="icon"
-              onClick={handleDuplicateSelected}
-            >
-              <Copy className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Duplicate clip (Ctrl+D)</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="text" size="icon" onClick={handleFreezeSelected}>
-              <Snowflake className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Freeze frame (F)</TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="text" size="icon" onClick={handleDeleteSelected}>
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Delete clip (Delete)</TooltipContent>
-        </Tooltip>
-
-        <div className="w-px h-6 bg-border mx-1" />
-
-        {/* Speed Control */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Select
-              value={speed.toFixed(1)}
-              onValueChange={(value) => setSpeed(parseFloat(value))}
-            >
-              <SelectTrigger className="w-[90px] h-8">
-                <SelectValue placeholder="1.0x" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="0.5">0.5x</SelectItem>
-                <SelectItem value="1.0">1.0x</SelectItem>
-                <SelectItem value="1.5">1.5x</SelectItem>
-                <SelectItem value="2.0">2.0x</SelectItem>
-              </SelectContent>
-            </Select>
-          </TooltipTrigger>
-          <TooltipContent>Playback Speed</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/timeline/timeline-action-handlers.tsx b/apps/web/src/components/editor/timeline/timeline-action-handlers.tsx
index 0e7323d3..22c1efa5 100644
--- a/apps/web/src/components/editor/timeline/timeline-action-handlers.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-action-handlers.tsx
@@ -4,175 +4,175 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 
 export function useTimelineActionHandlers() {
-	const {
-		tracks,
-		addElementToTrack,
-		removeElementFromTrack,
-		selectedElements,
-		clearSelectedElements,
-		splitElement,
-		splitAndKeepLeft,
-		splitAndKeepRight,
-		separateAudio,
-	} = useTimelineStore();
-	const { currentTime } = usePlaybackStore();
+  const {
+    tracks,
+    addElementToTrack,
+    removeElementFromTrack,
+    selectedElements,
+    clearSelectedElements,
+    splitElement,
+    splitAndKeepLeft,
+    splitAndKeepRight,
+    separateAudio,
+  } = useTimelineStore();
+  const { currentTime } = usePlaybackStore();
 
-	// Create optimized lookup maps for O(1) access instead of O(n) find operations
-	const trackMap = useMemo(() => {
-		const map = new Map();
-		tracks.forEach((track) => {
-			map.set(track.id, track);
-			// Also create element lookup for this track
-			const elementMap = new Map();
-			track.elements.forEach((element) => {
-				elementMap.set(element.id, element);
-			});
-			map.set(`${track.id}_elements`, elementMap);
-		});
-		return map;
-	}, [tracks]);
+  // Create optimized lookup maps for O(1) access instead of O(n) find operations
+  const trackMap = useMemo(() => {
+    const map = new Map();
+    tracks.forEach((track) => {
+      map.set(track.id, track);
+      // Also create element lookup for this track
+      const elementMap = new Map();
+      track.elements.forEach((element) => {
+        elementMap.set(element.id, element);
+      });
+      map.set(`${track.id}_elements`, elementMap);
+    });
+    return map;
+  }, [tracks]);
 
-	// Helper function for O(1) track/element lookup
-	const findTrackAndElement = (trackId: string, elementId: string) => {
-		const track = trackMap.get(trackId);
-		const elementMap = trackMap.get(`${trackId}_elements`);
-		const element = elementMap?.get(elementId);
-		return { track, element };
-	};
+  // Helper function for O(1) track/element lookup
+  const findTrackAndElement = (trackId: string, elementId: string) => {
+    const track = trackMap.get(trackId);
+    const elementMap = trackMap.get(`${trackId}_elements`);
+    const element = elementMap?.get(elementId);
+    return { track, element };
+  };
 
-	// Action handlers for toolbar
-	const handleSplitSelected = () => {
-		if (selectedElements.length === 0) {
-			toast.error("No elements selected");
-			return;
-		}
-		let splitCount = 0;
-		selectedElements.forEach(({ trackId, elementId }) => {
-			const { track, element } = findTrackAndElement(trackId, elementId);
-			if (element && track) {
-				const effectiveStart = element.startTime;
-				const effectiveEnd =
-					element.startTime +
-					(element.duration - element.trimStart - element.trimEnd);
+  // Action handlers for toolbar
+  const handleSplitSelected = () => {
+    if (selectedElements.length === 0) {
+      toast.error("No elements selected");
+      return;
+    }
+    let splitCount = 0;
+    selectedElements.forEach(({ trackId, elementId }) => {
+      const { track, element } = findTrackAndElement(trackId, elementId);
+      if (element && track) {
+        const effectiveStart = element.startTime;
+        const effectiveEnd =
+          element.startTime +
+          (element.duration - element.trimStart - element.trimEnd);
 
-				if (currentTime > effectiveStart && currentTime < effectiveEnd) {
-					const newElementId = splitElement(trackId, elementId, currentTime);
-					if (newElementId) splitCount++;
-				}
-			}
-		});
-		if (splitCount === 0) {
-			toast.error("Playhead must be within selected elements to split");
-		}
-	};
+        if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+          const newElementId = splitElement(trackId, elementId, currentTime);
+          if (newElementId) splitCount++;
+        }
+      }
+    });
+    if (splitCount === 0) {
+      toast.error("Playhead must be within selected elements to split");
+    }
+  };
 
-	const handleDuplicateSelected = () => {
-		if (selectedElements.length === 0) {
-			toast.error("No elements selected");
-			return;
-		}
-		const canDuplicate = selectedElements.length === 1;
-		if (!canDuplicate) return;
+  const handleDuplicateSelected = () => {
+    if (selectedElements.length === 0) {
+      toast.error("No elements selected");
+      return;
+    }
+    const canDuplicate = selectedElements.length === 1;
+    if (!canDuplicate) return;
 
-		selectedElements.forEach(({ trackId, elementId }) => {
-			const { element } = findTrackAndElement(trackId, elementId);
+    selectedElements.forEach(({ trackId, elementId }) => {
+      const { element } = findTrackAndElement(trackId, elementId);
 
-			if (element) {
-				const newStartTime =
-					element.startTime +
-					(element.duration - element.trimStart - element.trimEnd) +
-					0.1;
+      if (element) {
+        const newStartTime =
+          element.startTime +
+          (element.duration - element.trimStart - element.trimEnd) +
+          0.1;
 
-				// Create element without id (will be generated by store)
-				const { id, ...elementWithoutId } = element;
+        // Create element without id (will be generated by store)
+        const { id, ...elementWithoutId } = element;
 
-				addElementToTrack(trackId, {
-					...elementWithoutId,
-					startTime: newStartTime,
-				});
+        addElementToTrack(trackId, {
+          ...elementWithoutId,
+          startTime: newStartTime,
+        });
 
-				// We can't predict the new id, so just clear selection for now
-				// TODO: addElementToTrack could return the new element id
-			}
-		});
+        // We can't predict the new id, so just clear selection for now
+        // TODO: addElementToTrack could return the new element id
+      }
+    });
 
-		clearSelectedElements();
-	};
+    clearSelectedElements();
+  };
 
-	const handleFreezeSelected = () => {
-		toast.info("Freeze frame functionality coming soon!");
-	};
+  const handleFreezeSelected = () => {
+    toast.info("Freeze frame functionality coming soon!");
+  };
 
-	const handleSplitAndKeepLeft = () => {
-		if (selectedElements.length !== 1) {
-			toast.error("Select exactly one element");
-			return;
-		}
-		const { trackId, elementId } = selectedElements[0];
-		const { element } = findTrackAndElement(trackId, elementId);
-		if (!element) return;
-		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 selected element");
-			return;
-		}
-		splitAndKeepLeft(trackId, elementId, currentTime);
-	};
+  const handleSplitAndKeepLeft = () => {
+    if (selectedElements.length !== 1) {
+      toast.error("Select exactly one element");
+      return;
+    }
+    const { trackId, elementId } = selectedElements[0];
+    const { element } = findTrackAndElement(trackId, elementId);
+    if (!element) return;
+    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 selected element");
+      return;
+    }
+    splitAndKeepLeft(trackId, elementId, currentTime);
+  };
 
-	const handleSplitAndKeepRight = () => {
-		if (selectedElements.length !== 1) {
-			toast.error("Select exactly one element");
-			return;
-		}
-		const { trackId, elementId } = selectedElements[0];
-		const { element } = findTrackAndElement(trackId, elementId);
-		if (!element) return;
-		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 selected element");
-			return;
-		}
-		splitAndKeepRight(trackId, elementId, currentTime);
-	};
+  const handleSplitAndKeepRight = () => {
+    if (selectedElements.length !== 1) {
+      toast.error("Select exactly one element");
+      return;
+    }
+    const { trackId, elementId } = selectedElements[0];
+    const { element } = findTrackAndElement(trackId, elementId);
+    if (!element) return;
+    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 selected element");
+      return;
+    }
+    splitAndKeepRight(trackId, elementId, currentTime);
+  };
 
-	const handleSeparateAudio = () => {
-		if (selectedElements.length !== 1) {
-			toast.error("Select exactly one media element to separate audio");
-			return;
-		}
-		const { trackId, elementId } = selectedElements[0];
-		const { track } = findTrackAndElement(trackId, elementId);
-		if (!track || track.type !== "media") {
-			toast.error("Select a media element to separate audio");
-			return;
-		}
-		separateAudio(trackId, elementId);
-	};
+  const handleSeparateAudio = () => {
+    if (selectedElements.length !== 1) {
+      toast.error("Select exactly one media element to separate audio");
+      return;
+    }
+    const { trackId, elementId } = selectedElements[0];
+    const { track } = findTrackAndElement(trackId, elementId);
+    if (!track || track.type !== "media") {
+      toast.error("Select a media element to separate audio");
+      return;
+    }
+    separateAudio(trackId, elementId);
+  };
 
-	const handleDeleteSelected = () => {
-		if (selectedElements.length === 0) {
-			toast.error("No elements selected");
-			return;
-		}
-		selectedElements.forEach(({ trackId, elementId }) => {
-			removeElementFromTrack(trackId, elementId);
-		});
-		clearSelectedElements();
-	};
+  const handleDeleteSelected = () => {
+    if (selectedElements.length === 0) {
+      toast.error("No elements selected");
+      return;
+    }
+    selectedElements.forEach(({ trackId, elementId }) => {
+      removeElementFromTrack(trackId, elementId);
+    });
+    clearSelectedElements();
+  };
 
-	return {
-		handleSplitSelected,
-		handleDuplicateSelected,
-		handleFreezeSelected,
-		handleSplitAndKeepLeft,
-		handleSplitAndKeepRight,
-		handleSeparateAudio,
-		handleDeleteSelected,
-	};
+  return {
+    handleSplitSelected,
+    handleDuplicateSelected,
+    handleFreezeSelected,
+    handleSplitAndKeepLeft,
+    handleSplitAndKeepRight,
+    handleSeparateAudio,
+    handleDeleteSelected,
+  };
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-content-click.tsx b/apps/web/src/components/editor/timeline/timeline-content-click.tsx
index 7f4676c7..0498e236 100644
--- a/apps/web/src/components/editor/timeline/timeline-content-click.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-content-click.tsx
@@ -1,118 +1,118 @@
 import { useCallback } from "react";
 import { useProjectStore } from "@/stores/project-store";
 import {
-	TIMELINE_CONSTANTS,
-	snapTimeToFrame,
+  TIMELINE_CONSTANTS,
+  snapTimeToFrame,
 } from "@/constants/timeline-constants";
 
 export interface TimelineContentClickProps {
-	duration: number;
-	zoomLevel: number;
-	seek: (time: number) => void;
-	rulerScrollRef: React.RefObject<HTMLDivElement>;
-	tracksScrollRef: React.RefObject<HTMLDivElement>;
-	clearSelectedElements: () => void;
-	isSelecting: boolean;
-	justFinishedSelecting: boolean;
-	playheadRef: React.RefObject<HTMLDivElement>;
+  duration: number;
+  zoomLevel: number;
+  seek: (time: number) => void;
+  rulerScrollRef: React.RefObject<HTMLDivElement>;
+  tracksScrollRef: React.RefObject<HTMLDivElement>;
+  clearSelectedElements: () => void;
+  isSelecting: boolean;
+  justFinishedSelecting: boolean;
+  playheadRef: React.RefObject<HTMLDivElement>;
 }
 
 export function useTimelineContentClick({
-	duration,
-	zoomLevel,
-	seek,
-	rulerScrollRef,
-	tracksScrollRef,
-	clearSelectedElements,
-	isSelecting,
-	justFinishedSelecting,
-	playheadRef,
+  duration,
+  zoomLevel,
+  seek,
+  rulerScrollRef,
+  tracksScrollRef,
+  clearSelectedElements,
+  isSelecting,
+  justFinishedSelecting,
+  playheadRef,
 }: TimelineContentClickProps) {
-	const { activeProject } = useProjectStore();
+  const { activeProject } = useProjectStore();
 
-	// Timeline content click to seek handler
-	const handleTimelineContentClick = useCallback(
-		(e: React.MouseEvent) => {
-			// Don't seek if this was a selection box operation
-			if (isSelecting || justFinishedSelecting) {
-				return;
-			}
+  // Timeline content click to seek handler
+  const handleTimelineContentClick = useCallback(
+    (e: React.MouseEvent) => {
+      // Don't seek if this was a selection box operation
+      if (isSelecting || justFinishedSelecting) {
+        return;
+      }
 
-			// Don't seek if clicking on timeline elements, but still deselect
-			if ((e.target as HTMLElement).closest(".timeline-element")) {
-				return;
-			}
+      // Don't seek if clicking on timeline elements, but still deselect
+      if ((e.target as HTMLElement).closest(".timeline-element")) {
+        return;
+      }
 
-			// Don't seek if clicking on playhead
-			if (playheadRef.current?.contains(e.target as Node)) {
-				return;
-			}
+      // Don't seek if clicking on playhead
+      if (playheadRef.current?.contains(e.target as Node)) {
+        return;
+      }
 
-			// Don't seek if clicking on track labels
-			if ((e.target as HTMLElement).closest("[data-track-labels]")) {
-				clearSelectedElements();
-				return;
-			}
+      // Don't seek if clicking on track labels
+      if ((e.target as HTMLElement).closest("[data-track-labels]")) {
+        clearSelectedElements();
+        return;
+      }
 
-			// Clear selected elements when clicking empty timeline area
-			clearSelectedElements();
+      // Clear selected elements when clicking empty timeline area
+      clearSelectedElements();
 
-			// Determine if we're clicking in ruler or tracks area
-			const isRulerClick = (e.target as HTMLElement).closest(
-				"[data-ruler-area]",
-			);
+      // Determine if we're clicking in ruler or tracks area
+      const isRulerClick = (e.target as HTMLElement).closest(
+        "[data-ruler-area]"
+      );
 
-			let mouseX: number;
-			let scrollLeft = 0;
+      let mouseX: number;
+      let scrollLeft = 0;
 
-			if (isRulerClick) {
-				// Calculate based on ruler position
-				const rulerContent = rulerScrollRef.current?.querySelector(
-					"[data-radix-scroll-area-viewport]",
-				) as HTMLElement;
-				if (!rulerContent) return;
-				const rect = rulerContent.getBoundingClientRect();
-				mouseX = e.clientX - rect.left;
-				scrollLeft = rulerContent.scrollLeft;
-			} else {
-				// Calculate based on tracks content position
-				const tracksContent = tracksScrollRef.current?.querySelector(
-					"[data-radix-scroll-area-viewport]",
-				) as HTMLElement;
-				if (!tracksContent) return;
-				const rect = tracksContent.getBoundingClientRect();
-				mouseX = e.clientX - rect.left;
-				scrollLeft = tracksContent.scrollLeft;
-			}
+      if (isRulerClick) {
+        // Calculate based on ruler position
+        const rulerContent = rulerScrollRef.current?.querySelector(
+          "[data-radix-scroll-area-viewport]"
+        ) as HTMLElement;
+        if (!rulerContent) return;
+        const rect = rulerContent.getBoundingClientRect();
+        mouseX = e.clientX - rect.left;
+        scrollLeft = rulerContent.scrollLeft;
+      } else {
+        // Calculate based on tracks content position
+        const tracksContent = tracksScrollRef.current?.querySelector(
+          "[data-radix-scroll-area-viewport]"
+        ) as HTMLElement;
+        if (!tracksContent) return;
+        const rect = tracksContent.getBoundingClientRect();
+        mouseX = e.clientX - rect.left;
+        scrollLeft = tracksContent.scrollLeft;
+      }
 
-			const rawTime = Math.max(
-				0,
-				Math.min(
-					duration,
-					(mouseX + scrollLeft) /
-						(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
-				),
-			);
+      const rawTime = Math.max(
+        0,
+        Math.min(
+          duration,
+          (mouseX + scrollLeft) /
+            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
+        )
+      );
 
-			// Use frame snapping for timeline clicking
-			const projectFps = activeProject?.fps || 30;
-			const time = snapTimeToFrame(rawTime, projectFps);
+      // Use frame snapping for timeline clicking
+      const projectFps = activeProject?.fps || 30;
+      const time = snapTimeToFrame(rawTime, projectFps);
 
-			seek(time);
-		},
-		[
-			duration,
-			zoomLevel,
-			seek,
-			rulerScrollRef,
-			tracksScrollRef,
-			clearSelectedElements,
-			isSelecting,
-			justFinishedSelecting,
-			playheadRef,
-			activeProject?.fps,
-		],
-	);
+      seek(time);
+    },
+    [
+      duration,
+      zoomLevel,
+      seek,
+      rulerScrollRef,
+      tracksScrollRef,
+      clearSelectedElements,
+      isSelecting,
+      justFinishedSelecting,
+      playheadRef,
+      activeProject?.fps,
+    ]
+  );
 
-	return { handleTimelineContentClick };
+  return { handleTimelineContentClick };
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-content.tsx b/apps/web/src/components/editor/timeline/timeline-content.tsx
index 05b7d4bd..cb9a313f 100644
--- a/apps/web/src/components/editor/timeline/timeline-content.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-content.tsx
@@ -7,121 +7,120 @@ import type { TimelineTrack } from "@/types/timeline";
 import type { SnapPoint } from "@/hooks/use-timeline-snapping";
 
 export interface TimelineContentProps {
-	dynamicTimelineWidth: number;
-	tracks: TimelineTrack[];
-	duration: number;
-	zoomLevel: number;
-	currentTime: number;
-	seek: (time: number) => void;
-	rulerRef: React.RefObject<HTMLDivElement>;
-	rulerScrollRef: React.RefObject<HTMLDivElement>;
-	tracksScrollRef: React.RefObject<HTMLDivElement>;
-	playheadRef: React.RefObject<HTMLDivElement>;
-	trackLabelsRef: React.RefObject<HTMLDivElement>;
-	timelineRef: React.RefObject<HTMLDivElement>;
-	handleSelectionMouseDown: (e: React.MouseEvent) => void;
-	handleTimelineContentClick: (e: React.MouseEvent) => void;
-	handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
-	clearSelectedElements: () => void;
-	selectionBox: {
-		startPos: { x: number; y: number } | null;
-		currentPos: { x: number; y: number } | null;
-		isActive: boolean;
-	} | null;
-	tracksContainerRef: React.RefObject<HTMLDivElement>;
-	currentSnapPoint: SnapPoint | null;
-	showSnapIndicator: boolean;
+  dynamicTimelineWidth: number;
+  tracks: TimelineTrack[];
+  duration: number;
+  zoomLevel: number;
+  currentTime: number;
+  seek: (time: number) => void;
+  rulerRef: React.RefObject<HTMLDivElement>;
+  rulerScrollRef: React.RefObject<HTMLDivElement>;
+  tracksScrollRef: React.RefObject<HTMLDivElement>;
+  playheadRef: React.RefObject<HTMLDivElement>;
+  trackLabelsRef: React.RefObject<HTMLDivElement>;
+  timelineRef: React.RefObject<HTMLDivElement>;
+  handleSelectionMouseDown: (e: React.MouseEvent) => void;
+  handleTimelineContentClick: (e: React.MouseEvent) => void;
+  handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
+  clearSelectedElements: () => void;
+  selectionBox: {
+    startPos: { x: number; y: number } | null;
+    currentPos: { x: number; y: number } | null;
+    isActive: boolean;
+  } | null;
+  tracksContainerRef: React.RefObject<HTMLDivElement>;
+  currentSnapPoint: SnapPoint | null;
+  showSnapIndicator: boolean;
 }
 
 export function TimelineContent({
-	dynamicTimelineWidth,
-	tracks,
-	duration,
-	zoomLevel,
-	currentTime,
-	seek,
-	rulerRef,
-	rulerScrollRef,
-	tracksScrollRef,
-	playheadRef,
-	trackLabelsRef,
-	timelineRef,
-	handleSelectionMouseDown,
-	handleTimelineContentClick,
-	handleSnapPointChange,
-	clearSelectedElements,
-	selectionBox,
-	tracksContainerRef,
-	currentSnapPoint,
-	showSnapIndicator,
+  dynamicTimelineWidth,
+  tracks,
+  duration,
+  zoomLevel,
+  currentTime,
+  seek,
+  rulerRef,
+  rulerScrollRef,
+  tracksScrollRef,
+  playheadRef,
+  trackLabelsRef,
+  timelineRef,
+  handleSelectionMouseDown,
+  handleTimelineContentClick,
+  handleSnapPointChange,
+  clearSelectedElements,
+  selectionBox,
+  tracksContainerRef,
+  currentSnapPoint,
+  showSnapIndicator,
 }: TimelineContentProps) {
-	return (
-		<div
-			className="relative min-w-max min-h-max"
-			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>
+  return (
+    <div
+      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 Row (Sticky Ruler Header) */}
-				<TimelineRuler
-					duration={duration}
-					zoomLevel={zoomLevel}
-					currentTime={currentTime}
-					seek={seek}
-					rulerRef={rulerRef}
-					rulerScrollRef={rulerScrollRef}
-					tracksScrollRef={tracksScrollRef}
-					playheadRef={playheadRef}
-					handleSelectionMouseDown={handleSelectionMouseDown}
-					handleTimelineContentClick={handleTimelineContentClick}
-				/>
 
-				{/* Track Rows */}
-				<TimelineTracksArea
-					tracks={tracks}
-					zoomLevel={zoomLevel}
-					handleSnapPointChange={handleSnapPointChange}
-					clearSelectedElements={clearSelectedElements}
-				/>
-			</div>
+        {/* Top Row (Sticky Ruler Header) */}
+        <TimelineRuler
+          duration={duration}
+          zoomLevel={zoomLevel}
+          currentTime={currentTime}
+          seek={seek}
+          rulerRef={rulerRef}
+          rulerScrollRef={rulerScrollRef}
+          tracksScrollRef={tracksScrollRef}
+          playheadRef={playheadRef}
+          handleSelectionMouseDown={handleSelectionMouseDown}
+          handleTimelineContentClick={handleTimelineContentClick}
+        />
 
-			{/* Overlay Components - positioned absolutely relative to the timeline container */}
-			<SelectionBox
-				startPos={selectionBox?.startPos || null}
-				currentPos={selectionBox?.currentPos || null}
-				containerRef={tracksContainerRef}
-				isActive={selectionBox?.isActive || false}
-			/>
+        {/* Track Rows */}
+        <TimelineTracksArea
+          tracks={tracks}
+          zoomLevel={zoomLevel}
+          handleSnapPointChange={handleSnapPointChange}
+          clearSelectedElements={clearSelectedElements}
+        />
+      </div>
 
-			<TimelinePlayhead
-				currentTime={currentTime}
-				duration={duration}
-				zoomLevel={zoomLevel}
-				tracks={tracks}
-				seek={seek}
-				rulerRef={rulerRef}
-				rulerScrollRef={rulerScrollRef}
-				tracksScrollRef={tracksScrollRef}
-				trackLabelsRef={trackLabelsRef}
-				timelineRef={timelineRef}
-				playheadRef={playheadRef}
-				isSnappingToPlayhead={
-					showSnapIndicator && currentSnapPoint?.type === "playhead"
-				}
-			/>
+      {/* Overlay Components - positioned absolutely relative to the timeline container */}
+      <SelectionBox
+        startPos={selectionBox?.startPos || null}
+        currentPos={selectionBox?.currentPos || null}
+        containerRef={tracksContainerRef}
+        isActive={selectionBox?.isActive || false}
+      />
 
-			<SnapIndicator
-				snapPoint={currentSnapPoint}
-				zoomLevel={zoomLevel}
-				tracks={tracks}
-				timelineRef={timelineRef}
-				trackLabelsRef={trackLabelsRef}
-				isVisible={showSnapIndicator}
-			/>
-		</div>
-	);
+      <TimelinePlayhead
+        currentTime={currentTime}
+        duration={duration}
+        zoomLevel={zoomLevel}
+        tracks={tracks}
+        seek={seek}
+        rulerRef={rulerRef}
+        rulerScrollRef={rulerScrollRef}
+        tracksScrollRef={tracksScrollRef}
+        trackLabelsRef={trackLabelsRef}
+        timelineRef={timelineRef}
+        playheadRef={playheadRef}
+        isSnappingToPlayhead={
+          showSnapIndicator && currentSnapPoint?.type === "playhead"
+        }
+      />
+
+      <SnapIndicator
+        snapPoint={currentSnapPoint}
+        zoomLevel={zoomLevel}
+        tracks={tracks}
+        timelineRef={timelineRef}
+        trackLabelsRef={trackLabelsRef}
+        isVisible={showSnapIndicator}
+      />
+    </div>
+  );
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx b/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx
index 60cd7122..afb83e54 100644
--- a/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx
+++ b/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";
@@ -7,138 +7,137 @@ import { processMediaFiles } from "@/lib/media-processing";
 import type { DragData } from "@/types/timeline";
 
 export interface TimelineDragHandlersProps {
-	isDragOver: boolean;
-	setIsDragOver: (isDragOver: boolean) => void;
-	isProcessing: boolean;
-	setIsProcessing: (isProcessing: boolean) => void;
-	progress: number;
-	setProgress: (progress: number) => void;
+  isDragOver: boolean;
+  setIsDragOver: (isDragOver: boolean) => void;
+  isProcessing: boolean;
+  setIsProcessing: (isProcessing: boolean) => void;
+  progress: number;
+  setProgress: (progress: number) => void;
 }
 
 export function useTimelineDragHandlers({
-	isDragOver,
-	setIsDragOver,
-	isProcessing,
-	setIsProcessing,
-	progress,
-	setProgress,
+  isDragOver,
+  setIsDragOver,
+  isProcessing,
+  setIsProcessing,
+  progress,
+  setProgress,
 }: TimelineDragHandlersProps) {
-	const { mediaItems, addMediaItem } = useMediaStore();
-	const { activeProject } = useProjectStore();
-	const dragCounterRef = useRef(0);
+  const { mediaItems, addMediaItem } = useMediaStore();
+  const { activeProject } = useProjectStore();
+  const dragCounterRef = useRef(0);
 
-	const handleDragEnter = (e: React.DragEvent) => {
-		// When something is dragged over the timeline, show overlay
-		e.preventDefault();
-		// Don't show overlay for timeline elements - they're handled by tracks
-		if (e.dataTransfer.types.includes("application/x-timeline-element")) {
-			return;
-		}
-		dragCounterRef.current += 1;
-		if (!isDragOver) {
-			setIsDragOver(true);
-		}
-	};
+  const handleDragEnter = (e: React.DragEvent) => {
+    // When something is dragged over the timeline, show overlay
+    e.preventDefault();
+    // Don't show overlay for timeline elements - they're handled by tracks
+    if (e.dataTransfer.types.includes("application/x-timeline-element")) {
+      return;
+    }
+    dragCounterRef.current += 1;
+    if (!isDragOver) {
+      setIsDragOver(true);
+    }
+  };
 
-	const handleDragOver = (e: React.DragEvent) => {
-		e.preventDefault();
-	};
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
 
-	const handleDragLeave = (e: React.DragEvent) => {
-		e.preventDefault();
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
 
-		// Don't update state for timeline elements - they're handled by tracks
-		if (e.dataTransfer.types.includes("application/x-timeline-element")) {
-			return;
-		}
+    // Don't update state for timeline elements - they're handled by tracks
+    if (e.dataTransfer.types.includes("application/x-timeline-element")) {
+      return;
+    }
 
-		dragCounterRef.current -= 1;
-		if (dragCounterRef.current === 0) {
-			setIsDragOver(false);
-		}
-	};
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current === 0) {
+      setIsDragOver(false);
+    }
+  };
 
-	const handleDrop = async (e: React.DragEvent) => {
-		// When media is dropped, add it as a new track/element
-		e.preventDefault();
-		setIsDragOver(false);
-		dragCounterRef.current = 0;
+  const handleDrop = async (e: React.DragEvent) => {
+    // When media is dropped, add it as a new track/element
+    e.preventDefault();
+    setIsDragOver(false);
+    dragCounterRef.current = 0;
 
-		// Ignore timeline element drags - they're handled by track-specific handlers
-		const hasTimelineElement = e.dataTransfer.types.includes(
-			"application/x-timeline-element",
-		);
-		if (hasTimelineElement) {
-			return;
-		}
+    // Ignore timeline element drags - they're handled by track-specific handlers
+    const hasTimelineElement = e.dataTransfer.types.includes(
+      "application/x-timeline-element"
+    );
+    if (hasTimelineElement) {
+      return;
+    }
 
-		const itemData = e.dataTransfer.getData("application/x-media-item");
-		if (itemData) {
-			try {
-				const dragData: DragData = JSON.parse(itemData);
+    const itemData = e.dataTransfer.getData("application/x-media-item");
+    if (itemData) {
+      try {
+        const dragData: DragData = JSON.parse(itemData);
 
-				if (dragData.type === "text") {
-					// Always create new text track to avoid overlaps
-					useTimelineStore.getState().addTextToNewTrack(dragData);
-				} else {
-					// Handle media items
-					const mediaItem = mediaItems.find(
-						(item: any) => item.id === dragData.id,
-					);
-					if (!mediaItem) {
-						toast.error("Media item not found");
-						return;
-					}
+        if (dragData.type === "text") {
+          // Always create new text track to avoid overlaps
+          useTimelineStore.getState().addTextToNewTrack(dragData);
+        } else {
+          // Handle media items
+          const mediaItem = mediaItems.find(
+            (item: any) => item.id === dragData.id
+          );
+          if (!mediaItem) {
+            toast.error("Media item not found");
+            return;
+          }
 
-					useTimelineStore.getState().addMediaToNewTrack(mediaItem);
-				}
-			} catch (error) {
-				console.error("Error parsing dropped item data:", error);
-				toast.error("Failed to add item to timeline");
-			}
-		} else if (e.dataTransfer.files?.length > 0) {
-			// Handle file drops by creating new tracks
-			if (!activeProject) {
-				toast.error("No active project");
-				return;
-			}
+          useTimelineStore.getState().addMediaToNewTrack(mediaItem);
+        }
+      } catch (error) {
+        console.error("Error parsing dropped item data:", error);
+        toast.error("Failed to add item to timeline");
+      }
+    } else if (e.dataTransfer.files?.length > 0) {
+      // Handle file drops by creating new tracks
+      if (!activeProject) {
+        toast.error("No active project");
+        return;
+      }
 
-			setIsProcessing(true);
-			setProgress(0);
-			try {
-				const processedItems = await processMediaFiles(
-					e.dataTransfer.files,
-					(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.url === processedItem.url,
-					);
-					if (addedItem) {
-						useTimelineStore.getState().addMediaToNewTrack(addedItem);
-					}
-				}
-			} catch (error) {
-				// Show error if file processing fails
-				console.error("Error processing external files:", error);
-				toast.error("Failed to process dropped files");
-			} finally {
-				setIsProcessing(false);
-				setProgress(0);
-			}
-		}
-	};
+      setIsProcessing(true);
+      setProgress(0);
+      try {
+        const processedItems = await processMediaFiles(
+          e.dataTransfer.files,
+          (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.url === processedItem.url
+          );
+          if (addedItem) {
+            useTimelineStore.getState().addMediaToNewTrack(addedItem);
+          }
+        }
+      } catch (error) {
+        // Show error if file processing fails
+        console.error("Error processing external files:", error);
+        toast.error("Failed to process dropped files");
+      } finally {
+        setIsProcessing(false);
+        setProgress(0);
+      }
+    }
+  };
 
-	const dragProps = {
-		onDragEnter: handleDragEnter,
-		onDragOver: handleDragOver,
-		onDragLeave: handleDragLeave,
-		onDrop: handleDrop,
-	};
+  const dragProps = {
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+  };
 
-	return { dragProps };
+  return { dragProps };
 }
diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index 8cccd0e4..012d0dc7 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -1,25 +1,12 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "../ui/button";
-import {
-  MoreVertical,
-  Scissors,
-  Trash2,
-  SplitSquareHorizontal,
-  Music,
-  ChevronRight,
-  ChevronLeft,
-  Type,
-  Copy,
-  RefreshCw,
-} from "lucide-react";
+import { Scissors, Trash2, 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,
@@ -27,22 +14,12 @@ import {
   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,29 +36,19 @@ export function TimelineElement({
     removeElementFromTrack,
     dragState,
     splitElement,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
     addElementToTrack,
     replaceElementMedia,
   } = useTimelineStore();
   const { currentTime } = usePlaybackStore();
 
-  const [elementMenuOpen, setElementMenuOpen] = useState(false);
-
-  const {
-    resizing,
-    isResizing,
-    handleResizeStart,
-    handleResizeMove,
-    handleResizeEnd,
-  } = useTimelineElementResize({
-    element,
-    track,
-    zoomLevel,
-    onUpdateTrim: updateElementTrim,
-    onUpdateDuration: updateElementDuration,
-  });
+  const { resizing, handleResizeStart, handleResizeMove, handleResizeEnd } =
+    useTimelineElementResize({
+      element,
+      track,
+      zoomLevel,
+      onUpdateTrim: updateElementTrim,
+      onUpdateDuration: updateElementDuration,
+    });
 
   const effectiveDuration =
     element.duration - element.trimStart - element.trimEnd;
@@ -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 =
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index 5e531e9c..e27bfee0 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -2,121 +2,114 @@
 
 import { useRef } from "react";
 import { TimelineTrack } from "@/types/timeline";
-import {
-	TIMELINE_CONSTANTS,
-	getTotalTracksHeight,
-} from "@/constants/timeline-constants";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
 
 interface TimelinePlayheadProps {
-	currentTime: number;
-	duration: number;
-	zoomLevel: number;
-	tracks: TimelineTrack[];
-	seek: (time: number) => void;
-	rulerRef: React.RefObject<HTMLDivElement>;
-	rulerScrollRef: React.RefObject<HTMLDivElement>;
-	tracksScrollRef: React.RefObject<HTMLDivElement>;
-	trackLabelsRef?: React.RefObject<HTMLDivElement>;
-	timelineRef: React.RefObject<HTMLDivElement>;
-	playheadRef?: React.RefObject<HTMLDivElement>;
-	isSnappingToPlayhead?: boolean;
+  currentTime: number;
+  duration: number;
+  zoomLevel: number;
+  tracks: TimelineTrack[];
+  seek: (time: number) => void;
+  rulerRef: React.RefObject<HTMLDivElement>;
+  rulerScrollRef: React.RefObject<HTMLDivElement>;
+  tracksScrollRef: React.RefObject<HTMLDivElement>;
+  trackLabelsRef?: React.RefObject<HTMLDivElement>;
+  timelineRef: React.RefObject<HTMLDivElement>;
+  playheadRef?: React.RefObject<HTMLDivElement>;
+  isSnappingToPlayhead?: boolean;
 }
 
 export function TimelinePlayhead({
-	currentTime,
-	duration,
-	zoomLevel,
-	tracks,
-	seek,
-	rulerRef,
-	rulerScrollRef,
-	tracksScrollRef,
-	trackLabelsRef,
-	timelineRef,
-	playheadRef: externalPlayheadRef,
-	isSnappingToPlayhead = false,
+  currentTime,
+  duration,
+  zoomLevel,
+  tracks,
+  seek,
+  rulerRef,
+  rulerScrollRef,
+  tracksScrollRef,
+  trackLabelsRef,
+  timelineRef,
+  playheadRef: externalPlayheadRef,
+  isSnappingToPlayhead = false,
 }: TimelinePlayheadProps) {
-	const internalPlayheadRef = useRef<HTMLDivElement>(null);
-	const playheadRef = externalPlayheadRef || internalPlayheadRef;
-	const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
-		currentTime,
-		duration,
-		zoomLevel,
-		seek,
-		rulerRef,
-		rulerScrollRef,
-		tracksScrollRef,
-		playheadRef,
-	});
+  const internalPlayheadRef = useRef<HTMLDivElement>(null);
+  const playheadRef = externalPlayheadRef || internalPlayheadRef;
+  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
+    currentTime,
+    duration,
+    zoomLevel,
+    seek,
+    rulerRef,
+    rulerScrollRef,
+    tracksScrollRef,
+    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 =
+    playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
 
-	// 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 =
-		playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+  return (
+    <>
+      {/* Playhead line container */}
+      <div
+        ref={playheadRef}
+        className="absolute pointer-events-auto z-[95]"
+        style={{
+          left: `${trackLabelsWidth + leftPosition}px`,
+          top: 0,
+          bottom: 0,
+          width: "2px", // Slightly wider for better click target
+        }}
+        onMouseDown={handlePlayheadMouseDown}
+      >
+        {/* The playhead line spanning full height */}
+        <div
+          className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
+        />
+      </div>
 
-	return (
-		<>
-			{/* Playhead line container */}
-			<div
-				ref={playheadRef}
-				className="absolute pointer-events-auto z-[95]"
-				style={{
-					left: `${trackLabelsWidth + leftPosition}px`,
-					top: 0,
-					bottom: 0,
-					width: "2px", // Slightly wider for better click target
-				}}
-				onMouseDown={handlePlayheadMouseDown}
-			>
-				{/* The playhead line spanning full height */}
-				<div
-					className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
-				/>
-			</div>
-
-			{/* Playhead dot indicator - separate container with highest z-index */}
-			<div
-				className="absolute pointer-events-none z-[100]"
-				style={{
-					left: `${trackLabelsWidth + leftPosition}px`,
-					top: 0,
-					bottom: 0,
-				}}
-			>
-				<div
-					className={`sticky top-1 left-1 -translate-x-[40%] transform w-3 h-3 rounded-full shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
-				/>
-			</div>
-		</>
-	);
+      {/* Playhead dot indicator - separate container with highest z-index */}
+      <div
+        className="absolute pointer-events-none z-[100]"
+        style={{
+          left: `${trackLabelsWidth + leftPosition}px`,
+          top: 0,
+          bottom: 0,
+        }}
+      >
+        <div
+          className={`sticky top-1 left-1 -translate-x-[40%] transform w-3 h-3 rounded-full shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
+        />
+      </div>
+    </>
+  );
 }
 
 // Also export a hook for getting ruler handlers
 export function useTimelinePlayheadRuler({
-	currentTime,
-	duration,
-	zoomLevel,
-	seek,
-	rulerRef,
-	rulerScrollRef,
-	tracksScrollRef,
-	playheadRef,
+  currentTime,
+  duration,
+  zoomLevel,
+  seek,
+  rulerRef,
+  rulerScrollRef,
+  tracksScrollRef,
+  playheadRef,
 }: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
-	const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
-		currentTime,
-		duration,
-		zoomLevel,
-		seek,
-		rulerRef,
-		rulerScrollRef,
-		tracksScrollRef,
-		playheadRef,
-	});
+  const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
+    currentTime,
+    duration,
+    zoomLevel,
+    seek,
+    rulerRef,
+    rulerScrollRef,
+    tracksScrollRef,
+    playheadRef,
+  });
 
-	return { handleRulerMouseDown, isDraggingRuler };
+  return { handleRulerMouseDown, isDraggingRuler };
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-ruler.tsx b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
index 2f2b6605..7618ce7c 100644
--- a/apps/web/src/components/editor/timeline/timeline-ruler.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
@@ -3,125 +3,125 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useTimelinePlayheadRuler } from "./timeline-playhead";
 
 export interface TimelineRulerProps {
-	duration: number;
-	zoomLevel: number;
-	currentTime: number;
-	seek: (time: number) => void;
-	rulerRef: React.RefObject<HTMLDivElement>;
-	rulerScrollRef: React.RefObject<HTMLDivElement>;
-	tracksScrollRef: React.RefObject<HTMLDivElement>;
-	playheadRef: React.RefObject<HTMLDivElement>;
-	handleSelectionMouseDown: (e: React.MouseEvent) => void;
-	handleTimelineContentClick: (e: React.MouseEvent) => void;
+  duration: number;
+  zoomLevel: number;
+  currentTime: number;
+  seek: (time: number) => void;
+  rulerRef: React.RefObject<HTMLDivElement>;
+  rulerScrollRef: React.RefObject<HTMLDivElement>;
+  tracksScrollRef: React.RefObject<HTMLDivElement>;
+  playheadRef: React.RefObject<HTMLDivElement>;
+  handleSelectionMouseDown: (e: React.MouseEvent) => void;
+  handleTimelineContentClick: (e: React.MouseEvent) => void;
 }
 
 export function TimelineRuler({
-	duration,
-	zoomLevel,
-	currentTime,
-	seek,
-	rulerRef,
-	rulerScrollRef,
-	tracksScrollRef,
-	playheadRef,
-	handleSelectionMouseDown,
-	handleTimelineContentClick,
+  duration,
+  zoomLevel,
+  currentTime,
+  seek,
+  rulerRef,
+  rulerScrollRef,
+  tracksScrollRef,
+  playheadRef,
+  handleSelectionMouseDown,
+  handleTimelineContentClick,
 }: TimelineRulerProps) {
-	// Timeline playhead ruler handlers
-	const { handleRulerMouseDown } = useTimelinePlayheadRuler({
-		currentTime,
-		duration,
-		zoomLevel,
-		seek,
-		rulerRef,
-		rulerScrollRef,
-		tracksScrollRef,
-		playheadRef,
-	});
+  // Timeline playhead ruler handlers
+  const { handleRulerMouseDown } = useTimelinePlayheadRuler({
+    currentTime,
+    duration,
+    zoomLevel,
+    seek,
+    rulerRef,
+    rulerScrollRef,
+    tracksScrollRef,
+    playheadRef,
+  });
 
-	// Memoize the expensive ruler markers calculation
-	const rulerMarkers = useMemo(() => {
-		// Calculate appropriate time interval based on zoom level
-		const getTimeInterval = (zoom: number) => {
-			const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom;
-			if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
-			if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
-			if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
-			if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
-			if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
-			if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
-			return 30; // Every 30s when extremely zoomed out
-		};
+  // Memoize the expensive ruler markers calculation
+  const rulerMarkers = useMemo(() => {
+    // Calculate appropriate time interval based on zoom level
+    const getTimeInterval = (zoom: number) => {
+      const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom;
+      if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
+      if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
+      if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
+      if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
+      if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
+      if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
+      return 30; // Every 30s when extremely zoomed out
+    };
 
-		const formatTime = (seconds: number, interval: number) => {
-			const hours = Math.floor(seconds / 3600);
-			const minutes = Math.floor((seconds % 3600) / 60);
-			const secs = seconds % 60;
+    const formatTime = (seconds: number, interval: number) => {
+      const hours = Math.floor(seconds / 3600);
+      const minutes = Math.floor((seconds % 3600) / 60);
+      const secs = seconds % 60;
 
-			if (hours > 0) {
-				return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
-			} else if (minutes > 0) {
-				return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
-			} else if (interval >= 1) {
-				return `${Math.floor(secs)}s`;
-			} else {
-				return `${secs.toFixed(1)}s`;
-			}
-		};
+      if (hours > 0) {
+        return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
+      } else if (minutes > 0) {
+        return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
+      } else if (interval >= 1) {
+        return `${Math.floor(secs)}s`;
+      } else {
+        return `${secs.toFixed(1)}s`;
+      }
+    };
 
-		const interval = getTimeInterval(zoomLevel);
-		const markerCount = Math.ceil(duration / interval) + 1;
-		const markers = [];
+    const interval = getTimeInterval(zoomLevel);
+    const markerCount = Math.ceil(duration / interval) + 1;
+    const markers = [];
 
-		for (let i = 0; i < markerCount; i++) {
-			const time = i * interval;
-			if (time > duration) break;
+    for (let i = 0; i < markerCount; i++) {
+      const time = i * interval;
+      if (time > duration) break;
 
-			const isMainMarker =
-				time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
-			const leftPosition =
-				time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+      const isMainMarker =
+        time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
+      const leftPosition =
+        time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
 
-			markers.push(
-				<div
-					key={i}
-					className={`absolute top-0 bottom-0 z-[99] ${
-						isMainMarker
-							? "border-l border-muted-foreground/40"
-							: "border-l border-muted-foreground/20"
-					}`}
-					style={{ left: `${leftPosition}px` }}
-				>
-					<span
-						className={`absolute top-1 left-1 text-[0.6rem] z-[99] ${
-							isMainMarker
-								? "text-muted-foreground font-medium"
-								: "text-muted-foreground/70"
-						}`}
-					>
-						{formatTime(time, interval)}
-					</span>
-				</div>,
-			);
-		}
+      markers.push(
+        <div
+          key={i}
+          className={`absolute top-0 bottom-0 z-[99] ${
+            isMainMarker
+              ? "border-l border-muted-foreground/40"
+              : "border-l border-muted-foreground/20"
+          }`}
+          style={{ left: `${leftPosition}px` }}
+        >
+          <span
+            className={`absolute top-1 left-1 text-[0.6rem] z-[99] ${
+              isMainMarker
+                ? "text-muted-foreground font-medium"
+                : "text-muted-foreground/70"
+            }`}
+          >
+            {formatTime(time, interval)}
+          </span>
+        </div>
+      );
+    }
 
-		return markers;
-	}, [duration, zoomLevel]); // Only recalculate when duration or zoomLevel changes
+    return markers;
+  }, [duration, zoomLevel]); // Only recalculate when duration or zoomLevel changes
 
-	return (
-		<div
-			className="sticky top-0 bg-card border-b border-muted/30 z-[99]"
-			onMouseDown={handleSelectionMouseDown}
-			onClick={handleTimelineContentClick}
-			data-ruler-area
-		>
-			<div
-				ref={rulerRef}
-				className="relative h-5 select-none cursor-default pb-1 z-[99]"
-				onMouseDown={handleRulerMouseDown}
-			>
-				{rulerMarkers}
-			</div>
-		</div>
-	);
+  return (
+    <div
+      className="sticky top-0 border-b border-muted/30 z-[99] w-24"
+      onMouseDown={handleSelectionMouseDown}
+      onClick={handleTimelineContentClick}
+      data-ruler-area
+    >
+      <div
+        ref={rulerRef}
+        className="relative h-5 select-none cursor-default pb-1 z-[99]"
+        onMouseDown={handleRulerMouseDown}
+      >
+        {rulerMarkers}
+      </div>
+    </div>
+  );
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx b/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
index 6537d909..9938ca04 100644
--- a/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
@@ -1,61 +1,61 @@
 import { useEffect, useRef } from "react";
 
 export interface TimelineScrollSyncProps {
-	rulerScrollRef: React.RefObject<HTMLDivElement>;
-	tracksScrollRef: React.RefObject<HTMLDivElement>;
+  rulerScrollRef: React.RefObject<HTMLDivElement>;
+  tracksScrollRef: React.RefObject<HTMLDivElement>;
 }
 
 export function useTimelineScrollSync({
-	rulerScrollRef,
-	tracksScrollRef,
+  rulerScrollRef,
+  tracksScrollRef,
 }: TimelineScrollSyncProps) {
-	const isUpdatingRef = useRef(false);
-	const lastSyncRef = useRef(0);
+  const isUpdatingRef = useRef(false);
+  const lastSyncRef = useRef(0);
 
-	// --- Horizontal scroll synchronization between ruler and tracks ---
-	useEffect(() => {
-		const rulerViewport = rulerScrollRef.current?.querySelector(
-			"[data-radix-scroll-area-viewport]",
-		) as HTMLElement;
-		const tracksViewport = tracksScrollRef.current?.querySelector(
-			"[data-radix-scroll-area-viewport]",
-		) as HTMLElement;
+  // --- Horizontal scroll synchronization between ruler and tracks ---
+  useEffect(() => {
+    const rulerViewport = rulerScrollRef.current?.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    ) as HTMLElement;
+    const tracksViewport = tracksScrollRef.current?.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    ) as HTMLElement;
 
-		if (!rulerViewport || !tracksViewport) return;
+    if (!rulerViewport || !tracksViewport) return;
 
-		// Throttled scroll handlers for better performance
-		const handleRulerScroll = () => {
-			const now = Date.now();
-			if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
-			lastSyncRef.current = now;
+    // Throttled scroll handlers for better performance
+    const handleRulerScroll = () => {
+      const now = Date.now();
+      if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
+      lastSyncRef.current = now;
 
-			isUpdatingRef.current = true;
-			tracksViewport.scrollLeft = rulerViewport.scrollLeft;
-			isUpdatingRef.current = false;
-		};
+      isUpdatingRef.current = true;
+      tracksViewport.scrollLeft = rulerViewport.scrollLeft;
+      isUpdatingRef.current = false;
+    };
 
-		const handleTracksScroll = () => {
-			const now = Date.now();
-			if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
-			lastSyncRef.current = now;
+    const handleTracksScroll = () => {
+      const now = Date.now();
+      if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
+      lastSyncRef.current = now;
 
-			isUpdatingRef.current = true;
-			rulerViewport.scrollLeft = tracksViewport.scrollLeft;
-			isUpdatingRef.current = false;
-		};
+      isUpdatingRef.current = true;
+      rulerViewport.scrollLeft = tracksViewport.scrollLeft;
+      isUpdatingRef.current = false;
+    };
 
-		rulerViewport.addEventListener("scroll", handleRulerScroll, {
-			passive: true,
-		});
-		tracksViewport.addEventListener("scroll", handleTracksScroll, {
-			passive: true,
-		});
+    rulerViewport.addEventListener("scroll", handleRulerScroll, {
+      passive: true,
+    });
+    tracksViewport.addEventListener("scroll", handleTracksScroll, {
+      passive: true,
+    });
 
-		return () => {
-			rulerViewport.removeEventListener("scroll", handleRulerScroll);
-			tracksViewport.removeEventListener("scroll", handleTracksScroll);
-		};
-	}, [rulerScrollRef, tracksScrollRef]);
+    return () => {
+      rulerViewport.removeEventListener("scroll", handleRulerScroll);
+      tracksViewport.removeEventListener("scroll", handleTracksScroll);
+    };
+  }, [rulerScrollRef, tracksScrollRef]);
 
-	return null;
+  return null;
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
index da8b6107..eca15104 100644
--- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
@@ -1,201 +1,201 @@
 import { Button } from "../../ui/button";
 import {
-	Scissors,
-	ArrowLeftToLine,
-	ArrowRightToLine,
-	Trash2,
-	Snowflake,
-	Copy,
-	SplitSquareHorizontal,
-	Pause,
-	Play,
-	Lock,
-	LockOpen,
+  Scissors,
+  ArrowLeftToLine,
+  ArrowRightToLine,
+  Trash2,
+  Snowflake,
+  Copy,
+  SplitSquareHorizontal,
+  Pause,
+  Play,
+  Lock,
+  LockOpen,
 } from "lucide-react";
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-	TooltipProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
 } from "../../ui/tooltip";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 export interface TimelineToolbarProps {
-	handleSplitSelected: () => void;
-	handleSplitAndKeepLeft: () => void;
-	handleSplitAndKeepRight: () => void;
-	handleSeparateAudio: () => void;
-	handleDuplicateSelected: () => void;
-	handleFreezeSelected: () => void;
-	handleDeleteSelected: () => void;
+  handleSplitSelected: () => void;
+  handleSplitAndKeepLeft: () => void;
+  handleSplitAndKeepRight: () => void;
+  handleSeparateAudio: () => void;
+  handleDuplicateSelected: () => void;
+  handleFreezeSelected: () => void;
+  handleDeleteSelected: () => void;
 }
 
 export function TimelineToolbar({
-	handleSplitSelected,
-	handleSplitAndKeepLeft,
-	handleSplitAndKeepRight,
-	handleSeparateAudio,
-	handleDuplicateSelected,
-	handleFreezeSelected,
-	handleDeleteSelected,
+  handleSplitSelected,
+  handleSplitAndKeepLeft,
+  handleSplitAndKeepRight,
+  handleSeparateAudio,
+  handleDuplicateSelected,
+  handleFreezeSelected,
+  handleDeleteSelected,
 }: TimelineToolbarProps) {
-	const {
-		tracks,
-		addTrack,
-		addElementToTrack,
-		snappingEnabled,
-		toggleSnapping,
-	} = useTimelineStore();
-	const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
+  const {
+    tracks,
+    addTrack,
+    addElementToTrack,
+    snappingEnabled,
+    toggleSnapping,
+  } = useTimelineStore();
+  const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
 
-	return (
-		<div className="border-b flex items-center justify-between px-2 py-1 bg-card z-90">
-			<div className="flex items-center gap-1 w-full">
-				<TooltipProvider delayDuration={500}>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="text"
-								size="icon"
-								onClick={toggle}
-								className="mr-2"
-							>
-								{isPlaying ? (
-									<Pause className="h-4 w-4" />
-								) : (
-									<Play className="h-4 w-4" />
-								)}
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>
-							{isPlaying ? "Pause (Space)" : "Play (Space)"}
-						</TooltipContent>
-					</Tooltip>
-					<div className="w-px h-6 bg-border mx-1" />
-					<div
-						className="text-xs text-muted-foreground font-mono px-2"
-						style={{ minWidth: "18ch", textAlign: "center" }}
-					>
-						{currentTime.toFixed(1)}s / {duration.toFixed(1)}s
-					</div>
-					{tracks.length === 0 && (
-						<>
-							<div className="w-px h-6 bg-border mx-1" />
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="outline"
-										size="sm"
-										onClick={() => {
-											const trackId = addTrack("media");
-											addElementToTrack(trackId, {
-												type: "media",
-												mediaId: "test",
-												name: "Test Clip",
-												duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-												startTime: 0,
-												trimStart: 0,
-												trimEnd: 0,
-											});
-										}}
-										className="text-xs"
-									>
-										Add Test Clip
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent>Add a test clip to try playback</TooltipContent>
-							</Tooltip>
-						</>
-					)}
-					<div className="w-px h-6 bg-border mx-1" />
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button variant="text" size="icon" onClick={handleSplitSelected}>
-								<Scissors className="h-4 w-4" />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Split element (Ctrl+S)</TooltipContent>
-					</Tooltip>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="text"
-								size="icon"
-								onClick={handleSplitAndKeepLeft}
-							>
-								<ArrowLeftToLine className="h-4 w-4" />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
-					</Tooltip>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="text"
-								size="icon"
-								onClick={handleSplitAndKeepRight}
-							>
-								<ArrowRightToLine className="h-4 w-4" />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
-					</Tooltip>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button variant="text" size="icon" onClick={handleSeparateAudio}>
-								<SplitSquareHorizontal className="h-4 w-4" />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
-					</Tooltip>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="text"
-								size="icon"
-								onClick={handleDuplicateSelected}
-							>
-								<Copy className="h-4 w-4" />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
-					</Tooltip>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button variant="text" size="icon" onClick={handleFreezeSelected}>
-								<Snowflake className="h-4 w-4" />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Freeze frame (F)</TooltipContent>
-					</Tooltip>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button variant="text" size="icon" onClick={handleDeleteSelected}>
-								<Trash2 className="h-4 w-4" />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Delete element (Delete)</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			</div>
-			<div className="flex items-center gap-1">
-				<TooltipProvider delayDuration={500}>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button variant="text" size="icon" onClick={toggleSnapping}>
-								{snappingEnabled ? (
-									<Lock className="h-4 w-4" />
-								) : (
-									<LockOpen className="h-4 w-4 text-primary" />
-								)}
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>Auto snapping</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			</div>
-		</div>
-	);
+  return (
+    <div className="border-b flex items-center justify-between px-2 py-1 bg-card z-90">
+      <div className="flex items-center gap-1 w-full">
+        <TooltipProvider delayDuration={500}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="text"
+                size="icon"
+                onClick={toggle}
+                className="mr-2"
+              >
+                {isPlaying ? (
+                  <Pause className="h-4 w-4" />
+                ) : (
+                  <Play className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {isPlaying ? "Pause (Space)" : "Play (Space)"}
+            </TooltipContent>
+          </Tooltip>
+          <div className="w-px h-6 bg-border mx-1" />
+          <div
+            className="text-xs text-muted-foreground font-mono px-2"
+            style={{ minWidth: "18ch", textAlign: "center" }}
+          >
+            {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
+          </div>
+          {tracks.length === 0 && (
+            <>
+              <div className="w-px h-6 bg-border mx-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const trackId = addTrack("media");
+                      addElementToTrack(trackId, {
+                        type: "media",
+                        mediaId: "test",
+                        name: "Test Clip",
+                        duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
+                        startTime: 0,
+                        trimStart: 0,
+                        trimEnd: 0,
+                      });
+                    }}
+                    className="text-xs"
+                  >
+                    Add Test Clip
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Add a test clip to try playback</TooltipContent>
+              </Tooltip>
+            </>
+          )}
+          <div className="w-px h-6 bg-border mx-1" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="text" size="icon" onClick={handleSplitSelected}>
+                <Scissors className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Split element (Ctrl+S)</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="text"
+                size="icon"
+                onClick={handleSplitAndKeepLeft}
+              >
+                <ArrowLeftToLine className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="text"
+                size="icon"
+                onClick={handleSplitAndKeepRight}
+              >
+                <ArrowRightToLine className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="text" size="icon" onClick={handleSeparateAudio}>
+                <SplitSquareHorizontal className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="text"
+                size="icon"
+                onClick={handleDuplicateSelected}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="text" size="icon" onClick={handleFreezeSelected}>
+                <Snowflake className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Freeze frame (F)</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="text" size="icon" onClick={handleDeleteSelected}>
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Delete element (Delete)</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div className="flex items-center gap-1">
+        <TooltipProvider delayDuration={500}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="text" size="icon" onClick={toggleSnapping}>
+                {snappingEnabled ? (
+                  <Lock className="h-4 w-4" />
+                ) : (
+                  <LockOpen className="h-4 w-4 text-primary" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Auto snapping</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </div>
+  );
 }
diff --git a/apps/web/src/components/editor/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index 48913410..523a9f54 100644
--- a/apps/web/src/components/editor/timeline-track.tsx
+++ b/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,
diff --git a/apps/web/src/components/editor/timeline/timeline-tracks-area.tsx b/apps/web/src/components/editor/timeline/timeline-tracks-area.tsx
index 48b47df1..e8ca1ec3 100644
--- a/apps/web/src/components/editor/timeline/timeline-tracks-area.tsx
+++ b/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 */}
-      {tracks.map((track, index) => (
-        <Fragment key={track.id}>
-          {/* Left Column (Sticky Track Labels) */}
+      <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) => (
           <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 */}
-          <ContextMenu>
+      <div className="h-full flex flex-col pt-5 ml-24">
+        {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
-        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 style={{ height: `${getTrackHeight("media")}px` }}></div>
       </div>
     </>
   );
diff --git a/apps/web/src/components/editor/timeline/timeline-wheel-handler.tsx b/apps/web/src/components/editor/timeline/timeline-wheel-handler.tsx
index 8036b96c..b7dfaf76 100644
--- a/apps/web/src/components/editor/timeline/timeline-wheel-handler.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-wheel-handler.tsx
@@ -1,32 +1,32 @@
 import { useEffect } from "react";
 
 export interface TimelineWheelHandlerProps {
-	timelineRef: React.RefObject<HTMLDivElement>;
-	isInTimeline: boolean;
-	handleWheel: (e: React.WheelEvent) => void;
+  timelineRef: React.RefObject<HTMLDivElement>;
+  isInTimeline: boolean;
+  handleWheel: (e: React.WheelEvent) => void;
 }
 
 export function useTimelineWheelHandler({
-	timelineRef,
-	isInTimeline,
-	handleWheel,
+  timelineRef,
+  isInTimeline,
+  handleWheel,
 }: TimelineWheelHandlerProps) {
-	useEffect(() => {
-		const timelineContainer = timelineRef.current;
-		if (!timelineContainer || !isInTimeline) return;
+  useEffect(() => {
+    const timelineContainer = timelineRef.current;
+    if (!timelineContainer || !isInTimeline) return;
 
-		const handleWheelCapture = (e: WheelEvent) => {
-			handleWheel(e as any);
-		};
+    const handleWheelCapture = (e: WheelEvent) => {
+      handleWheel(e as any);
+    };
 
-		timelineContainer.addEventListener("wheel", handleWheelCapture, {
-			passive: false,
-		});
+    timelineContainer.addEventListener("wheel", handleWheelCapture, {
+      passive: false,
+    });
 
-		return () => {
-			timelineContainer.removeEventListener("wheel", handleWheelCapture);
-		};
-	}, [handleWheel, isInTimeline, timelineRef]);
+    return () => {
+      timelineContainer.removeEventListener("wheel", handleWheelCapture);
+    };
+  }, [handleWheel, isInTimeline, timelineRef]);
 
-	return null;
+  return null;
 }
diff --git a/apps/web/src/components/editor/timeline/track-icon.tsx b/apps/web/src/components/editor/timeline/track-icon.tsx
index 609c2849..e250a0d8 100644
--- a/apps/web/src/components/editor/timeline/track-icon.tsx
+++ b/apps/web/src/components/editor/timeline/track-icon.tsx
@@ -2,17 +2,17 @@ import { Video, Music, TypeIcon } from "lucide-react";
 import type { TimelineTrack } from "@/types/timeline";
 
 export function TrackIcon({ track }: { track: TimelineTrack }) {
-	return (
-		<>
-			{track.type === "media" && (
-				<Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
-			)}
-			{track.type === "text" && (
-				<TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
-			)}
-			{track.type === "audio" && (
-				<Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
-			)}
-		</>
-	);
+  return (
+    <>
+      {track.type === "media" && (
+        <Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+      )}
+      {track.type === "text" && (
+        <TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+      )}
+      {track.type === "audio" && (
+        <Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+      )}
+    </>
+  );
 }