refactor(web): extract multi-select session

apps/web/src/hooks/useTimelineDrag.ts

@@ -28,6 +28,7 @@ import {
   createMultiSelectState,
   updateMultiSelectDraft,
 } from "./timelineMultiSelect.js";
+import { beginCanvasMultiSelectSession } from "./timelineMultiSelectSession.js";
 import { reconcileOptimisticEntries } from "./timelineOptimisticAllocations.js";
 import { createRangeSelectionState, finalizeRangeSelection, updateRangeSelectionDraft } from "./timelineRangeSelection.js";
 import {
@@ -878,40 +879,27 @@ export function useTimelineDrag({
     if (e.button !== 2) return;
     e.preventDefault();
 
-    const initial = createMultiSelectState<MultiSelectState>(e.clientX, e.clientY, {
-      selectedAllocationIds: [],
-      selectedResourceIds: [],
-      dateRange: null,
-      multiDragDaysDelta: 0,
-      isMultiDragging: false,
-      multiDragMode: "move",
+    beginCanvasMultiSelectSession({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      documentTarget: document,
+      cleanupRef: multiSelectCleanupRef,
+      stateRef: multiSelectRef,
+      setState: setMultiSelectState,
+      createInitialState: (clientX, clientY) =>
+        createMultiSelectState<MultiSelectState>(clientX, clientY, {
+          selectedAllocationIds: [],
+          selectedResourceIds: [],
+          dateRange: null,
+          multiDragDaysDelta: 0,
+          isMultiDragging: false,
+          multiDragMode: "move",
+        }),
+      updateState: updateMultiSelectDraft,
+      completeState: completeMultiSelectDraft,
+      initialState: INITIAL_MULTI_SELECT,
+      attachDrag: attachDocumentMouseDrag,
     });
-    multiSelectRef.current = initial;
-    setMultiSelectState(initial);
-    multiSelectCleanupRef.current?.();
-
-    function handleMove(ev: MouseEvent) {
-      const ms = multiSelectRef.current;
-      if (!ms.isSelecting) return;
-
-      const updated = updateMultiSelectDraft(ms, ev.clientX, ev.clientY);
-      multiSelectRef.current = updated;
-      setMultiSelectState(updated);
-    }
-
-    function handleUp(ev: MouseEvent) {
-      multiSelectCleanupRef.current?.();
-      multiSelectCleanupRef.current = null;
-
-      const ms = multiSelectRef.current;
-      if (!ms.isSelecting) return;
-
-      const result = completeMultiSelectDraft(ms, ev.clientX, ev.clientY, INITIAL_MULTI_SELECT);
-      multiSelectRef.current = result.nextState;
-      setMultiSelectState(result.nextState);
-    }
-
-    multiSelectCleanupRef.current = attachDocumentMouseDrag(document, handleMove, handleUp);
   }, []);
 
   const clearMultiSelect = useCallback(() => {