feat(ST-507): show code badges on cards, lists and dialogs across the app

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-26 20:36:59 +02:00
parent 66063f035a
commit b71eb53fa8
15 changed files with 122 additions and 38 deletions

View file

@ -7,6 +7,7 @@ import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-
import { CSS } from '@dnd-kit/utilities'
import { toast } from 'sonner'
import { Badge } from '@/components/ui/badge'
import { CodeBadge } from '@/components/shared/code-badge'
import {
DropdownMenu, DropdownMenuContent, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent,
@ -35,6 +36,7 @@ const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'G
export interface SprintStory {
id: string
code: string | null
title: string
priority: number
status: string
@ -51,6 +53,7 @@ export interface ProductMember {
export interface PbiWithStories {
id: string
code: string | null
title: string
stories: SprintStory[]
}
@ -140,7 +143,10 @@ function SortableSprintRow({
</span>
)}
<div className="flex-1 min-w-0">
<p className="text-sm truncate">{story.title}</p>
<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]}
@ -338,7 +344,10 @@ function DraggablePbiStoryRow({
</span>
)}
<div className="flex-1 min-w-0">
<p className="text-sm truncate">{story.title}</p>
<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>
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
{STATUS_LABELS[story.status]}
</Badge>
@ -387,6 +396,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
>
<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>
</button>
@ -400,7 +410,10 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
>
<div className="w-[14px] shrink-0" />
<div className="flex-1 min-w-0">
<p className="text-sm truncate">{story.title}</p>
<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>
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
{STATUS_LABELS[story.status]}
</Badge>