feat: starts to refactor timeline

apps/web/src/components/editor/snap-indicator.tsx

@@ -40,7 +40,7 @@ export function SnapIndicator({
 
   return (
     <div
-      className="absolute pointer-events-none z-[90]"
+      className="absolute pointer-events-none z-[90] ml-48"
       style={{
         left: `${leftPosition}px`,
         top: 0,

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

@@ -66,7 +66,7 @@ export function TimelinePlayhead({
   return (
     <div
       ref={playheadRef}
-      className="absolute pointer-events-auto z-[100]"
+      className="absolute pointer-events-auto z-[100]  ml-48"
       style={{
         left: `${leftPosition}px`,
         top: 0,

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

@@ -108,18 +108,15 @@ export function Timeline() {
     timelineRef.current?.clientWidth || 1000 // Minimum width
   );
 
-  // Scroll synchronization and auto-scroll to playhead
+  // Essential refs for timeline functionality
+  const playheadRef = useRef<HTMLDivElement>(null);
+  const tracksContainerRef = useRef<HTMLDivElement>(null);
+
+  // Temporary refs for compatibility (should be removed when TimelinePlayhead is updated)
   const rulerScrollRef = useRef<HTMLDivElement>(null);
   const tracksScrollRef = useRef<HTMLDivElement>(null);
-  const trackLabelsRef = useRef<HTMLDivElement>(null);
-  const playheadRef = useRef<HTMLDivElement>(null);
-  const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
-  const isUpdatingRef = useRef(false);
-  const lastRulerSync = useRef(0);
-  const lastTracksSync = useRef(0);
-  const lastVerticalSync = useRef(0);
 
-  // Timeline playhead ruler handlers
+  // Timeline playhead ruler handlers - temporarily keeping all refs for compatibility
   const { handleRulerMouseDown } = useTimelinePlayheadRuler({
     currentTime,
     duration,
@@ -132,7 +129,6 @@ export function Timeline() {
   });
 
   // Selection box functionality
-  const tracksContainerRef = useRef<HTMLDivElement>(null);
   const {
     selectionBox,
     handleMouseDown: handleSelectionMouseDown,
@@ -159,7 +155,7 @@ export function Timeline() {
     setCurrentSnapPoint(snapPoint);
   }, []);
 
-  // Timeline content click to seek handler
+  // Timeline content click to seek handler - simplified for single scroll area
   const handleTimelineContentClick = useCallback(
     (e: React.MouseEvent) => {
       console.log(
@@ -244,11 +240,10 @@ export function Timeline() {
       duration,
       zoomLevel,
       seek,
-      rulerScrollRef,
-      tracksScrollRef,
       clearSelectedElements,
       isSelecting,
       justFinishedSelecting,
+      activeProject?.fps,
     ]
   );
 
@@ -504,84 +499,23 @@ export function Timeline() {
     clearSelectedElements();
   };
 
-  // --- Scroll synchronization effect ---
+  // Add wheel event listeners with passive: false to allow preventDefault
   useEffect(() => {
-    const rulerViewport = rulerScrollRef.current?.querySelector(
+    const timelineContainer = timelineRef.current;
-      "[data-radix-scroll-area-viewport]"
+    if (!timelineContainer || !isInTimeline) return;
-    ) as HTMLElement;
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
 
-    if (!rulerViewport || !tracksViewport) return;
+    const handleWheelCapture = (e: WheelEvent) => {
-
+      // Call the existing handleWheel function
-    // Horizontal scroll synchronization between ruler and tracks
+      handleWheel(e as any);
-    const handleRulerScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;
-      lastRulerSync.current = now;
-      isUpdatingRef.current = true;
-      tracksViewport.scrollLeft = rulerViewport.scrollLeft;
-      isUpdatingRef.current = false;
-    };
-    const handleTracksScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;
-      lastTracksSync.current = now;
-      isUpdatingRef.current = true;
-      rulerViewport.scrollLeft = tracksViewport.scrollLeft;
-      isUpdatingRef.current = false;
     };
 
-    rulerViewport.addEventListener("scroll", handleRulerScroll);
+    // Add wheel event listener with passive: false to allow preventDefault
-    tracksViewport.addEventListener("scroll", handleTracksScroll);
+    timelineContainer.addEventListener("wheel", handleWheelCapture, { passive: false });
-
-    // Vertical scroll synchronization between track labels and tracks content
-    if (trackLabelsViewport) {
-      const handleTrackLabelsScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
-        isUpdatingRef.current = false;
-      };
-      const handleTracksVerticalScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        trackLabelsViewport.scrollTop = tracksViewport.scrollTop;
-        isUpdatingRef.current = false;
-      };
-
-      trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);
-      tracksViewport.addEventListener("scroll", handleTracksVerticalScroll);
 
     return () => {
-        rulerViewport.removeEventListener("scroll", handleRulerScroll);
+      timelineContainer.removeEventListener("wheel", handleWheelCapture);
-        tracksViewport.removeEventListener("scroll", handleTracksScroll);
-        trackLabelsViewport.removeEventListener(
-          "scroll",
-          handleTrackLabelsScroll
-        );
-        tracksViewport.removeEventListener(
-          "scroll",
-          handleTracksVerticalScroll
-        );
     };
-    }
+  }, [handleWheel, isInTimeline]);
-
-    return () => {
-      rulerViewport.removeEventListener("scroll", handleRulerScroll);
-      tracksViewport.removeEventListener("scroll", handleTracksScroll);
-    };
-  }, []);
 
   return (
     <div
@@ -591,10 +525,9 @@ export function Timeline() {
       onMouseLeave={() => setIsInTimeline(false)}
     >
       {/* Toolbar */}
-      <div className="border-b flex items-center justify-between px-2 py-1">
+      <div className="border-b flex items-center justify-between px-2 py-1 bg-background z-90">
         <div className="flex items-center gap-1 w-full">
           <TooltipProvider delayDuration={500}>
-            {/* Play/Pause Button */}
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -615,14 +548,12 @@ export function Timeline() {
               </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" />
@@ -760,10 +691,23 @@ export function Timeline() {
       </div>
 
       {/* Timeline Container */}
+
+      <ScrollArea className=" w-full h-full" style={{ minWidth: `${dynamicTimelineWidth}px` }}>
+
+          {/* Timeline Tracks Content */}
           <div
-        className="flex-1 flex flex-col overflow-hidden relative"
             ref={timelineRef}
+            className="relative w-full overflow-x-auto h-full min-h-72"
+            onMouseDown={handleSelectionMouseDown}
+            onClick={handleTimelineContentClick}
           >
+            <SelectionBox
+              startPos={selectionBox?.startPos || null}
+              currentPos={selectionBox?.currentPos || null}
+              containerRef={tracksContainerRef}
+              isActive={selectionBox?.isActive || false}
+            />
+
               <TimelinePlayhead
                 currentTime={currentTime}
                 duration={duration}
@@ -773,7 +717,6 @@ export function Timeline() {
                 rulerRef={rulerRef}
                 rulerScrollRef={rulerScrollRef}
                 tracksScrollRef={tracksScrollRef}
-          trackLabelsRef={trackLabelsRef}
                 timelineRef={timelineRef}
                 playheadRef={playheadRef}
                 isSnappingToPlayhead={
@@ -785,37 +728,21 @@ export function Timeline() {
                 zoomLevel={zoomLevel}
                 tracks={tracks}
                 timelineRef={timelineRef}
-          trackLabelsRef={trackLabelsRef}
                 isVisible={showSnapIndicator}
               />
-        {/* Timeline Header with Ruler */}
+              <div ref={tracksContainerRef} className="relative w-full h-full min-h-64">
-        <div className="flex bg-panel sticky top-0 z-10">
-          {/* Track Labels Header */}
-          <div className="w-48 flex-shrink-0 bg-muted/30 border-r flex items-center justify-between px-3 py-2">
-            {/* Empty space */}
-            <span className="text-sm font-medium text-muted-foreground opacity-0">
-              .
-            </span>
-          </div>
-
-          {/* Timeline Ruler */}
                 <div
-            className="flex-1 relative overflow-hidden h-4"
+                  className="sticky top-0 h-5 w-full ml-48  z-[99] bg-card/[0.99] border-b border-muted/30"
-            onWheel={handleWheel}
                   onMouseDown={handleSelectionMouseDown}
                   onClick={handleTimelineContentClick}
                   data-ruler-area
                 >
-            <ScrollArea className="w-full" ref={rulerScrollRef}>
+
                   <div
                     ref={rulerRef}
-                className="relative h-4 select-none cursor-default"
+                    className="relative h-5 select-none cursor-default pb-1"
-                style={{
-                  width: `${dynamicTimelineWidth}px`,
-                }}
                     onMouseDown={handleRulerMouseDown}
                   >
-                {/* Time markers */}
                     {(() => {
                       // Calculate appropriate time interval based on zoom level
                       const getTimeInterval = (zoom: number) => {
@@ -843,8 +770,7 @@ export function Timeline() {
                         return (
                           <div
                             key={i}
-                        className={`absolute top-0 bottom-0 ${
+                            className={`absolute top-0 bottom-0 ${isMainMarker
-                          isMainMarker
                               ? "border-l border-muted-foreground/40"
                               : "border-l border-muted-foreground/20"
                               }`}
@@ -853,8 +779,7 @@ export function Timeline() {
                             }}
                           >
                             <span
-                          className={`absolute top-1 left-1 text-[0.6rem] ${
+                              className={`absolute top-1 left-1 text-[0.6rem] ${isMainMarker
-                            isMainMarker
                                 ? "text-muted-foreground font-medium"
                                 : "text-muted-foreground/70"
                                 }`}
@@ -883,77 +808,27 @@ export function Timeline() {
                       }).filter(Boolean);
                     })()}
                   </div>
-            </ScrollArea>
-          </div>
                 </div>
+                {tracks.map((track, index) => (
+                  <div key={track.id} className="relative flex flex-row w-full">
 
-        {/* Tracks Area */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Track Labels */}
-          {tracks.length > 0 && (
                     <div
-              ref={trackLabelsRef}
+                      className="sticky left-0 flex w-48 items-center border-b border-muted/30 group bg-card/[0.99] z-[101]"
-              className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto"
-              data-track-labels
-            >
-              <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
-                <div className="flex flex-col gap-1">
-                  {tracks.map((track) => (
-                    <div
-                      key={track.id}
-                      className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5"
                       style={{ height: `${getTrackHeight(track.type)}px` }}
                     >
-                      <div className="flex items-center flex-1 min-w-0">
+                      <div className="flex items-center gap-2 px-2">
                         <TrackIcon track={track} />
                       </div>
                       {track.muted && (
-                        <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
+                        <span className=" text-xs text-red-500 font-semibold">
                           Muted
                         </span>
                       )}
                     </div>
-                  ))}
+                    <ContextMenu>
-                </div>
-              </ScrollArea>
-            </div>
-          )}
-
-          {/* Timeline Tracks Content */}
-          <div
-            className="flex-1 relative overflow-hidden"
-            onWheel={handleWheel}
-            onMouseDown={handleSelectionMouseDown}
-            onClick={handleTimelineContentClick}
-            ref={tracksContainerRef}
-          >
-            <SelectionBox
-              startPos={selectionBox?.startPos || null}
-              currentPos={selectionBox?.currentPos || null}
-              containerRef={tracksContainerRef}
-              isActive={selectionBox?.isActive || false}
-            />
-            <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
-              <div
-                className="relative flex-1"
-                style={{
-                  height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`,
-                  width: `${dynamicTimelineWidth}px`,
-                }}
-              >
-                {tracks.length === 0 ? (
-                  <div></div>
-                ) : (
-                  <>
-                    {tracks.map((track, index) => (
-                      <ContextMenu key={track.id}>
                       <ContextMenuTrigger asChild>
                         <div
-                            className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"
+                          className="absolute left-0 right-0 h-full border-b border-muted/30 ml-48"
-                            style={{
-                              top: `${getCumulativeHeightBefore(tracks, index)}px`,
-                              height: `${getTrackHeight(track.type)}px`,
-                            }}
                           onClick={(e) => {
                             // If clicking empty area (not on a element), deselect all elements
                             if (
@@ -983,15 +858,13 @@ export function Timeline() {
                         </ContextMenuItem>
                       </ContextMenuContent>
                     </ContextMenu>
+                  </div>
                 ))}
-                  </>
+
-                )}
+              </div>
           </div>
         </ScrollArea>
       </div>
-        </div>
-      </div>
-    </div>
   );
 }