From 92576abc0bfd60e038fd4c1422a7f1e25c4f2200 Mon Sep 17 00:00:00 2001
From: janpeter visser <janpetervisser2@gmail.com>
Date: Mon, 27 Apr 2026 19:56:21 +0200
Subject: [PATCH] feat: apply priority-color card style to sprint task rows

---
 components/sprint/task-list.tsx | 79 +++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 34 deletions(-)

diff --git a/components/sprint/task-list.tsx b/components/sprint/task-list.tsx
index 6dfb0ce..3261322 100644
--- a/components/sprint/task-list.tsx
+++ b/components/sprint/task-list.tsx
@@ -17,6 +17,7 @@ import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { CodeBadge } from '@/components/shared/code-badge'
 import { PanelNavBar } from '@/components/shared/panel-nav-bar'
+import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
 import { deriveTaskCode } from '@/lib/code'
 import { useSprintStore } from '@/stores/sprint-store'
 import {
@@ -37,7 +38,6 @@ const STATUS_COLORS: Record<string, string> = {
 }
 const STATUS_LABELS: Record<string, string> = { TO_DO: 'To Do', IN_PROGRESS: 'Bezig', DONE: 'Klaar' }
 
-const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
 
 export interface Task {
   id: string
@@ -76,45 +76,53 @@ function SortableTaskRow({
 
   if (editing) {
     return (
-      <div ref={setNodeRef} style={style} className="px-4 py-2 border-b border-border bg-surface-container">
-        <form action={formAction} className="space-y-2">
-          <input type="hidden" name="id" value={task.id} />
-          <input type="hidden" name="priority" value={task.priority} />
-          <Input name="title" defaultValue={task.title} className="h-7 text-sm" required autoFocus />
-          <div className="flex gap-2">
-            <EditSubmitButton />
-            <Button type="button" variant="ghost" size="sm" className="h-7" onClick={() => setEditing(false)}>Annuleren</Button>
-          </div>
-        </form>
+      <div ref={setNodeRef} style={style} className="px-2 py-1">
+        <div className={cn('rounded border border-border px-3 py-2 bg-surface-container', PRIORITY_BORDER[task.priority])}>
+          <form action={formAction} className="space-y-2">
+            <input type="hidden" name="id" value={task.id} />
+            <input type="hidden" name="priority" value={task.priority} />
+            <Input name="title" defaultValue={task.title} className="h-7 text-sm" required autoFocus />
+            <div className="flex gap-2">
+              <EditSubmitButton />
+              <Button type="button" variant="ghost" size="sm" className="h-7" onClick={() => setEditing(false)}>Annuleren</Button>
+            </div>
+          </form>
+        </div>
       </div>
     )
   }
 
   return (
-    <div ref={setNodeRef} style={style} className="group flex items-start gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container/50 transition-colors">
-      {!isDemo && (
-        <span {...attributes} {...listeners} className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none mt-0.5">⠿</span>
-      )}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-start justify-between gap-2">
-          <p className={cn('text-sm truncate flex-1', task.status === 'DONE' && 'line-through text-muted-foreground')}>
-            {task.title}
-          </p>
-          {code && <CodeBadge code={code} className="shrink-0 mt-0.5" />}
+    <div ref={setNodeRef} style={style} className="group px-2 py-1">
+      <div className={cn(
+        'flex items-start gap-2 rounded border border-border px-3 py-2 transition-colors bg-surface-container hover:bg-surface-container-high',
+        PRIORITY_BORDER[task.priority]
+      )}>
+        {!isDemo && (
+          <span {...attributes} {...listeners} className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none mt-0.5">⠿</span>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <p className={cn('text-sm leading-snug line-clamp-2 flex-1', task.status === 'DONE' && 'line-through text-muted-foreground')}>
+              {task.title}
+            </p>
+            {code && <CodeBadge code={code} className="shrink-0 mt-0.5" />}
+          </div>
+          <div className="flex items-center justify-between gap-2 mt-1.5">
+            <button onClick={onStatusToggle} disabled={isDemo} aria-label={`Status: ${STATUS_LABELS[task.status]}`}>
+              <Badge className={cn('text-[10px] px-1.5 py-0 border cursor-pointer hover:opacity-80 transition-opacity', STATUS_COLORS[task.status])}>
+                {STATUS_LABELS[task.status]}
+              </Badge>
+            </button>
+            {!isDemo && (
+              <div className="opacity-0 group-hover:opacity-100 flex gap-1 shrink-0">
+                <button onClick={() => setEditing(true)} className="text-xs text-muted-foreground hover:text-foreground">Bewerk</button>
+                <button onClick={onDelete} aria-label="Verwijder taak" className="text-xs text-muted-foreground hover:text-error">×</button>
+              </div>
+            )}
+          </div>
         </div>
-        <span className="text-xs text-muted-foreground">{PRIORITY_LABELS[task.priority]}</span>
       </div>
-      <button onClick={onStatusToggle} disabled={isDemo} aria-label={`Status: ${STATUS_LABELS[task.status]}`} className="mt-0.5">
-        <Badge className={cn('text-xs border cursor-pointer hover:opacity-80 transition-opacity', STATUS_COLORS[task.status])}>
-          {STATUS_LABELS[task.status]}
-        </Badge>
-      </button>
-      {!isDemo && (
-        <div className="opacity-0 group-hover:opacity-100 flex gap-1 mt-0.5">
-          <button onClick={() => setEditing(true)} className="text-xs text-muted-foreground hover:text-foreground">Bewerk</button>
-          <button onClick={onDelete} aria-label="Verwijder taak" className="text-xs text-muted-foreground hover:text-error">×</button>
-        </div>
-      )}
     </div>
   )
 }
@@ -251,7 +259,10 @@ export function TaskList({ storyId, storyCode, sprintId, productId: _productId,
             </SortableContext>
             <DragOverlay>
               {activeDragId && taskMap[activeDragId] && (
-                <div className="bg-surface-container-low border border-primary rounded px-4 py-2 text-sm shadow-lg opacity-90">
+                <div className={cn(
+                  'rounded border border-primary px-3 py-2 bg-surface-container shadow-lg opacity-90 text-sm',
+                  PRIORITY_BORDER[taskMap[activeDragId].priority]
+                )}>
                   {taskMap[activeDragId].title}
                 </div>
               )}