refactor all timeline components

1 files changed, 94 insertions, 101 deletions

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 };
 }