Separated task in table view

src/components/view/board/Task.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
   Card,
   CardContent,
@@ -44,15 +45,15 @@ export default function BoardTask({
             <CardTitle>{task.title}</CardTitle>
             <CardDescription>{task.description}</CardDescription>
           </CardHeader>
-          <CardContent className="flex flex-wrap gap-2 overflow-hidden">
+          <CardContent className="flex flex-wrap gap-1.5 overflow-hidden">
             {task.tags?.map((tag, i) => (
-              <span
+              <Badge
                 key={tag}
+                variant="outline"
                 style={getColor(tags[tag].color)}
-                className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
               >
-                {tags[tag].name}
+                {tag}
-              </span>
+              </Badge>
             ))}
           </CardContent>
         </Card>

src/components/view/table/TableView.tsx

@@ -11,15 +11,17 @@ import {
 } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { TaskViewProps } from "../TaskView";
+import { getColor } from "@/lib/ui/color";
+import TableTask from "./Task";
 
-export function TableView({ tasks, setTasks }: TaskViewProps) {
+export function TableView({ tasks, setTasks, tags }: TaskViewProps) {
   return (
     <Table>
       <TableHeader>
         <TableRow>
-          <TableHead className="min-w-[200px]">Title</TableHead>
+          <TableHead>Title</TableHead>
-          <TableHead>Status</TableHead>
           <TableHead>Description</TableHead>
+          <TableHead>Status</TableHead>
           <TableHead>Tags</TableHead>
         </TableRow>
       </TableHeader>
@@ -35,32 +37,14 @@ export function TableView({ tasks, setTasks }: TaskViewProps) {
           </TableRow>
         ) : (
           tasks.map((task) => (
-            <TableRow key={task.id}>
+            <TableTask
-              <TableCell className="font-medium">{task.title}</TableCell>
+              key={task.id}
-              <TableCell>
+              task={task}
-                <Badge
+              setTask={(t) =>
-                  variant={
+                setTasks((tasks) => tasks.map((c) => (c.id === t.id ? t : c)))
-                    task.status === "done"
+              }
-                      ? "default"
+              tags={tags}
-                      : task.status === "in-progress"
+            />
-                      ? "secondary"
-                      : "outline"
-                  }
-                >
-                  {task.status}
-                </Badge>
-              </TableCell>
-              <TableCell className="max-w-[250px] truncate">
-                {task.description || "-"}
-              </TableCell>
-              <TableCell>
-                {task.tags?.map((tag) => (
-                  <Badge key={tag} variant="outline">
-                    {tag}
-                  </Badge>
-                ))}
-              </TableCell>
-            </TableRow>
           ))
         )}
       </TableBody>

src/components/view/table/Task.tsx

@@ -0,0 +1,43 @@
+import { Badge } from "@/components/ui/badge";
+import { TableCell, TableRow } from "@/components/ui/table";
+import { Task } from "@/lib/types";
+import { Color, getColor } from "@/lib/ui/color";
+
+export default function TableTask({
+  task,
+  setTask,
+  tags,
+}: {
+  task: Task;
+  setTask: (t: Task) => void;
+  tags: Record<string, { color: Color; name: string }>;
+}) {
+  return (
+    <TableRow>
+      <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>
+      </TableCell>
+      <TableCell className="flex gap-1 items-center">
+        {task.tags?.map((tag, i) => (
+          <Badge key={tag} variant="outline" style={getColor(tags[tag].color)}>
+            {tag}
+          </Badge>
+        ))}
+      </TableCell>
+    </TableRow>
+  );
+}