100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import type React from 'react'
|
|
import { useDraggable } from '@dnd-kit/core'
|
|
import { CSS } from '@dnd-kit/utilities'
|
|
import { Loader2 } from 'lucide-react'
|
|
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 type { SoloTask } from './solo-board'
|
|
|
|
const PRIORITY_BORDER: Record<number, string> = {
|
|
1: 'border-l-4 border-l-priority-critical',
|
|
2: 'border-l-4 border-l-priority-high',
|
|
3: 'border-l-4 border-l-priority-medium',
|
|
4: 'border-l-4 border-l-priority-low',
|
|
}
|
|
|
|
interface SoloTaskCardProps {
|
|
task: SoloTask
|
|
isDemo: boolean
|
|
onClick: () => void
|
|
}
|
|
|
|
export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
|
|
const job = useSoloStore(s => s.claudeJobsByTaskId[task.id])
|
|
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
|
id: task.id,
|
|
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}` }
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
onClick={onClick}
|
|
className={cn(
|
|
'bg-surface-container rounded border border-border px-3 py-2 select-none transition-colors',
|
|
PRIORITY_BORDER[task.priority],
|
|
isDragging ? 'opacity-40 z-50 shadow-lg' : 'hover:bg-surface-container-high',
|
|
isDemo ? 'cursor-pointer' : 'cursor-grab active:cursor-grabbing',
|
|
)}
|
|
{...(!isDemo ? { ...attributes, ...listeners } : {})}
|
|
>
|
|
<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>
|
|
<div className="flex items-center justify-between gap-2 mt-0.5">
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
|
|
{task.story_title}
|
|
</p>
|
|
{job && (
|
|
<span
|
|
className={cn(
|
|
'text-[10px] px-1.5 py-0 rounded border flex items-center gap-1 shrink-0',
|
|
JOB_STATUS_COLORS[job.status],
|
|
)}
|
|
onClick={(e) => { e.stopPropagation(); onClick() }}
|
|
role="button"
|
|
aria-label={`Agent-status: ${JOB_STATUS_LABELS[job.status]}`}
|
|
>
|
|
{JOB_STATUS_ACTIVE.has(job.status) && <Loader2 className="animate-spin" size={8} />}
|
|
{JOB_STATUS_LABELS[job.status]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function SoloTaskCardOverlay({ task }: { task: SoloTask }) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'bg-surface-container rounded border border-primary px-3 py-2 shadow-xl opacity-90',
|
|
PRIORITY_BORDER[task.priority],
|
|
)}
|
|
>
|
|
<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>
|
|
<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}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|