feat: filter 'toon afgeronde sprints' in sprint-switcher dropdown

Default verbergt de switcher gesloten/gearchiveerde/mislukte sprints
(toont alleen open + de huidige actieve sprint). Toggle bovenaan de
lijst om alle sprints te tonen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-08 01:57:59 +02:00
parent b4aa5d9949
commit d90d8a8aa2

View file

@ -1,14 +1,15 @@
'use client'
import { usePathname, useRouter } from 'next/navigation'
import { useTransition } from 'react'
import { ChevronDown } from 'lucide-react'
import { useState, useTransition } from 'react'
import { Check, ChevronDown } from 'lucide-react'
import { toast } from 'sonner'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'
@ -40,8 +41,15 @@ export function SprintSwitcher({
const pathname = usePathname()
const router = useRouter()
const [isPending, startTransition] = useTransition()
const [showClosed, setShowClosed] = useState(false)
const buildingSet = new Set(buildingSprintIds)
const visibleSprints = sprints.filter(s => {
if (showClosed) return true
if (s.id === activeSprint?.id) return true
return s.status === 'open'
})
function handleSwitchSprint(sprintId: string) {
if (sprintId === activeSprint?.id) return
startTransition(async () => {
@ -96,27 +104,52 @@ export function SprintSwitcher({
<ChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
</DropdownMenuTrigger>
<DropdownMenuContent align="center" className="w-80">
{sprints.map(s => (
<DropdownMenuItem
key={s.id}
onClick={() => handleSwitchSprint(s.id)}
<button
type="button"
onClick={(e) => {
e.preventDefault()
setShowClosed(v => !v)
}}
className="flex items-center gap-2 w-full px-2 py-1.5 text-xs text-muted-foreground hover:bg-surface-container rounded-md"
>
<span
className={cn(
'flex items-center gap-2',
s.id === activeSprint?.id && 'bg-primary-container text-primary-container-foreground font-medium',
'inline-flex items-center justify-center w-3.5 h-3.5 rounded border',
showClosed ? 'bg-primary border-primary text-primary-foreground' : 'border-border',
)}
>
<span className="text-xs font-medium shrink-0">{s.code}</span>
<span className="text-xs truncate flex-1">{s.sprint_goal}</span>
<span
{showClosed && <Check className="w-3 h-3" />}
</span>
Toon afgeronde sprints
</button>
<DropdownMenuSeparator />
{visibleSprints.length === 0 ? (
<div className="px-2 py-2 text-xs text-muted-foreground/70 italic">
Geen open sprints
</div>
) : (
visibleSprints.map(s => (
<DropdownMenuItem
key={s.id}
onClick={() => handleSwitchSprint(s.id)}
className={cn(
'text-[10px] shrink-0',
buildingSet.has(s.id) ? 'text-warning' : 'text-muted-foreground',
'flex items-center gap-2',
s.id === activeSprint?.id && 'bg-primary-container text-primary-container-foreground font-medium',
)}
>
{buildingSet.has(s.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[s.status]}
</span>
</DropdownMenuItem>
))}
<span className="text-xs font-medium shrink-0">{s.code}</span>
<span className="text-xs truncate flex-1">{s.sprint_goal}</span>
<span
className={cn(
'text-[10px] shrink-0',
buildingSet.has(s.id) ? 'text-warning' : 'text-muted-foreground',
)}
>
{buildingSet.has(s.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[s.status]}
</span>
</DropdownMenuItem>
))
)}
</DropdownMenuContent>
</DropdownMenu>
)