From fdde95654d39ed55b79ca84b529bcb972b251f67 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Wed, 13 May 2026 15:16:42 +0200
Subject: [PATCH] feat(PBI-82): vervang inline checkboxlijst door Popover in
 idea-detail-layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/ideas/idea-detail-layout.tsx | 57 ++++++++++++++++---------
 1 file changed, 38 insertions(+), 19 deletions(-)

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>
       )}