feat: Context Panel for Flex Nodes

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNode.tsx

@@ -1,17 +1,39 @@
 import { type Node, type NodeProps } from "@xyflow/react";
+import { useEffect } from "react";
 
 import { BlockStack } from "@/components/ui/layout";
 import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
+import { useContextPanel } from "@/providers/ContextPanelProvider";
 
+import { FlexNodeEditor } from "./FlexNodeEditor";
 import type { FlexNodeData } from "./types";
 
 type FlexNodeProps = NodeProps<Node<FlexNodeData>>;
 
 const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
-  const { properties } = data;
+  const { properties, readOnly } = data;
   const { title, content, color } = properties;
 
+  const {
+    setContent,
+    clearContent,
+    setOpen: setContextPanelOpen,
+  } = useContextPanel();
+
+  useEffect(() => {
+    if (selected) {
+      setContent(<FlexNodeEditor flexNode={data} readOnly={readOnly} />);
+      setContextPanelOpen(true);
+    }
+
+    return () => {
+      if (selected) {
+        clearContent();
+      }
+    };
+  }, [data, readOnly, selected]);
+
   const isTransparent = color === "transparent";
 
   return (

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx

@@ -0,0 +1,175 @@
+import { ContentBlock } from "@/components/shared/ContextPanel/Blocks/ContentBlock";
+import { KeyValueList } from "@/components/shared/ContextPanel/Blocks/KeyValueList";
+import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Textarea } from "@/components/ui/textarea";
+import { Paragraph, Text } from "@/components/ui/typography";
+
+import type { FlexNodeData } from "./types";
+
+interface FlexNodeEditorProps {
+  flexNode: FlexNodeData;
+  readOnly?: boolean;
+}
+
+export const FlexNodeEditor = ({
+  flexNode,
+  readOnly = false,
+}: FlexNodeEditorProps) => {
+  const { metadata, zIndex, size, position } = flexNode;
+
+  return (
+    <BlockStack gap="4" className="h-full px-2">
+      <Text size="lg" weight="semibold" className="wrap-anywhere">
+        Sticky Note
+      </Text>
+
+      <ContentEditor flexNode={flexNode} readOnly={readOnly} />
+
+      <ColorEditor flexNode={flexNode} readOnly={readOnly} />
+
+      <KeyValueList
+        title="Layout"
+        items={[
+          {
+            label: "size",
+            value: `${size.width} x ${size.height}`,
+            copyable: true,
+          },
+          {
+            label: "position",
+            value: `${position.x}, ${position.y}`,
+            copyable: true,
+          },
+          {
+            label: "z-index",
+            value: `${zIndex}`,
+            copyable: true,
+          },
+        ]}
+      />
+
+      <KeyValueList
+        title="Metadata"
+        items={[
+          {
+            label: "Created",
+            value: new Date(metadata.createdAt).toLocaleString(),
+            copyable: true,
+          },
+          {
+            label: "Author",
+            value: metadata.createdBy,
+            copyable: true,
+          },
+        ]}
+      />
+    </BlockStack>
+  );
+};
+
+const ContentEditor = ({
+  flexNode,
+  readOnly,
+}: {
+  flexNode: FlexNodeData;
+  readOnly: boolean;
+}) => {
+  const { properties } = flexNode;
+
+  if (readOnly) {
+    return (
+      <KeyValueList
+        title="Content"
+        items={[
+          {
+            label: "Title",
+            value: properties.title,
+            copyable: true,
+          },
+          {
+            value: properties.content,
+            copyable: true,
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <ContentBlock title="Content">
+      <BlockStack gap="2">
+        <BlockStack>
+          <Label
+            htmlFor="flex-node-title"
+            className="text-muted-foreground text-xs"
+          >
+            Title
+          </Label>
+          <Input
+            id="flex-node-title"
+            value={properties.title}
+            className="text-sm"
+            readOnly
+          />
+        </BlockStack>
+        <BlockStack>
+          <Label
+            htmlFor="flex-node-content"
+            className="text-muted-foreground text-xs"
+          >
+            Note
+          </Label>
+          <Textarea
+            id="flex-node-content"
+            value={properties.content}
+            className="text-xs"
+            readOnly
+          />
+        </BlockStack>
+      </BlockStack>
+    </ContentBlock>
+  );
+};
+
+const ColorEditor = ({
+  flexNode,
+  readOnly,
+}: {
+  flexNode: FlexNodeData;
+  readOnly: boolean;
+}) => {
+  const { properties } = flexNode;
+
+  if (readOnly) {
+    return (
+      <KeyValueList
+        title="Color"
+        items={[
+          {
+            label: "Backgroud",
+            value: properties.color,
+            copyable: true,
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <ContentBlock title="Color">
+      <BlockStack gap="1">
+        <InlineStack gap="4" blockAlign="center">
+          <Paragraph size="xs">Background</Paragraph>
+          <div
+            className="aspect-square h-4 rounded-full border border-muted-foreground"
+            style={{ backgroundColor: properties.color }}
+          />
+          <CopyText className="text-xs font-mono">{properties.color}</CopyText>
+        </InlineStack>
+      </BlockStack>
+    </ContentBlock>
+  );
+};