feat(#17): implement kanban board view

apps/web/src/components/kanban/KanbanBoard.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import type { Task } from "@mosaic/shared";
+import { TaskStatus } from "@mosaic/shared";
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { KanbanColumn } from "./KanbanColumn";
+import { TaskCard } from "./TaskCard";
+
+interface KanbanBoardProps {
+  tasks: Task[];
+  onStatusChange?: (taskId: string, newStatus: TaskStatus) => void;
+}
+
+/**
+ * Map TaskStatus enum to Kanban column configuration
+ * Spec requires: todo, in_progress, review, done
+ */
+const columns = [
+  { status: TaskStatus.NOT_STARTED, title: "To Do" },
+  { status: TaskStatus.IN_PROGRESS, title: "In Progress" },
+  { status: TaskStatus.PAUSED, title: "Review" },
+  { status: TaskStatus.COMPLETED, title: "Done" },
+] as const;
+
+/**
+ * Kanban Board component with drag-and-drop functionality
+ * 
+ * Features:
+ * - 4 status columns: To Do, In Progress, Review, Done
+ * - Drag-and-drop using @dnd-kit/core
+ * - Task cards with title, priority badge, assignee avatar
+ * - PATCH /api/tasks/:id on status change
+ */
+export function KanbanBoard({ tasks = [], onStatusChange }: KanbanBoardProps) {
+  const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // 8px movement required before drag starts
+      },
+    })
+  );
+
+  // Group tasks by status
+  const tasksByStatus = useMemo(() => {
+    const grouped: Record<TaskStatus, Task[]> = {
+      [TaskStatus.NOT_STARTED]: [],
+      [TaskStatus.IN_PROGRESS]: [],
+      [TaskStatus.PAUSED]: [],
+      [TaskStatus.COMPLETED]: [],
+      [TaskStatus.ARCHIVED]: [],
+    };
+
+    (tasks || []).forEach((task) => {
+      if (grouped[task.status]) {
+        grouped[task.status].push(task);
+      }
+    });
+
+    // Sort tasks by sortOrder within each column
+    Object.keys(grouped).forEach((status) => {
+      grouped[status as TaskStatus].sort((a, b) => a.sortOrder - b.sortOrder);
+    });
+
+    return grouped;
+  }, [tasks]);
+
+  const activeTask = useMemo(
+    () => (tasks || []).find((task) => task.id === activeTaskId),
+    [tasks, activeTaskId]
+  );
+
+  function handleDragStart(event: DragStartEvent) {
+    setActiveTaskId(event.active.id as string);
+  }
+
+  async function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+
+    if (!over) {
+      setActiveTaskId(null);
+      return;
+    }
+
+    const taskId = active.id as string;
+    const newStatus = over.id as TaskStatus;
+
+    // Find the task and check if status actually changed
+    const task = (tasks || []).find((t) => t.id === taskId);
+
+    if (task && task.status !== newStatus) {
+      // Call PATCH /api/tasks/:id to update status
+      try {
+        const response = await fetch(`/api/tasks/${taskId}`, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ status: newStatus }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to update task status: ${response.statusText}`);
+        }
+
+        // Optionally call the callback for parent component to refresh
+        if (onStatusChange) {
+          onStatusChange(taskId, newStatus);
+        }
+      } catch (error) {
+        console.error("Error updating task status:", error);
+        // TODO: Show error toast/notification
+      }
+    }
+
+    setActiveTaskId(null);
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div
+        data-testid="kanban-grid"
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+      >
+        {columns.map(({ status, title }) => (
+          <KanbanColumn
+            key={status}
+            status={status}
+            title={title}
+            tasks={tasksByStatus[status]}
+          />
+        ))}
+      </div>
+
+      {/* Drag Overlay - shows a copy of the dragged task */}
+      <DragOverlay>
+        {activeTask ? (
+          <div className="rotate-3 scale-105">
+            <TaskCard task={activeTask} />
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}