From b8eb724d17e0c0f68e4a6f79310c35d4a5c7b40b Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Fri, 15 May 2026 03:54:16 +0200
Subject: [PATCH] feat(ideas): voeg IdeasFilterPopover component toe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nieuwe client-component met multi-select statusfilter popover voor het
Ideeënscherm; hergebruikt MultiFilterPills uit backlog-filter-popover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/ideas/ideas-filter-popover.tsx | 69 +++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 components/ideas/ideas-filter-popover.tsx

diff --git a/components/ideas/ideas-filter-popover.tsx b/components/ideas/ideas-filter-popover.tsx
new file mode 100644
index 0000000..f3d0c78
--- /dev/null
+++ b/components/ideas/ideas-filter-popover.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { MultiFilterPills } from '@/components/shared/backlog-filter-popover'
+import { debugProps } from '@/lib/debug'
+import type { IdeaStatusApi } from '@/lib/idea-status'
+
+interface IdeasFilterPopoverProps {
+  open: boolean
+  onOpenChange: (o: boolean) => void
+  statusOptions: Array<{ value: IdeaStatusApi; label: string }>
+  selected: Set<IdeaStatusApi>
+  onToggle: (v: IdeaStatusApi) => void
+  onClear: () => void
+  activeFilterCount: number
+}
+
+export function IdeasFilterPopover({
+  open,
+  onOpenChange,
+  statusOptions,
+  selected,
+  onToggle,
+  onClear,
+  activeFilterCount,
+}: IdeasFilterPopoverProps) {
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 text-xs"
+            {...debugProps('ideas-filter-popover__trigger')}
+          >
+            {`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
+          </Button>
+        }
+      />
+      <PopoverContent
+        align="end"
+        className="w-72 space-y-4"
+        {...debugProps('ideas-filter-popover', 'IdeasFilterPopover', 'components/ideas/ideas-filter-popover.tsx')}
+      >
+        <MultiFilterPills
+          label="Status"
+          options={statusOptions}
+          selected={selected}
+          onToggle={onToggle}
+          onClear={onClear}
+        />
+        <div className="flex justify-end pt-1 border-t border-border">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 text-xs"
+            disabled={activeFilterCount === 0}
+            onClick={onClear}
+          >
+            Wis filters
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}