refactor(web): extract allocation multi-drag helpers

apps/web/src/hooks/timelineAllocationMultiDrag.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import {
+  finalizeAllocationMultiDrag,
+  isAllocationMultiSelected,
+  startAllocationMultiDrag,
+  updateAllocationMultiDrag,
+} from "./timelineAllocationMultiDrag.js";
+
+type TestMultiDragState = {
+  selectedAllocationIds: string[];
+  multiDragDaysDelta: number;
+  isMultiDragging: boolean;
+  multiDragMode: "move" | "resize-start" | "resize-end";
+};
+
+const baseState: TestMultiDragState = {
+  selectedAllocationIds: ["alloc-1", "alloc-2"],
+  multiDragDaysDelta: 3,
+  isMultiDragging: false,
+  multiDragMode: "move",
+};
+
+describe("timelineAllocationMultiDrag", () => {
+  it("requires the allocation to be in a real multi-selection", () => {
+    expect(isAllocationMultiSelected(baseState, "alloc-1")).toBe(true);
+    expect(isAllocationMultiSelected({ ...baseState, selectedAllocationIds: ["alloc-1"] }, "alloc-1")).toBe(false);
+    expect(isAllocationMultiSelected(baseState, "alloc-9")).toBe(false);
+  });
+
+  it("starts multi-dragging by resetting stale delta state and preserving selection ids", () => {
+    expect(startAllocationMultiDrag(baseState, "resize-end")).toEqual({
+      selectedAllocationIds: ["alloc-1", "alloc-2"],
+      multiDragDaysDelta: 0,
+      isMultiDragging: true,
+      multiDragMode: "resize-end",
+    });
+  });
+
+  it("suppresses same-day delta updates to avoid redundant state churn", () => {
+    expect(updateAllocationMultiDrag({ ...baseState, multiDragDaysDelta: 2 }, 2)).toBeNull();
+  });
+
+  it("updates the tracked delta when the drag crosses into a new day bucket", () => {
+    expect(updateAllocationMultiDrag({ ...baseState, multiDragDaysDelta: 1 }, -2)).toEqual({
+      ...baseState,
+      multiDragDaysDelta: -2,
+    });
+  });
+
+  it("finalizes multi-dragging by clearing transient drag state while keeping the selection", () => {
+    expect(finalizeAllocationMultiDrag({ ...baseState, isMultiDragging: true, multiDragMode: "resize-start" })).toEqual({
+      selectedAllocationIds: ["alloc-1", "alloc-2"],
+      multiDragDaysDelta: 0,
+      isMultiDragging: false,
+      multiDragMode: "resize-start",
+    });
+  });
+});

apps/web/src/hooks/timelineAllocationMultiDrag.ts

@@ -0,0 +1,47 @@
+type MultiDragStateLike<TMode extends string = string> = {
+  selectedAllocationIds: string[];
+  multiDragDaysDelta: number;
+  isMultiDragging: boolean;
+  multiDragMode: TMode;
+};
+
+export function isAllocationMultiSelected<TState extends MultiDragStateLike>(
+  state: TState,
+  allocationId: string,
+): boolean {
+  return state.selectedAllocationIds.length > 1 && state.selectedAllocationIds.includes(allocationId);
+}
+
+export function startAllocationMultiDrag<TState extends MultiDragStateLike, TMode extends string>(
+  state: TState,
+  dragMode: TMode,
+): TState {
+  return {
+    ...state,
+    isMultiDragging: true,
+    multiDragDaysDelta: 0,
+    multiDragMode: dragMode,
+  };
+}
+
+export function updateAllocationMultiDrag<TState extends MultiDragStateLike>(
+  state: TState,
+  nextDaysDelta: number,
+): TState | null {
+  if (nextDaysDelta === state.multiDragDaysDelta) {
+    return null;
+  }
+
+  return {
+    ...state,
+    multiDragDaysDelta: nextDaysDelta,
+  };
+}
+
+export function finalizeAllocationMultiDrag<TState extends MultiDragStateLike>(state: TState): TState {
+  return {
+    ...state,
+    isMultiDragging: false,
+    multiDragDaysDelta: 0,
+  };
+}

apps/web/src/hooks/useTimelineDrag.ts

@@ -17,6 +17,12 @@ import {
   requiresAllocationFragmentExtraction,
   shouldTreatAllocationDragAsClick,
 } from "./timelineAllocationFinalize.js";
+import {
+  finalizeAllocationMultiDrag,
+  isAllocationMultiSelected,
+  startAllocationMultiDrag,
+  updateAllocationMultiDrag,
+} from "./timelineAllocationMultiDrag.js";
 import {
   createMultiSelectState,
   finalizeMultiSelectDraft,
@@ -648,28 +654,26 @@ export function useTimelineDrag({
 
       // Check if this allocation is part of a multi-selection → multi-drag mode
       const ms = multiSelectRef.current;
-      const isMultiSelected =
-        ms.selectedAllocationIds.length > 1 &&
-        ms.selectedAllocationIds.includes(opts.allocationId);
+      const isMultiSelected = isAllocationMultiSelected(ms, opts.allocationId);
 
       if (isMultiSelected) {
         // ── Multi-drag: move/resize all selected allocations together ──
         const startMouseX = e.clientX;
-        let currentDaysDelta = 0;
         const dragMode = opts.mode;
+        const initialMultiDragState = startAllocationMultiDrag(ms, dragMode);
 
-        setMultiSelectState((prev) => ({ ...prev, isMultiDragging: true, multiDragDaysDelta: 0, multiDragMode: dragMode }));
-        multiSelectRef.current = { ...ms, isMultiDragging: true, multiDragDaysDelta: 0, multiDragMode: dragMode };
+        setMultiSelectState(initialMultiDragState);
+        multiSelectRef.current = initialMultiDragState;
         multiSelectCleanupRef.current?.();
 
         function handleMultiMove(ev: MouseEvent) {
           const deltaX = ev.clientX - startMouseX;
           const daysDelta = pixelsToDays(deltaX, cellWidthRef.current);
-          if (daysDelta === currentDaysDelta) return;
-          currentDaysDelta = daysDelta;
+          const updated = updateAllocationMultiDrag(multiSelectRef.current, daysDelta);
+          if (!updated) return;
 
-          setMultiSelectState((prev) => ({ ...prev, multiDragDaysDelta: daysDelta }));
-          multiSelectRef.current = { ...multiSelectRef.current, multiDragDaysDelta: daysDelta };
+          setMultiSelectState(updated);
+          multiSelectRef.current = updated;
         }
 
         function handleMultiUp(ev: MouseEvent) {
@@ -677,13 +681,14 @@ export function useTimelineDrag({
           multiSelectCleanupRef.current = null;
 
           const finalDelta = pixelsToDays(ev.clientX - startMouseX, cellWidthRef.current);
+          const finalized = finalizeAllocationMultiDrag(multiSelectRef.current);
 
-          setMultiSelectState((prev) => ({ ...prev, isMultiDragging: false, multiDragDaysDelta: 0 }));
-          multiSelectRef.current = { ...multiSelectRef.current, isMultiDragging: false, multiDragDaysDelta: 0 };
+          setMultiSelectState(finalized);
+          multiSelectRef.current = finalized;
 
           if (finalDelta !== 0) {
             // Pass IDs from ref to avoid stale closure in the callback
-            const ids = multiSelectRef.current.selectedAllocationIds;
+            const ids = finalized.selectedAllocationIds;
             onMultiDragCompleteRef.current?.(finalDelta, dragMode, ids);
           }
         }