From e6b629e97377bd1a8d881098cf76eb3eaa2de8ea Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Sun, 16 Nov 2025 10:19:20 +0100
Subject: [PATCH] Improved doc structure and direct notes for board view

---
 src/components/Router.tsx                    |  2 +-
 src/components/view/{Doc.tsx => DocView.tsx} |  0
 src/components/view/board/Task.tsx           | 21 +++++++-
 src/components/view/edit/DocDialog.tsx       | 57 ++++++++++++++++++++
 src/components/view/{ => edit}/TaskEdit.tsx  | 42 ++++-----------
 src/components/view/table/Task.tsx           |  2 +-
 6 files changed, 87 insertions(+), 37 deletions(-)
 rename src/components/view/{Doc.tsx => DocView.tsx} (100%)
 create mode 100644 src/components/view/edit/DocDialog.tsx
 rename src/components/view/{ => edit}/TaskEdit.tsx (65%)

diff --git a/src/components/Router.tsx b/src/components/Router.tsx
index 3ecce77..41a4a99 100644
--- a/src/components/Router.tsx
+++ b/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)}`;
diff --git a/src/components/view/Doc.tsx b/src/components/view/DocView.tsx
similarity index 100%
rename from src/components/view/Doc.tsx
rename to src/components/view/DocView.tsx
diff --git a/src/components/view/board/Task.tsx b/src/components/view/board/Task.tsx
index 5cd0151..6a5d96a 100644
--- a/src/components/view/board/Task.tsx
+++ b/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">
diff --git a/src/components/view/edit/DocDialog.tsx b/src/components/view/edit/DocDialog.tsx
new file mode 100644
index 0000000..a8f3516
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/view/TaskEdit.tsx b/src/components/view/edit/TaskEdit.tsx
similarity index 65%
rename from src/components/view/TaskEdit.tsx
rename to src/components/view/edit/TaskEdit.tsx
index debfa92..0bb65ff 100644
--- a/src/components/view/TaskEdit.tsx
+++ b/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>
-                <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 task={task} setTask={setTask} tags={tags}>
+              <Button>Open notes</Button>
+            </DocDialog>
           </div>
         </div>
       </SheetContent>
diff --git a/src/components/view/table/Task.tsx b/src/components/view/table/Task.tsx
index 4d17eef..089fd18 100644
--- a/src/components/view/table/Task.tsx
+++ b/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,