refactor(web): narrow draft reads for drag grid helpers

packages/web/src/views/Week/components/Draft/context/useDraftDragMotion.ts

@@ -0,0 +1,16 @@
+import { useDraftContext } from "./useDraftContext";
+
+/**
+ * Narrow Week draft reads for mid-drag grid helpers (edge navigation and
+ * smart scroll). Prefer this over `useDraftContext` when actions/setters
+ * and the full local draft are not needed.
+ */
+export const useDraftDragMotion = () => {
+  const { state } = useDraftContext();
+
+  return {
+    hasDraft: state.draft !== null,
+    isDragging: state.isDragging,
+    isTimedDraft: state.draft?.values.schedule.kind === "timed",
+  };
+};

packages/web/src/views/Week/hooks/grid/useDragEdgeNavigation.ts

@@ -1,5 +1,5 @@
 import { type MutableRefObject, useEffect, useRef } from "react";
-import { useDraftContext } from "@web/views/Week/components/Draft/context/useDraftContext";
+import { useDraftDragMotion } from "@web/views/Week/components/Draft/context/useDraftDragMotion";
 import {
   createWeekEdgeNavigationController,
   WEEK_EDGE_NAVIGATION_THRESHOLD_PX,
@@ -15,18 +15,15 @@ export const useDragEdgeNavigation = (
   mainGridRef: MutableRefObject<HTMLElement | null>,
   weekProps: WeekProps,
 ) => {
-  const { state: draftState } = useDraftContext();
-  const isDragging = draftState.isDragging;
-  const currentDraft = draftState.draft;
-  const hasCurrentDraft = Boolean(currentDraft);
+  const { hasDraft, isDragging } = useDraftDragMotion();
   const controllerRef = useRef(createWeekEdgeNavigationController());
-  const currentDraftRef = useRef(currentDraft);
   const frameRef = useRef<number | null>(null);
+  const hasDraftRef = useRef(hasDraft);
   const isDraggingRef = useRef(isDragging);
   const pointerRef = useRef<WeekEdgeNavigationPoint | null>(null);
   const weekUtilRef = useRef(weekProps.util);
 
-  currentDraftRef.current = currentDraft;
+  hasDraftRef.current = hasDraft;
   isDraggingRef.current = isDragging;
   weekUtilRef.current = weekProps.util;
 
@@ -55,7 +52,7 @@ export const useDragEdgeNavigation = (
 
       if (
         !isDraggingRef.current ||
-        !currentDraftRef.current ||
+        !hasDraftRef.current ||
         !mainGridRef.current ||
         !pointerRef.current
       ) {
@@ -89,7 +86,7 @@ export const useDragEdgeNavigation = (
       }
     };
 
-    if (!isDragging || !hasCurrentDraft) {
+    if (!isDragging || !hasDraft) {
       resetDraftEdgeNavigation();
       return;
     }
@@ -106,7 +103,7 @@ export const useDragEdgeNavigation = (
       window.removeEventListener("mousemove", updatePointer);
       resetDraftEdgeNavigation();
     };
-  }, [hasCurrentDraft, isDragging, mainGridRef]);
+  }, [hasDraft, isDragging, mainGridRef]);
 
   useEffect(() => {
     return () => {

packages/web/src/views/Week/hooks/grid/useDragEventSmartScroll.ts

@@ -1,19 +1,19 @@
 import { type MutableRefObject, useEffect, useRef, useState } from "react";
-import { useDraftContext } from "@web/views/Week/components/Draft/context/useDraftContext";
+import { useDraftDragMotion } from "@web/views/Week/components/Draft/context/useDraftDragMotion";
 
 const SCROLL_SPEED = 10;
 const EDGE_THRESHOLD = 50;
 
 export const useDragEventSmartScroll = (
   mainGridRef: MutableRefObject<HTMLElement | null>,
 ) => {
-  const { state } = useDraftContext();
+  const { isDragging, isTimedDraft } = useDraftDragMotion();
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
   const scrollRef = useRef<number | null>(null);
 
   useEffect(() => {
-    if (!state.isDragging) return;
-    if (state.draft?.values.schedule.kind !== "timed") return;
+    if (!isDragging) return;
+    if (!isTimedDraft) return;
 
     const updateMousePosition = (event: MouseEvent) => {
       setMousePosition({ x: event.clientX, y: event.clientY });
@@ -24,16 +24,16 @@ export const useDragEventSmartScroll = (
     return () => {
       window.removeEventListener("mousemove", updateMousePosition);
     };
-  }, [state.draft?.values.schedule.kind, state.isDragging]);
+  }, [isDragging, isTimedDraft]);
 
   useEffect(() => {
     if (!mainGridRef.current) return;
     const container = mainGridRef.current;
 
     const scrollIfNeeded = () => {
-      if (!state.isDragging) return;
+      if (!isDragging) return;
       if (!container) return;
-      if (state.draft?.values.schedule.kind !== "timed") return;
+      if (!isTimedDraft) return;
 
       const containerRect = container.getBoundingClientRect();
       const { top, bottom } = {
@@ -73,10 +73,10 @@ export const useDragEventSmartScroll = (
       }
     };
   }, [
-    state.isDragging,
+    isDragging,
+    isTimedDraft,
     mousePosition.x,
     mousePosition.y,
-    state.draft?.values.schedule.kind,
     mousePosition,
     mainGridRef.current,
   ]);