refactor: extraheer MultiFilterPills naar backlog-filter-popover

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

components/jobs/jobs-column.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
 import JobCard from './job-card'
 import { JOB_STATUS_LABELS } from '@/components/shared/job-status'
+import { MultiFilterPills } from '@/components/shared/backlog-filter-popover'
 import { jobStatusToApi, type ClaudeJobStatusApi } from '@/lib/job-status'
 import { useUserSettingsStore } from '@/stores/user-settings/store'
 import { isWithinTimeWindow, DEFAULT_JOBS_TIME_FILTER } from '@/lib/jobs-time-filter'
@@ -34,59 +35,6 @@ const KIND_OPTIONS: Array<{ value: ClaudeJobKind; label: string }> = [
 
 const KIND_VALUES = new Set<ClaudeJobKind>(KIND_OPTIONS.map((o) => o.value))
 
-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 JobsColumnProps {
   title: string
   jobs: JobWithRelations[]

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