Task notes

package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",

src/app/globals.css

@@ -128,4 +128,4 @@
   box-shadow: none !important;
 }
 
-.ce-header { font-size: 32px !important; }
+.ce-header { font-size: 32px !important; font-weight: bolder; }

src/components/Router.tsx

@@ -36,7 +36,9 @@ export default function Router({ workspace }: { workspace: Workspace }) {
       );
     case "doc":
       return (
+        <div className="h-full w-3xl mx-auto bg-accent/20 rounded-2xl p-4">
           <DocView key={entity.name} doc={entity.doc} setDoc={entity.setDoc} />
+        </div>
       );
   }
 }

src/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

src/components/view/Doc.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 import Header from "@editorjs/header";
 import List from "@editorjs/list";
@@ -59,9 +59,5 @@ export default function DocView({
     };
   }, []);
 
-  return (
-    <div className="h-full w-3xl mx-auto bg-accent/20 rounded-2xl p-4">
-      <div ref={holderRef} className="docs-view" />
-    </div>
-  );
+  return <div ref={holderRef} className="docs-view h-max" />;
 }

src/components/view/TaskEdit.tsx

@@ -11,6 +11,13 @@ 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 { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
+import DocView from "./Doc";
+import { useState } from "react";
+import { OutputData } from "@editorjs/editorjs";
+import { DialogTitle } from "@radix-ui/react-dialog";
+import { ScrollArea } from "../ui/scroll-area";
 
 export default function TaskEdit({
   task,
@@ -23,6 +30,8 @@ export default function TaskEdit({
   tags: Record<string, { color: Color; name: string }>;
   children: React.ReactNode;
 }) {
+  const [doc, setDoc] = useState<OutputData>({ blocks: [] });
+
   return (
     <Sheet>
       {children}
@@ -65,6 +74,21 @@ export default function TaskEdit({
               defaultValue={task.tags}
             />
           </div>
+          <div className="grid gap-3">
+            <Label>Notes</Label>
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button>Open notes</Button>
+              </DialogTrigger>
+              <DialogContent className="max-h-[80vh]">
+                <DialogTitle>{task.title} - Notes</DialogTitle>
+
+                <ScrollArea className="h-[60vh] mt-4">
+                  <DocView key={0} doc={doc} setDoc={setDoc} />
+                </ScrollArea>
+              </DialogContent>
+            </Dialog>
+          </div>
         </div>
       </SheetContent>
     </Sheet>