fix(PBI-63): sprint-switcher naar productpagina-header in productstijl

- Verwijdert setActiveSprintCookie uit sprint board page (kon geen cookie
  schrijven vanuit een Server Component — alleen Server Action / Route Handler)
- Verplaatst sprint-pulldown uit NavBar naar de productpagina action-row
  (dezelfde rij als 'Sprint starten' / 'Instellingen')
- Nieuwe SprintSwitcher-component in zelfde stijl als product-dropdown:
  truncated tekst + ChevronDown, geen status-badges
- NavBar krijgt activeSprintId voor sprint-link href; layout fetcht alleen
  nog activeSprint-id (geen volledige sprints[] meer)

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

app/(app)/layout.tsx

@@ -3,7 +3,6 @@ import { requireSession } from '@/lib/auth-guard'
 import { prisma } from '@/lib/prisma'
 import { productAccessFilter } from '@/lib/product-access'
 import { resolveActiveSprint } from '@/lib/active-sprint'
-import { sprintStatusToApi, type SprintStatusApi } from '@/lib/task-status'
 import { NavBar } from '@/components/shared/nav-bar'
 import { MinWidthBanner } from '@/components/shared/min-width-banner'
 import { StatusBar } from '@/components/shared/status-bar'
@@ -38,9 +37,8 @@ export default async function AppLayout({ children }: { children: React.ReactNod
 
   // Resolve active product — clear stale reference if archived or inaccessible
   let activeProduct: { id: string; name: string } | null = null
-  let sprints: { id: string; code: string; status: SprintStatusApi }[] = []
+  let activeSprintId: string | null = null
-  let activeSprint: { id: string; code: string; status: SprintStatusApi } | null = null
+  let hasActiveSprint = false
-  let buildingSprintIds: string[] = []
   if (user.active_product_id) {
     const product = await prisma.product.findFirst({
       where: { id: user.active_product_id, archived: false, ...productAccessFilter(session.userId) },
@@ -48,30 +46,9 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     })
     if (product) {
       activeProduct = product
-      const allSprints = await prisma.sprint.findMany({
-        where: { product_id: product.id },
-        orderBy: { created_at: 'desc' },
-        select: { id: true, code: true, status: true },
-      })
-      sprints = allSprints.map(s => ({
-        id: s.id,
-        code: s.code,
-        status: sprintStatusToApi(s.status),
-      }))
       const resolved = await resolveActiveSprint(product.id)
-      activeSprint = resolved
+      activeSprintId = resolved?.id ?? null
-        ? { id: resolved.id, code: resolved.code, status: sprintStatusToApi(resolved.status) }
+      hasActiveSprint = !!resolved
-        : null
-      if (allSprints.length > 0) {
-        const runs = await prisma.sprintRun.findMany({
-          where: {
-            sprint_id: { in: allSprints.map(s => s.id) },
-            status: { in: ['QUEUED', 'RUNNING'] },
-          },
-          select: { sprint_id: true },
-        })
-        buildingSprintIds = Array.from(new Set(runs.map(r => r.sprint_id)))
-      }
     } else {
       await prisma.user.update({
         where: { id: session.userId },
@@ -94,9 +71,8 @@ export default async function AppLayout({ children }: { children: React.ReactNod
         email={user.email}
         activeProduct={activeProduct}
         products={accessibleProducts}
-        sprints={sprints}
+        hasActiveSprint={hasActiveSprint}
-        activeSprint={activeSprint}
+        activeSprintId={activeSprintId}
-        buildingSprintIds={buildingSprintIds}
         minQuotaPct={user.min_quota_pct}
       />
       <MinWidthBanner />

app/(app)/products/[id]/page.tsx

@@ -14,8 +14,10 @@ import { TaskDialog } from '@/app/_components/tasks/task-dialog'
 import { EditTaskLoader } from '@/app/_components/tasks/edit-task-loader'
 import { TaskDialogSkeleton } from '@/app/_components/tasks/task-dialog-skeleton'
 import { StartSprintButton } from '@/components/sprint/start-sprint-button'
+import { SprintSwitcher } from '@/components/sprint/sprint-switcher'
 import { ActivateProductButton } from '@/components/shared/activate-product-button'
 import { EditProductButton } from '@/components/products/edit-product-button'
+import { resolveActiveSprint } from '@/lib/active-sprint'
 import Link from 'next/link'
 
 interface Props {
@@ -33,9 +35,14 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
   const product = await getAccessibleProduct(id, session.userId)
   if (!product) notFound()
 
-  const [activeSprint, user] = await Promise.all([
+  const [allSprints, user, activeSprint] = await Promise.all([
-    prisma.sprint.findFirst({ where: { product_id: id, status: 'OPEN' } }),
+    prisma.sprint.findMany({
+      where: { product_id: id },
+      orderBy: { created_at: 'desc' },
+      select: { id: true, code: true },
+    }),
     prisma.user.findUnique({ where: { id: session.userId! }, select: { active_product_id: true } }),
+    resolveActiveSprint(id),
   ])
 
   const pbis = await prisma.pbi.findMany({
@@ -99,12 +106,15 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
           {user?.active_product_id !== id && (
             <ActivateProductButton productId={id} isDemo={isDemo} redirectTo={`/products/${id}`} />
           )}
-          {activeSprint ? (
+          {allSprints.length > 0 && (
-            <Link href={`/products/${id}/sprint`} className="text-xs text-primary hover:underline font-medium">
+            <SprintSwitcher
-              Sprint actief →
+              productId={id}
-            </Link>
+              sprints={allSprints}
-          ) : (
+              activeSprintId={activeSprint?.id ?? null}
-            !isDemo && <StartSprintButton productId={id} />
+            />
+          )}
+          {!isDemo && !activeSprint && (
+            <StartSprintButton productId={id} />
           )}
           {!isDemo && product.user_id === session.userId && (
             <EditProductButton

app/(app)/products/[id]/sprint/[sprintId]/page.tsx

@@ -4,7 +4,6 @@ import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
 import { prisma } from '@/lib/prisma'
 import { pbiStatusToApi } from '@/lib/task-status'
-import { setActiveSprintCookie } from '@/lib/active-sprint'
 import { SprintBoardClient } from '@/components/sprint/sprint-board-client'
 import { SprintHeader } from '@/components/sprint/sprint-header'
 import { SprintRunControls } from '@/components/sprint/sprint-run-controls'
@@ -48,8 +47,6 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
   })
   if (!sprint) notFound()
 
-  await setActiveSprintCookie(id, sprint.id)
-
   const activeSprintRun = await prisma.sprintRun.findFirst({
     where: {
       sprint_id: sprint.id,

components/shared/nav-bar.tsx

@@ -5,8 +5,8 @@ import { usePathname, useRouter } from 'next/navigation'
 import { useTransition } from 'react'
 import { ChevronDown } from 'lucide-react'
 import { toast } from 'sonner'
-import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Badge } from '@/components/ui/badge'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,10 +20,6 @@ import { NotificationsBell } from '@/components/shared/notifications-bell'
 import { SoloNavStatusIndicators } from '@/components/solo/nav-status-indicators'
 import { cn } from '@/lib/utils'
 import { setActiveProductAction } from '@/actions/active-product'
-import { setActiveSprintAction } from '@/actions/active-sprint'
-import type { SprintStatusApi } from '@/lib/task-status'
-
-type SprintItem = { id: string; code: string; status: SprintStatusApi }
 
 interface NavBarProps {
   isDemo: boolean
@@ -33,26 +29,11 @@ interface NavBarProps {
   email: string | null
   activeProduct: { id: string; name: string } | null
   products: { id: string; name: string }[]
-  sprints: SprintItem[]
+  hasActiveSprint: boolean
-  activeSprint: SprintItem | null
+  activeSprintId: string | null
-  buildingSprintIds: string[]
   minQuotaPct: number
 }
 
-const SPRINT_STATUS_LABEL: Record<SprintStatusApi, string> = {
-  open: 'Open',
-  closed: 'Gesloten',
-  archived: 'Gearchiveerd',
-  failed: 'Mislukt',
-}
-
-const SPRINT_STATUS_BADGE: Record<SprintStatusApi, string> = {
-  open: 'bg-status-in-progress text-foreground',
-  closed: 'bg-status-done text-foreground',
-  archived: 'bg-surface-container text-muted-foreground',
-  failed: 'bg-status-failed text-foreground',
-}
-
 export function NavBar({
   isDemo,
   roles,
@@ -61,16 +42,13 @@ export function NavBar({
   email,
   activeProduct,
   products,
-  sprints,
+  hasActiveSprint,
-  activeSprint,
+  activeSprintId,
-  buildingSprintIds,
   minQuotaPct,
 }: NavBarProps) {
   const pathname = usePathname()
   const router = useRouter()
   const [isPending, startTransition] = useTransition()
-  const buildingSet = new Set(buildingSprintIds)
-  const hasActiveSprint = !!activeSprint
 
   function handleSwitchProduct(productId: string) {
     startTransition(async () => {
@@ -85,23 +63,6 @@ export function NavBar({
     })
   }
 
-  function handleSwitchSprint(sprintId: string) {
-    if (!activeProduct) return
-    if (sprintId === activeSprint?.id) return
-    startTransition(async () => {
-      const result = await setActiveSprintAction(activeProduct.id, sprintId)
-      if (result?.error) {
-        toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
-        return
-      }
-      if (pathname.includes('/sprint')) {
-        router.push(`/products/${activeProduct.id}/sprint/${sprintId}`)
-      } else {
-        router.refresh()
-      }
-    })
-  }
-
   const activeId = activeProduct?.id ?? null
 
   // Nav link helpers
@@ -147,7 +108,9 @@ export function NavBar({
         </TooltipProvider>
       )
     }
-    const href = `/products/${activeId}/sprint/${activeSprint!.id}`
+    const href = activeSprintId
+      ? `/products/${activeId}/sprint/${activeSprintId}`
+      : `/products/${activeId}/sprint`
     return navLink(href, 'Sprint', isActive)
   }
 
@@ -190,8 +153,8 @@ export function NavBar({
         </nav>
       </div>
 
-      {/* Midden: actief product + sprint, gestapeld */}
+      {/* Midden: actief product dropdown */}
-      <div className="flex flex-col items-center justify-center gap-0.5">
+      <div className="flex items-center justify-center">
         {activeProduct ? (
           <DropdownMenu>
             <DropdownMenuTrigger
@@ -228,70 +191,6 @@ export function NavBar({
         ) : (
           <span className="text-sm text-muted-foreground/50 select-none">Geen actief product</span>
         )}
-
-        {activeProduct && (
-          sprints.length === 0 ? (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger
-                  className="text-xs text-muted-foreground/50 px-2 cursor-not-allowed select-none"
-                  aria-disabled="true"
-                >
-                  Geen sprints
-                </TooltipTrigger>
-                <TooltipContent>Maak een sprint aan vanuit de Product Backlog</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          ) : (
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                disabled={isPending}
-                className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
-              >
-                <span className="truncate max-w-[160px]">
-                  {activeSprint ? activeSprint.code : 'Selecteer sprint'}
-                </span>
-                {activeSprint && (
-                  <Badge
-                    className={cn(
-                      'text-[10px] px-1.5 py-0',
-                      buildingSet.has(activeSprint.id)
-                        ? 'bg-warning text-warning-foreground'
-                        : SPRINT_STATUS_BADGE[activeSprint.status],
-                    )}
-                  >
-                    {buildingSet.has(activeSprint.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[activeSprint.status]}
-                  </Badge>
-                )}
-                <ChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="center" className="w-64">
-                {sprints.map(s => (
-                  <DropdownMenuItem
-                    key={s.id}
-                    onClick={() => handleSwitchSprint(s.id)}
-                    className={cn(
-                      'flex items-center justify-between gap-2',
-                      s.id === activeSprint?.id && 'bg-primary-container text-primary-container-foreground font-medium',
-                    )}
-                  >
-                    <span className="truncate">{s.code}</span>
-                    <Badge
-                      className={cn(
-                        'text-[10px] px-1.5 py-0 shrink-0',
-                        buildingSet.has(s.id)
-                          ? 'bg-warning text-warning-foreground'
-                          : SPRINT_STATUS_BADGE[s.status],
-                      )}
-                    >
-                      {buildingSet.has(s.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[s.status]}
-                    </Badge>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )
-        )}
       </div>
 
       {/* Rechts: solo-status + notifications + account-menu */}

components/sprint/sprint-switcher.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { useTransition } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { ChevronDown } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+import { setActiveSprintAction } from '@/actions/active-sprint'
+
+type SprintItem = { id: string; code: string }
+
+interface SprintSwitcherProps {
+  productId: string
+  sprints: SprintItem[]
+  activeSprintId: string | null
+  className?: string
+}
+
+export function SprintSwitcher({
+  productId,
+  sprints,
+  activeSprintId,
+  className,
+}: SprintSwitcherProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const [isPending, startTransition] = useTransition()
+
+  if (sprints.length === 0) return null
+
+  const active = sprints.find(s => s.id === activeSprintId) ?? sprints[0]
+
+  function handleSwitch(sprintId: string) {
+    if (sprintId === active.id) return
+    startTransition(async () => {
+      const result = await setActiveSprintAction(productId, sprintId)
+      if (result?.error) {
+        toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
+        return
+      }
+      if (pathname.includes('/sprint')) {
+        router.push(`/products/${productId}/sprint/${sprintId}`)
+      } else {
+        router.refresh()
+      }
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        disabled={isPending}
+        className={cn(
+          'flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none',
+          className,
+        )}
+      >
+        <span className="truncate max-w-[180px]">
+          {active.code.length > 22 ? active.code.slice(0, 22) + '…' : active.code}
+        </span>
+        <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="w-56">
+        {sprints.map(s => (
+          <DropdownMenuItem
+            key={s.id}
+            onClick={() => handleSwitch(s.id)}
+            className={cn(
+              s.id === active.id && 'bg-primary-container text-primary-container-foreground font-medium',
+            )}
+          >
+            <span className="truncate">{s.code}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}