Edit task in table view

src/components/ui/table.tsx

@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )}
       {...props}

src/components/view/TaskEdit.tsx

@@ -0,0 +1,72 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { MultiSelect } from "@/components/ui/multi-select";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Task } from "@/lib/types";
+import { Color, getColor } from "@/lib/ui/color";
+import { DraggableProvided } from "@hello-pangea/dnd";
+
+export default function TaskEdit({
+  task,
+  setTask,
+  tags,
+  children,
+}: {
+  task: Task;
+  setTask: (t: Task) => void;
+  tags: Record<string, { color: Color; name: string }>;
+  children: React.ReactNode;
+}) {
+  return (
+    <Sheet>
+      {children}
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit task</SheetTitle>
+          <SheetDescription>
+            Make changes to the task here. Click save when you&apos;re done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid flex-1 auto-rows-min gap-6 px-4">
+          <div className="grid gap-3">
+            <Label>Title</Label>
+            <Input
+              defaultValue={task.title}
+              onChange={(e) => setTask({ ...task, title: e.target.value })}
+            />
+          </div>
+          <div className="grid gap-3">
+            <Label>Description</Label>
+            <Input
+              defaultValue={task.description}
+              onChange={(e) =>
+                setTask({ ...task, description: e.target.value })
+              }
+            />
+          </div>
+          <div className="grid gap-3">
+            <Label>Status</Label>
+            <MultiSelect
+              options={Object.entries(tags).map(([id, tag]) => ({
+                label: tag.name,
+                value: id,
+                style: {
+                  iconColor: getColor(tag.color).color,
+                  badgeColor: getColor(tag.color).backgroundColor,
+                },
+              }))}
+              onValueChange={(tags) => setTask({ ...task, tags })}
+              defaultValue={task.tags}
+            />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/components/view/board/Task.tsx

@@ -6,20 +6,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { MultiSelect } from "@/components/ui/multi-select";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
+import { SheetTrigger } from "@/components/ui/sheet";
 import { Task } from "@/lib/types";
 import { Color, getColor } from "@/lib/ui/color";
 import { DraggableProvided } from "@hello-pangea/dnd";
+import TaskEdit from "../TaskEdit";
 
 export default function BoardTask({
   task,
@@ -33,7 +24,7 @@ export default function BoardTask({
   tags: Record<string, { color: Color; name: string }>;
 }) {
   return (
-    <Sheet>
+    <TaskEdit task={task} tags={tags} setTask={setTask}>
       <SheetTrigger asChild>
         <Card
           ref={provided.innerRef}
@@ -58,53 +49,6 @@ export default function BoardTask({
           </CardContent>
         </Card>
       </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Edit task</SheetTitle>
-          <SheetDescription>
-            Make changes to the task here. Click save when you&apos;re done.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="grid flex-1 auto-rows-min gap-6 px-4">
-          <div className="grid gap-3">
-            <Label>Title</Label>
-            <Input
-              defaultValue={task.title}
-              onChange={(e) => setTask({ ...task, title: e.target.value })}
-            />
-          </div>
-          <div className="grid gap-3">
-            <Label>Description</Label>
-            <Input
-              defaultValue={task.description}
-              onChange={(e) =>
-                setTask({ ...task, description: e.target.value })
-              }
-            />
-          </div>
-          <div className="grid gap-3">
-            <Label>Status</Label>
-            <MultiSelect
-              options={Object.entries(tags).map(([id, tag]) => ({
-                label: tag.name,
-                value: id,
-                style: {
-                  iconColor: getColor(tag.color).color,
-                  badgeColor: getColor(tag.color).backgroundColor,
-                },
-              }))}
-              onValueChange={(tags) => setTask({ ...task, tags })}
-              defaultValue={task.tags}
-            />
-            {/* <Input
-              defaultValue={task.description}
-              onChange={(e) =>
-                setTask({ ...task, description: e.target.value })
-              }
-            /> */}
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
+    </TaskEdit>
   );
 }

src/components/view/table/Task.tsx

@@ -1,7 +1,9 @@
 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 { Color, getColor } from "@/lib/ui/color";
+import TaskEdit from "../TaskEdit";
 
 export default function TableTask({
   task,
@@ -13,31 +15,39 @@ export default function TableTask({
   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>
+    <TaskEdit task={task} tags={tags} setTask={setTask}>
+      <SheetTrigger asChild>
+        <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>
+      </SheetTrigger>
+    </TaskEdit>
   );
 }