From 2cc25b70d56c7bd9a9d23b38f1cd64e797139fa1 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Tue, 15 Jul 2025 07:03:36 +0600
Subject: [PATCH] feat: enhance snapping functionality by adding snap point
 handling in Timeline component

---
 apps/web/src/components/editor/timeline.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 2f0e3d91..882af66e 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -55,7 +55,7 @@ import {
 import { SelectionBox } from "./selection-box";
 import { useSelectionBox } from "@/hooks/use-selection-box";
 import { SnapIndicator } from "./snap-indicator";
-import { useTimelineSnapping } from "@/hooks/use-timeline-snapping";
+import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";
 import type { DragData, TimelineTrack } from "@/types/timeline";
 import {
   getTrackHeight,
@@ -172,9 +172,16 @@ export function Timeline() {
   });
 
   // Calculate snap indicator state
-  const [currentSnapPoint, setCurrentSnapPoint] = useState<any>(null);
+  const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(
+    null
+  );
   const showSnapIndicator =
-    dragState.isDragging && snappingEnabled && currentSnapPoint;
+    dragState.isDragging && snappingEnabled && currentSnapPoint !== null;
+
+  // Callback to handle snap point changes from TimelineTrackContent
+  const handleSnapPointChange = useCallback((snapPoint: SnapPoint | null) => {
+    setCurrentSnapPoint(snapPoint);
+  }, []);
 
   // Timeline content click to seek handler
   const handleTimelineContentClick = useCallback(
@@ -1113,6 +1120,7 @@ export function Timeline() {
                             <TimelineTrackContent
                               track={track}
                               zoomLevel={zoomLevel}
+                              onSnapPointChange={handleSnapPointChange}
                             />
                           </div>
                         </ContextMenuTrigger>