Eng 1552 enable ability to change discourse graph specific keyboard (#952)

* ENG-1552: Add per-user canvas keyboard shortcut overrides

Allow users to customize discourse node shortcuts in the canvas
via a new "Canvas shortcuts" tab in personal settings.

* ENG-1552: Rename tab to Canvas, fix empty shortcut fallback

* ENG-1552: Switch canvas shortcuts to 3-state model (default/override/empty)

Per review feedback: each node now has an explicit "use custom shortcut"
toggle. Unchecked falls back to the global default; checked with a value
overrides; checked with empty value disables the shortcut entirely.

- Schema: `Record<nodeType, { value, enabled }>` replaces flat string map
- Read side in createUiOverrides keys off `enabled` flag, not value presence
- Each row uses PersonalFlagPanel + PersonalTextPanel; flag controls input's
  disabled state, uncheck clears stored value via remount
- BaseTextPanel: added `disabled?: boolean` and made Description conditional
  on a non-empty description (no-op for existing callers)
- Exported `CanvasNodeShortcuts` type from zodSchema; uiOverrides imports it

* ENG-1552: Read canvas shortcuts from extensionAPI, dual-write to block props

Settings tab opened slowly (~5s) because each row called getPersonalSetting
twice — once on mount and again every render — and each call ran a Datalog
query plus a full PersonalSettingsSchema.parse(). createUiOverrides hit the
same accessor too.

Switched to the same pattern other personal settings use (KeyboardShortcutInput,
HomePersonalSettings flags): read from the Roam extensionAPI, dual-write to
extensionAPI + block props on change. extensionAPI reads are sync and
in-memory.

- New constant CANVAS_NODE_SHORTCUTS_KEY in data/userSettings.ts
- CanvasShortcutSettings: parent reads the record once, holds it in state,
  passes initial values down; row notifies parent on change, parent writes to
  extensionAPI; PersonalFlagPanel/PersonalTextPanel keep their internal
  block-prop writes so block props stay in sync
- uiOverrides: getSetting(CANVAS_NODE_SHORTCUTS_KEY, {}) instead of
  getPersonalSetting(["Canvas node shortcuts"])

* ENG-1552: Redesign canvas shortcuts UI per review feedback

- DRY layout: single Shortcuts tab inside Canvas, compact single-row per node
- Move description to page header, simplify tooltips to show default key only
- Restrict input to single key via keyDown handler (ignores modifier combos)
- Replace PersonalFlagPanel/PersonalTextPanel with direct Blueprint components

* ENG-1552: Allow Tab/Escape to pass through in shortcut input

* ENG-1552: Align canvas shortcut inputs with grid layout

* chore: retrigger CI

* ENG-1552: Use custom CSS for canvas shortcuts grid template

Roam's Tailwind doesn't generate arbitrary value classes from extension
source files, so grid-template-columns moves to styles.css.

* ENG-1552: Make canvas shortcuts grid explicit (inline-grid, fit-content)

* ENG-1552: Add explicit CSS for canvas shortcuts grid alignment

* ENG-1552: Use per-row grid with computed label column width

* ENG-1552: Simplify canvas shortcuts grid to auto-sized columns

* ENG-1552: Use Tailwind grid-cols-[auto_auto] directly, drop custom CSS

* chore: retrigger CI

* ENG-1552: Remove extra blank line in styles.css

Author: sid597

apps/roam/src/components/canvas/uiOverrides.tsx

@@ -51,8 +51,12 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import { AddReferencedNodeType } from "./DiscourseRelationShape/DiscourseRelationTool";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
 import DiscourseGraphPanel from "./DiscourseToolPanel";
-import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
+import {
+  DISCOURSE_TOOL_SHORTCUT_KEY,
+  CANVAS_NODE_SHORTCUTS_KEY,
+} from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
+import type { CanvasNodeShortcuts } from "~/components/settings/utils/zodSchema";
 import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
 import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
 import { CanvasSyncMode } from "./canvasSyncMode";
@@ -396,13 +400,19 @@ export const createUiOverrides = ({
         editor.setCurrentTool("discourse-tool");
       },
     };
+    const canvasNodeShortcuts = getSetting<CanvasNodeShortcuts>(
+      CANVAS_NODE_SHORTCUTS_KEY,
+      {},
+    );
+
     allNodes.forEach((node, index) => {
       const nodeId = node.type;
+      const override = canvasNodeShortcuts[nodeId];
       tools[nodeId] = {
         id: nodeId,
         icon: "color",
         label: `shape.node.${node.type}` as TLUiTranslationKey,
-        kbd: node.shortcut,
+        kbd: override?.enabled ? override.value : node.shortcut,
         onSelect: () => {
           editor.setCurrentTool(nodeId);
         },

apps/roam/src/components/settings/CanvasShortcutSettings.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import { Checkbox, InputGroup, Tabs, Tab } from "@blueprintjs/core";
+import Description from "roamjs-components/components/Description";
+import getDiscourseNodes, {
+  excludeDefaultNodes,
+} from "~/utils/getDiscourseNodes";
+import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import { getSetting, setSetting } from "~/utils/extensionSettings";
+import { CANVAS_NODE_SHORTCUTS_KEY } from "~/data/userSettings";
+import type { CanvasNodeShortcuts } from "./utils/zodSchema";
+
+const BLOCK_PROP_KEY = "Canvas node shortcuts";
+
+type ShortcutRowProps = {
+  nodeType: string;
+  nodeText: string;
+  defaultShortcut: string;
+  initialEnabled: boolean;
+  initialValue: string;
+  onEnabledChange: (enabled: boolean) => void;
+  onValueChange: (value: string) => void;
+};
+
+const ShortcutRow = ({
+  nodeType,
+  nodeText,
+  defaultShortcut,
+  initialEnabled,
+  initialValue,
+  onEnabledChange,
+  onValueChange,
+}: ShortcutRowProps) => {
+  const enabledKey = [BLOCK_PROP_KEY, nodeType, "enabled"];
+  const valueKey = [BLOCK_PROP_KEY, nodeType, "value"];
+
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [storedValue, setStoredValue] = useState(initialValue);
+
+  const persistValue = (value: string) => {
+    setStoredValue(value);
+    setPersonalSetting(valueKey, value);
+    onValueChange(value);
+  };
+
+  const handleEnabledChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const checked = e.currentTarget.checked;
+    setEnabled(checked);
+    setPersonalSetting(enabledKey, checked);
+    if (!checked) {
+      persistValue("");
+    }
+    onEnabledChange(checked);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Tab" || e.key === "Escape") return;
+    e.preventDefault();
+    if (e.key === "Backspace" || e.key === "Delete") {
+      persistValue("");
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      persistValue(e.key);
+    }
+  };
+
+  return (
+    <>
+      <Checkbox
+        checked={enabled}
+        onChange={handleEnabledChange}
+        className="mb-0"
+        labelElement={
+          <>
+            <span className="font-medium">{nodeText} node</span>{" "}
+            <Description
+              description={`Default: ${defaultShortcut || "none"}`}
+            />
+          </>
+        }
+      />
+      <InputGroup
+        value={enabled ? storedValue : ""}
+        onChange={() => {}}
+        onKeyDown={handleKeyDown}
+        disabled={!enabled}
+        placeholder={defaultShortcut || "(no shortcut)"}
+        className="w-20"
+      />
+    </>
+  );
+};
+
+const CanvasShortcutSettings = () => {
+  const nodes = getDiscourseNodes().filter(excludeDefaultNodes);
+  const [shortcuts, setShortcuts] = useState<CanvasNodeShortcuts>(() =>
+    getSetting<CanvasNodeShortcuts>(CANVAS_NODE_SHORTCUTS_KEY, {}),
+  );
+
+  const updateShortcut = (
+    nodeType: string,
+    update: Partial<CanvasNodeShortcuts[string]>,
+  ) => {
+    const current = shortcuts[nodeType] ?? { value: "", enabled: false };
+    const next = { ...shortcuts, [nodeType]: { ...current, ...update } };
+    void setSetting(CANVAS_NODE_SHORTCUTS_KEY, next);
+    setShortcuts(next);
+  };
+
+  return (
+    <Tabs renderActiveTabPanelOnly={true}>
+      <Tab
+        id="shortcuts"
+        title="Shortcuts"
+        panel={
+          <div className="inline-grid grid-cols-[auto_auto] items-center gap-x-4 gap-y-2 p-1">
+            <div className="col-span-2 mb-2">
+              <div className="text-base">
+                Override the canvas keyboard shortcuts
+              </div>
+              <div className="text-sm italic text-gray-500">
+                Changes take effect next time a canvas is opened
+              </div>
+            </div>
+            {nodes.map((node) => {
+              const override = shortcuts[node.type];
+              return (
+                <ShortcutRow
+                  key={node.type}
+                  nodeType={node.type}
+                  nodeText={node.text}
+                  defaultShortcut={node.shortcut}
+                  initialEnabled={override?.enabled ?? false}
+                  initialValue={override?.value ?? ""}
+                  onEnabledChange={(enabled) =>
+                    updateShortcut(node.type, {
+                      enabled,
+                      ...(enabled ? {} : { value: "" }),
+                    })
+                  }
+                  onValueChange={(value) =>
+                    updateShortcut(node.type, { value })
+                  }
+                />
+              );
+            })}
+          </div>
+        }
+      />
+    </Tabs>
+  );
+};
+
+export default CanvasShortcutSettings;

apps/roam/src/components/settings/Settings.tsx

@@ -23,6 +23,7 @@ import getDiscourseNodes, {
 } from "~/utils/getDiscourseNodes";
 import NodeConfig from "./NodeConfig";
 import HomePersonalSettings from "./HomePersonalSettings";
+import CanvasShortcutSettings from "./CanvasShortcutSettings";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { FeedbackWidget } from "~/components/BirdEatsBugs";
 import { getVersionWithDate } from "~/utils/getVersion";
@@ -170,6 +171,12 @@ export const SettingsDialog = ({
             className="overflow-y-auto"
             panel={<QuerySettings extensionAPI={extensionAPI} />}
           />
+          <Tab
+            id="canvas-shortcuts-personal-settings"
+            title="Canvas"
+            className="overflow-y-auto"
+            panel={<CanvasShortcutSettings />}
+          />
           <Tab
             id="left-sidebar-personal-settings"
             title="Left sidebar"

apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx

@@ -49,6 +49,7 @@ type BaseTextPanelProps = {
   placeholder?: string;
   multiline?: boolean;
   error?: string;
+  disabled?: boolean;
   onChange?: (value: string) => void;
 } & RoamBlockSyncProps;
 
@@ -104,6 +105,7 @@ const BaseTextPanel = ({
   placeholder,
   multiline,
   error,
+  disabled,
   onChange,
   parentUid,
   uid,
@@ -148,20 +150,22 @@ const BaseTextPanel = ({
     <div className="flex flex-col">
       <Label>
         {title}
-        <Description description={description} />
+        {description && <Description description={description} />}
         {multiline ? (
           <TextArea
             value={value}
             onChange={handleChange}
             placeholder={placeholder || initialValue}
             className="w-full"
             style={{ minHeight: 80, resize: "vertical" }}
+            disabled={disabled}
           />
         ) : (
           <InputGroup
             value={value}
             onChange={handleChange}
             placeholder={placeholder || initialValue}
+            disabled={disabled}
           />
         )}
       </Label>

apps/roam/src/components/settings/utils/zodSchema.example.ts

@@ -373,6 +373,10 @@ const personalSettings: PersonalSettings = {
   "Auto canvas relations": true,
   "Disable product diagnostics": false,
   "Reified relation triples": true,
+  "Canvas node shortcuts": {
+    "_CLM-node": { value: "X", enabled: true },
+    "_QUE-node": { value: "", enabled: true },
+  },
   Query: {
     "Hide query metadata": true,
     "Default page size": 25,
@@ -401,6 +405,7 @@ const defaultPersonalSettings: PersonalSettings = {
   "Auto canvas relations": false,
   "Disable product diagnostics": false,
   "Reified relation triples": false,
+  "Canvas node shortcuts": {},
   Query: {
     "Hide query metadata": false,
     "Default page size": 10,

apps/roam/src/components/settings/utils/zodSchema.ts

@@ -257,6 +257,15 @@ export const PersonalSettingsSchema = z.object({
   "Streamline styling": z.boolean().default(false),
   "Auto canvas relations": z.boolean().default(false),
   "Disable product diagnostics": z.boolean().default(false),
+  "Canvas node shortcuts": z
+    .record(
+      z.string(),
+      z.object({
+        value: z.string().default(""),
+        enabled: z.boolean().default(false),
+      }),
+    )
+    .default({}),
   Query: QuerySettingsSchema.default({}),
 });
 
@@ -314,6 +323,7 @@ export type LeftSidebarPersonalSettings = z.infer<
 export type StoredFilters = z.infer<typeof StoredFiltersSchema>;
 export type QuerySettings = z.infer<typeof QuerySettingsSchema>;
 export type PersonalSettings = z.infer<typeof PersonalSettingsSchema>;
+export type CanvasNodeShortcuts = PersonalSettings["Canvas node shortcuts"];
 export type GithubSettings = z.infer<typeof GithubSettingsSchema>;
 export type QueryCondition = z.infer<typeof ConditionSchema>;
 export type QuerySelection = z.infer<typeof SelectionSchema>;

apps/roam/src/data/userSettings.ts

@@ -5,6 +5,7 @@ export const DEFAULT_FILTERS_KEY = "default-filters";
 export const QUERY_BUILDER_SETTINGS_KEY = "query-builder-settings";
 export const AUTO_CANVAS_RELATIONS_KEY = "auto-canvas-relations";
 export const DISCOURSE_TOOL_SHORTCUT_KEY = "discourse-tool-shortcut";
+export const CANVAS_NODE_SHORTCUTS_KEY = "canvas-node-shortcuts";
 export const DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY =
   "discourse-context-overlay-in-canvas";
 export const STREAMLINE_STYLING_KEY = "streamline-styling";