feat: sprint-switcher overal + PBI auto-toevoeging + cleanups (#163)

* 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>

* refactor: centreer sprint-switcher en verwijder badges uit dropdown items

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

* refactor: vervang sprint-status badge door subtle tekst

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

* feat: toon code + titel + status in sprint-switcher dropdown items

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

* fix: cookie-write uit Server Component (Next.js 16 verbiedt dit)

setActiveSprintCookie werd direct aangeroepen in app/(app)/products/[id]/sprint/[sprintId]/page.tsx,
wat in Next.js 16 een runtime-error oplevert ('Cookies can only be modified in a Server Action
or Route Handler'). Vervangen door een client-side bridge die syncActiveSprintCookieAction
aanroept na mount, zodat de active-sprint cookie nog steeds gesynced blijft met de URL.

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

* feat: filter 'toon afgeronde sprints' in sprint-switcher dropdown

Default verbergt de switcher gesloten/gearchiveerde/mislukte sprints
(toont alleen open + de huidige actieve sprint). Toggle bovenaan de
lijst om alle sprints te tonen.

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

* feat: nieuwe sprint wordt direct geselecteerd zonder redirect

createSprintAction zet nu de active-sprint cookie naar de zojuist
aangemaakte sprint, en de StartSprintButton refresht de huidige
pagina i.p.v. te redirecten naar /sprint. Resultaat: gebruiker blijft
op de product backlog en ziet de nieuwe sprint direct geselecteerd
in de sprint-pulldown.

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

* refactor: verplaats Manual en Admin naar user-menu dropdown

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

* feat: voeg geselecteerde PBI automatisch toe aan nieuwe sprint

Bij sprint-aanmaak wordt de pbi_id uit de selection-store als hidden
form-field meegestuurd. Server-side worden alle stories van die PBI
(zonder sprint) en hun taken aan de nieuwe sprint gekoppeld; stories
krijgen status IN_SPRINT met incrementele sort_order.

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

* 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>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-08 02:32:50 +02:00 committed by GitHub
parent a4a7ef9b8b
commit 3842c05ae9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 265 additions and 89 deletions

View file

@ -1,7 +1,7 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
vi.mock('next/cache', () => ({ revalidatePath: vi.fn() }))
vi.mock('next/headers', () => ({ cookies: vi.fn().mockResolvedValue({}) }))
vi.mock('next/headers', () => ({ cookies: vi.fn().mockResolvedValue({ set: vi.fn(), get: vi.fn(), delete: vi.fn() }) }))
vi.mock('iron-session', () => ({
getIronSession: vi.fn().mockResolvedValue({ userId: 'user-1', isDemo: false }),
}))

View file

@ -40,3 +40,24 @@ export async function setActiveSprintAction(productId: string, sprintId: string)
revalidatePath('/', 'layout')
return { success: true, sprintId: parsed.data.sprintId }
}
export async function syncActiveSprintCookieAction(productId: string, sprintId: string) {
const session = await getSession()
if (!session.userId) return
if (session.isDemo) return
const parsed = setSchema.safeParse({ productId, sprintId })
if (!parsed.success) return
const sprint = await prisma.sprint.findFirst({
where: {
id: parsed.data.sprintId,
product_id: parsed.data.productId,
product: productAccessFilter(session.userId),
},
select: { id: true },
})
if (!sprint) return
await setActiveSprintCookie(parsed.data.productId, parsed.data.sprintId)
}

View file

@ -40,6 +40,7 @@ export async function createSprintAction(_prevState: unknown, formData: FormData
sprint_goal: formData.get('sprint_goal'),
start_date: formData.get('start_date'),
end_date: formData.get('end_date'),
pbi_id: formData.get('pbi_id'),
})
if (!parsed.success) {
return {
@ -72,6 +73,36 @@ export async function createSprintAction(_prevState: unknown, formData: FormData
}),
)
if (parsed.data.pbi_id) {
const pbi = await prisma.pbi.findFirst({
where: { id: parsed.data.pbi_id, product_id: parsed.data.productId },
select: { id: true },
})
if (pbi) {
const stories = await prisma.story.findMany({
where: { pbi_id: pbi.id, sprint_id: null },
orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
select: { id: true },
})
if (stories.length > 0) {
const storyIds = stories.map(s => s.id)
await prisma.$transaction([
...stories.map((s, i) =>
prisma.story.update({
where: { id: s.id },
data: { sprint_id: sprint.id, status: 'IN_SPRINT', sort_order: i + 1 },
}),
),
prisma.task.updateMany({
where: { story_id: { in: storyIds }, sprint_id: null },
data: { sprint_id: sprint.id },
}),
])
}
}
}
await setActiveSprintCookie(parsed.data.productId, sprint.id)
revalidatePath(`/products/${parsed.data.productId}`)
return { success: true, sprintId: sprint.id }
}

View file

@ -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,41 +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, 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,
status: sprintStatusToApi(s.status),
}))
const activeSprintItem = resolvedActiveSprint
? {
id: resolvedActiveSprint.id,
code: resolvedActiveSprint.code,
status: sprintStatusToApi(resolvedActiveSprint.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({
@ -127,9 +98,10 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
return (
<div className="flex flex-col h-full">
{/* 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">
{/* Product header — sprint-switcher gecentreerd, actions rechts */}
<div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center gap-3">
<div className="flex-1" />
<div className="flex items-center justify-center">
{isActiveProduct && (
<SprintSwitcher
productId={id}
@ -139,7 +111,7 @@ export default async function ProductBacklogPage({ params, searchParams }: Props
/>
)}
</div>
<div className="flex items-center gap-3">
<div className="flex-1 flex items-center gap-3 justify-end">
{!isActiveProduct && (
<ActivateProductButton productId={id} isDemo={isDemo} redirectTo={`/products/${id}`} />
)}

View file

@ -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,6 +122,9 @@ export default async function SoloProductPage({ params }: Props) {
}))
return (
<div className="flex flex-col h-full">
{switcherBar}
<div className="flex-1 min-h-0">
<SoloBoard
productId={id}
sprintGoal={sprint.sprint_goal}
@ -115,5 +134,7 @@ export default async function SoloProductPage({ params }: Props) {
currentUserId={session.userId}
repoUrl={product.repo_url}
/>
</div>
</div>
)
}

View file

@ -4,8 +4,10 @@ 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 { 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,7 +50,7 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
})
if (!sprint) notFound()
await setActiveSprintCookie(id, sprint.id)
const switcherData = await getSprintSwitcherData(id, { activeSprintId: sprint.id })
const activeSprintRun = await prisma.sprintRun.findFirst({
where: {
@ -158,6 +160,15 @@ 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}

View file

@ -144,8 +144,6 @@ export function NavBar({
{navLink('/insights', 'Insights', pathname.startsWith('/insights'))}
{navLink('/ideas', 'Ideas', pathname.startsWith('/ideas'))}
{navLink('/jobs', 'Jobs', pathname.startsWith('/jobs'))}
{navLink('/manual', 'Manual', pathname.startsWith('/manual'))}
{roles.includes('ADMIN') && navLink('/admin', 'Admin', pathname.startsWith('/admin'))}
</nav>
</div>

View file

@ -1,22 +1,22 @@
'use client'
import { usePathname, useRouter } from 'next/navigation'
import { useTransition } from 'react'
import { ChevronDown } from 'lucide-react'
import { useState, useTransition } from 'react'
import { Check, 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,
DropdownMenuSeparator,
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 }
type SprintItem = { id: string; code: string; sprint_goal: string; status: SprintStatusApi }
interface SprintSwitcherProps {
productId: string
@ -32,13 +32,6 @@ const SPRINT_STATUS_LABEL: Record<SprintStatusApi, string> = {
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,
@ -48,8 +41,15 @@ export function SprintSwitcher({
const pathname = usePathname()
const router = useRouter()
const [isPending, startTransition] = useTransition()
const [showClosed, setShowClosed] = useState(false)
const buildingSet = new Set(buildingSprintIds)
const visibleSprints = sprints.filter(s => {
if (showClosed) return true
if (s.id === activeSprint?.id) return true
return s.status === 'open'
})
function handleSwitchSprint(sprintId: string) {
if (sprintId === activeSprint?.id) return
startTransition(async () => {
@ -92,42 +92,64 @@ export function SprintSwitcher({
{activeSprint ? activeSprint.code : 'Selecteer sprint'}
</span>
{activeSprint && (
<Badge
<span
className={cn(
'text-[10px] px-1.5 py-0',
buildingSet.has(activeSprint.id)
? 'bg-warning text-warning-foreground'
: SPRINT_STATUS_BADGE[activeSprint.status],
'text-[10px]',
buildingSet.has(activeSprint.id) ? 'text-warning' : 'text-muted-foreground',
)}
>
{buildingSet.has(activeSprint.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[activeSprint.status]}
</Badge>
</span>
)}
<ChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-64">
{sprints.map(s => (
<DropdownMenuContent align="center" className="w-80">
<button
type="button"
onClick={(e) => {
e.preventDefault()
setShowClosed(v => !v)
}}
className="flex items-center gap-2 w-full px-2 py-1.5 text-xs text-muted-foreground hover:bg-surface-container rounded-md"
>
<span
className={cn(
'inline-flex items-center justify-center w-3.5 h-3.5 rounded border',
showClosed ? 'bg-primary border-primary text-primary-foreground' : 'border-border',
)}
>
{showClosed && <Check className="w-3 h-3" />}
</span>
Toon afgeronde sprints
</button>
<DropdownMenuSeparator />
{visibleSprints.length === 0 ? (
<div className="px-2 py-2 text-xs text-muted-foreground/70 italic">
Geen open sprints
</div>
) : (
visibleSprints.map(s => (
<DropdownMenuItem
key={s.id}
onClick={() => handleSwitchSprint(s.id)}
className={cn(
'flex items-center justify-between gap-2',
'flex items-center gap-2',
s.id === activeSprint?.id && 'bg-primary-container text-primary-container-foreground font-medium',
)}
>
<span className="truncate">{s.code}</span>
<Badge
<span className="text-xs font-medium shrink-0">{s.code}</span>
<span className="text-xs truncate flex-1">{s.sprint_goal}</span>
<span
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],
'text-[10px] shrink-0',
buildingSet.has(s.id) ? 'text-warning' : 'text-muted-foreground',
)}
>
{buildingSet.has(s.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[s.status]}
</Badge>
</span>
</DropdownMenuItem>
))}
))
)}
</DropdownMenuContent>
</DropdownMenu>
)

View file

@ -2,7 +2,7 @@
import { useTransition } from 'react'
import Link from 'next/link'
import { Settings, Sun, Globe, LogOut } from 'lucide-react'
import { Settings, Sun, Globe, LogOut, BookOpen, Shield } from 'lucide-react'
import { logoutAction } from '@/actions/auth'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
@ -112,6 +112,20 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
<DropdownMenuSeparator />
<DropdownMenuItem render={<Link href="/manual" />}>
<BookOpen className="mr-2 h-4 w-4" />
<span>Manual</span>
</DropdownMenuItem>
{roles.includes('ADMIN') && (
<DropdownMenuItem render={<Link href="/admin" />}>
<Shield className="mr-2 h-4 w-4" />
<span>Admin</span>
</DropdownMenuItem>
)}
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={handleLogout}
onSelect={handleLogout}

View file

@ -21,6 +21,7 @@ import {
entityDialogHeaderClasses,
} from '@/components/shared/entity-dialog-layout'
import { createSprintAction } from '@/actions/sprints'
import { useSelectionStore } from '@/stores/selection-store'
interface StartSprintButtonProps {
productId: string
@ -44,6 +45,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
const [dirty, setDirty] = useState(false)
const formRef = useRef<HTMLFormElement>(null)
const router = useRouter()
const selectedPbiId = useSelectionStore((s) => s.selectedPbiId)
const [state, formAction, pending] = useActionState<ActionResult | undefined, FormData>(
async (_prev, fd) => {
@ -51,7 +53,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
if (result?.success) {
setOpen(false)
setDirty(false)
router.push(`/products/${productId}/sprint`)
router.refresh()
} else if (result?.code !== 422 && result?.error) {
// Toast handled by caller; here we just keep the form open
}
@ -92,6 +94,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
className="flex-1 overflow-y-auto px-6 py-6 space-y-6"
>
<input type="hidden" name="productId" value={productId} />
{selectedPbiId && <input type="hidden" name="pbi_id" value={selectedPbiId} />}
<div className="space-y-1.5">
<label className="text-sm font-medium text-foreground">

View file

@ -0,0 +1,16 @@
'use client'
import { useEffect } from 'react'
import { syncActiveSprintCookieAction } from '@/actions/active-sprint'
interface Props {
productId: string
sprintId: string
}
export function SyncActiveSprintCookie({ productId, sprintId }: Props) {
useEffect(() => {
syncActiveSprintCookieAction(productId, sprintId)
}, [productId, sprintId])
return null
}

View file

@ -17,6 +17,11 @@ export const createSprintSchema = z
sprint_goal: z.string().min(1, 'Sprint Goal is verplicht').max(500),
start_date: dateField,
end_date: dateField,
pbi_id: z
.string()
.nullable()
.optional()
.transform(v => (v && v.trim() !== '' ? v : null)),
})
.superRefine(validateDateOrder)

View file

@ -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 }
}