feat: make cross-column dragged card sortable

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

@@ -0,0 +1,74 @@
+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)],
+]);
+
+const columnData = {
+  empty: { type: "column", column: { id: "empty", tasks: [] } },
+  doing: {
+    type: "column",
+    column: { id: "doing", tasks: [{ 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("finds nothing when the pointer is between columns", () => {
+    expect(detect({ x: 310, y: 160 })).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,37 @@
+import {
+  type CollisionDetection,
+  closestCorners,
+  pointerWithin,
+} from "@dnd-kit/core";
+import type { ProjectWithTasks } from "@/types/project";
+
+type ColumnData = {
+  type?: string;
+  column?: ProjectWithTasks["columns"][number];
+};
+
+export const boardCollisionDetection: CollisionDetection = (args) => {
+  const { pointerCoordinates, droppableContainers, droppableRects } = args;
+  if (!pointerCoordinates) return closestCorners(args);
+
+  const [hit] = pointerWithin(args);
+  const data = droppableContainers.find((container) => container.id === hit?.id)
+    ?.data.current as ColumnData | undefined;
+  if (data?.type !== "column" || !data.column?.tasks.length)
+    return hit ? [hit] : [];
+
+  let closest = hit;
+  let closestDistance = Number.POSITIVE_INFINITY;
+  for (const task of data.column.tasks) {
+    const rect = droppableRects.get(task.id);
+    if (!rect) continue;
+    const distance = Math.abs(
+      rect.top + rect.height / 2 - pointerCoordinates.y,
+    );
+    if (distance < closestDistance) {
+      closest = { id: task.id };
+      closestDistance = distance;
+    }
+  }
+  return [closest];
+};

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

@@ -1,23 +1,32 @@
 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 ReactNode, 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;
+  disableSorting?: boolean;
   onIsOverChange?: (isOver: boolean) => void;
+  children?: ReactNode;
 };
 
 export function ColumnDropzone({
   column,
+  activeTaskId,
   disableDragDrop = false,
+  disableSorting = false,
   onIsOverChange,
+  children,
 }: ColumnDropzoneProps) {
   const { setNodeRef, isOver } = useDroppable({
     id: column.id,
@@ -32,27 +41,24 @@ export function ColumnDropzone({
   }, [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">
+    <div ref={setNodeRef} className="flex min-h-full flex-col">
       <SortableContext
         items={column.tasks}
-        strategy={verticalListSortingStrategy}
+        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={
-                  reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98 }
-                }
+                initial={task.id === activeTaskId ? false : hidden}
                 animate={
                   reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
                 }
-                exit={
-                  reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98 }
-                }
+                exit={task.id === activeTaskId ? undefined : hidden}
                 transition={{ type: "spring", duration: 0.35, bounce: 0.15 }}
               >
                 <TaskCard
@@ -65,6 +71,7 @@ export function ColumnDropzone({
           </AnimatePresence>
         </div>
       </SortableContext>
+      {children}
     </div>
   );
 }

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,18 @@
 import { cva } from "class-variance-authority";
-import { useState } from "react";
+import { memo, useState } 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,7 +60,10 @@ export const columnVariants = cva(
 
 function Column({
   column,
+  activeTaskId,
+  sortHint,
   disableDragDrop = false,
+  disableSorting = false,
   disableCollectionActions = false,
 }: ColumnProps) {
   const [isDropzoneOver, setIsDropzoneOver] = useState(false);
@@ -78,14 +85,18 @@ 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}
+          disableSorting={disableSorting}
           onIsOverChange={setIsDropzoneOver}
-        />
-        {/* New work starts in an open column; finished ones only collect. */}
-        {!column.isFinal && <ColumnAddTask columnId={column.id} />}
+        >
+          {/* New work starts in an open column; finished ones only collect. */}
+          {!column.isFinal && <ColumnAddTask columnId={column.id} />}
+        </ColumnDropzone>
       </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;
+}

apps/web/src/components/kanban-board/drag-preview/get-preview-drop-placement.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vite-plus/test";
+import { getPreviewDropPlacement } from "./get-preview-drop-placement";
+import { moveIntoHoveredColumn } from "./move-into-hovered-column";
+import { testBoard } from "./test-board";
+
+const preview = () => moveIntoHoveredColumn(testBoard(), "a", "c")!;
+
+describe("getPreviewDropPlacement", () => {
+  it("keeps the previewed slot when dropped on the card itself", () => {
+    expect(getPreviewDropPlacement(preview(), "a", "a")).toEqual({
+      overId: "c",
+      insertAfterTarget: false,
+    });
+  });
+
+  it("applies the final sortable hover within the column", () => {
+    expect(getPreviewDropPlacement(preview(), "a", "d")).toEqual({
+      overId: "d",
+      insertAfterTarget: true,
+    });
+  });
+
+  it("follows a final hover into another column", () => {
+    expect(getPreviewDropPlacement(preview(), "a", "done")).toEqual({
+      overId: "done",
+      insertAfterTarget: undefined,
+    });
+  });
+});

apps/web/src/components/kanban-board/drag-preview/get-preview-drop-placement.ts

@@ -0,0 +1,17 @@
+import type { ProjectWithTasks } from "@/types/project";
+import { moveBoardTask } from "../move-task";
+import { getVisualTaskPlacement } from "./get-visual-task-placement";
+import { moveIntoHoveredColumn } from "./move-into-hovered-column";
+
+export function getPreviewDropPlacement(
+  board: ProjectWithTasks,
+  activeId: string,
+  overId: string,
+) {
+  const settled =
+    moveIntoHoveredColumn(board, activeId, overId) ??
+    (overId === activeId
+      ? board
+      : (moveBoardTask(board, activeId, overId)?.project ?? board));
+  return getVisualTaskPlacement(settled, activeId);
+}

apps/web/src/components/kanban-board/drag-preview/get-visual-task-placement.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vite-plus/test";
+import { getVisualTaskPlacement } from "./get-visual-task-placement";
+import { testBoard } from "./test-board";
+
+describe("getVisualTaskPlacement", () => {
+  it("places the card before its next neighbor", () => {
+    expect(getVisualTaskPlacement(testBoard(), "c")).toEqual({
+      overId: "d",
+      insertAfterTarget: false,
+    });
+  });
+
+  it("places the last card after its previous neighbor", () => {
+    expect(getVisualTaskPlacement(testBoard(), "d")).toEqual({
+      overId: "c",
+      insertAfterTarget: true,
+    });
+  });
+
+  it("targets the column for a card alone in it", () => {
+    const board = testBoard();
+    board.columns[1].tasks = board.columns[1].tasks.slice(0, 1);
+    expect(getVisualTaskPlacement(board, "c")).toEqual({
+      overId: "doing",
+      insertAfterTarget: undefined,
+    });
+  });
+
+  it("returns null for an unknown card", () => {
+    expect(getVisualTaskPlacement(testBoard(), "missing")).toBeNull();
+  });
+});

apps/web/src/components/kanban-board/drag-preview/get-visual-task-placement.ts

@@ -0,0 +1,19 @@
+import type { ProjectWithTasks } from "@/types/project";
+import { findTaskColumn } from "./find-task-column";
+
+export function getVisualTaskPlacement(
+  project: ProjectWithTasks,
+  activeId: string,
+) {
+  const column = findTaskColumn(project, activeId);
+  if (!column) return null;
+
+  const index = column.tasks.findIndex((task) => task.id === activeId);
+  const nextTask = column.tasks[index + 1];
+  if (nextTask) return { overId: nextTask.id, insertAfterTarget: false };
+
+  const previousTask = column.tasks[index - 1];
+  if (previousTask) return { overId: previousTask.id, insertAfterTarget: true };
+
+  return { overId: column.id, insertAfterTarget: undefined };
+}