feat(PBI-71): UX-fix 'lege sprint' + sprint-switch data-refresh (#175)

- StartSprintButton dialog toont 3-state banner: info met accurate vrije-
  stories count + PBI-context, of waarschuwing als geen PBI geselecteerd
  is, of waarschuwing als de geselecteerde PBI 0 vrije stories heeft
- Voeg sprint_id toe aan BacklogStory/Story/SprintStory + select in PB-
  pagina's en sprint-board mappings, zodat de banner accuraat kan tellen
- createSprintAction: revalidatePath met 'layout' flag voor consistency
  met createSprintWithPbisAction (top-nav 'Sprint' link ververst direct)

Sprint-switch data-refresh op alle relevante pagina's:

- BacklogHydrationWrapper: fingerprint-based re-hydratie zodat PB-data
  na router.refresh opnieuw uit nieuwe initialData komt (was: useEffect
  met lege deps draaide alleen 1x)
- SprintBoardClient: key={sprint.id} forceert remount bij sprint-switch
  zodat lokale sprintStories/sprintStoryIds-state vers ge-init wordt
- Solo (desktop + mobile): gebruik resolveActiveSprint(id) ipv eerste
  OPEN-sprint, plus key={sprint.id} op SoloBoard voor remount

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

__tests__/api/backlog-realtime.test.ts

@@ -110,13 +110,13 @@ describe('shouldEmit scope filter (via backlog-store reducer)', () => {
 
   it('applyChange: story INSERT adds to storiesByPbi', () => {
     useBacklogStore.setState({ pbis: [], storiesByPbi: { 'pbi-1': [] }, tasksByStory: {} })
-    const story = { id: 'story-1', code: 'ST-1', title: 'S', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: 'pbi-1', created_at: new Date() }
+    const story = { id: 'story-1', code: 'ST-1', title: 'S', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: 'pbi-1', sprint_id: null, created_at: new Date() }
     useBacklogStore.getState().applyChange('story', 'I', story)
     expect(useBacklogStore.getState().storiesByPbi['pbi-1']).toHaveLength(1)
   })
 
   it('applyChange: story DELETE removes from correct pbi bucket', () => {
-    const story = { id: 'story-1', code: 'ST-1', title: 'S', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: 'pbi-1', created_at: new Date() }
+    const story = { id: 'story-1', code: 'ST-1', title: 'S', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: 'pbi-1', sprint_id: null, created_at: new Date() }
     useBacklogStore.setState({ pbis: [], storiesByPbi: { 'pbi-1': [story] }, tasksByStory: {} })
     useBacklogStore.getState().applyChange('story', 'D', { id: 'story-1' })
     expect(useBacklogStore.getState().storiesByPbi['pbi-1']).toHaveLength(0)

__tests__/components/backlog/integration.test.tsx

@@ -62,7 +62,7 @@ const ALT_PBI_ID = 'pbi-2'
 const STORY_ID = 'story-1'
 
 const STORIES = [
-  { id: STORY_ID, code: 'ST-1', title: 'Eerste story', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: PBI_ID, created_at: new Date() },
+  { id: STORY_ID, code: 'ST-1', title: 'Eerste story', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: PBI_ID, sprint_id: null, created_at: new Date() },
 ]
 const TASKS = [
   { id: 'task-1', title: 'Eerste taak', description: null, priority: 2, status: 'TO_DO', sort_order: 1, story_id: STORY_ID, created_at: new Date() },

__tests__/realtime/payload-contract.test.ts

@@ -21,6 +21,7 @@ const STORY: BacklogStory = {
   priority: 2,
   status: 'OPEN',
   pbi_id: 'pbi-1',
+  sprint_id: null,
   created_at: new Date('2024-01-01T00:00:00Z'),
 }
 

actions/sprints.ts

@@ -103,7 +103,7 @@ export async function createSprintAction(_prevState: unknown, formData: FormData
   }
 
   await setActiveSprintCookie(parsed.data.productId, sprint.id)
-  revalidatePath(`/products/${parsed.data.productId}`)
+  revalidatePath(`/products/${parsed.data.productId}`, 'layout')
   return { success: true, sprintId: sprint.id }
 }
 

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

@@ -61,6 +61,7 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
         priority: true,
         status: true,
         pbi_id: true,
+        sprint_id: true,
         created_at: true,
       },
     }),

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

@@ -2,6 +2,7 @@ import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
 import { prisma } from '@/lib/prisma'
+import { resolveActiveSprint } from '@/lib/active-sprint'
 import { getSprintSwitcherData } from '@/lib/sprint-switcher-data'
 import { SoloBoard } from '@/components/solo/solo-board'
 import { NoActiveSprint } from '@/components/solo/no-active-sprint'
@@ -21,9 +22,10 @@ export default async function SoloProductPage({ params }: Props) {
   const product = await getAccessibleProduct(id, session.userId)
   if (!product) notFound()
 
-  const sprint = await prisma.sprint.findFirst({
+  const active = await resolveActiveSprint(id)
-    where: { product_id: id, status: 'OPEN' },
+  const sprint = active
-  })
+    ? await prisma.sprint.findFirst({ where: { id: active.id, product_id: id } })
+    : null
 
   const switcherData = await getSprintSwitcherData(id, { activeSprintId: sprint?.id ?? null })
 
@@ -126,6 +128,7 @@ export default async function SoloProductPage({ params }: Props) {
       {switcherBar}
       <div className="flex-1 min-h-0">
         <SoloBoard
+          key={sprint.id}
           productId={id}
           sprintGoal={sprint.sprint_goal}
           tasks={tasks}

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

@@ -94,6 +94,7 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
     description: s.description,
     acceptance_criteria: s.acceptance_criteria,
     pbi_id: s.pbi_id,
+    sprint_id: s.sprint_id,
     created_at: s.created_at,
     priority: s.priority,
     status: s.status,
@@ -144,6 +145,7 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
         description: s.description,
         acceptance_criteria: s.acceptance_criteria,
         pbi_id: s.pbi_id,
+        sprint_id: s.sprint_id,
         created_at: s.created_at,
         priority: s.priority,
         status: s.status,
@@ -191,6 +193,7 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
 
       <div className="flex-1 overflow-hidden">
         <SprintBoardClient
+          key={sprint.id}
           productId={id}
           sprintId={sprint.id}
           stories={sprintStoryItems}

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

@@ -51,6 +51,7 @@ export default async function MobileProductBacklogPage({ params, searchParams }:
         priority: true,
         status: true,
         pbi_id: true,
+        sprint_id: true,
         created_at: true,
       },
     }),

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

@@ -8,6 +8,7 @@ import { notFound } from 'next/navigation'
 import { getAccessibleProduct } from '@/lib/product-access'
 import { prisma } from '@/lib/prisma'
 import { requireSession } from '@/lib/auth-guard'
+import { resolveActiveSprint } from '@/lib/active-sprint'
 import { SoloBoard } from '@/components/solo/solo-board'
 import { NoActiveSprint } from '@/components/solo/no-active-sprint'
 import type { SoloTask } from '@/components/solo/solo-board'
@@ -24,9 +25,10 @@ export default async function MobileSoloProductPage({ params }: Props) {
   const product = await getAccessibleProduct(id, session.userId)
   if (!product) notFound()
 
-  const sprint = await prisma.sprint.findFirst({
+  const active = await resolveActiveSprint(id)
-    where: { product_id: id, status: 'OPEN' },
+  const sprint = active
-  })
+    ? await prisma.sprint.findFirst({ where: { id: active.id, product_id: id } })
+    : null
 
   if (!sprint) {
     return (
@@ -112,6 +114,7 @@ export default async function MobileSoloProductPage({ params }: Props) {
 
   return (
     <SoloBoard
+      key={sprint.id}
       productId={id}
       sprintGoal={sprint.sprint_goal}
       tasks={tasks}

components/backlog/backlog-hydration-wrapper.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { useBacklogStore, type BacklogPbi, type BacklogStory, type BacklogTask } from '@/stores/backlog-store'
 import { useBacklogRealtime } from '@/lib/realtime/use-backlog-realtime'
 
@@ -16,13 +16,28 @@ interface BacklogHydrationWrapperProps {
   children: React.ReactNode
 }
 
+function fingerprint(data: InitialData): string {
+  const pbiPart = data.pbis.map((p) => `${p.id}:${p.status}:${p.priority}`).join(',')
+  const storyPart = Object.entries(data.storiesByPbi)
+    .flatMap(([, list]) => list.map((s) => `${s.id}:${s.status}:${s.sprint_id ?? 'null'}`))
+    .join(',')
+  const taskPart = Object.entries(data.tasksByStory)
+    .flatMap(([, list]) => list.map((t) => `${t.id}:${t.status}`))
+    .join(',')
+  return `${pbiPart}|${storyPart}|${taskPart}`
+}
+
 export function BacklogHydrationWrapper({ initialData, productId, children }: BacklogHydrationWrapperProps) {
   const setInitialData = useBacklogStore((s) => s.setInitialData)
+  const lastFingerprint = useRef<string>('')
 
   useEffect(() => {
-    setInitialData(initialData)
+    const fp = fingerprint(initialData)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (fp !== lastFingerprint.current) {
-  }, [])
+      lastFingerprint.current = fp
+      setInitialData(initialData)
+    }
+  }, [initialData, setInitialData])
 
   useBacklogRealtime(productId)
 

components/backlog/story-panel.tsx

@@ -56,6 +56,7 @@ export interface Story {
   priority: number
   status: string
   pbi_id: string
+  sprint_id: string | null
   created_at: Date
 }
 

components/sprint/sprint-backlog.tsx

@@ -41,6 +41,7 @@ export interface SprintStory {
   description: string | null
   acceptance_criteria: string | null
   pbi_id: string
+  sprint_id: string | null
   created_at: Date
   priority: number
   status: string

components/sprint/start-sprint-button.tsx

@@ -22,6 +22,7 @@ import {
 } from '@/components/shared/entity-dialog-layout'
 import { createSprintAction } from '@/actions/sprints'
 import { useSelectionStore } from '@/stores/selection-store'
+import { useBacklogStore } from '@/stores/backlog-store'
 
 interface StartSprintButtonProps {
   productId: string
@@ -46,6 +47,13 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
   const formRef = useRef<HTMLFormElement>(null)
   const router = useRouter()
   const selectedPbiId = useSelectionStore((s) => s.selectedPbiId)
+  const selectedPbi = useBacklogStore((s) =>
+    selectedPbiId ? s.pbis.find((p) => p.id === selectedPbiId) ?? null : null,
+  )
+  const freeStoryCount = useBacklogStore((s) => {
+    if (!selectedPbiId) return 0
+    return (s.storiesByPbi[selectedPbiId] ?? []).filter((story) => story.sprint_id === null).length
+  })
 
   const [state, formAction, pending] = useActionState<ActionResult | undefined, FormData>(
     async (_prev, fd) => {
@@ -96,6 +104,26 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
             <input type="hidden" name="productId" value={productId} />
             {selectedPbiId && <input type="hidden" name="pbi_id" value={selectedPbiId} />}
 
+            {!selectedPbi ? (
+              <div className="bg-warning-container text-warning-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-warning">
+                Geen PBI geselecteerd — de sprint wordt leeg aangemaakt. Je kunt later stories
+                toevoegen via slepen.
+              </div>
+            ) : freeStoryCount === 0 ? (
+              <div className="bg-warning-container text-warning-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-warning">
+                PBI <strong>{selectedPbi.code ?? selectedPbi.id.slice(0, 8)}</strong> heeft geen
+                vrije stories (alle stories zitten al in een andere sprint of zijn afgerond) — de
+                sprint wordt leeg aangemaakt.
+              </div>
+            ) : (
+              <div className="bg-primary-container text-primary-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-primary">
+                <strong>{freeStoryCount}</strong> {freeStoryCount === 1 ? 'story' : 'stories'} van
+                PBI <strong>{selectedPbi.code ?? selectedPbi.id.slice(0, 8)}</strong>
+                {selectedPbi.title ? ` (${selectedPbi.title})` : ''} worden toegevoegd aan deze
+                sprint.
+              </div>
+            )}
+
             <div className="space-y-1.5">
               <label className="text-sm font-medium text-foreground">
                 Sprint Goal <span className="text-error">*</span>

stores/backlog-store.ts

@@ -20,6 +20,7 @@ export interface BacklogStory {
   priority: number
   status: string
   pbi_id: string
+  sprint_id: string | null
   created_at: Date
 }