From 91190a58042269ea59fec0f971e99f4c94635e51 Mon Sep 17 00:00:00 2001
From: Janpeter Visser <30029041+madhura68@users.noreply.github.com>
Date: Wed, 13 May 2026 13:39:23 +0000
Subject: [PATCH] Sprint: kkkk (#195)

* feat(PBI-82): vervang inline checkboxlijst door Popover in idea-detail-layout

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

* fix(test): update sprint-switcher mock for renamed action + entities.settings shape

switchActiveSprintAction (renamed from setActiveSprintAction) and the new
entities.settings selector were added in PBI-82 but the test mock was not
updated, causing 3 test failures.

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

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../shared/sprint-switcher.test.tsx           | 10 ++--
 components/ideas/idea-detail-layout.tsx       | 57 ++++++++++++-------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/__tests__/components/shared/sprint-switcher.test.tsx b/__tests__/components/shared/sprint-switcher.test.tsx
index 8b1e2ec..ecbc6af 100644
--- a/__tests__/components/shared/sprint-switcher.test.tsx
+++ b/__tests__/components/shared/sprint-switcher.test.tsx
@@ -15,6 +15,8 @@ vi.mock('next/navigation', () => ({
 
 vi.mock('@/actions/active-sprint', () => ({
   setActiveSprintAction: vi.fn(),
+  switchActiveSprintAction: vi.fn(),
+  clearActiveSprintAction: vi.fn(),
 }))
 
 vi.mock('sonner', () => ({
@@ -23,8 +25,8 @@ vi.mock('sonner', () => ({
 
 const isDemoMock = { value: false }
 vi.mock('@/stores/user-settings/store', () => ({
-  useUserSettingsStore: (selector: (s: { context: { isDemo: boolean } }) => unknown) =>
-    selector({ context: { isDemo: isDemoMock.value } }),
+  useUserSettingsStore: (selector: (s: { context: { isDemo: boolean }; entities: { settings: { workflow: null } } }) => unknown) =>
+    selector({ context: { isDemo: isDemoMock.value }, entities: { settings: { workflow: null } } }),
 }))
 
 vi.mock('@/components/ui/dropdown-menu', () => {
@@ -54,11 +56,11 @@ vi.mock('@/components/ui/tooltip', () => {
   }
 })
 
-import { setActiveSprintAction } from '@/actions/active-sprint'
+import { switchActiveSprintAction } from '@/actions/active-sprint'
 import { toast } from 'sonner'
 import { SprintSwitcher } from '@/components/shared/sprint-switcher'
 
-const actionMock = setActiveSprintAction as unknown as ReturnType<typeof vi.fn>
+const actionMock = switchActiveSprintAction as unknown as ReturnType<typeof vi.fn>
 const toastError = toast.error as unknown as ReturnType<typeof vi.fn>
 const toastSuccess = toast.success as unknown as ReturnType<typeof vi.fn>
 
diff --git a/components/ideas/idea-detail-layout.tsx b/components/ideas/idea-detail-layout.tsx
index 0a86514..2f333d4 100644
--- a/components/ideas/idea-detail-layout.tsx
+++ b/components/ideas/idea-detail-layout.tsx
@@ -16,6 +16,7 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { getIdeaStatusBadge } from '@/lib/idea-status-colors'
 import type { IdeaStatusApi } from '@/lib/idea-status'
 import { isIdeaEditable } from '@/lib/idea-status'
@@ -363,25 +364,43 @@ function IdeaFormSection({ idea, products, isDemo, pending, secondaryProducts }:
       {products.filter((p) => p.id !== productId).length > 0 && (
         <div className="space-y-1">
           <label className="text-xs font-medium text-muted-foreground">Extra producten</label>
-          <div className="space-y-1">
-            {products
-              .filter((p) => p.id !== productId)
-              .map((p) => (
-                <label key={p.id} className="flex items-center gap-2 text-sm">
-                  <input
-                    type="checkbox"
-                    checked={selectedSecondary.includes(p.id)}
-                    onChange={(e) =>
-                      setSelectedSecondary((prev) =>
-                        e.target.checked ? [...prev, p.id] : prev.filter((id) => id !== p.id),
-                      )
-                    }
-                    disabled={!editable || pending || submitting}
-                  />
-                  {p.name}
-                </label>
-              ))}
-          </div>
+          <Popover>
+            <PopoverTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={!editable || pending || submitting}
+                >
+                  {selectedSecondary.length > 0
+                    ? `Extra producten (${selectedSecondary.length})`
+                    : 'Extra producten'}
+                </Button>
+              }
+            />
+            <PopoverContent align="start" className="w-64 space-y-1">
+              {products
+                .filter((p) => p.id !== productId)
+                .map((p) => (
+                  <label key={p.id} className="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={selectedSecondary.includes(p.id)}
+                      onChange={(e) =>
+                        setSelectedSecondary((prev) =>
+                          e.target.checked
+                            ? [...prev, p.id]
+                            : prev.filter((id) => id !== p.id),
+                        )
+                      }
+                      disabled={!editable || pending || submitting}
+                    />
+                    {p.name}
+                  </label>
+                ))}
+            </PopoverContent>
+          </Popover>
         </div>
       )}