Add project pill/badge to task cards in Kanban

This commit is contained in:
OpenClaw Bot 2026-02-19 18:49:53 -06:00
parent 1ab5911742
commit dd1c65453a

View File

@ -332,7 +332,9 @@ export default function Home() {
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
{columnTasks.map((task) => ( {columnTasks.map((task) => {
const taskProject = projects.find((p) => p.id === task.projectId)
return (
<Card <Card
key={task.id} key={task.id}
className="bg-slate-900 border-slate-800 hover:border-slate-700 cursor-pointer transition-colors group" className="bg-slate-900 border-slate-800 hover:border-slate-700 cursor-pointer transition-colors group"
@ -340,12 +342,23 @@ export default function Home() {
> >
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-start justify-between mb-2"> <div className="flex items-start justify-between mb-2">
<Badge <div className="flex items-center gap-2">
variant="outline" <Badge
className={`text-xs ${typeColors[task.type]} text-white border-0`} variant="outline"
> className={`text-xs ${typeColors[task.type]} text-white border-0`}
{typeLabels[task.type]} >
</Badge> {typeLabels[task.type]}
</Badge>
{taskProject && (
<Badge
variant="outline"
className="text-xs text-white border-0"
style={{ backgroundColor: taskProject.color }}
>
{taskProject.name}
</Badge>
)}
</div>
<div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1"> <div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
<button <button
onClick={(e) => { onClick={(e) => {
@ -409,7 +422,7 @@ export default function Home() {
)} )}
</CardContent> </CardContent>
</Card> </Card>
))} )})}
</div> </div>
</div> </div>
) )