feat: make cross-column dragged card sortable

apps/web/src/components/kanban-board/board-collision-detection.test.ts

@@ -0,0 +1,93 @@
+import type { ClientRect, DroppableContainer } from "@dnd-kit/core";
+import { describe, expect, it } from "vite-plus/test";
+import { boardCollisionDetection } from "./board-collision-detection";
+
+function rect(left: number, top: number, width: number, height: number) {
+  return {
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+  } as ClientRect;
+}
+
+const rects = new Map([
+  ["empty", rect(0, 100, 300, 700)],
+  ["doing", rect(320, 100, 300, 700)],
+  ["c", rect(330, 110, 280, 80)],
+  ["d", rect(330, 200, 280, 80)],
+  ["scrolled", rect(330, 10, 280, 80)],
+]);
+
+const columnData = {
+  empty: { type: "column", column: { id: "empty", tasks: [] } },
+  doing: {
+    type: "column",
+    column: {
+      id: "doing",
+      tasks: [{ id: "scrolled" }, { id: "c" }, { id: "d" }],
+    },
+  },
+} as Record<string, unknown>;
+
+function detect(pointer: { x: number; y: number } | null) {
+  const droppableContainers = [...rects.keys()].map(
+    (id) =>
+      ({
+        id,
+        disabled: false,
+        data: { current: columnData[id] },
+      }) as unknown as DroppableContainer,
+  );
+  return boardCollisionDetection({
+    active: { id: "card" } as never,
+    collisionRect: rect(100, 120, 300, 80),
+    droppableRects: rects,
+    droppableContainers,
+    pointerCoordinates: pointer,
+  }).map((collision) => collision.id);
+}
+
+describe("boardCollisionDetection", () => {
+  it("targets the empty column under the pointer over a closer card", () => {
+    expect(detect({ x: 150, y: 160 })).toEqual(["empty"]);
+  });
+
+  it("targets the card under the pointer", () => {
+    expect(detect({ x: 400, y: 150 })).toEqual(["c"]);
+  });
+
+  it("targets the last card below a column's cards", () => {
+    expect(detect({ x: 400, y: 600 })).toEqual(["d"]);
+  });
+
+  it("targets the nearest card in the gap between cards", () => {
+    expect(detect({ x: 400, y: 194 })).toEqual(["c"]);
+    expect(detect({ x: 400, y: 197 })).toEqual(["d"]);
+  });
+
+  it("targets the first card when the pointer is over a column header", () => {
+    expect(detect({ x: 400, y: 104 })).toEqual(["c"]);
+  });
+
+  it("snaps to the nearer column across the gap between columns", () => {
+    expect(detect({ x: 305, y: 160 })).toEqual(["empty"]);
+    expect(detect({ x: 315, y: 160 })).toEqual(["c"]);
+  });
+
+  it("ignores cards scrolled out of their column", () => {
+    expect(detect({ x: 400, y: 50 })).toEqual([]);
+    expect(detect({ x: 400, y: 101 })).toEqual(["c"]);
+  });
+
+  it("finds nothing outside every column", () => {
+    expect(detect({ x: 700, y: 160 })).toEqual([]);
+    expect(detect({ x: 400, y: 900 })).toEqual([]);
+  });
+
+  it("falls back to corner distance without a pointer", () => {
+    expect(detect(null)[0]).toBe("c");
+  });
+});

apps/web/src/components/kanban-board/board-collision-detection.ts

@@ -0,0 +1,57 @@
+import {
+  type CollisionDetection,
+  closestCorners,
+  type DroppableContainer,
+} from "@dnd-kit/core";
+import type { ProjectWithTasks } from "@/types/project";
+
+const COLUMN_GAP = 16;
+
+type ColumnData = {
+  type?: string;
+  column?: ProjectWithTasks["columns"][number];
+};
+
+export const boardCollisionDetection: CollisionDetection = (args) => {
+  const {
+    pointerCoordinates: pointer,
+    droppableContainers,
+    droppableRects,
+  } = args;
+  if (!pointer) return closestCorners(args);
+
+  let column: DroppableContainer | undefined;
+  let columnDistance = COLUMN_GAP;
+  for (const container of droppableContainers) {
+    if ((container.data.current as ColumnData | undefined)?.type !== "column")
+      continue;
+    const rect = droppableRects.get(container.id);
+    if (!rect || pointer.y < rect.top || pointer.y > rect.bottom) continue;
+    const distance = Math.max(rect.left - pointer.x, pointer.x - rect.right, 0);
+    if (distance < columnDistance) {
+      column = container;
+      columnDistance = distance;
+    }
+  }
+  const columnRect = column && droppableRects.get(column.id);
+  if (!column || !columnRect) return [];
+
+  let closest: { id: string | number } = { id: column.id };
+  let closestDistance = Number.POSITIVE_INFINITY;
+  const tasks =
+    (column.data.current as ColumnData | undefined)?.column?.tasks ?? [];
+  for (const task of tasks) {
+    const rect = droppableRects.get(task.id);
+    if (!rect || rect.bottom < columnRect.top || rect.top > columnRect.bottom)
+      continue;
+    const distance =
+      pointer.y >= rect.top && pointer.y <= rect.bottom
+        ? 0
+        : Math.abs(rect.top + rect.height / 2 - pointer.y);
+    if (distance < closestDistance) {
+      closest = { id: task.id };
+      closestDistance = distance;
+    }
+  }
+  return [closest];
+};

apps/web/src/components/kanban-board/column/column-dropzone.tsx

@@ -1,70 +1,54 @@
-import { useDroppable } from "@dnd-kit/core";
 import {
   SortableContext,
+  type SortingStrategy,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { useEffect } from "react";
 import type { ProjectWithTasks } from "@/types/project";
 import TaskCard from "../task-card";
 
+const keepOrder: SortingStrategy = () => null;
+
 type ColumnDropzoneProps = {
   column: ProjectWithTasks["columns"][number];
+  activeTaskId: string | null;
   disableDragDrop?: boolean;
-  onIsOverChange?: (isOver: boolean) => void;
+  disableSorting?: boolean;
 };
 
 export function ColumnDropzone({
   column,
+  activeTaskId,
   disableDragDrop = false,
-  onIsOverChange,
+  disableSorting = false,
 }: ColumnDropzoneProps) {
-  const { setNodeRef, isOver } = useDroppable({
-    id: column.id,
-    data: {
-      type: "column",
-      column,
-    },
-  });
-
-  useEffect(() => {
-    onIsOverChange?.(isOver);
-  }, [isOver, onIsOverChange]);
-
   const reduceMotion = useReducedMotion();
+  const hidden = reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98 };
 
   return (
-    <div ref={setNodeRef} className="flex-1 min-h-0">
-      <SortableContext
-        items={column.tasks}
-        strategy={verticalListSortingStrategy}
-      >
-        <div className="flex flex-col gap-2">
-          <AnimatePresence initial={false} mode="popLayout">
-            {column.tasks.map((task) => (
-              <motion.div
-                key={task.id}
-                initial={
-                  reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98 }
-                }
-                animate={
-                  reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
-                }
-                exit={
-                  reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98 }
-                }
-                transition={{ type: "spring", duration: 0.35, bounce: 0.15 }}
-              >
-                <TaskCard
-                  task={task}
-                  disableDragDrop={disableDragDrop}
-                  isFinalColumn={column.isFinal}
-                />
-              </motion.div>
-            ))}
-          </AnimatePresence>
-        </div>
-      </SortableContext>
-    </div>
+    <SortableContext
+      items={column.tasks}
+      strategy={disableSorting ? keepOrder : verticalListSortingStrategy}
+    >
+      <div className="flex flex-col gap-2">
+        <AnimatePresence initial={false} mode="popLayout">
+          {column.tasks.map((task) => (
+            <motion.div
+              key={task.id}
+              initial={task.id === activeTaskId ? false : hidden}
+              animate={reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }}
+              exit={task.id === activeTaskId ? undefined : hidden}
+              transition={{ type: "spring", duration: 0.35, bounce: 0.15 }}
+            >
+              <TaskCard
+                task={task}
+                disableDragDrop={disableDragDrop}
+                isFinalColumn={column.isFinal}
+              />
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </SortableContext>
   );
 }

apps/web/src/components/kanban-board/column/column-sort-hint.tsx

@@ -0,0 +1,10 @@
+export function ColumnSortHint({ label }: { label: string }) {
+  return (
+    <div
+      role="status"
+      className="pointer-events-none absolute inset-x-3 bottom-3 z-10 rounded-lg border border-border bg-popover/95 px-3 py-2 text-center text-xs font-medium text-popover-foreground shadow-md backdrop-blur-sm"
+    >
+      {label}
+    </div>
+  );
+}

apps/web/src/components/kanban-board/column/index.tsx

@@ -1,14 +1,19 @@
+import { useDroppable } from "@dnd-kit/core";
 import { cva } from "class-variance-authority";
-import { useState } from "react";
+import { memo } from "react";
 import { useBackgroundStore } from "@/store/background";
 import type { ProjectWithTasks } from "@/types/project";
 import { ColumnAddTask } from "./column-add-task";
 import { ColumnDropzone } from "./column-dropzone";
 import { ColumnHeader } from "./column-header";
+import { ColumnSortHint } from "./column-sort-hint";
 
 type ColumnProps = {
   column: ProjectWithTasks["columns"][number];
+  activeTaskId: string | null;
+  sortHint?: string;
   disableDragDrop?: boolean;
+  disableSorting?: boolean;
   disableCollectionActions?: boolean;
 };
 
@@ -56,16 +61,23 @@ export const columnVariants = cva(
 
 function Column({
   column,
+  activeTaskId,
+  sortHint,
   disableDragDrop = false,
+  disableSorting = false,
   disableCollectionActions = false,
 }: ColumnProps) {
-  const [isDropzoneOver, setIsDropzoneOver] = useState(false);
+  const { setNodeRef, isOver } = useDroppable({
+    id: column.id,
+    data: { type: "column", column },
+  });
   const { background } = useBackgroundStore();
 
   return (
     <div
+      ref={setNodeRef}
       className={columnVariants({
-        isDropzoneOver,
+        isDropzoneOver: isOver,
         backgroundImage: !!background,
       })}
     >
@@ -78,14 +90,16 @@ function Column({
       <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-2 [-webkit-overflow-scrolling:touch]">
         <ColumnDropzone
           column={column}
+          activeTaskId={activeTaskId}
           disableDragDrop={disableDragDrop}
-          onIsOverChange={setIsDropzoneOver}
+          disableSorting={disableSorting}
         />
         {/* New work starts in an open column; finished ones only collect. */}
         {!column.isFinal && <ColumnAddTask columnId={column.id} />}
       </div>
+      {sortHint && <ColumnSortHint label={sortHint} />}
     </div>
   );
 }
 
-export default Column;
+export default memo(Column);

apps/web/src/components/kanban-board/drag-preview/drag-hover.ts

@@ -0,0 +1 @@
+export type DragHover = { activeId: string; overId: string };

apps/web/src/components/kanban-board/drag-preview/find-task-column.ts

@@ -0,0 +1,7 @@
+import type { ProjectWithTasks } from "@/types/project";
+
+export function findTaskColumn(board: ProjectWithTasks, id: string) {
+  return board.columns.find(
+    (column) => column.id === id || column.tasks.some((task) => task.id === id),
+  );
+}

apps/web/src/components/kanban-board/drag-preview/get-hovered-other-column-id.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vite-plus/test";
+import { getHoveredOtherColumnId } from "./get-hovered-other-column-id";
+import { testBoard } from "./test-board";
+
+describe("getHoveredOtherColumnId", () => {
+  it("returns the hovered column when it differs from the card's column", () => {
+    expect(getHoveredOtherColumnId(testBoard(), "a", "c")).toBe("doing");
+    expect(getHoveredOtherColumnId(testBoard(), "a", "done")).toBe("done");
+  });
+
+  it("returns null within the card's column or for unknown ids", () => {
+    expect(getHoveredOtherColumnId(testBoard(), "a", "b")).toBeNull();
+    expect(getHoveredOtherColumnId(testBoard(), "a", "todo")).toBeNull();
+    expect(getHoveredOtherColumnId(testBoard(), "a", "missing")).toBeNull();
+  });
+});

apps/web/src/components/kanban-board/drag-preview/get-hovered-other-column-id.ts

@@ -0,0 +1,12 @@
+import type { ProjectWithTasks } from "@/types/project";
+import { findTaskColumn } from "./find-task-column";
+
+export function getHoveredOtherColumnId(
+  board: ProjectWithTasks,
+  activeId: string,
+  overId: string,
+) {
+  const from = findTaskColumn(board, activeId);
+  const to = findTaskColumn(board, overId);
+  return from && to && from.id !== to.id ? to.id : null;
+}