feat(M9): active product backlog — persistent active PB, NavBar splits, sprint card styling (#10)
* feat(tooling): extend backlog parser to support PBI-x milestone headers Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(backlog): mark ST-801–806 as done Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): sorteer PBI's en stories op prio/code/datum, onthoud keuze in localStorage; vergroot sprint-afronden dialoog Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-901): add user.active_product_id with FK to Product - Nullable relation User → Product with onDelete: SetNull - Index on active_product_id for join performance - Migration: 20260427165329_add_user_active_product_id - Install @tanstack/react-table (was missing from node_modules) - Fix PRIORITY_COLORS ref removed in earlier refactor - Note: User schema change affects vendor/scrum4me-mcp submodule — run prisma generate + tsc --noEmit there after merge Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: restore priority color on PBI filter pill Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-902): add setActiveProduct + clearActiveProduct server actions - actions/active-product.ts: setActiveProductAction validates access via productAccessFilter, rejects archived products and demo users - archiveProductAction: clears active_product_id for all affected users in transaction - removeProductMemberAction: clears active_product_id for removed member - leaveProductAction: clears active_product_id for leaving user Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-903): load active product in layout, replace cookie with DB lookup in solo - layout.tsx: fetch active_product_id, resolve product, clear stale ref server-side - NavBar: add activeProduct prop (rendering changes in ST-904) - solo/page.tsx: redirect via user.active_product_id instead of lastProductId cookie - proxy.ts: remove lastProductId cookie logic - lib/cookies.ts: deleted (no longer used) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-904): split NavBar into 5 tabs with disabled-states and product-switcher dropdown Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-905): add Activeer button per product row in dashboard and product header * feat(ST-906): redirect to dashboard with toast when active product becomes inaccessible * feat(ST-907): tests for active-product actions and functional spec update for M9 * docs(M9): add implementation plan document and link from backlog * feat: active PB indicator, Maak actief button and new product link in settings * feat: apply priority-color card style to sprint story rows * fix: move add-to-sprint click from entire card to + Toevoegen button * feat: apply priority-color card style to sprint task rows * fix(sprint-backlog): prevent text selection on PBI collapse button * chore: bump version to 0.4.0 (M9 active product backlog) * fix(landing): align logged-in nav left to match app NavBar --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
c1c219639a
commit
88dca4102c
28 changed files with 1184 additions and 481 deletions
|
|
@ -1,7 +1,7 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Trash2, MoreHorizontal } from 'lucide-react'
|
||||
import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter } from 'lucide-react'
|
||||
import { useDroppable, useDraggable } from '@dnd-kit/core'
|
||||
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
|
|
@ -15,6 +15,8 @@ import {
|
|||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { UserAvatar } from '@/components/shared/user-avatar'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
|
||||
import { useSprintStore } from '@/stores/sprint-store'
|
||||
import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
|
@ -26,14 +28,6 @@ const STATUS_COLORS: Record<string, string> = {
|
|||
}
|
||||
const STATUS_LABELS: Record<string, string> = { OPEN: 'Open', IN_SPRINT: 'In Sprint', DONE: 'Klaar' }
|
||||
|
||||
const PRIORITY_COLORS: Record<number, string> = {
|
||||
1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
|
||||
2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
|
||||
3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
|
||||
4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
|
||||
}
|
||||
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
|
||||
|
||||
export interface SprintStory {
|
||||
id: string
|
||||
code: string | null
|
||||
|
|
@ -124,86 +118,89 @@ function SortableSprintRow({
|
|||
ref={setNodeRef}
|
||||
style={style}
|
||||
onClick={onSelect}
|
||||
className={cn(
|
||||
'group flex items-start gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors',
|
||||
isSelected
|
||||
? 'bg-primary-container text-primary-container-foreground'
|
||||
: 'hover:bg-surface-container'
|
||||
)}
|
||||
className="group px-2 py-1 cursor-pointer"
|
||||
>
|
||||
{!isDemo && (
|
||||
<span
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
aria-label="Versleep om te sorteren of naar Product Backlog"
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm mt-0.5"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
⠿
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm truncate flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
|
||||
{PRIORITY_LABELS[story.priority]}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 mt-1">
|
||||
{story.assignee_id ? (
|
||||
<>
|
||||
<UserAvatar userId={story.assignee_id} username={story.assignee_username ?? '?'} size="xs" />
|
||||
<span className="text-xs text-muted-foreground truncate">{story.assignee_username}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">Niet geclaimd</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0 mt-0.5" onClick={e => e.stopPropagation()}>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
disabled={isDemo}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded bg-transparent border-0 cursor-pointer"
|
||||
aria-label="Story opties"
|
||||
>
|
||||
<MoreHorizontal size={14} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" onClick={e => e.stopPropagation()}>
|
||||
{story.assignee_id !== currentUserId && (
|
||||
<DropdownMenuItem onClick={handleClaim}>Pak op</DropdownMenuItem>
|
||||
)}
|
||||
{story.assignee_id && (
|
||||
<DropdownMenuItem onClick={handleUnclaim}>Geef terug aan team</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>Wijs toe aan</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
{members.map(m => (
|
||||
<DropdownMenuItem key={m.userId} onClick={e => handleReassign(e, m.userId, m.username)}>
|
||||
<UserAvatar userId={m.userId} username={m.username} size="xs" />
|
||||
<span>{m.username}</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</DemoTooltip>
|
||||
<div className={cn(
|
||||
'flex items-start gap-2 rounded border border-border px-3 py-2 transition-colors',
|
||||
PRIORITY_BORDER[story.priority],
|
||||
isSelected
|
||||
? 'bg-primary-container border-primary text-primary-container-foreground'
|
||||
: 'bg-surface-container hover:bg-surface-container-high'
|
||||
)}>
|
||||
{!isDemo && (
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); onRemove() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error"
|
||||
aria-label="Verwijder uit sprint"
|
||||
<span
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
aria-label="Versleep om te sorteren of naar Product Backlog"
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm mt-0.5"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
⠿
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm leading-snug line-clamp-2 flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 mt-1.5">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border shrink-0', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground shrink-0">{story.doneCount}/{story.taskCount} klaar</span>
|
||||
{story.assignee_id ? (
|
||||
<div className="flex items-center gap-1 min-w-0">
|
||||
<UserAvatar userId={story.assignee_id} username={story.assignee_username ?? '?'} size="xs" />
|
||||
<span className="text-xs text-muted-foreground truncate">{story.assignee_username}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">Niet geclaimd</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0" onClick={e => e.stopPropagation()}>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
disabled={isDemo}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded bg-transparent border-0 cursor-pointer"
|
||||
aria-label="Story opties"
|
||||
>
|
||||
<MoreHorizontal size={14} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" onClick={e => e.stopPropagation()}>
|
||||
{story.assignee_id !== currentUserId && (
|
||||
<DropdownMenuItem onClick={handleClaim}>Pak op</DropdownMenuItem>
|
||||
)}
|
||||
{story.assignee_id && (
|
||||
<DropdownMenuItem onClick={handleUnclaim}>Geef terug aan team</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>Wijs toe aan</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
{members.map(m => (
|
||||
<DropdownMenuItem key={m.userId} onClick={e => handleReassign(e, m.userId, m.username)}>
|
||||
<UserAvatar userId={m.userId} username={m.username} size="xs" />
|
||||
<span>{m.username}</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</DemoTooltip>
|
||||
{!isDemo && (
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); onRemove() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error"
|
||||
aria-label="Verwijder uit sprint"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -324,37 +321,46 @@ function DraggablePbiStoryRow({
|
|||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
onClick={!isDemo ? onAdd : undefined}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-6 py-2 border-b border-border/50 transition-colors',
|
||||
!isDemo && 'cursor-pointer hover:bg-primary/5',
|
||||
'px-2 py-1',
|
||||
isDemo && 'opacity-60',
|
||||
isDragging && 'opacity-40'
|
||||
)}
|
||||
>
|
||||
{!isDemo && (
|
||||
<span
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
aria-label="Sleep naar Sprint Backlog"
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
⠿
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm truncate flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
<div className={cn(
|
||||
'flex items-center gap-2 rounded border border-border px-3 py-2 transition-colors bg-surface-container',
|
||||
PRIORITY_BORDER[story.priority],
|
||||
)}>
|
||||
{!isDemo && (
|
||||
<span
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
aria-label="Sleep naar Sprint Backlog"
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
|
||||
>
|
||||
⠿
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm leading-snug line-clamp-2 flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
</div>
|
||||
<div className="mt-1.5">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
{!isDemo && (
|
||||
<button
|
||||
onClick={onAdd}
|
||||
className="text-xs text-primary hover:underline shrink-0"
|
||||
>
|
||||
+ Toevoegen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{!isDemo && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -367,7 +373,15 @@ interface SprintBacklogRightProps {
|
|||
}
|
||||
|
||||
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(() => {
|
||||
const auto = new Set<string>()
|
||||
for (const pbi of pbisWithStories) {
|
||||
if (pbi.stories.length > 0 && pbi.stories.every(s => s.status === 'DONE')) {
|
||||
auto.add(pbi.id)
|
||||
}
|
||||
}
|
||||
return auto
|
||||
})
|
||||
const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
|
||||
|
||||
function toggle(pbiId: string) {
|
||||
|
|
@ -378,9 +392,50 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
})
|
||||
}
|
||||
|
||||
function collapseAll() {
|
||||
setCollapsed(new Set(pbisWithStories.map(p => p.id)))
|
||||
}
|
||||
|
||||
function expandAll() {
|
||||
setCollapsed(new Set())
|
||||
}
|
||||
|
||||
function onlyNotDone() {
|
||||
const auto = new Set<string>()
|
||||
for (const pbi of pbisWithStories) {
|
||||
if (pbi.stories.length > 0 && pbi.stories.every(s => s.status === 'DONE')) {
|
||||
auto.add(pbi.id)
|
||||
}
|
||||
}
|
||||
setCollapsed(auto)
|
||||
}
|
||||
|
||||
const collapseActions = (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger onClick={collapseAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles inklappen">
|
||||
<ChevronsUp size={14} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Alles inklappen</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger onClick={expandAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles uitklappen">
|
||||
<ChevronsDown size={14} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Alles uitklappen</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger onClick={onlyNotDone} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alleen niet klaar">
|
||||
<ListFilter size={14} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Alleen niet klaar</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Product Backlog" />
|
||||
<PanelNavBar title="Product Backlog" actions={collapseActions} />
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={cn(
|
||||
|
|
@ -392,33 +447,39 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
<div key={pbi.id}>
|
||||
<button
|
||||
onClick={() => toggle(pbi.id)}
|
||||
className="w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left"
|
||||
className="w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left select-none"
|
||||
>
|
||||
<span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
|
||||
<span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
|
||||
{pbi.code && <CodeBadge code={pbi.code} />}
|
||||
<span className="text-xs text-muted-foreground">{pbi.stories.length}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{pbi.stories.filter(s => s.status === 'DONE').length}/{pbi.stories.length} klaar
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{!collapsed.has(pbi.id) && pbi.stories.map(story => {
|
||||
const inSprint = sprintStoryIds.has(story.id)
|
||||
if (inSprint) {
|
||||
return (
|
||||
<div
|
||||
key={story.id}
|
||||
className="flex items-center gap-3 px-6 py-2 border-b border-border/50 opacity-40"
|
||||
>
|
||||
<div className="w-[14px] shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm truncate flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
<div key={story.id} className="px-2 py-1 opacity-40">
|
||||
<div className={cn(
|
||||
'flex items-center gap-2 rounded border border-border px-3 py-2 bg-surface-container',
|
||||
PRIORITY_BORDER[story.priority]
|
||||
)}>
|
||||
<div className="w-[14px] shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm leading-snug line-clamp-2 flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
</div>
|
||||
<div className="mt-1.5">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue