janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ST-dgognlsz): SoloTaskCard 4-regels layout met Tooltips (#117)

Browse source 
4-regels layout: taaknaam+task_code badge (tooltip: naam+beschrijving),
beschrijving+pbi_code badge (tooltip: pbi_title+pbi_description), story+job-badge.
SoloTaskCardOverlay identieke 4-regels structuur zonder tooltips.
PBI-velden toegevoegd aan SoloTask-interface + Prisma-queries + test-fixtures.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-06 03:35:32 +02:00 • committed by GitHub
parent be8cd4d02c
commit 78543ee796
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 68 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

74
components/solo/solo-task-card.tsx
View file

@ -8,6 +8,7 @@ import { cn } from '@/lib/utils'
import { CodeBadge } from '@/components/shared/code-badge'
import { JOB_STATUS_LABELS, JOB_STATUS_COLORS, JOB_STATUS_ACTIVE } from '@/components/shared/job-status'
import { useSoloStore } from '@/stores/solo-store'
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
import type { SoloTask } from './solo-board'
const PRIORITY_BORDER: Record<number, string> = {
@ -30,10 +31,6 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
disabled: isDemo,
})
// view-transition-name laat de browser deze card snapshotten zodat hij
// soepel van kolom naar kolom animeert wanneer de status realtime wijzigt
// (ST-805 animatie A). Tijdens drag uit zetten — dnd-kit beheert de
// transform dan zelf en dubbele transitions willen we niet.
const style: React.CSSProperties | undefined = transform
? { transform: CSS.Translate.toString(transform) }
: { viewTransitionName: `solo-task-${task.id}` }
@ -51,12 +48,66 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
)}
{...(!isDemo ? { ...attributes, ...listeners } : {})}
>
{/* Regel 1: taaknaam + task_code */}
<div className="flex items-start justify-between gap-2">
<p className="text-sm text-foreground leading-snug flex-1">{task.title}</p>
{task.task_code && <CodeBadge code={task.task_code} className="shrink-0 mt-0.5" />}
{task.task_code && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<span className="shrink-0 mt-0.5" />}>
<CodeBadge code={task.task_code} />
</TooltipTrigger>
<TooltipContent side="left">
<p className="font-semibold">{task.title}</p>
{task.description && (
<p className="text-muted-foreground italic">{task.description.slice(0, 100)}</p>
)}
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
{/* Regels 2–3: beschrijving + pbi_code */}
<div className="flex items-start justify-between gap-2 mt-0.5">
{task.description ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={
<p className="text-xs text-muted-foreground line-clamp-2 flex-1" />
}>
{task.description}
</TooltipTrigger>
{task.description.length > 80 && (
<TooltipContent side="bottom">
{task.description}
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
) : (
<div className="flex-1" />
)}
{task.pbi_code && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<span className="shrink-0" />}>
<CodeBadge code={task.pbi_code} />
</TooltipTrigger>
<TooltipContent side="left">
<p className="font-semibold">{task.pbi_title}</p>
{task.pbi_description && (
<p className="text-muted-foreground italic">{task.pbi_description.slice(0, 100)}</p>
)}
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
{/* Regel 4: story-info + job-badge */}
<div className="flex items-center justify-between gap-2 mt-0.5">
<p className="text-xs text-muted-foreground truncate">
<p className="text-xs text-muted-foreground truncate flex-1">
{task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
{task.story_title}
</p>
@ -95,10 +146,21 @@ export function SoloTaskCardOverlay({ task }: { task: SoloTask }) {
PRIORITY_BORDER[task.priority],
)}
>
{/* Regel 1 */}
<div className="flex items-start justify-between gap-2">
<p className="text-sm text-foreground leading-snug flex-1">{task.title}</p>
{task.task_code && <CodeBadge code={task.task_code} className="shrink-0 mt-0.5" />}
</div>
{/* Regels 2–3 */}
<div className="flex items-start justify-between gap-2 mt-0.5">
{task.description ? (
<p className="text-xs text-muted-foreground line-clamp-2 flex-1">{task.description}</p>
) : (
<div className="flex-1" />
)}
{task.pbi_code && <CodeBadge code={task.pbi_code} className="shrink-0" />}
</div>
{/* Regel 4 */}
<p className="text-xs text-muted-foreground mt-0.5 truncate">
{task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
{task.story_title}