feat(boards): ease dragging a card toward an off-screen spot

Scroll the column while a card is held near its edge and show a light gap where the card will land.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/lib/pipeline-board.ts

@@ -431,6 +431,43 @@ export function pointerDropIndex(index: number, event: DragEvent): number {
   return index + (event.clientY >= rect.top + rect.height / 2 ? 1 : 0);
 }
 
+const DRAG_SCROLL_EDGE = 72;
+const DRAG_SCROLL_MAX = 16;
+let dragScrollEl: HTMLElement | null = null;
+let dragScrollY = 0;
+let dragScrollRaf = 0;
+
+function dragScrollTick() {
+  dragScrollRaf = 0;
+  const el = dragScrollEl;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  let delta = 0;
+  if (dragScrollY < rect.top + DRAG_SCROLL_EDGE) {
+    const closeness = (rect.top + DRAG_SCROLL_EDGE - dragScrollY) / DRAG_SCROLL_EDGE;
+    delta = -Math.ceil(DRAG_SCROLL_MAX * Math.min(1, Math.max(0, closeness)));
+  } else if (dragScrollY > rect.bottom - DRAG_SCROLL_EDGE) {
+    const closeness = (dragScrollY - (rect.bottom - DRAG_SCROLL_EDGE)) / DRAG_SCROLL_EDGE;
+    delta = Math.ceil(DRAG_SCROLL_MAX * Math.min(1, Math.max(0, closeness)));
+  }
+  if (!delta || el.scrollHeight <= el.clientHeight) return;
+  el.scrollTop += delta;
+  dragScrollRaf = requestAnimationFrame(dragScrollTick);
+}
+
+/** نزدیک لبهٔ بالا یا پایین ستون، فهرست خودش حرکت می‌کند تا مقصد دیده شود. */
+export function dragScrollColumn(el: HTMLElement | null, clientY: number) {
+  dragScrollEl = el;
+  dragScrollY = clientY;
+  if (!dragScrollRaf) dragScrollRaf = requestAnimationFrame(dragScrollTick);
+}
+
+export function stopDragScroll() {
+  dragScrollEl = null;
+  if (dragScrollRaf) cancelAnimationFrame(dragScrollRaf);
+  dragScrollRaf = 0;
+}
+
 export function moveStageToIndex(
   stages: PipelineStage[],
   stageId: string,