From d684732ec8e14af0f7fa807f98822860dc0b1934 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 26 Apr 2026 17:49:19 +0200
Subject: [PATCH] feat: show tasks with priority and status in unassigned
 stories sheet

Tasks are always visible under each story. Click a task to expand
its description.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/(app)/products/[id]/solo/page.tsx        | 13 ++-
 components/solo/unassigned-stories-sheet.tsx | 92 +++++++++++++++++---
 2 files changed, 93 insertions(+), 12 deletions(-)

diff --git a/app/(app)/products/[id]/solo/page.tsx b/app/(app)/products/[id]/solo/page.tsx
index d87f7b5..1e833c4 100644
--- a/app/(app)/products/[id]/solo/page.tsx
+++ b/app/(app)/products/[id]/solo/page.tsx
@@ -53,7 +53,10 @@ export default async function SoloProductPage({ params }: Props) {
       select: {
         id: true,
         title: true,
-        _count: { select: { tasks: true } },
+        tasks: {
+          select: { id: true, title: true, description: true, priority: true, status: true },
+          orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
+        },
       },
       orderBy: { sort_order: 'asc' },
     }),
@@ -74,7 +77,13 @@ export default async function SoloProductPage({ params }: Props) {
   const unassignedStories: UnassignedStory[] = rawUnassigned.map(s => ({
     id: s.id,
     title: s.title,
-    task_count: s._count.tasks,
+    tasks: s.tasks.map(t => ({
+      id: t.id,
+      title: t.title,
+      description: t.description,
+      priority: t.priority,
+      status: t.status,
+    })),
   }))
 
   return (
diff --git a/components/solo/unassigned-stories-sheet.tsx b/components/solo/unassigned-stories-sheet.tsx
index 8d35690..b6ccbb5 100644
--- a/components/solo/unassigned-stories-sheet.tsx
+++ b/components/solo/unassigned-stories-sheet.tsx
@@ -8,11 +8,20 @@ import {
 } from '@/components/ui/sheet'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { claimStoryAction } from '@/actions/stories'
+import { cn } from '@/lib/utils'
+
+export interface UnassignedStoryTask {
+  id: string
+  title: string
+  description: string | null
+  priority: number
+  status: string
+}
 
 export interface UnassignedStory {
   id: string
   title: string
-  task_count: number
+  tasks: UnassignedStoryTask[]
 }
 
 interface UnassignedStoriesSheetProps {
@@ -24,6 +33,60 @@ interface UnassignedStoriesSheetProps {
   onClaim: (storyId: string) => void
 }
 
+const PRIORITY_BORDER: Record<number, string> = {
+  1: 'border-l-2 border-l-priority-critical',
+  2: 'border-l-2 border-l-priority-high',
+  3: 'border-l-2 border-l-priority-medium',
+  4: 'border-l-2 border-l-priority-low',
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  TO_DO: 'bg-status-todo/15 text-status-todo',
+  IN_PROGRESS: 'bg-status-in-progress/15 text-status-in-progress',
+  REVIEW: 'bg-status-in-progress/15 text-status-in-progress',
+  DONE: 'bg-status-done/15 text-status-done',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  TO_DO: 'To Do',
+  IN_PROGRESS: 'Bezig',
+  REVIEW: 'Review',
+  DONE: 'Klaar',
+}
+
+const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
+
+function TaskRow({ task }: { task: UnassignedStoryTask }) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      aria-expanded={expanded}
+      onClick={() => setExpanded(e => !e)}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setExpanded(v => !v) } }}
+      className={cn(
+        'px-3 py-2 cursor-pointer select-none',
+        PRIORITY_BORDER[task.priority],
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <span className="flex-1 text-sm text-foreground truncate">{task.title}</span>
+        <span className={cn('text-xs px-1.5 py-0.5 rounded shrink-0', STATUS_COLORS[task.status] ?? STATUS_COLORS.TO_DO)}>
+          {STATUS_LABELS[task.status] ?? task.status}
+        </span>
+        <span className="text-xs text-muted-foreground shrink-0">{PRIORITY_LABELS[task.priority]}</span>
+      </div>
+      {expanded && (
+        <p className="mt-1 text-xs text-muted-foreground whitespace-pre-wrap">
+          {task.description ?? 'Geen beschrijving.'}
+        </p>
+      )}
+    </div>
+  )
+}
+
 function ClaimButton({ isDemo }: { isDemo: boolean }) {
   const { pending } = useFormStatus()
   return (
@@ -53,16 +116,25 @@ function ClaimStoryRow({
   }
 
   return (
-    <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border bg-surface-container">
-      <div className="flex-1 min-w-0">
-        <p className="text-sm text-foreground truncate">{story.title}</p>
-        <p className="text-xs text-muted-foreground">
-          {story.task_count} {story.task_count === 1 ? 'taak' : 'taken'}
-        </p>
+    <div className="rounded-lg border border-border bg-surface-container overflow-hidden">
+      <div className="flex items-center gap-3 px-3 py-2.5">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-foreground truncate">{story.title}</p>
+          <p className="text-xs text-muted-foreground">
+            {story.tasks.length} {story.tasks.length === 1 ? 'taak' : 'taken'}
+          </p>
+        </div>
+        <form action={formAction}>
+          <ClaimButton isDemo={isDemo} />
+        </form>
       </div>
-      <form action={formAction}>
-        <ClaimButton isDemo={isDemo} />
-      </form>
+      {story.tasks.length > 0 && (
+        <div className="border-t border-border divide-y divide-border">
+          {story.tasks.map(task => (
+            <TaskRow key={task.id} task={task} />
+          ))}
+        </div>
+      )}
     </div>
   )
 }