From d90d8a8aa2a5bff5231e9a85cbc56057486c777b Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Fri, 8 May 2026 01:57:59 +0200
Subject: [PATCH] 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>
---
 components/shared/sprint-switcher.tsx | 67 ++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 17 deletions(-)

diff --git a/components/shared/sprint-switcher.tsx b/components/shared/sprint-switcher.tsx
index d000426..28edcd6 100644
--- a/components/shared/sprint-switcher.tsx
+++ b/components/shared/sprint-switcher.tsx
@@ -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>
   )