ENG-1225: Discourse node migration simple settings

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -27,6 +27,10 @@ import { getNewDiscourseNodeText } from "~/utils/formatUtils";
 import { OnloadArgs } from "roamjs-components/types";
 import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "./settings/utils/accessors";
 
 type Props = {
   textarea?: HTMLTextAreaElement;
@@ -395,7 +399,9 @@ const normalizeKeyCombo = (combo: string) => {
   });
 };
 
-export const getModifiersFromCombo = (comboKey: IKeyCombo) => {
+export const getModifiersFromCombo = (
+  comboKey: IKeyCombo | { key: string; modifiers: number } | undefined,
+) => {
   if (!comboKey) return [];
   return [
     comboKey.modifiers & MODIFIER_BIT_MASKS.alt && "alt",
@@ -405,32 +411,26 @@ export const getModifiersFromCombo = (comboKey: IKeyCombo) => {
   ].filter(Boolean);
 };
 
-export const NodeMenuTriggerComponent = ({
-  extensionAPI,
-}: {
-  extensionAPI: OnloadArgs["extensionAPI"];
-}) => {
+export const NodeMenuTriggerComponent = () => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [isActive, setIsActive] = useState(false);
-  const [comboKey, setComboKey] = useState<IKeyCombo>(
-    () =>
-      (extensionAPI.settings.get(
-        "personal-node-menu-trigger",
-      ) as IKeyCombo) || { modifiers: 0, key: "" },
-  );
+  const [comboKey, setComboKey] = useState<IKeyCombo>(() => {
+    const saved = getPersonalSetting<{ key: string; modifiers: number }>([
+      "Personal Node Menu Trigger",
+    ]);
+    return saved ?? { modifiers: 0, key: "" };
+  });
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      const comboObj = getKeyCombo(e.nativeEvent);
-      if (!comboObj.key) return;
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const comboObj = getKeyCombo(e.nativeEvent);
+    if (!comboObj.key) return;
 
-      setComboKey({ key: comboObj.key, modifiers: comboObj.modifiers });
-      extensionAPI.settings.set("personal-node-menu-trigger", comboObj);
-    },
-    [extensionAPI],
-  );
+    const newCombo = { key: comboObj.key, modifiers: comboObj.modifiers };
+    setComboKey(newCombo);
+    setPersonalSetting(["Personal Node Menu Trigger"], newCombo);
+  }, []);
 
   const shortcut = useMemo(() => {
     if (!comboKey.key) return "";
@@ -453,8 +453,9 @@ export const NodeMenuTriggerComponent = ({
           hidden={!comboKey.key}
           icon={"remove"}
           onClick={() => {
-            setComboKey({ modifiers: 0, key: "" });
-            extensionAPI.settings.set("personal-node-menu-trigger", "");
+            const emptyCombo = { modifiers: 0, key: "" };
+            setComboKey(emptyCombo);
+            setPersonalSetting(["Personal Node Menu Trigger"], emptyCombo);
           }}
           minimal
         />

apps/roam/src/components/DiscourseNodeSearchMenu.tsx

@@ -25,6 +25,10 @@ import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
 import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpression";
 import { Result } from "~/utils/types";
 import { getSetting } from "~/utils/extensionSettings";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 import fuzzy from "fuzzy";
 
 type Props = {
@@ -605,14 +609,9 @@ export const renderDiscourseNodeSearchMenu = (props: Props) => {
   );
 };
 
-export const NodeSearchMenuTriggerSetting = ({
-  onloadArgs,
-}: {
-  onloadArgs: OnloadArgs;
-}) => {
-  const extensionAPI = onloadArgs.extensionAPI;
-  const [nodeSearchTrigger, setNodeSearchTrigger] = useState<string>(
-    getSetting("node-search-trigger", "@"),
+export const NodeSearchMenuTriggerSetting = () => {
+  const [nodeSearchTrigger, setNodeSearchTriggerState] = useState<string>(
+    () => getPersonalSetting<string>(["Node Search Menu Trigger"])!,
   );
 
   const handleNodeSearchTriggerChange = (
@@ -625,8 +624,8 @@ export const NodeSearchMenuTriggerSetting = ({
       .replace(/\+/g, "\\+")
       .trim();
 
-    setNodeSearchTrigger(trigger);
-    extensionAPI.settings.set("node-search-trigger", trigger);
+    setNodeSearchTriggerState(trigger);
+    setPersonalSetting(["Node Search Menu Trigger"], trigger);
   };
   return (
     <InputGroup

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

@@ -31,7 +31,6 @@ import {
   useValue,
   useToasts,
 } from "tldraw";
-import { IKeyCombo } from "@blueprintjs/core";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { getNewDiscourseNodeText } from "~/utils/formatUtils";
 import createDiscourseNode from "~/utils/createDiscourseNode";
@@ -44,8 +43,7 @@ import { AddReferencedNodeType } from "./DiscourseRelationShape/DiscourseRelatio
 import { dispatchToastEvent } from "./ToastListener";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
 import DiscourseGraphPanel from "./DiscourseToolPanel";
-import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
-import { getSetting } from "~/utils/extensionSettings";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
 
 const convertToDiscourseNode = async ({
@@ -301,13 +299,9 @@ export const createUiOverrides = ({
 }): TLUiOverrides => ({
   tools: (editor, tools) => {
     // Get the custom keyboard shortcut for the discourse tool
-    const discourseToolCombo = getSetting(DISCOURSE_TOOL_SHORTCUT_KEY, {
-      key: "",
-      modifiers: 0,
-    }) as IKeyCombo;
-
-    // For discourse tool, just use the key directly since we don't allow modifiers
-    const discourseToolShortcut = discourseToolCombo?.key?.toUpperCase() || "";
+    const discourseToolShortcut =
+      getPersonalSetting<string>(["Discourse Tool Shortcut"])?.toUpperCase() ||
+      "";
 
     tools["discourse-tool"] = {
       id: "discourse-tool",

apps/roam/src/components/index.ts

@@ -1,7 +1,7 @@
 export { default as DefaultFilters } from "./settings/DefaultFilters";
 export { default as DiscourseContext } from "./DiscourseContext";
 export { default as DiscourseContextOverlay } from "./DiscourseContextOverlay";
-export { default as DiscourseNodeAttributes } from "./settings/DiscourseNodeAttributes";
+export { default as DiscourseNodeAttributes, DiscourseNodeAttributesTab } from "./settings/DiscourseNodeAttributes";
 export { default as DiscourseNodeCanvasSettings } from "./settings/DiscourseNodeCanvasSettings";
 export { default as DiscourseNodeIndex } from "./settings/DiscourseNodeIndex";
 export { default as DiscourseNodeMenu } from "./DiscourseNodeMenu";