refactor: sprint-switcher van NavBar naar product-header (#162)

* refactor: verplaats sprint-switcher van NavBar naar product-header

Sprint-pulldown zit nu in de bestaande balk op de product backlog
(naast Sprint starten / Instellingen) i.p.v. in het midden van de
NavBar. Alleen zichtbaar wanneer het product ook het actieve product
van de gebruiker is.

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

* chore: sync package-lock.json version naar 1.2.0

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

---------

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,7 @@ 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 hasActiveSprint = false
-  let activeSprint: { id: string; code: string; status: SprintStatusApi } | null = null
-  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 +45,8 @@ 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
+      hasActiveSprint = !!resolved
-        ? { id: resolved.id, code: resolved.code, status: sprintStatusToApi(resolved.status) }
-        : 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 +69,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
         email={user.email}
         activeProduct={activeProduct}
         products={accessibleProducts}
-        sprints={sprints}
+        hasActiveSprint={hasActiveSprint}
-        activeSprint={activeSprint}
-        buildingSprintIds={buildingSprintIds}
         minQuotaPct={user.min_quota_pct}
       />
       <MinWidthBanner />

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

@@ -3,7 +3,8 @@ import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
 import { prisma } from '@/lib/prisma'
-import { pbiStatusToApi } from '@/lib/task-status'
+import { pbiStatusToApi, sprintStatusToApi } from '@/lib/task-status'
+import { resolveActiveSprint } from '@/lib/active-sprint'
 import { BacklogSplitPane } from '@/components/backlog/backlog-split-pane'
 import { PbiList } from '@/components/backlog/pbi-list'
 import { StoryPanel } from '@/components/backlog/story-panel'
@@ -16,6 +17,7 @@ import { TaskDialogSkeleton } from '@/app/_components/tasks/task-dialog-skeleton
 import { StartSprintButton } from '@/components/sprint/start-sprint-button'
 import { ActivateProductButton } from '@/components/shared/activate-product-button'
 import { EditProductButton } from '@/components/products/edit-product-button'
+import { SprintSwitcher } from '@/components/shared/sprint-switcher'
 import Link from 'next/link'
 
 interface Props {
@@ -33,10 +35,42 @@ 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, resolvedActiveSprint] = 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, status: true },
+    }),
     prisma.user.findUnique({ where: { id: session.userId! }, select: { active_product_id: true } }),
+    resolveActiveSprint(id),
   ])
+  const hasOpenSprint = allSprints.some(s => s.status === 'OPEN')
+
+  let buildingSprintIds: string[] = []
+  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)))
+  }
+
+  const sprintItems = allSprints.map(s => ({
+    id: s.id,
+    code: s.code,
+    status: sprintStatusToApi(s.status),
+  }))
+  const activeSprintItem = resolvedActiveSprint
+    ? {
+        id: resolvedActiveSprint.id,
+        code: resolvedActiveSprint.code,
+        status: sprintStatusToApi(resolvedActiveSprint.status),
+      }
+    : null
+  const isActiveProduct = user?.active_product_id === id
 
   const pbis = await prisma.pbi.findMany({
     where: { product_id: id },
@@ -93,13 +127,23 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
 
   return (
     <div className="flex flex-col h-full">
-      {/* Product header — actions only; product-naam zit al in NavBar */}
+      {/* Product header — sprint-switcher links, actions rechts */}
-      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-end">
+      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between gap-3">
         <div className="flex items-center gap-3">
-          {user?.active_product_id !== id && (
+          {isActiveProduct && (
+            <SprintSwitcher
+              productId={id}
+              sprints={sprintItems}
+              activeSprint={activeSprintItem}
+              buildingSprintIds={buildingSprintIds}
+            />
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {!isActiveProduct && (
             <ActivateProductButton productId={id} isDemo={isDemo} redirectTo={`/products/${id}`} />
           )}
-          {activeSprint ? (
+          {hasOpenSprint ? (
             <Link href={`/products/${id}/sprint`} className="text-xs text-primary hover:underline font-medium">
               Sprint actief →
             </Link>

components/shared/nav-bar.tsx

@@ -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,10 @@ interface NavBarProps {
   email: string | null
   activeProduct: { id: string; name: string } | null
   products: { id: string; name: string }[]
-  sprints: SprintItem[]
+  hasActiveSprint: boolean
-  activeSprint: SprintItem | 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 +41,12 @@ export function NavBar({
   email,
   activeProduct,
   products,
-  sprints,
+  hasActiveSprint,
-  activeSprint,
-  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 +61,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 +106,7 @@ export function NavBar({
         </TooltipProvider>
       )
     }
-    const href = `/products/${activeId}/sprint/${activeSprint!.id}`
+    const href = `/products/${activeId}/sprint`
     return navLink(href, 'Sprint', isActive)
   }
 
@@ -190,8 +149,8 @@ export function NavBar({
         </nav>
       </div>
 
-      {/* Midden: actief product + sprint, gestapeld */}
+      {/* Midden: actief product */}
-      <div className="flex flex-col items-center justify-center gap-0.5">
+      <div className="flex items-center justify-center">
         {activeProduct ? (
           <DropdownMenu>
             <DropdownMenuTrigger
@@ -228,70 +187,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/shared/sprint-switcher.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+import { setActiveSprintAction } from '@/actions/active-sprint'
+import type { SprintStatusApi } from '@/lib/task-status'
+
+type SprintItem = { id: string; code: string; status: SprintStatusApi }
+
+interface SprintSwitcherProps {
+  productId: string
+  sprints: SprintItem[]
+  activeSprint: SprintItem | null
+  buildingSprintIds: string[]
+}
+
+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 SprintSwitcher({
+  productId,
+  sprints,
+  activeSprint,
+  buildingSprintIds,
+}: SprintSwitcherProps) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+  const buildingSet = new Set(buildingSprintIds)
+
+  function handleSwitchSprint(sprintId: string) {
+    if (sprintId === activeSprint?.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()
+      }
+    })
+  }
+
+  if (sprints.length === 0) {
+    return (
+      <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>
+    )
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        disabled={isPending}
+        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 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="start" 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>
+  )
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "scrum4me",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "scrum4me",
-      "version": "1.0.0",
+      "version": "1.2.0",
       "hasInstallScript": true,
       "dependencies": {
         "@base-ui/react": "^1.4.1",