feat: sprint-switcher op solo- en sprint-board pagina's

Sprint-switcher is nu beschikbaar op de drie hoofdpagina's: product
backlog, solo board en sprint board. Allen renderen 'm in een
gecentreerde balk net onder de NavBar. Sprint-data via gedeelde helper
getSprintSwitcherData.

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

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

@@ -3,8 +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, sprintStatusToApi } from '@/lib/task-status'
-import { resolveActiveSprint } from '@/lib/active-sprint'
+import { pbiStatusToApi } from '@/lib/task-status'
+import { getSprintSwitcherData } from '@/lib/sprint-switcher-data'
 import { BacklogSplitPane } from '@/components/backlog/backlog-split-pane'
 import { PbiList } from '@/components/backlog/pbi-list'
 import { StoryPanel } from '@/components/backlog/story-panel'
@@ -35,46 +35,12 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
   const product = await getAccessibleProduct(id, session.userId)
   if (!product) notFound()
 
-  const [allSprints, user, resolvedActiveSprint] = await Promise.all([
-    prisma.sprint.findMany({
-      where: { product_id: id },
-      orderBy: { created_at: 'desc' },
-      select: { id: true, code: true, sprint_goal: true, status: true },
-    }),
+  const [user, switcherData] = await Promise.all([
     prisma.user.findUnique({ where: { id: session.userId! }, select: { active_product_id: true } }),
-    resolveActiveSprint(id),
+    getSprintSwitcherData(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,
-    sprint_goal: s.sprint_goal,
-    status: sprintStatusToApi(s.status),
-  }))
-  const activeSprintFromList = resolvedActiveSprint
-    ? allSprints.find(s => s.id === resolvedActiveSprint.id)
-    : null
-  const activeSprintItem = activeSprintFromList
-    ? {
-        id: activeSprintFromList.id,
-        code: activeSprintFromList.code,
-        sprint_goal: activeSprintFromList.sprint_goal,
-        status: sprintStatusToApi(activeSprintFromList.status),
-      }
-    : null
+  const { sprintItems, buildingSprintIds, activeSprintItem } = switcherData
+  const hasOpenSprint = sprintItems.some(s => s.status === 'open')
   const isActiveProduct = user?.active_product_id === id
 
   const pbis = await prisma.pbi.findMany({

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

@@ -2,8 +2,10 @@ import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
 import { prisma } from '@/lib/prisma'
+import { getSprintSwitcherData } from '@/lib/sprint-switcher-data'
 import { SoloBoard } from '@/components/solo/solo-board'
 import { NoActiveSprint } from '@/components/solo/no-active-sprint'
+import { SprintSwitcher } from '@/components/shared/sprint-switcher'
 import type { SoloTask } from '@/components/solo/solo-board'
 import type { UnassignedStory } from '@/components/solo/unassigned-stories-sheet'
 
@@ -23,9 +25,23 @@ export default async function SoloProductPage({ params }: Props) {
     where: { product_id: id, status: 'OPEN' },
   })
 
+  const switcherData = await getSprintSwitcherData(id, { activeSprintId: sprint?.id ?? null })
+
+  const switcherBar = (
+    <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-center">
+      <SprintSwitcher
+        productId={id}
+        sprints={switcherData.sprintItems}
+        activeSprint={switcherData.activeSprintItem}
+        buildingSprintIds={switcherData.buildingSprintIds}
+      />
+    </div>
+  )
+
   if (!sprint) {
     return (
       <div className="flex flex-col h-full">
+        {switcherBar}
         <NoActiveSprint productId={id} productName={product.name} />
       </div>
     )
@@ -106,14 +122,19 @@ export default async function SoloProductPage({ params }: Props) {
   }))
 
   return (
-    <SoloBoard
-      productId={id}
-      sprintGoal={sprint.sprint_goal}
-      tasks={tasks}
-      unassignedStories={unassignedStories}
-      isDemo={session.isDemo ?? false}
-      currentUserId={session.userId}
-      repoUrl={product.repo_url}
-    />
+    <div className="flex flex-col h-full">
+      {switcherBar}
+      <div className="flex-1 min-h-0">
+        <SoloBoard
+          productId={id}
+          sprintGoal={sprint.sprint_goal}
+          tasks={tasks}
+          unassignedStories={unassignedStories}
+          isDemo={session.isDemo ?? false}
+          currentUserId={session.userId}
+          repoUrl={product.repo_url}
+        />
+      </div>
+    </div>
   )
 }

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

@@ -6,6 +6,8 @@ import { prisma } from '@/lib/prisma'
 import { pbiStatusToApi } from '@/lib/task-status'
 import { SprintBoardClient } from '@/components/sprint/sprint-board-client'
 import { SyncActiveSprintCookie } from '@/components/sprint/sync-active-sprint-cookie'
+import { SprintSwitcher } from '@/components/shared/sprint-switcher'
+import { getSprintSwitcherData } from '@/lib/sprint-switcher-data'
 import { SprintHeader } from '@/components/sprint/sprint-header'
 import { SprintRunControls } from '@/components/sprint/sprint-run-controls'
 import { parsePauseContext } from '@/lib/pause-context'
@@ -48,6 +50,8 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
   })
   if (!sprint) notFound()
 
+  const switcherData = await getSprintSwitcherData(id, { activeSprintId: sprint.id })
+
   const activeSprintRun = await prisma.sprintRun.findFirst({
     where: {
       sprint_id: sprint.id,
@@ -157,6 +161,14 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
   return (
     <div className="flex flex-col h-full">
       <SyncActiveSprintCookie productId={id} sprintId={sprint.id} />
+      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-center">
+        <SprintSwitcher
+          productId={id}
+          sprints={switcherData.sprintItems}
+          activeSprint={switcherData.activeSprintItem}
+          buildingSprintIds={switcherData.buildingSprintIds}
+        />
+      </div>
       <SprintHeader
         productId={id}
         productName={product.name}

lib/sprint-switcher-data.ts

@@ -0,0 +1,62 @@
+import 'server-only'
+
+import { prisma } from '@/lib/prisma'
+import { resolveActiveSprint } from '@/lib/active-sprint'
+import { sprintStatusToApi, type SprintStatusApi } from '@/lib/task-status'
+
+export type SprintSwitcherItem = {
+  id: string
+  code: string
+  sprint_goal: string
+  status: SprintStatusApi
+}
+
+export interface SprintSwitcherData {
+  sprintItems: SprintSwitcherItem[]
+  buildingSprintIds: string[]
+  activeSprintItem: SprintSwitcherItem | null
+}
+
+export async function getSprintSwitcherData(
+  productId: string,
+  opts?: { activeSprintId?: string | null },
+): Promise<SprintSwitcherData> {
+  const allSprints = await prisma.sprint.findMany({
+    where: { product_id: productId },
+    orderBy: { created_at: 'desc' },
+    select: { id: true, code: true, sprint_goal: true, status: true },
+  })
+
+  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: SprintSwitcherItem[] = allSprints.map(s => ({
+    id: s.id,
+    code: s.code,
+    sprint_goal: s.sprint_goal,
+    status: sprintStatusToApi(s.status),
+  }))
+
+  let activeSprintItem: SprintSwitcherItem | null = null
+  if (opts?.activeSprintId !== undefined) {
+    activeSprintItem = opts.activeSprintId
+      ? sprintItems.find(s => s.id === opts.activeSprintId) ?? null
+      : null
+  } else {
+    const resolved = await resolveActiveSprint(productId)
+    activeSprintItem = resolved
+      ? sprintItems.find(s => s.id === resolved.id) ?? null
+      : null
+  }
+
+  return { sprintItems, buildingSprintIds, activeSprintItem }
+}