feat: ST-612 drag-and-drop tussen Product Backlog en Sprint Backlog

Vervangt de '+ Sprint' knop door cross-panel drag-and-drop:
- Sleep story van rechts (PB) naar links (SB) om toe te voegen
- Sleep story van links (SB) naar rechts (PB) om te verwijderen
- Gedeelde DndContext in SprintBacklogClient voor beide panelen
- Visuele dropzone-highlight bij hoveren
- Optimistische UI-updates met rollback bij fouten

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/sprint/sprint-backlog-client.tsx

@@ -1,8 +1,21 @@
 'use client'
 
+import { useState, useEffect, useTransition } from 'react'
+import {
+  DndContext, DragEndEvent,
+  KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter,
+} from '@dnd-kit/core'
+import { sortableKeyboardCoordinates, arrayMove } from '@dnd-kit/sortable'
+import { toast } from 'sonner'
 import { SplitPane } from '@/components/split-pane/split-pane'
 import { SprintBacklogLeft, SprintBacklogRight } from './sprint-backlog'
 import type { SprintStory, PbiWithStories } from './sprint-backlog'
+import { useSprintStore } from '@/stores/sprint-store'
+import {
+  addStoryToSprintAction,
+  removeStoryFromSprintAction,
+  reorderSprintStoriesAction,
+} from '@/actions/sprints'
 
 interface SprintBacklogClientProps {
   productId: string
@@ -21,29 +34,134 @@ export function SprintBacklogClient({
   sprintStoryIdList,
   isDemo,
 }: SprintBacklogClientProps) {
-  const sprintStoryIds = new Set<string>(sprintStoryIdList)
+  const [sprintStories, setSprintStories] = useState<SprintStory[]>(stories)
+  const [sprintStoryIds, setSprintStoryIds] = useState<Set<string>>(() => new Set(sprintStoryIdList))
+  const {
+    sprintStoryOrder,
+    initSprint,
+    addStoryToSprint,
+    removeStoryFromSprint,
+    reorderSprintStories,
+    rollbackSprint,
+  } = useSprintStore()
+  const [, startTransition] = useTransition()
+
+  useEffect(() => {
+    initSprint(sprintId, stories.map(s => s.id))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sprintId])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over) return
+
+    const activeId = active.id.toString()
+    const overId = over.id.toString()
+    const order = sprintStoryOrder[sprintId] ?? sprintStories.map(s => s.id)
+
+    // Dragged from right panel (pb: prefix) → add to sprint
+    if (activeId.startsWith('pb:')) {
+      const storyId = activeId.slice(3)
+      const droppingOnSprint =
+        overId === 'sprint-zone' ||
+        (!overId.startsWith('pb:') && overId !== 'backlog-zone')
+      if (droppingOnSprint && !sprintStoryIds.has(storyId)) {
+        const storyData = pbisWithStories.flatMap(p => p.stories).find(s => s.id === storyId)
+        if (!storyData) return
+        setSprintStoryIds(prev => new Set([...prev, storyId]))
+        setSprintStories(prev => [...prev, storyData])
+        addStoryToSprint(sprintId, storyId)
+        startTransition(async () => {
+          const result = await addStoryToSprintAction(sprintId, storyId)
+          if (!result.success) {
+            setSprintStoryIds(prev => { const n = new Set(prev); n.delete(storyId); return n })
+            setSprintStories(prev => prev.filter(s => s.id !== storyId))
+            removeStoryFromSprint(sprintId, storyId)
+            toast.error(result.error ?? 'Toevoegen mislukt')
+          }
+        })
+      }
+      return
+    }
+
+    // Dragged from left panel to right panel → remove from sprint
+    if (overId === 'backlog-zone') {
+      const storyData = sprintStories.find(s => s.id === activeId)
+      setSprintStoryIds(prev => { const n = new Set(prev); n.delete(activeId); return n })
+      setSprintStories(prev => prev.filter(s => s.id !== activeId))
+      removeStoryFromSprint(sprintId, activeId)
+      startTransition(async () => {
+        const result = await removeStoryFromSprintAction(activeId)
+        if (!result.success) {
+          if (storyData) {
+            setSprintStoryIds(prev => new Set([...prev, activeId]))
+            setSprintStories(prev => [...prev, storyData])
+          }
+          addStoryToSprint(sprintId, activeId)
+          toast.error('Verwijderen mislukt')
+        }
+      })
+      return
+    }
+
+    // Reorder within sprint
+    if (activeId !== overId && order.includes(overId)) {
+      const prevOrder = [...order]
+      const newOrder = arrayMove([...order], order.indexOf(activeId), order.indexOf(overId))
+      reorderSprintStories(sprintId, newOrder)
+      startTransition(async () => {
+        const result = await reorderSprintStoriesAction(sprintId, newOrder)
+        if (!result.success) {
+          rollbackSprint(sprintId, prevOrder)
+          toast.error('Volgorde opslaan mislukt')
+        }
+      })
+    }
+  }
+
+  function handleRemove(storyId: string) {
+    const storyData = sprintStories.find(s => s.id === storyId)
+    setSprintStoryIds(prev => { const n = new Set(prev); n.delete(storyId); return n })
+    setSprintStories(prev => prev.filter(s => s.id !== storyId))
+    removeStoryFromSprint(sprintId, storyId)
+    startTransition(async () => {
+      const result = await removeStoryFromSprintAction(storyId)
+      if (!result.success) {
+        if (storyData) {
+          setSprintStoryIds(prev => new Set([...prev, storyId]))
+          setSprintStories(prev => [...prev, storyData])
+        }
+        addStoryToSprint(sprintId, storyId)
+        toast.error('Verwijderen mislukt')
+      }
+    })
+  }
 
   return (
-    <SplitPane
-      storageKey={`sprint-${productId}`}
-      left={
-        <SprintBacklogLeft
-          sprintId={sprintId}
-          stories={stories}
-          isDemo={isDemo}
-          selectedStoryId={null}
-          onSelectStory={() => {}}
-        />
-      }
-      right={
-        <SprintBacklogRight
-          sprintId={sprintId}
-          pbisWithStories={pbisWithStories}
-          sprintStoryIds={sprintStoryIds}
-          isDemo={isDemo}
-          onStoryAdded={() => {}}
-        />
-      }
-    />
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SplitPane
+        storageKey={`sprint-${productId}`}
+        left={
+          <SprintBacklogLeft
+            sprintId={sprintId}
+            stories={sprintStories}
+            isDemo={isDemo}
+            onRemove={handleRemove}
+          />
+        }
+        right={
+          <SprintBacklogRight
+            pbisWithStories={pbisWithStories}
+            sprintStoryIds={sprintStoryIds}
+            isDemo={isDemo}
+          />
+        }
+      />
+    </DndContext>
   )
 }

components/sprint/sprint-backlog.tsx

@@ -1,26 +1,12 @@
 'use client'
 
-import { useState, useTransition, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-import {
-  DndContext, DragEndEvent,
-  KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter,
-} from '@dnd-kit/core'
-import {
-  SortableContext, useSortable, verticalListSortingStrategy, arrayMove,
-  sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable'
+import { useState } from 'react'
+import { useDroppable, useDraggable } from '@dnd-kit/core'
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { toast } from 'sonner'
-import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { PanelNavBar } from '@/components/shared/panel-nav-bar'
 import { useSprintStore } from '@/stores/sprint-store'
-import {
-  addStoryToSprintAction,
-  removeStoryFromSprintAction,
-  reorderSprintStoriesAction,
-} from '@/actions/sprints'
 import { cn } from '@/lib/utils'
 
 const STATUS_COLORS: Record<string, string> = {
@@ -54,9 +40,10 @@ export interface PbiWithStories {
 }
 
 // --- Left panel: Sprint Backlog ---
+
 function SortableSprintRow({
-  story, isDemo, onRemove, onClick,
-}: { story: SprintStory; isDemo: boolean; onRemove: () => void; onClick: () => void }) {
+  story, isDemo, onRemove,
+}: { story: SprintStory; isDemo: boolean; onRemove: () => void }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: story.id })
   const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
 
@@ -64,13 +51,15 @@ function SortableSprintRow({
     <div
       ref={setNodeRef}
       style={style}
-      onClick={onClick}
-      className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container transition-colors cursor-pointer"
+      className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container transition-colors"
     >
       {!isDemo && (
-        <span {...attributes} {...listeners} onClick={e => e.stopPropagation()}
-          aria-label="Versleep om te sorteren"
-          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm">
+        <span
+          {...attributes}
+          {...listeners}
+          aria-label="Versleep om te sorteren of naar Product Backlog"
+          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
+        >
           ⠿
         </span>
       )}
@@ -84,8 +73,10 @@ function SortableSprintRow({
         </div>
       </div>
       {!isDemo && (
-        <button onClick={e => { e.stopPropagation(); onRemove() }}
-          className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-error shrink-0">
+        <button
+          onClick={e => { e.stopPropagation(); onRemove() }}
+          className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-error shrink-0"
+        >
           Verwijderen
         </button>
       )}
@@ -97,91 +88,97 @@ interface SprintBacklogLeftProps {
   sprintId: string
   stories: SprintStory[]
   isDemo: boolean
-  onSelectStory: (id: string) => void
-  selectedStoryId: string | null
+  onRemove: (storyId: string) => void
 }
 
-export function SprintBacklogLeft({ sprintId, stories, isDemo, onSelectStory }: SprintBacklogLeftProps) {
-  const { sprintStoryOrder, initSprint, reorderSprintStories, rollbackSprint, removeStoryFromSprint } = useSprintStore()
-  const [, startTransition] = useTransition()
-
-  const idKey = stories.map(s => s.id).join(',')
-  useEffect(() => {
-    initSprint(sprintId, idKey ? idKey.split(',') : [])
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sprintId, idKey])
+export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: SprintBacklogLeftProps) {
+  const { sprintStoryOrder } = useSprintStore()
+  const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
 
   const storyMap = Object.fromEntries(stories.map(s => [s.id, s]))
   const order = sprintStoryOrder[sprintId] ?? stories.map(s => s.id)
   const orderedStories = order.map(id => storyMap[id]).filter(Boolean)
 
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  )
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
-    const prevOrder = [...order]
-    const newOrder = arrayMove([...order], order.indexOf(active.id as string), order.indexOf(over.id as string))
-    reorderSprintStories(sprintId, newOrder)
-    startTransition(async () => {
-      const result = await reorderSprintStoriesAction(sprintId, newOrder)
-      if (!result.success) { rollbackSprint(sprintId, prevOrder); toast.error('Volgorde opslaan mislukt') }
-    })
-  }
-
-  function handleRemove(storyId: string) {
-    removeStoryFromSprint(sprintId, storyId)
-    startTransition(async () => {
-      const result = await removeStoryFromSprintAction(storyId)
-      if (!result.success) toast.error('Verwijderen mislukt')
-    })
-  }
-
   return (
     <div className="flex flex-col h-full">
       <PanelNavBar title="Sprint Backlog" />
-      <div className="flex-1 overflow-y-auto">
+      <div
+        ref={setNodeRef}
+        className={cn(
+          'flex-1 overflow-y-auto transition-colors',
+          isOver && 'bg-primary/5 ring-2 ring-inset ring-primary/20 rounded'
+        )}
+      >
         {orderedStories.length === 0 ? (
-          <p className="text-sm text-muted-foreground text-center mt-8 px-4">
-            Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel.
+          <p className={cn(
+            'text-sm text-muted-foreground text-center mt-8 px-4',
+            isOver && 'text-primary'
+          )}>
+            {isOver ? 'Loslaten om toe te voegen aan Sprint' : 'Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel.'}
           </p>
         ) : (
-          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-            <SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
-              {orderedStories.map(story => (
-                <SortableSprintRow
-                  key={story.id}
-                  story={story}
-                  isDemo={isDemo}
-                  onRemove={() => handleRemove(story.id)}
-                  onClick={() => onSelectStory(story.id)}
-                />
-              ))}
-            </SortableContext>
-          </DndContext>
+          <SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
+            {orderedStories.map(story => (
+              <SortableSprintRow
+                key={story.id}
+                story={story}
+                isDemo={isDemo}
+                onRemove={() => onRemove(story.id)}
+              />
+            ))}
+          </SortableContext>
         )}
       </div>
     </div>
   )
 }
 
-// --- Right panel: Product Backlog stories grouped by PBI (droppable source) ---
+// --- Right panel: Product Backlog grouped by PBI ---
+
+function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: `pb:${story.id}` })
+  const style = transform
+    ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, zIndex: 50, position: 'relative' as const }
+    : undefined
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'flex items-center gap-3 px-6 py-2 border-b border-border/50 hover:bg-surface-container transition-colors',
+        isDragging && 'opacity-40'
+      )}
+    >
+      {!isDemo && (
+        <span
+          {...attributes}
+          {...listeners}
+          aria-label="Sleep naar Sprint Backlog"
+          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
+        >
+          ⠿
+        </span>
+      )}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm truncate">{story.title}</p>
+        <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
+          {STATUS_LABELS[story.status]}
+        </Badge>
+      </div>
+    </div>
+  )
+}
+
 interface SprintBacklogRightProps {
-  sprintId: string
   pbisWithStories: PbiWithStories[]
   sprintStoryIds: Set<string>
   isDemo: boolean
-  onStoryAdded: (storyId: string) => void
 }
 
-export function SprintBacklogRight({ sprintId, pbisWithStories, sprintStoryIds, isDemo, onStoryAdded }: SprintBacklogRightProps) {
+export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo }: SprintBacklogRightProps) {
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
-  const [, startTransition] = useTransition()
-  const { addStoryToSprint } = useSprintStore()
-  const router = useRouter()
+  const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
 
   function toggle(pbiId: string) {
     setCollapsed(prev => {
@@ -191,22 +188,16 @@ export function SprintBacklogRight({ sprintId, pbisWithStories, sprintStoryIds,
     })
   }
 
-  function handleAdd(storyId: string) {
-    addStoryToSprint(sprintId, storyId)
-    onStoryAdded(storyId)
-    startTransition(async () => {
-      const result = await addStoryToSprintAction(sprintId, storyId)
-      if (!result.success) {
-        toast.error(result.error ?? 'Toevoegen mislukt')
-        router.refresh()
-      }
-    })
-  }
-
   return (
     <div className="flex flex-col h-full">
       <PanelNavBar title="Product Backlog" />
-      <div className="flex-1 overflow-y-auto py-2">
+      <div
+        ref={setNodeRef}
+        className={cn(
+          'flex-1 overflow-y-auto py-2 transition-colors',
+          isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'
+        )}
+      >
         {pbisWithStories.map(pbi => (
           <div key={pbi.id}>
             <button
@@ -220,28 +211,24 @@ export function SprintBacklogRight({ sprintId, pbisWithStories, sprintStoryIds,
 
             {!collapsed.has(pbi.id) && pbi.stories.map(story => {
               const inSprint = sprintStoryIds.has(story.id)
-              return (
-                <div
-                  key={story.id}
-                  className={cn(
-                    'flex items-center gap-3 px-6 py-2 border-b border-border/50 transition-colors',
-                    inSprint ? 'opacity-50' : 'hover:bg-surface-container'
-                  )}
-                >
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm truncate">{story.title}</p>
-                    <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
-                      {STATUS_LABELS[story.status]}
-                    </Badge>
+              if (inSprint) {
+                return (
+                  <div
+                    key={story.id}
+                    className="flex items-center gap-3 px-6 py-2 border-b border-border/50 opacity-40"
+                  >
+                    <div className="w-[14px] shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm truncate">{story.title}</p>
+                      <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
+                        {STATUS_LABELS[story.status]}
+                      </Badge>
+                    </div>
+                    <span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
                   </div>
-                  {!inSprint && !isDemo && (
-                    <Button size="sm" variant="outline" className="h-6 text-xs shrink-0" onClick={() => handleAdd(story.id)}>
-                      + Sprint
-                    </Button>
-                  )}
-                  {inSprint && <span className="text-xs text-muted-foreground shrink-0">In Sprint</span>}
-                </div>
-              )
+                )
+              }
+              return <DraggablePbiStoryRow key={story.id} story={story} isDemo={isDemo} />
             })}
           </div>
         ))}