From 6f28828d5f5c5934fe5dec5507c921f62ccf68dc Mon Sep 17 00:00:00 2001
From: OpenClaw Bot <ai-agent@topdoglabs.com>
Date: Thu, 19 Feb 2026 17:44:18 -0600
Subject: [PATCH] Add drag-and-drop and sprint assignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Integrated @dnd-kit for drag-and-drop in Sprint Board
- Tasks can be dragged between columns (To Do → In Progress → Review → Done)
- Added sprint selector to new task dialog
- Added sprint selector to task detail view
- Visual drag overlay during drag operations
- Grip handle appears on hover for drag initiation
---
 package-lock.json              |  56 +++++
 package.json                   |   3 +
 src/app/page.tsx               |  34 ++-
 src/components/SprintBoard.tsx | 383 +++++++++++++++++++++++----------
 4 files changed, 359 insertions(+), 117 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 113346d..1e2dd8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
       "version": "0.1.0",
       "license": "ISC",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
@@ -296,6 +299,59 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
diff --git a/package.json b/package.json
index 3b6983e..36d8a40 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bcac201..310aaec 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -40,8 +40,10 @@ export default function Home() {
   const {
     projects,
     tasks,
+    sprints,
     selectedProjectId,
     selectedTaskId,
+    selectedSprintId,
     selectProject,
     addProject,
     deleteProject,
@@ -416,7 +418,7 @@ export default function Home() {
                 rows={3}
               />
             </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Type</Label>
                 <select
@@ -442,6 +444,8 @@ export default function Home() {
                   <option value="urgent">Urgent</option>
                 </select>
               </div>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Status</Label>
                 <select
@@ -454,6 +458,19 @@ export default function Home() {
                   ))}
                 </select>
               </div>
+              <div>
+                <Label>Sprint (optional)</Label>
+                <select
+                  value={newTask.sprintId || ""}
+                  onChange={(e) => setNewTask({ ...newTask, sprintId: e.target.value || undefined })}
+                  className="w-full mt-1.5 px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500"
+                >
+                  <option value="">No Sprint</option>
+                  {sprints.filter(s => s.projectId === selectedProjectId).map((sprint) => (
+                    <option key={sprint.id} value={sprint.id}>{sprint.name}</option>
+                  ))}
+                </select>
+              </div>
             </div>
             <div>
               <Label>Tags (comma separated)</Label>
@@ -563,6 +580,21 @@ export default function Home() {
                   </div>
                 </div>
 
+                {/* Sprint */}
+                <div>
+                  <Label className="text-slate-400">Sprint</Label>
+                  <select
+                    value={selectedTask.sprintId || ""}
+                    onChange={(e) => updateTask(selectedTask.id, { sprintId: e.target.value || undefined })}
+                    className="w-full mt-2 px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500"
+                  >
+                    <option value="">No Sprint</option>
+                    {sprints.filter(s => s.projectId === selectedProjectId).map((sprint) => (
+                      <option key={sprint.id} value={sprint.id}>{sprint.name}</option>
+                    ))}
+                  </select>
+                </div>
+
                 {/* Comments Section */}
                 <div className="border-t border-slate-800 pt-6">
                   <h4 className="font-medium text-white mb-4 flex items-center gap-2">
diff --git a/src/components/SprintBoard.tsx b/src/components/SprintBoard.tsx
index bebd01c..2d3569a 100644
--- a/src/components/SprintBoard.tsx
+++ b/src/components/SprintBoard.tsx
@@ -1,11 +1,27 @@
 "use client"
 
 import { useState } from "react"
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCorners,
+} from "@dnd-kit/core"
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
 import { useTaskStore, Task, Sprint } from "@/stores/useTaskStore"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Plus, Calendar, Flag } from "lucide-react"
+import { Plus, Calendar, Flag, GripVertical } from "lucide-react"
 import { format, parseISO } from "date-fns"
 
 const statusColumns = ["backlog", "in-progress", "review", "done"] as const
@@ -18,12 +34,114 @@ const statusLabels: Record<string, string> = {
 }
 
 const statusColors: Record<string, string> = {
-  backlog: "bg-zinc-700",
+  backlog: "bg-slate-700",
   "in-progress": "bg-blue-600",
   review: "bg-yellow-600",
   done: "bg-green-600",
 }
 
+const priorityColors: Record<string, string> = {
+  low: "bg-slate-600",
+  medium: "bg-blue-600",
+  high: "bg-orange-600",
+  urgent: "bg-red-600",
+}
+
+// Sortable Task Card Component
+function SortableTaskCard({
+  task,
+  onClick,
+}: {
+  task: Task
+  onClick: () => void
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: task.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  }
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      className="bg-slate-800 border-slate-700 cursor-pointer hover:border-slate-600 transition-colors group"
+      onClick={onClick}
+    >
+      <CardContent className="p-3">
+        <div className="flex items-start gap-2">
+          <div
+            {...attributes}
+            {...listeners}
+            className="mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing"
+          >
+            <GripVertical className="w-4 h-4 text-slate-500" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between gap-2">
+              <h4 className="text-sm font-medium text-slate-200 line-clamp-2">
+                {task.title}
+              </h4>
+            </div>
+            <div className="flex items-center gap-2 mt-2">
+              <Badge
+                className={`${priorityColors[task.priority]} text-white text-xs`}
+              >
+                {task.priority}
+              </Badge>
+              <Badge variant="outline" className="text-xs border-slate-600 text-slate-400">
+                {task.type}
+              </Badge>
+              {task.comments.length > 0 && (
+                <span className="text-xs text-slate-500">
+                  💬 {task.comments.length}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// Drag Overlay Task Card (shown while dragging)
+function DragOverlayTaskCard({ task }: { task: Task }) {
+  return (
+    <Card className="bg-slate-800 border-slate-600 shadow-xl rotate-2">
+      <CardContent className="p-3">
+        <div className="flex items-start gap-2">
+          <GripVertical className="w-4 h-4 text-slate-500 mt-0.5" />
+          <div className="flex-1 min-w-0">
+            <h4 className="text-sm font-medium text-slate-200 line-clamp-2">
+              {task.title}
+            </h4>
+            <div className="flex items-center gap-2 mt-2">
+              <Badge
+                className={`${priorityColors[task.priority]} text-white text-xs`}
+              >
+                {task.priority}
+              </Badge>
+              <Badge variant="outline" className="text-xs border-slate-600 text-slate-400">
+                {task.type}
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
 export function SprintBoard() {
   const {
     tasks,
@@ -31,7 +149,10 @@ export function SprintBoard() {
     selectedSprintId,
     selectSprint,
     selectedProjectId,
+    selectedTaskId,
     updateTask,
+    selectTask,
+    addSprint,
   } = useTaskStore()
 
   const [isCreatingSprint, setIsCreatingSprint] = useState(false)
@@ -41,6 +162,16 @@ export function SprintBoard() {
     startDate: "",
     endDate: "",
   })
+  const [activeId, setActiveId] = useState<string | null>(null)
+
+  // Sensors for drag detection
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  )
 
   // Get sprints for selected project
   const projectSprints = sprints.filter(
@@ -59,6 +190,9 @@ export function SprintBoard() {
     return acc
   }, {} as Record<string, Task[]>)
 
+  // Get active task for drag overlay
+  const activeTask = activeId ? tasks.find((t) => t.id === activeId) : null
+
   const handleCreateSprint = () => {
     if (!newSprint.name || !selectedProjectId) return
 
@@ -71,16 +205,35 @@ export function SprintBoard() {
       projectId: selectedProjectId,
     }
 
-    // Use the store's addSprint action
-    const { addSprint } = useTaskStore.getState()
     addSprint(sprint)
-
     setIsCreatingSprint(false)
     setNewSprint({ name: "", goal: "", startDate: "", endDate: "" })
   }
 
-  const handleMoveTask = (taskId: string, newStatus: string) => {
-    updateTask(taskId, { status: newStatus as any })
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string)
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    setActiveId(null)
+
+    if (!over) return
+
+    const taskId = active.id as string
+    const overId = over.id as string
+
+    // Check if dropped over a column
+    if (statusColumns.includes(overId as any)) {
+      updateTask(taskId, { status: overId as Task["status"] })
+      return
+    }
+
+    // Check if dropped over another task
+    const overTask = tasks.find((t) => t.id === overId)
+    if (overTask && overTask.status !== tasks.find((t) => t.id === taskId)?.status) {
+      updateTask(taskId, { status: overTask.status })
+    }
   }
 
   if (projectSprints.length === 0 && !isCreatingSprint) {
@@ -101,10 +254,8 @@ export function SprintBoard() {
     return (
       <div className="max-w-md mx-auto py-8">
         <Card className="bg-slate-900 border-slate-800">
-          <CardHeader>
-            <CardTitle className="text-lg">Create New Sprint</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
+          <CardContent className="p-6 space-y-4">
+            <h3 className="text-lg font-medium text-slate-200">Create New Sprint</h3>
             <div>
               <label className="text-sm text-slate-400">Sprint Name</label>
               <input
@@ -160,115 +311,115 @@ export function SprintBoard() {
   }
 
   return (
-    <div className="space-y-4">
-      {/* Sprint Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <select
-            value={selectedSprintId || ""}
-            onChange={(e) => selectSprint(e.target.value || null)}
-            className="bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100"
-          >
-            <option value="">Select a sprint...</option>
-            {projectSprints.map((sprint) => (
-              <option key={sprint.id} value={sprint.id}>
-                {sprint.name}
-              </option>
-            ))}
-          </select>
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => setIsCreatingSprint(true)}
-          >
-            <Plus className="w-4 h-4 mr-1" />
-            New Sprint
-          </Button>
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="space-y-4">
+        {/* Sprint Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <select
+              value={selectedSprintId || ""}
+              onChange={(e) => selectSprint(e.target.value || null)}
+              className="bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100"
+            >
+              <option value="">Select a sprint...</option>
+              {projectSprints.map((sprint) => (
+                <option key={sprint.id} value={sprint.id}>
+                  {sprint.name}
+                </option>
+              ))}
+            </select>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => setIsCreatingSprint(true)}
+            >
+              <Plus className="w-4 h-4 mr-1" />
+              New Sprint
+            </Button>
+          </div>
+
+          {currentSprint && (
+            <div className="flex items-center gap-4 text-sm text-slate-400">
+              <div className="flex items-center gap-1">
+                <Calendar className="w-4 h-4" />
+                <span>
+                  {format(parseISO(currentSprint.startDate), "MMM d")} -{" "}
+                  {format(parseISO(currentSprint.endDate), "MMM d, yyyy")}
+                </span>
+              </div>
+              <Badge
+                variant={
+                  currentSprint.status === "active"
+                    ? "default"
+                    : currentSprint.status === "completed"
+                    ? "secondary"
+                    : "outline"
+                }
+              >
+                {currentSprint.status}
+              </Badge>
+            </div>
+          )}
         </div>
 
-        {currentSprint && (
-          <div className="flex items-center gap-4 text-sm text-slate-400">
-            <div className="flex items-center gap-1">
-              <Calendar className="w-4 h-4" />
-              <span>
-                {format(parseISO(currentSprint.startDate), "MMM d")} -{" "}
-                {format(parseISO(currentSprint.endDate), "MMM d, yyyy")}
-              </span>
-            </div>
-            <Badge
-              variant={
-                currentSprint.status === "active"
-                  ? "default"
-                  : currentSprint.status === "completed"
-                  ? "secondary"
-                  : "outline"
-              }
-            >
-              {currentSprint.status}
-            </Badge>
+        {/* Sprint Goal */}
+        {currentSprint?.goal && (
+          <div className="bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm text-slate-300">
+            <span className="font-medium text-slate-200">Goal:</span> {currentSprint.goal}
+          </div>
+        )}
+
+        {/* Sprint Board */}
+        {selectedSprintId ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+            {statusColumns.map((status) => (
+              <div
+                key={status}
+                id={status}
+                className="flex flex-col bg-slate-900/50 rounded-lg p-3"
+                data-status={status}
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <div className={`w-2 h-2 rounded-full ${statusColors[status]}`} />
+                    <h3 className="font-medium text-slate-300">{statusLabels[status]}</h3>
+                  </div>
+                  <Badge variant="secondary" className="text-xs">
+                    {tasksByStatus[status]?.length || 0}
+                  </Badge>
+                </div>
+                <SortableContext
+                  items={tasksByStatus[status]?.map((t) => t.id) || []}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="space-y-2 min-h-[100px]">
+                    {tasksByStatus[status]?.map((task) => (
+                      <SortableTaskCard
+                        key={task.id}
+                        task={task}
+                        onClick={() => selectTask(task.id)}
+                      />
+                    ))}
+                  </div>
+                </SortableContext>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12 text-slate-500">
+            <p>Select a sprint to view the sprint board</p>
           </div>
         )}
       </div>
 
-      {/* Sprint Goal */}
-      {currentSprint?.goal && (
-        <div className="bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm text-slate-300">
-          <span className="font-medium text-slate-200">Goal:</span> {currentSprint.goal}
-        </div>
-      )}
-
-      {/* Sprint Board */}
-      {selectedSprintId ? (
-        <div className="grid grid-cols-4 gap-4">
-          {statusColumns.map((status) => (
-            <div key={status} className="flex flex-col">
-              <div className="flex items-center justify-between mb-3">
-                <h3 className="font-medium text-slate-300">{statusLabels[status]}</h3>
-                <Badge variant="secondary" className="text-xs">
-                  {tasksByStatus[status]?.length || 0}
-                </Badge>
-              </div>
-              <div className="space-y-2">
-                {tasksByStatus[status]?.map((task) => (
-                  <Card
-                    key={task.id}
-                    className="bg-slate-800 border-slate-700 cursor-pointer hover:border-slate-600 transition-colors"
-                    draggable
-                    onDragEnd={() => {}}
-                  >
-                    <CardContent className="p-3">
-                      <div className="flex items-start justify-between gap-2">
-                        <h4 className="text-sm font-medium text-slate-200 line-clamp-2">
-                          {task.title}
-                        </h4>
-                        <Badge
-                          className={`${statusColors[task.priority]} text-white text-xs shrink-0`}
-                        >
-                          {task.priority}
-                        </Badge>
-                      </div>
-                      <div className="flex items-center gap-2 mt-2">
-                        <Badge variant="outline" className="text-xs">
-                          {task.type}
-                        </Badge>
-                        {task.comments.length > 0 && (
-                          <span className="text-xs text-slate-500">
-                            💬 {task.comments.length}
-                          </span>
-                        )}
-                      </div>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div className="text-center py-12 text-slate-500">
-          <p>Select a sprint to view the sprint board</p>
-        </div>
-      )}
-    </div>
+      <DragOverlay>
+        {activeTask ? <DragOverlayTaskCard task={activeTask} /> : null}
+      </DragOverlay>
+    </DndContext>
   )
 }