refactor: extraheer MultiFilterPills naar backlog-filter-popover

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

components/shared/backlog-filter-popover.tsx

@@ -58,6 +58,59 @@ export function FilterPills<T extends string | number>({
   )
 }
 
+export function MultiFilterPills<T extends string>({
+  label,
+  options,
+  selected,
+  onToggle,
+  onClear,
+}: {
+  label: string
+  options: Array<{ value: T; label: string }>
+  selected: Set<T>
+  onToggle: (v: T) => void
+  onClear: () => void
+}) {
+  const allActive = selected.size === 0
+  return (
+    <div className="space-y-1.5">
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
+      <div className="flex flex-wrap gap-1.5">
+        <button
+          type="button"
+          onClick={onClear}
+          className={cn(
+            'text-xs px-2.5 py-1 rounded-full border transition-colors',
+            allActive
+              ? 'bg-primary text-primary-foreground border-primary'
+              : 'bg-transparent border-border hover:bg-surface-container'
+          )}
+        >
+          Alle
+        </button>
+        {options.map((opt) => {
+          const active = selected.has(opt.value)
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => onToggle(opt.value)}
+              className={cn(
+                'text-xs px-2.5 py-1 rounded-full border transition-colors',
+                active
+                  ? 'bg-primary text-primary-foreground border-primary'
+                  : 'bg-transparent border-border hover:bg-surface-container'
+              )}
+            >
+              {opt.label}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
 interface BacklogFilterPopoverProps<S extends string, So extends string> {
   open: boolean
   onOpenChange: (open: boolean) => void