ENG-2038 Add admin-flagged node card context menu to Obsidian tldraw

apps/obsidian/src/components/AdminPanelSettings.tsx

@@ -14,6 +14,8 @@ export const AdminPanelSettings = () => {
   const [username, setUsername] = useState<string>(
     plugin.settings.username || "",
   );
+  const [nodeCardContextMenuEnabled, setNodeCardContextMenuEnabled] =
+    useState<boolean>(plugin.settings.nodeCardContextMenuEnabled ?? false);
 
   const handleSyncModeToggle = useCallback(
     async (newValue: boolean) => {
@@ -43,6 +45,15 @@ export const AdminPanelSettings = () => {
     await updateUsername(plugin, newValue);
   };
 
+  const handleNodeCardContextMenuToggle = useCallback(
+    async (newValue: boolean) => {
+      setNodeCardContextMenuEnabled(newValue);
+      plugin.settings.nodeCardContextMenuEnabled = newValue;
+      await plugin.saveSettings();
+    },
+    [plugin],
+  );
+
   const handleLoginHandoff = async () => {
     const client = await getLoggedInClient(plugin);
     if (!client) {
@@ -72,6 +83,30 @@ export const AdminPanelSettings = () => {
 
   return (
     <div className="general-settings">
+      <div className="setting-item">
+        <div className="setting-item-info">
+          <div className="setting-item-name">(BETA) Node card context menu</div>
+          <div className="setting-item-description">
+            Show discourse context and styling tabs when a node card is selected
+            on a canvas
+          </div>
+        </div>
+        <div className="setting-item-control">
+          <div
+            className={`checkbox-container ${nodeCardContextMenuEnabled ? "is-enabled" : ""}`}
+            onClick={() =>
+              void handleNodeCardContextMenuToggle(!nodeCardContextMenuEnabled)
+            }
+          >
+            <input
+              type="checkbox"
+              checked={nodeCardContextMenuEnabled}
+              aria-label="Enable node card context menu"
+              readOnly
+            />
+          </div>
+        </div>
+      </div>
       <div className="setting-item">
         <div className="setting-item-info">
           <div className="setting-item-name">(BETA) Sync mode enable</div>

apps/obsidian/src/components/canvas/NodeCardContextMenu.tsx

@@ -0,0 +1,97 @@
+import { createElement, useEffect, useState, type ComponentType } from "react";
+import type { TFile } from "obsidian";
+import {
+  DefaultStylePanel,
+  DefaultStylePanelContent,
+  useEditor,
+  useRelevantStyles,
+  useValue,
+  type TLUiStylePanelContentProps,
+  type TLUiStylePanelProps,
+} from "tldraw";
+import type DiscourseGraphPlugin from "~/index";
+import type { DiscourseNodeShape } from "./shapes/DiscourseNodeShape";
+import { RelationsPanelContent } from "./overlays/RelationPanel";
+
+type NodeCardContextMenuProps = TLUiStylePanelProps & {
+  plugin: DiscourseGraphPlugin;
+  canvasFile: TFile;
+};
+
+const NODE_CARD_CONTEXT_MENU_TABS = [
+  { id: "context", label: "Context" },
+  { id: "styling", label: "Styling" },
+] as const;
+
+type NodeCardContextMenuTab =
+  (typeof NODE_CARD_CONTEXT_MENU_TABS)[number]["id"];
+
+const DefaultStylePanelComponent =
+  DefaultStylePanel as unknown as ComponentType<TLUiStylePanelProps>;
+const DefaultStylePanelContentComponent =
+  DefaultStylePanelContent as unknown as ComponentType<TLUiStylePanelContentProps>;
+
+export const NodeCardContextMenu = ({
+  plugin,
+  canvasFile,
+  isMobile,
+}: NodeCardContextMenuProps) => {
+  const editor = useEditor();
+  const styles = useRelevantStyles();
+  const isEnabled = plugin.settings.nodeCardContextMenuEnabled ?? false;
+  const selectedShape = useValue(
+    "selected shape for node card context menu",
+    () =>
+      editor.getCurrentToolId() === "select"
+        ? editor.getOnlySelectedShape()
+        : null,
+    [editor],
+  );
+  const selectedNode =
+    isEnabled && selectedShape?.type === "discourse-node"
+      ? (selectedShape as DiscourseNodeShape)
+      : null;
+  const [activeTab, setActiveTab] = useState<NodeCardContextMenuTab>("context");
+
+  useEffect(() => {
+    setActiveTab("context");
+  }, [selectedNode?.id]);
+
+  if (!selectedNode) {
+    return createElement(DefaultStylePanelComponent, { isMobile });
+  }
+
+  return createElement(
+    DefaultStylePanelComponent,
+    { isMobile },
+    <div className="dg-node-card-menu">
+      <div className="border-modifier-border grid grid-cols-2 border-b">
+        {NODE_CARD_CONTEXT_MENU_TABS.map(({ id, label }) => (
+          <button
+            key={id}
+            type="button"
+            aria-pressed={activeTab === id}
+            className={`cursor-pointer px-3 py-2 text-xs font-semibold ${
+              activeTab === id ? "accent-border-bottom" : ""
+            }`}
+            onClick={() => setActiveTab(id)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === "context" ? (
+        <div className="p-3">
+          <RelationsPanelContent
+            plugin={plugin}
+            canvasFile={canvasFile}
+            nodeShape={selectedNode}
+          />
+        </div>
+      ) : (
+        createElement(DefaultStylePanelContentComponent, { styles })
+      )}
+    </div>,
+  );
+};

apps/obsidian/src/components/canvas/TldrawViewComponent.tsx

@@ -47,6 +47,7 @@ import {
 import ToastListener from "./ToastListener";
 import { RelationsOverlay } from "./overlays/RelationOverlay";
 import { DragHandleOverlay } from "./overlays/DragHandleOverlay";
+import { NodeCardContextMenu } from "./NodeCardContextMenu";
 import { WHITE_LOGO_SVG } from "~/icons";
 import { CustomContextMenu } from "./CustomContextMenu";
 import {
@@ -431,6 +432,13 @@ export const TldrawPreviewComponent = ({
               ContextMenu: (props) => (
                 <CustomContextMenu canvasFile={file} props={props} />
               ),
+              StylePanel: (props) => (
+                <NodeCardContextMenu
+                  plugin={plugin}
+                  canvasFile={file}
+                  {...props}
+                />
+              ),
               SharePanel: () => {
                 const tools = useTools();
                 const isDiscourseNodeToolSelected = useIsToolSelected(