janpeter visser
4e591cc86e
Buitenste flex-container van SoloColumn miste h-full, waardoor het kader op content-hoogte bleef hangen i.p.v. de hele pane (binnen SplitPane) te vullen. Drop-target was daardoor ook beperkt tot het kleine kader bovenin een lege kolom. Auto-toegepast door een ClaudeJob-agent op task cmomoayt10002bortgp27jwma; co-auteurschap hieronder. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { useDroppable } from '@dnd-kit/core'
|
|
import { cn } from '@/lib/utils'
|
|
import { SoloTaskCard } from './solo-task-card'
|
|
import type { SoloTask } from './solo-board'
|
|
|
|
export const COLUMN_CONFIG = {
|
|
TO_DO: {
|
|
label: 'To Do',
|
|
headerClass: 'bg-status-todo/15 text-status-todo border-b border-status-todo/20',
|
|
},
|
|
IN_PROGRESS: {
|
|
label: 'Bezig',
|
|
headerClass: 'bg-status-in-progress/15 text-status-in-progress border-b border-status-in-progress/20',
|
|
},
|
|
DONE: {
|
|
label: 'Klaar',
|
|
headerClass: 'bg-status-done/15 text-status-done border-b border-status-done/20',
|
|
},
|
|
} as const
|
|
|
|
export type ColumnStatus = keyof typeof COLUMN_CONFIG
|
|
|
|
interface SoloColumnProps {
|
|
status: ColumnStatus
|
|
tasks: SoloTask[]
|
|
isDemo: boolean
|
|
onTaskClick: (task: SoloTask) => void
|
|
}
|
|
|
|
export function SoloColumn({ status, tasks, isDemo, onTaskClick }: SoloColumnProps) {
|
|
const { setNodeRef, isOver } = useDroppable({ id: status })
|
|
const config = COLUMN_CONFIG[status]
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className={cn(
|
|
'flex flex-col h-full rounded-lg border border-border overflow-hidden',
|
|
isOver && 'ring-2 ring-primary ring-inset',
|
|
)}
|
|
>
|
|
<div className={cn('flex items-center gap-2 px-3 py-2', config.headerClass)}>
|
|
<span className="text-sm font-medium">{config.label}</span>
|
|
<span className="text-xs opacity-60 ml-auto">{tasks.length}</span>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col gap-2 p-2 overflow-y-auto min-h-[140px]">
|
|
{tasks.map(task => (
|
|
<SoloTaskCard
|
|
key={task.id}
|
|
task={task}
|
|
isDemo={isDemo}
|
|
onClick={() => onTaskClick(task)}
|
|
/>
|
|
))}
|
|
{tasks.length === 0 && (
|
|
<p className="text-xs text-muted-foreground text-center py-8">Geen taken</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|