Improved doc structure and direct notes for board view

src/components/Router.tsx

@@ -3,7 +3,7 @@
 import { Workspace } from "@/hooks/workspace";
 import { Task } from "@/lib/types";
 import TaskView from "./view/TaskView";
-import DocView from "./view/Doc";
+import DocView from "./view/DocView";
 
 const id = (prefix = "t") =>
   `${prefix}_${Math.random().toString(36).slice(2, 9)}`;

src/components/view/board/Task.tsx

@@ -10,7 +10,10 @@ 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";
+import TaskEdit from "../edit/TaskEdit";
+import { Button } from "@/components/ui/button";
+import { NotepadText } from "lucide-react";
+import DocDialog from "../edit/DocDialog";
 
 export default function BoardTask({
   task,
@@ -33,7 +36,21 @@ export default function BoardTask({
           className="bg-background"
         >
           <CardHeader>
-            <CardTitle>{task.title}</CardTitle>
+            <CardTitle className="flex items-center justify-between">
+              <span>{task.title}</span>
+              <DocDialog task={task} setTask={setTask} tags={tags}>
+                <Button
+                  size="sm"
+                  className="ml-auto"
+                  variant="outline"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  <NotepadText />
+                </Button>
+              </DocDialog>
+            </CardTitle>
             <CardDescription>{task.description}</CardDescription>
           </CardHeader>
           <CardContent className="flex flex-wrap gap-1.5 overflow-hidden">

src/components/view/edit/DocDialog.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import DocView from "../DocView";
+import { Badge } from "@/components/ui/badge";
+import { Task } from "@/lib/types";
+import { Color, getColor } from "@/lib/ui/color";
+import { useState } from "react";
+import { OutputData } from "@editorjs/editorjs";
+
+export default function DocDialog({
+  task,
+  setTask,
+  tags,
+  children,
+}: {
+  task: Task;
+  setTask: (t: Task) => void;
+  tags: Record<string, { color: Color; name: string }>;
+  children: React.ReactNode;
+}) {
+  const [doc, setDoc] = useState<OutputData>({ blocks: [] });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-h-[80vh] md:max-w-3xl! lg:max-w-4xl!">
+        <DialogTitle>{task.title} - Notes</DialogTitle>
+        <DialogDescription>{task.description}</DialogDescription>
+        <DialogHeader>
+          <div className="flex flex-wrap gap-1.5 overflow-hidden">
+            {task.tags?.map((tag, i) => (
+              <Badge
+                key={tag}
+                variant="outline"
+                style={getColor(tags[tag].color)}
+              >
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        </DialogHeader>
+
+        <ScrollArea className="h-[60vh]">
+          <DocView key={0} doc={doc} setDoc={setDoc} />
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/view/edit/TaskEdit.tsx

@@ -11,20 +11,21 @@ import {
 import { Task } from "@/lib/types";
 import { Color, getColor } from "@/lib/ui/color";
 import { DraggableProvided } from "@hello-pangea/dnd";
-import { Button } from "../ui/button";
+import { Button } from "../../ui/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTrigger,
-} from "../ui/dialog";
-import DocView from "./Doc";
+} from "../../ui/dialog";
+import DocView from "../DocView";
 import { useState } from "react";
 import { OutputData } from "@editorjs/editorjs";
 import { DialogTitle } from "@radix-ui/react-dialog";
-import { ScrollArea } from "../ui/scroll-area";
-import { Badge } from "../ui/badge";
+import { ScrollArea } from "../../ui/scroll-area";
+import { Badge } from "../../ui/badge";
+import DocDialog from "./DocDialog";
 
 export default function TaskEdit({
   task,
@@ -37,8 +38,6 @@ export default function TaskEdit({
   tags: Record<string, { color: Color; name: string }>;
   children: React.ReactNode;
 }) {
-  const [doc, setDoc] = useState<OutputData>({ blocks: [] });
-
   return (
     <Sheet>
       {children}
@@ -83,32 +82,9 @@ export default function TaskEdit({
           </div>
           <div className="grid gap-3">
             <Label>Notes</Label>
-            <Dialog>
-              <DialogTrigger asChild>
+            <DocDialog task={task} setTask={setTask} tags={tags}>
               <Button>Open notes</Button>
-              </DialogTrigger>
-              <DialogContent className="max-h-[80vh] md:max-w-3xl! lg:max-w-4xl!">
-                <DialogTitle>{task.title} - Notes</DialogTitle>
-                <DialogDescription>{task.description}</DialogDescription>
-                <DialogHeader>
-                  <div className="flex flex-wrap gap-1.5 overflow-hidden">
-                    {task.tags?.map((tag, i) => (
-                      <Badge
-                        key={tag}
-                        variant="outline"
-                        style={getColor(tags[tag].color)}
-                      >
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                </DialogHeader>
-
-                <ScrollArea className="h-[60vh]">
-                  <DocView key={0} doc={doc} setDoc={setDoc} />
-                </ScrollArea>
-              </DialogContent>
-            </Dialog>
+            </DocDialog>
           </div>
         </div>
       </SheetContent>

src/components/view/table/Task.tsx

@@ -3,7 +3,7 @@ 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";
+import TaskEdit from "../edit/TaskEdit";
 
 export default function TableTask({
   task,