feat: add snap point notification to TimelineTrackContent for improved snapping feedback

1 files changed, 16 insertions, 1 deletions

diff --git a/apps/web/src/components/editor/timeline-track.tsx b/apps/web/src/components/editor/timeline-track.tsx
index 0b29c778..aeb6f040 100644
--- a/apps/web/src/components/editor/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline-track.tsx
@@ -22,14 +22,16 @@ import {
   TIMELINE_CONSTANTS,
 } from "@/constants/timeline-constants";
 import { useProjectStore } from "@/stores/project-store";
-import { useTimelineSnapping } from "@/hooks/use-timeline-snapping";
+import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";
 
 export function TimelineTrackContent({
   track,
   zoomLevel,
+  onSnapPointChange,
 }: {
   track: TimelineTrack;
   zoomLevel: number;
+  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
 }) {
   const { mediaItems } = useMediaStore();
   const {
@@ -106,6 +108,7 @@ export function TimelineTrackContent({
 
       // Apply snapping if enabled
       let finalTime = adjustedTime;
+      let snapPoint = null;
       if (snappingEnabled) {
         const snapResult = snapElementPosition(
           adjustedTime,
@@ -115,11 +118,18 @@ export function TimelineTrackContent({
           dragState.elementId || undefined
         );
         finalTime = snapResult.snappedTime;
+        snapPoint = snapResult.snapPoint;
+
+        // Notify parent component about snap point change
+        onSnapPointChange?.(snapPoint);
       } else {
         // Use frame snapping if project has FPS, otherwise use decimal snapping
         const projectStore = useProjectStore.getState();
         const projectFps = projectStore.activeProject?.fps || 30;
         finalTime = snapTimeToFrame(adjustedTime, projectFps);
+
+        // Clear snap point when not snapping
+        onSnapPointChange?.(null);
       }
 
       updateDragTime(finalTime);
@@ -140,6 +150,8 @@ export function TimelineTrackContent({
             dragState.currentTime
           );
           endDragAction();
+          // Clear snap point when drag ends
+          onSnapPointChange?.(null);
         }
         return;
       }
@@ -236,6 +248,8 @@ export function TimelineTrackContent({
 
       if (isTrackThatStartedDrag) {
         endDragAction();
+        // Clear snap point when drag ends
+        onSnapPointChange?.(null);
       }
     };
 
@@ -261,6 +275,7 @@ export function TimelineTrackContent({
     endDragAction,
     selectedElements,
     selectElement,
+    onSnapPointChange,
   ]);
 
   const handleElementMouseDown = (