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)/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([
-    prisma.sprint.findFirst({ where: { product_id: id, status: 'OPEN' } }),
+  const [allSprints, user, resolvedActiveSprint] = await Promise.all([
+    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 */}
-      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-end">
+      {/* 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-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>