ENG-1660 Dual-write canvas node shortcuts and flag-gate the read

Author: sid597

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

@@ -51,8 +51,6 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import { AddReferencedNodeType } from "./DiscourseRelationShape/DiscourseRelationTool";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
 import DiscourseGraphPanel from "./DiscourseToolPanel";
-import { 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";
@@ -401,10 +399,10 @@ export const createUiOverrides = ({
         editor.setCurrentTool("discourse-tool");
       },
     };
-    const canvasNodeShortcuts = getSetting<CanvasNodeShortcuts>(
-      CANVAS_NODE_SHORTCUTS_KEY,
-      {},
-    );
+    const canvasNodeShortcuts =
+      getPersonalSetting<CanvasNodeShortcuts>([
+        PERSONAL_KEYS.canvasNodeShortcuts,
+      ]) ?? {};
 
     allNodes.forEach((node, index) => {
       const nodeId = node.type;

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

@@ -5,14 +5,12 @@ import getDiscourseNodes, {
   excludeDefaultNodes,
 } from "~/utils/getDiscourseNodes";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
-import { getSetting, setSetting } from "~/utils/extensionSettings";
+import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
+import { 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";
+import type { CanvasNodeShortcuts, PersonalSettings } from "./utils/zodSchema";
 
 type ShortcutRowProps = {
-  nodeType: string;
   nodeText: string;
   defaultShortcut: string;
   initialEnabled: boolean;
@@ -22,30 +20,24 @@ type ShortcutRowProps = {
 };
 
 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("");
     }
@@ -89,10 +81,16 @@ const ShortcutRow = ({
   );
 };
 
-const CanvasShortcutSettings = () => {
+type CanvasShortcutSettingsProps = {
+  personalSettings: PersonalSettings;
+};
+
+const CanvasShortcutSettings = ({
+  personalSettings,
+}: CanvasShortcutSettingsProps) => {
   const nodes = getDiscourseNodes().filter(excludeDefaultNodes);
-  const [shortcuts, setShortcuts] = useState<CanvasNodeShortcuts>(() =>
-    getSetting<CanvasNodeShortcuts>(CANVAS_NODE_SHORTCUTS_KEY, {}),
+  const [shortcuts, setShortcuts] = useState<CanvasNodeShortcuts>(
+    () => personalSettings[PERSONAL_KEYS.canvasNodeShortcuts],
   );
 
   const updateShortcut = (
@@ -102,6 +100,7 @@ const CanvasShortcutSettings = () => {
     const current = shortcuts[nodeType] ?? { value: "", enabled: false };
     const next = { ...shortcuts, [nodeType]: { ...current, ...update } };
     void setSetting(CANVAS_NODE_SHORTCUTS_KEY, next);
+    setPersonalSetting([PERSONAL_KEYS.canvasNodeShortcuts], next);
     setShortcuts(next);
   };
 
@@ -125,7 +124,6 @@ const CanvasShortcutSettings = () => {
               return (
                 <ShortcutRow
                   key={node.type}
-                  nodeType={node.type}
                   nodeText={node.text}
                   defaultShortcut={node.shortcut}
                   initialEnabled={override?.enabled ?? false}

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

@@ -194,7 +194,11 @@ export const SettingsDialog = ({
             id="canvas-shortcuts-personal-settings"
             title="Canvas"
             className="overflow-y-auto"
-            panel={<CanvasShortcutSettings />}
+            panel={
+              <CanvasShortcutSettings
+                personalSettings={settings.personalSettings}
+              />
+            }
           />
           <Tab
             id="left-sidebar-personal-settings"

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

@@ -238,6 +238,7 @@ const PERSONAL_SCHEMA_PATH_TO_LEGACY_KEY = new Map<string, string>([
     "default-filters",
   ],
   [pathKey([PERSONAL_KEYS.reifiedRelationTriples]), "use-reified-relations"],
+  [pathKey([PERSONAL_KEYS.canvasNodeShortcuts]), "canvas-node-shortcuts"],
 ]);
 
 const getLegacyPersonalLeftSidebarSetting = (): unknown[] => {

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

@@ -26,6 +26,7 @@ export const PERSONAL_KEYS = {
   leftSidebar: "Left sidebar",
   query: "Query",
   reifiedRelationTriples: "Reified relation triples",
+  canvasNodeShortcuts: "Canvas node shortcuts",
 } as const satisfies Record<string, keyof PersonalSettings>;
 
 export const QUERY_KEYS = {