From 8d6fbdfc3d135490aa0acc8d940f184efbf9d895 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Mon, 11 May 2026 17:53:45 +0200
Subject: [PATCH] =?UTF-8?q?fix(PBI-79):=20PBI-rij=20selecteert=20weer=20in?=
 =?UTF-8?q?=20A=E2=80=B2/B-modus;=20vinkje=20is=20aparte=20trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Voor PBI-79 maakte het hele PBI-kaartje in selectionMode (state A′ én B)
de toggle. Daardoor:
- klik op rij = bulk-toggle stories (teller liep op);
- geen setActivePbi, dus StoryPanel kreeg geen content.

Fix: in selectionMode wordt onClick = onSelect (PBI activeren → stories
laden) en de tri-state-iconen verhuizen naar een eigen <button> in de
actions-slot met stopPropagation. Toggle gedrag (bulk add/remove in B,
upsertPbiIntent in A′) blijft ongewijzigd via die knop.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/backlog/pbi-list.tsx | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index 45b01b7..a749228 100644
--- a/components/backlog/pbi-list.tsx
+++ b/components/backlog/pbi-list.tsx
@@ -124,7 +124,6 @@ function SortablePbiRow({
   }
 
   if (selectionMode) {
-    const isChecked = triState !== 'empty'
     return (
       <BacklogCard
         ref={setNodeRef}
@@ -132,24 +131,39 @@ function SortablePbiRow({
         title={pbi.title}
         code={pbi.code}
         priority={pbi.priority}
-        isSelected={isChecked}
+        isSelected={isSelected}
         role="button"
         tabIndex={0}
-        aria-pressed={isChecked}
-        onClick={onToggleCheck}
-        onKeyDown={(e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggleCheck() } }}
+        aria-pressed={isSelected}
+        onClick={onSelect}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            onSelect()
+          }
+        }}
         badge={
           <Badge className={cn('text-xs font-normal', PBI_STATUS_COLORS[pbi.status])}>
             {PBI_STATUS_LABELS[pbi.status]}
           </Badge>
         }
         actions={
-          <div
-            className="inline-flex items-center justify-center min-h-7 min-w-7 text-muted-foreground"
-            aria-hidden="true"
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              onToggleCheck()
+            }}
+            aria-pressed={triState !== 'empty'}
+            aria-label={
+              triState === 'full'
+                ? 'Stories uit sprint halen'
+                : 'Stories aan sprint toevoegen'
+            }
+            className="inline-flex items-center justify-center min-h-7 min-w-7 text-muted-foreground hover:text-foreground rounded transition-colors"
           >
             <TriStateIcon state={triState} />
-          </div>
+          </button>
         }
       />
     )