refactor(web): extract preview target setup

apps/web/src/hooks/useTimelineDrag.ts

@@ -5,7 +5,6 @@ import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "./useInvalidatePlanningViews.js";
 import { pixelsToDays } from "~/components/timeline/dragMath.js";
 import {
-  captureLivePreviewTargets,
   clearLivePreview,
   preserveLivePreview,
   scheduleLivePreview,
@@ -39,6 +38,7 @@ import {
 } from "./timelineMultiSelect.js";
 import { beginCanvasMultiSelectSession } from "./timelineMultiSelectSession.js";
 import { reconcileOptimisticEntries } from "./timelineOptimisticAllocations.js";
+import { createAllocationPreviewSession, createProjectPreviewSession } from "./timelinePreviewSession.js";
 import { resolveRangeSelectionCancel, resolveRangeSelectionRelease } from "./timelineRangeRelease.js";
 import { createRangeSelectionState, updateRangeSelectionDraft } from "./timelineRangeSelection.js";
 import { type TouchCanvasPointerEvent, type TouchMouseDownEvent } from "./timelineTouchAdapters.js";
@@ -283,50 +283,20 @@ export function useTimelineDrag({
 
   const setProjectPreviewTargets = useCallback((projectId: string, currentTarget?: EventTarget | null) => {
     clearLivePreview(projectPreviewRef.current);
-
-    const projectTargets = captureLivePreviewTargets(
-      document.querySelectorAll<HTMLElement>(
-        `[data-timeline-drag-preview~="project-shift"][data-timeline-project-id="${projectId}"]`,
-      ),
-    );
-
-    if (projectTargets.length === 0 && currentTarget instanceof HTMLElement) {
-      projectTargets.push(...captureLivePreviewTargets([currentTarget]));
-    }
-
-    projectPreviewRef.current =
-      projectTargets.length > 0
-        ? {
-            mode: "move",
-            cellWidth: cellWidthRef.current,
-            targets: projectTargets,
-            pointerDeltaX: 0,
-            daysDelta: 0,
-            frame: null,
-          }
-        : null;
+    projectPreviewRef.current = createProjectPreviewSession({
+      projectId,
+      currentTarget,
+      cellWidth: cellWidthRef.current,
+    });
   }, []);
 
   const setAllocationPreviewTarget = useCallback((currentTarget?: EventTarget | null, mode: AllocDragMode = "move") => {
     clearLivePreview(allocPreviewRef.current);
-
-    const root =
-      currentTarget instanceof HTMLElement
-        ? currentTarget.closest<HTMLElement>('[data-timeline-drag-preview~="allocation"]')
-        : null;
-    const targets = root ? captureLivePreviewTargets([root]) : [];
-
-    allocPreviewRef.current =
-      targets.length > 0
-        ? {
-            mode,
-            cellWidth: cellWidthRef.current,
-            targets,
-            pointerDeltaX: 0,
-            daysDelta: 0,
-            frame: null,
-          }
-        : null;
+    allocPreviewRef.current = createAllocationPreviewSession({
+      currentTarget,
+      mode,
+      cellWidth: cellWidthRef.current,
+    });
   }, []);
 
   const updateLivePreview = useCallback(