Working system

src/components/view/table/Task.tsx

@@ -1,50 +1,62 @@
 import { Badge } from "@/components/ui/badge";
 import { SheetTrigger } from "@/components/ui/sheet";
 import { TableCell, TableRow } from "@/components/ui/table";
-import { Task } from "@/lib/types";
+import { Task, Tag, TagId } from "@/lib/types";
 import { Color, getColor } from "@/lib/ui/color";
 import TaskEdit from "../edit/TaskEdit";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
 
 export default function TableTask({
   task,
   setTask,
   tags,
+  onDelete,
 }: {
   task: Task;
   setTask: (t: Task) => void;
-  tags: Record<string, { color: Color; name: string }>;
+  tags: Record<TagId, Tag>;
+  onDelete?: (taskId: string) => void;
 }) {
   return (
     <TaskEdit task={task} tags={tags} setTask={setTask}>
       <SheetTrigger asChild>
-        <TableRow>
+        <TableRow className="cursor-pointer hover:bg-accent">
           <TableCell className="font-medium">{task.title}</TableCell>
           <TableCell className="max-w-[250px] truncate">
             {task.description || "-"}
           </TableCell>
           <TableCell>
-            <Badge
-              variant={
-                task.status === "done"
-                  ? "default"
-                  : task.status === "in-progress"
-                  ? "secondary"
-                  : "outline"
-              }
-            >
-              {task.status}
-            </Badge>
+            <Badge variant="outline">{task.statusId}</Badge>
           </TableCell>
-          <TableCell className="flex gap-1 items-center">
-            {task.tags?.map((tag, i) => (
-              <Badge
-                key={tag}
-                variant="outline"
-                style={getColor(tags[tag].color)}
+          <TableCell className="flex gap-1 items-center justify-between">
+            <div className="flex gap-1">
+              {task.tagIds?.map((tagId) => (
+                <Badge
+                  key={tagId}
+                  variant="outline"
+                  style={
+                    tags[tagId]
+                      ? getColor(tags[tagId].color || "#808080")
+                      : undefined
+                  }
+                >
+                  {tags[tagId]?.name || tagId}
+                </Badge>
+              ))}
+            </div>
+            {onDelete && (
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete(task.id);
+                }}
               >
-                {tag}
-              </Badge>
-            ))}
+                <Trash2 className="h-4 w-4 text-red-500" />
+              </Button>
+            )}
           </TableCell>
         </TableRow>
       </SheetTrigger>