From 33f453efc766b7d92f13560f994b6ba681dc5650 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 24 Jan 2026 06:42:39 +0100
Subject: [PATCH] fix timeline zoom + selection box issues

---
 .cursor/rules/codebase-index.mdc                       |  1 -
 apps/web/src/components/editor/timeline/index.tsx      |  5 +----
 .../src/components/editor/timeline/timeline-track.tsx  |  5 +++++
 apps/web/src/hooks/timeline/use-timeline-zoom.ts       | 10 ++++------
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/.cursor/rules/codebase-index.mdc b/.cursor/rules/codebase-index.mdc
index 6ff365a9..ecb93e2d 100644
--- a/.cursor/rules/codebase-index.mdc
+++ b/.cursor/rules/codebase-index.mdc
@@ -281,7 +281,6 @@ use-timeline-snapping.ts
 use-timeline-zoom.ts
   export function useTimelineZoom({
   	containerRef,
-  	isInTimeline = false,
   	minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
   }: UseTimelineZoomProps): UseTimelineZoomReturn
 
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 4ffbbbf3..fa2c891e 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -71,7 +71,6 @@ export function Timeline() {
 	const bookmarksScrollRef = useRef<HTMLDivElement>(null);
 
 	// state
-	const [isInTimeline, setIsInTimeline] = useState(false);
 	const [isResizing, setIsResizing] = useState(false);
 	const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(
 		null,
@@ -98,7 +97,6 @@ export function Timeline() {
 
 	const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({
 		containerRef: timelineRef,
-		isInTimeline,
 		minZoom: minZoomLevel,
 	});
 
@@ -187,8 +185,6 @@ export function Timeline() {
 			}
 			{...dragProps}
 			aria-label="Timeline"
-			onMouseEnter={() => setIsInTimeline(true)}
-			onMouseLeave={() => setIsInTimeline(false)}
 		>
 			<TimelineToolbar
 				zoomLevel={zoomLevel}
@@ -400,6 +396,7 @@ export function Timeline() {
 														onResizeStateChange={handleResizeStateChange}
 														onElementMouseDown={handleElementMouseDown}
 														onElementClick={handleElementClick}
+														onTrackMouseDown={handleSelectionMouseDown}
 													/>
 												</div>
 											</ContextMenuTrigger>
diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index d1f195a6..6a8df068 100644
--- a/apps/web/src/components/editor/timeline/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-track.tsx
@@ -30,6 +30,7 @@ interface TimelineTrackContentProps {
 		element: TimelineElementType;
 		track: TimelineTrack;
 	}) => void;
+	onTrackMouseDown?: (event: React.MouseEvent) => void;
 }
 
 export function TimelineTrackContent({
@@ -43,6 +44,7 @@ export function TimelineTrackContent({
 	onResizeStateChange,
 	onElementMouseDown,
 	onElementClick,
+	onTrackMouseDown,
 }: TimelineTrackContentProps) {
 	const editor = useEditor();
 	const { isElementSelected, clearElementSelection } = useElementSelection();
@@ -65,6 +67,9 @@ export function TimelineTrackContent({
 		<button
 			className={cn("size-full", hasSelectedElements && "bg-panel-accent/35")}
 			onClick={clearElementSelection}
+			onMouseDown={(event) => {
+				onTrackMouseDown?.(event);
+			}}
 			type="button"
 		>
 			<div className="relative h-full min-w-full">
diff --git a/apps/web/src/hooks/timeline/use-timeline-zoom.ts b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
index 3684c0b4..0763c09d 100644
--- a/apps/web/src/hooks/timeline/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
@@ -9,7 +9,6 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 interface UseTimelineZoomProps {
 	containerRef: RefObject<HTMLDivElement>;
-	isInTimeline?: boolean;
 	minZoom?: number;
 }
 
@@ -21,7 +20,6 @@ interface UseTimelineZoomReturn {
 
 export function useTimelineZoom({
 	containerRef,
-	isInTimeline = false,
 	minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
 }: UseTimelineZoomProps): UseTimelineZoomReturn {
 	const [zoomLevel, setZoomLevel] = useState(1);
@@ -65,9 +63,9 @@ export function useTimelineZoom({
 			const isInContainer = containerRef.current?.contains(
 				event.target as Node,
 			);
-			const shouldPrevent =
-				isInTimeline && isZoomKeyPressed && Boolean(isInContainer);
-			if (shouldPrevent) {
+			// only check isInContainer, not isInTimeline state - the state check
+			// causes race conditions where the closure captures stale state
+			if (isZoomKeyPressed && isInContainer) {
 				event.preventDefault();
 			}
 		};
@@ -80,7 +78,7 @@ export function useTimelineZoom({
 		return () => {
 			document.removeEventListener("wheel", preventZoom, { capture: true });
 		};
-	}, [isInTimeline, containerRef]);
+	}, [containerRef]);
 
 	return {
 		zoomLevel,