feat(ideas): voeg IdeasFilterPopover component toe

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>
This commit is contained in:
Scrum4Me Agent 2026-05-15 03:54:16 +02:00
parent 33d6d629c4
commit b8eb724d17

View file

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