feat: improve notes design

src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx

@@ -146,7 +146,7 @@ export default function NodeDescription({
           ) : (
             <Markdown
               className={cn(
-                "markdown prose flex h-full w-full flex-col text-primary word-break-break-word dark:prose-invert",
+                "markdown prose flex h-full w-full flex-col text-primary word-break-break-word note-node-markdown dark:prose-invert",
                 mdClassName,
               )}
             >

src/frontend/src/CustomNodes/NoteNode/index.tsx

@@ -9,9 +9,7 @@ import { noteDataType } from "@/types/flow";
 import { cn } from "@/utils/utils";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { NodeResizer, NodeToolbar } from "reactflow";
-import IconComponent from "../../components/genericIconComponent";
 import NodeDescription from "../GenericNode/components/NodeDescription";
-import NodeName from "../GenericNode/components/NodeName";
 import NoteToolbarComponent from "./NoteToolbarComponent";
 function NoteNode({
   data,
@@ -67,25 +65,10 @@ function NoteNode({
         }}
         ref={nodeDiv}
         className={cn(
-          "flex h-full w-full flex-col gap-3 rounded-md border border-b p-5 transition-all",
+          "flex h-full w-full flex-col gap-3 border border-b p-5 transition-all",
           selected ? "" : "-z-50 shadow-sm",
         )}
       >
-        <div className="flex h-fit w-full items-center align-middle">
-          <div className="flex w-full gap-2">
-            <div data-testid="note_icon">
-              <IconComponent name="SquarePen" className="min-w-fit" />
-            </div>
-
-            <div className="w-11/12">
-              <NodeName
-                nodeId={data.id}
-                selected={selected}
-                display_name={data.node?.display_name || "Note"}
-              />
-            </div>
-          </div>
-        </div>
         <div
           style={{
             width: size.width,

src/frontend/src/constants/constants.ts

@@ -910,10 +910,20 @@ export const NOTE_NODE_MAX_HEIGHT = 800;
 export const NOTE_NODE_MAX_WIDTH = 600;
 
 export const COLOR_OPTIONS = {
+  default: "var(--note-default)",
   indigo: "var(--note-indigo)",
   emerald: "var(--note-emerald)",
   amber: "var(--note-amber)",
   red: "var(--note-red)",
 };
 
+export const SHADOW_COLOR_OPTIONS = {
+  default: "var(--note-default-opacity)",
+  indigo: "var(--note-indigo-opacity)",
+  emerald: "var(--note-emerald-opacity)",
+  amber: "var(--note-amber-opacity)",
+  red: "var(--note-red-opacity)",
+};
+
+export const maxSizeFilesInBytes = 10 * 1024 * 1024; // 10MB in bytes
 export const MAX_TEXT_LENGTH = 99999;

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -3,6 +3,11 @@ import NoteNode from "@/CustomNodes/NoteNode";
 import IconComponent from "@/components/genericIconComponent";
 import LoadingComponent from "@/components/loadingComponent";
 import ShadTooltip from "@/components/shadTooltipComponent";
+import {
+  NOTE_NODE_MIN_HEIGHT,
+  NOTE_NODE_MIN_WIDTH,
+  SHADOW_COLOR_OPTIONS,
+} from "@/constants/constants";
 import { useGetBuildsQuery } from "@/controllers/API/queries/_builds";
 import { track } from "@/customization/utils/analytics";
 import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
@@ -109,6 +114,8 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
     useState<OnSelectionChangeParams | null>(null);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
+  const [isAddingNote, setIsAddingNote] = useState(false);
+
   function handleGroupNode() {
     takeSnapshot();
     if (validateSelection(lastSelection!, edges).length === 0) {
@@ -442,9 +449,58 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
     [],
   );
 
-  const onPaneClick = useCallback(() => {
-    setFilterEdge([]);
-  }, []);
+  const onPaneClick = useCallback(
+    (event: React.MouseEvent) => {
+      setFilterEdge([]);
+      if (isAddingNote) {
+        const shadowBox = document.getElementById("shadow-box");
+        if (shadowBox) {
+          shadowBox.style.display = "none";
+        }
+        const position = reactFlowInstance?.screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY,
+        });
+        const data = {
+          node: {
+            description: "",
+            display_name: "",
+            documentation: "",
+            template: {},
+          },
+          type: "note",
+        };
+        const newId = getNodeId(data.type);
+
+        const newNode: NodeType = {
+          id: newId,
+          type: "noteNode",
+          position: position || { x: 0, y: 0 },
+          data: {
+            ...data,
+            id: newId,
+          },
+        };
+        setNodes((nds) => nds.concat(newNode));
+        setIsAddingNote(false);
+      }
+    },
+    [isAddingNote, setNodes, reactFlowInstance, getNodeId, setFilterEdge],
+  );
+
+  const onPaneMouseMove = useCallback(
+    (event: React.MouseEvent) => {
+      if (isAddingNote) {
+        const shadowBox = document.getElementById("shadow-box");
+        if (shadowBox) {
+          shadowBox.style.display = "block";
+          shadowBox.style.left = `${event.clientX + 10}px`;
+          shadowBox.style.top = `${event.clientY + 10}px`;
+        }
+      }
+    },
+    [isAddingNote],
+  );
 
   return (
     <div className="h-full w-full" ref={reactFlowWrapper}>
@@ -483,49 +539,15 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
             panActivationKeyCode={""}
             proOptions={{ hideAttribution: true }}
             onPaneClick={onPaneClick}
+            onPaneMouseMove={onPaneMouseMove}
           >
             <Background className="" />
             {!view && (
               <Controls className="fill-foreground stroke-foreground text-primary [&>button]:border-b-border [&>button]:bg-muted hover:[&>button]:bg-border">
                 <ControlButton
                   data-testid="add_note"
                   onClick={() => {
-                    const wrapper = reactFlowWrapper.current!;
-                    const viewport = reactFlowInstance?.getViewport();
-                    const x = wrapper.getBoundingClientRect().width / 2;
-                    const y = wrapper.getBoundingClientRect().height / 2;
-                    const nodePosition =
-                      reactFlowInstance?.screenToFlowPosition({ x, y })!;
-
-                    const data = {
-                      node: {
-                        description: "",
-                        display_name: "",
-                        documentation: "",
-                        template: {},
-                      },
-                      type: "note",
-                    };
-                    const newId = getNodeId(data.type);
-
-                    const newNode: NodeType = {
-                      id: newId,
-                      type: "noteNode",
-                      position: { x: 0, y: 0 },
-                      data: {
-                        ...data,
-                        id: newId,
-                      },
-                    };
-                    paste(
-                      { nodes: [newNode], edges: [] },
-                      {
-                        x: nodePosition.x,
-                        y: nodePosition?.y,
-                        paneX: wrapper.getBoundingClientRect().x,
-                        paneY: wrapper.getBoundingClientRect().y,
-                      },
-                    );
+                    setIsAddingNote(true);
                   }}
                   className="postion react-flow__controls absolute -top-10"
                 >
@@ -550,6 +572,15 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
               }}
             />
           </ReactFlow>
+          <div
+            id="shadow-box"
+            style={{
+              position: "absolute",
+              width: `${NOTE_NODE_MIN_WIDTH / 2}px`,
+              height: `${NOTE_NODE_MIN_HEIGHT / 2}px`,
+              backgroundColor: `${SHADOW_COLOR_OPTIONS[Object.keys(SHADOW_COLOR_OPTIONS)[0]]}`,
+            }}
+          ></div>
         </div>
       ) : (
         <div className="flex h-full w-full items-center justify-center">

src/frontend/src/style/index.css

@@ -71,19 +71,33 @@
     --status-blue: #2563eb;
     --status-gray: #6b7280;
     --connection: #555;
+    --note-default: #f1f5f9;
     --note-indigo: #e0e7ff;
     --note-emerald: #d1fae5;
     --note-amber: #fef3c7;
     --note-red: #fee2e2;
+
+    --note-default-opacity: #f1f5f980;
+    --note-indigo-opacity: #312e8180;
+    --note-emerald-opacity: #064e3b80;
+    --note-amber-opacity: #78350f80;
+    --note-red-opacity: #7f1d1d80;
   }
 
   .dark {
+    --note-default: #0f172a;
     --note-indigo: #312e81;
     --note-emerald: #064e3b;
     --note-amber: #78350f;
     --note-red: #7f1d1d;
     --note-placeholder: 216 12% 84%; /* hsl(216 12% 84%) */
 
+    --note-default-opacity: #0f172a80;
+    --note-indigo-opacity: #312e8180;
+    --note-emerald-opacity: #064e3b80;
+    --note-amber-opacity: #78350f80;
+    --note-red-opacity: #7f1d1d80;
+
     --node-selected: 234 89% 74%;
     --background: 224 28% 7.5%; /* hsl(224 10% 7.5%) */
     --foreground: 213 31% 80%; /* hsl(213 31% 91%) */

src/frontend/tailwind.config.mjs

@@ -255,6 +255,18 @@ const config = {
           outline: "none  !important",
           outlineOffset: "0px !important",
         },
+        ".note-node-markdown": {
+          lineHeight: "1",
+          "& ul li::marker": {
+            color: "black",
+          },
+          "& ol li::marker": {
+            color: "black",
+          },
+          "& h1, & h2, & h3, & h4, & h5, & h6, & p, & ul, & ol": {
+            marginBottom: "0.25rem",
+          },
+        },
       });
     }),
     tailwindcssTypography,