feat(sprint): filter popover op Product-Backlog-kolom

Spiegelt het filter-patroon van de Product Backlog-pagina (PbiList) naar de
Sprint-Product-Backlog-kolom: prioriteit + status pills, actieve-filter chips,
localStorage-persistentie. Bestaande collapse-/expand-/alleen-niet-klaar-knoppen
blijven naast de popover staan.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/sprint/sprint-backlog.tsx

@@ -1,12 +1,14 @@
 'use client'
 
-import { useState, useTransition } from 'react'
+import { useState, useTransition, useEffect } from 'react'
 import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter } from 'lucide-react'
 import { useDroppable, useDraggable } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { toast } from 'sonner'
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { CodeBadge } from '@/components/shared/code-badge'
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem,
@@ -17,6 +19,7 @@ import { UserAvatar } from '@/components/shared/user-avatar'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
+import { PRIORITY_COLORS } from '@/components/shared/priority-select'
 import { useSprintStore } from '@/stores/sprint-store'
 import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
@@ -304,6 +307,65 @@ export function SprintBacklogLeft({
 
 // --- Right panel: Product Backlog grouped by PBI ---
 
+const PRIORITY_LABELS_SPRINT: Record<number, string> = {
+  1: 'Kritiek',
+  2: 'Hoog',
+  3: 'Gemiddeld',
+  4: 'Laag',
+}
+
+const PRIORITY_OPTIONS_SPRINT: Array<{ value: number | 'all'; label: string }> = [
+  { value: 'all', label: 'Alle' },
+  { value: 1, label: 'Kritiek' },
+  { value: 2, label: 'Hoog' },
+  { value: 3, label: 'Gemiddeld' },
+  { value: 4, label: 'Laag' },
+]
+
+type StoryStatusFilter = 'OPEN' | 'IN_SPRINT' | 'DONE' | 'all'
+
+const STATUS_OPTIONS_SPRINT: Array<{ value: StoryStatusFilter; label: string }> = [
+  { value: 'all', label: 'Alle' },
+  { value: 'OPEN', label: 'Open' },
+  { value: 'IN_SPRINT', label: 'In Sprint' },
+  { value: 'DONE', label: 'Klaar' },
+]
+
+function FilterPills<T extends string | number>({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string
+  options: Array<{ value: T; label: string }>
+  value: T
+  onChange: (v: T) => void
+}) {
+  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">
+        {options.map((opt) => (
+          <button
+            key={String(opt.value)}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            className={cn(
+              'text-xs px-2.5 py-1 rounded-full border transition-colors',
+              value === opt.value
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-transparent border-border hover:bg-surface-container'
+            )}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function DraggablePbiStoryRow({
   story,
   isDemo,
@@ -384,8 +446,46 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
     }
     return auto
   })
+  const [filterPriority, setFilterPriority] = useState<number | 'all'>('all')
+  const [filterStatus, setFilterStatus] = useState<StoryStatusFilter>('all')
+  const [prefsLoaded, setPrefsLoaded] = useState(false)
   const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
 
+  // Hydrate filter prefs from localStorage post-mount (avoids SSR mismatch).
+  // setState calls here are intentional: hydrating from localStorage on first paint.
+  useEffect(() => {
+    const savedPriority = localStorage.getItem('scrum4me:sprint_pb_filter_priority')
+    if (savedPriority && savedPriority !== 'all') {
+      const n = parseInt(savedPriority, 10)
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      if (Number.isInteger(n) && n >= 1 && n <= 4) setFilterPriority(n)
+    }
+    const savedStatus = localStorage.getItem('scrum4me:sprint_pb_filter_status')
+    if (savedStatus === 'OPEN' || savedStatus === 'IN_SPRINT' || savedStatus === 'DONE') {
+       
+      setFilterStatus(savedStatus)
+    }
+     
+    setPrefsLoaded(true)
+  }, [])
+
+  useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:sprint_pb_filter_priority', String(filterPriority)) }, [filterPriority, prefsLoaded])
+  useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:sprint_pb_filter_status', filterStatus) }, [filterStatus, prefsLoaded])
+
+  const filteredPbis = pbisWithStories
+    .map(pbi => ({
+      ...pbi,
+      stories: pbi.stories.filter(s =>
+        (filterPriority === 'all' || s.priority === filterPriority) &&
+        (filterStatus === 'all' || s.status === filterStatus)
+      ),
+    }))
+    .filter(pbi => pbi.stories.length > 0)
+
+  const activeFilterCount =
+    (filterPriority !== 'all' ? 1 : 0) +
+    (filterStatus !== 'all' ? 1 : 0)
+
   function toggle(pbiId: string) {
     setCollapsed(prev => {
       const next = new Set(prev)
@@ -395,7 +495,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
   }
 
   function collapseAll() {
-    setCollapsed(new Set(pbisWithStories.map(p => p.id)))
+    setCollapsed(new Set(filteredPbis.map(p => p.id)))
   }
 
   function expandAll() {
@@ -404,7 +504,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
 
   function onlyNotDone() {
     const auto = new Set<string>()
-    for (const pbi of pbisWithStories) {
+    for (const pbi of filteredPbis) {
       if (pbi.stories.length > 0 && pbi.stories.every(s => s.status === 'DONE')) {
         auto.add(pbi.id)
       }
@@ -412,32 +512,96 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
     setCollapsed(auto)
   }
 
-  const collapseActions = (
+  const headerActions = (
-    <TooltipProvider>
+    <>
-      <Tooltip>
+      {filterPriority !== 'all' && (
-        <TooltipTrigger onClick={collapseAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles inklappen">
+        <button
-          <ChevronsUp size={14} />
+          onClick={() => setFilterPriority('all')}
-        </TooltipTrigger>
+          className="flex items-center gap-1 text-xs text-primary hover:underline"
-        <TooltipContent>Alles inklappen</TooltipContent>
+          aria-label="Wis prioriteitsfilter"
-      </Tooltip>
+        >
-      <Tooltip>
+          <Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
-        <TooltipTrigger onClick={expandAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles uitklappen">
+            {PRIORITY_LABELS_SPRINT[filterPriority]}
-          <ChevronsDown size={14} />
+          </Badge>
-        </TooltipTrigger>
+          <span>×</span>
-        <TooltipContent>Alles uitklappen</TooltipContent>
+        </button>
-      </Tooltip>
+      )}
-      <Tooltip>
+      {filterStatus !== 'all' && (
-        <TooltipTrigger onClick={onlyNotDone} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alleen niet klaar">
+        <button
-          <ListFilter size={14} />
+          onClick={() => setFilterStatus('all')}
-        </TooltipTrigger>
+          className="flex items-center gap-1 text-xs text-primary hover:underline"
-        <TooltipContent>Alleen niet klaar</TooltipContent>
+          aria-label="Wis statusfilter"
-      </Tooltip>
+        >
-    </TooltipProvider>
+          <Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[filterStatus])}>
+            {STATUS_LABELS[filterStatus]}
+          </Badge>
+          <span>×</span>
+        </button>
+      )}
+      <Popover>
+        <PopoverTrigger
+          render={
+            <Button variant="outline" size="sm" className="h-7 text-xs">
+              {`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
+            </Button>
+          }
+        />
+        <PopoverContent align="end" className="w-72 space-y-4">
+          <FilterPills
+            label="Prioriteit"
+            options={PRIORITY_OPTIONS_SPRINT}
+            value={filterPriority}
+            onChange={setFilterPriority}
+          />
+          <FilterPills
+            label="Status"
+            options={STATUS_OPTIONS_SPRINT}
+            value={filterStatus}
+            onChange={setFilterStatus}
+          />
+          <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={() => {
+                setFilterPriority('all')
+                setFilterStatus('all')
+              }}
+            >
+              Wis filters
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger onClick={collapseAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles inklappen">
+            <ChevronsUp size={14} />
+          </TooltipTrigger>
+          <TooltipContent>Alles inklappen</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger onClick={expandAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles uitklappen">
+            <ChevronsDown size={14} />
+          </TooltipTrigger>
+          <TooltipContent>Alles uitklappen</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger onClick={onlyNotDone} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alleen niet klaar">
+            <ListFilter size={14} />
+          </TooltipTrigger>
+          <TooltipContent>Alleen niet klaar</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </>
   )
 
   return (
     <div className="flex flex-col h-full">
-      <PanelNavBar title="Product Backlog" actions={collapseActions} />
+      <PanelNavBar title="Product Backlog" actions={headerActions} />
       <div
         ref={setNodeRef}
         className={cn(
@@ -445,7 +609,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
           isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'
         )}
       >
-        {pbisWithStories.map(pbi => (
+        {filteredPbis.map(pbi => (
           <div key={pbi.id}>
             <button
               onClick={() => toggle(pbi.id)}