Merge pull request #875 from DiscourseGraphs/eng-1499-convert-legacy-blockprop-key-pairs-to-shared-constant-or

ENG-1499: Convert legacy-blockprop key pairs to shared constant or typed key

Author: sid597

apps/roam/src/components/DiscourseContextOverlay.tsx

@@ -13,6 +13,7 @@ import useInViewport from "react-in-viewport/dist/es/lib/useInViewport";
 import normalizePageTitle from "roamjs-components/queries/normalizePageTitle";
 import deriveDiscourseNodeAttribute from "~/utils/deriveDiscourseNodeAttribute";
 import { getDiscourseNodeSetting } from "~/components/settings/utils/accessors";
+import { DISCOURSE_NODE_KEYS } from "~/components/settings/utils/settingKeys";
 import nanoid from "nanoid";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import getDiscourseContextResults from "~/utils/getDiscourseContextResults";
@@ -181,7 +182,7 @@ const useDiscourseContext = (uid: string, tag: string) => {
           if (discourseNode) {
             const attribute =
               getDiscourseNodeSetting<string>(discourseNode.type, [
-                "overlay",
+                DISCOURSE_NODE_KEYS.overlay,
               ]) || "Overlay";
             return deriveDiscourseNodeAttribute({
               uid: uid,

apps/roam/src/components/DiscourseFloatingMenu.tsx

@@ -14,6 +14,7 @@ import { FeedbackWidget } from "./BirdEatsBugs";
 import { render as renderSettings } from "~/components/settings/Settings";
 import posthog from "posthog-js";
 import { getPersonalSetting } from "./settings/utils/accessors";
+import { PERSONAL_KEYS } from "./settings/utils/settingKeys";
 
 type DiscourseFloatingMenuProps = {
   // CSS placement class
@@ -129,7 +130,7 @@ export const installDiscourseFloatingMenu = (
     floatingMenuAnchor.id = ANCHOR_ID;
     document.getElementById("app")?.appendChild(floatingMenuAnchor);
   }
-  if (getPersonalSetting<boolean>(["Hide feedback button"])) {
+  if (getPersonalSetting<boolean>([PERSONAL_KEYS.hideFeedbackButton])) {
     floatingMenuAnchor.classList.add("hidden");
   }
   ReactDOM.render(

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -31,6 +31,7 @@ import {
   getPersonalSetting,
   setPersonalSetting,
 } from "~/components/settings/utils/accessors";
+import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 
 type Props = {
   textarea?: HTMLTextAreaElement;
@@ -426,7 +427,9 @@ export const NodeMenuTriggerComponent = ({
   const [isActive, setIsActive] = useState(false);
   const [comboKey, setComboKey] = useState<IKeyCombo>(
     () =>
-      getPersonalSetting<IKeyCombo>(["Personal node menu trigger"]) || {
+      getPersonalSetting<IKeyCombo>([
+        PERSONAL_KEYS.personalNodeMenuTrigger,
+      ]) || {
         modifiers: 0,
         key: "",
       },
@@ -442,7 +445,7 @@ export const NodeMenuTriggerComponent = ({
       const combo = { key: comboObj.key, modifiers: comboObj.modifiers };
       setComboKey(combo);
       void extensionAPI.settings.set("personal-node-menu-trigger", combo);
-      setPersonalSetting(["Personal node menu trigger"], combo);
+      setPersonalSetting([PERSONAL_KEYS.personalNodeMenuTrigger], combo);
     },
     [extensionAPI],
   );
@@ -464,7 +467,7 @@ export const NodeMenuTriggerComponent = ({
           onClick={() => {
             setComboKey({ modifiers: 0, key: "" });
             void extensionAPI.settings.set("personal-node-menu-trigger", "");
-            setPersonalSetting(["Personal node menu trigger"], "");
+            setPersonalSetting([PERSONAL_KEYS.personalNodeMenuTrigger], "");
           }}
           minimal
         />

apps/roam/src/components/DiscourseNodeSearchMenu.tsx

@@ -29,6 +29,7 @@ import {
   getPersonalSetting,
   setPersonalSetting,
 } from "~/components/settings/utils/accessors";
+import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 
 type Props = {
   textarea: HTMLTextAreaElement;
@@ -713,7 +714,7 @@ export const NodeSearchMenuTriggerSetting = ({
 }) => {
   const extensionAPI = onloadArgs.extensionAPI;
   const [nodeSearchTrigger, setNodeSearchTrigger] = useState<string>(
-    getPersonalSetting<string>(["Node search menu trigger"]) ?? "@",
+    getPersonalSetting<string>([PERSONAL_KEYS.nodeSearchMenuTrigger]) ?? "@",
   );
 
   const handleNodeSearchTriggerChange = (
@@ -728,7 +729,7 @@ export const NodeSearchMenuTriggerSetting = ({
 
     setNodeSearchTrigger(trigger);
     void extensionAPI.settings.set("node-search-trigger", trigger);
-    setPersonalSetting(["Node search menu trigger"], trigger);
+    setPersonalSetting([PERSONAL_KEYS.nodeSearchMenuTrigger], trigger);
   };
   return (
     <InputGroup

apps/roam/src/components/LeftSidebarView.tsx

@@ -38,6 +38,12 @@ import {
   setGlobalSetting,
   setPersonalSetting,
 } from "~/components/settings/utils/accessors";
+import {
+  PERSONAL_KEYS,
+  GLOBAL_KEYS,
+  LEFT_SIDEBAR_KEYS,
+  LEFT_SIDEBAR_SETTINGS_KEYS,
+} from "~/components/settings/utils/settingKeys";
 import type {
   LeftSidebarGlobalSettings,
   PersonalSection,
@@ -138,13 +144,20 @@ const toggleFoldedState = ({
   }
 
   if (isGlobal) {
-    setGlobalSetting(["Left sidebar", "Settings", "Folded"], newFolded);
+    setGlobalSetting(
+      [
+        GLOBAL_KEYS.leftSidebar,
+        LEFT_SIDEBAR_KEYS.settings,
+        LEFT_SIDEBAR_SETTINGS_KEYS.folded,
+      ],
+      newFolded,
+    );
   } else if (sectionIndex !== undefined) {
     const sections =
-      getPersonalSetting<PersonalSection[]>(["Left sidebar"]) || [];
+      getPersonalSetting<PersonalSection[]>([PERSONAL_KEYS.leftSidebar]) || [];
     if (sections[sectionIndex]) {
       sections[sectionIndex].Settings.Folded = newFolded;
-      setPersonalSetting(["Left sidebar"], sections);
+      setPersonalSetting([PERSONAL_KEYS.leftSidebar], sections);
     }
   }
 };
@@ -314,10 +327,10 @@ const GlobalSection = ({ config }: { config: LeftSidebarConfig["global"] }) => {
 const buildConfig = (): LeftSidebarConfig => {
   // Read VALUES from accessor (handles flag routing + mismatch detection)
   const globalValues = getGlobalSetting<LeftSidebarGlobalSettings>([
-    "Left sidebar",
+    GLOBAL_KEYS.leftSidebar,
   ]);
   const personalValues = getPersonalSetting<PersonalSection[]>([
-    "Left sidebar",
+    PERSONAL_KEYS.leftSidebar,
   ]);
 
   // Read UIDs from old system (needed for fold CRUD during dual-write)

apps/roam/src/components/QueryEditor.tsx

@@ -46,6 +46,10 @@ import { ALL_SELECTION_SUGGESTIONS } from "~/utils/predefinedSelections";
 import { getAlias } from "~/utils/parseResultSettings";
 import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 import { IndexSchema } from "~/components/settings/utils/zodSchema";
+import {
+  DISCOURSE_NODE_KEYS,
+  SPECIFICATION_KEYS,
+} from "~/components/settings/utils/settingKeys";
 
 const getSourceCandidates = (cs: Condition[]): string[] =>
   cs.flatMap((c) =>
@@ -513,7 +517,9 @@ const QueryEditor: QueryEditorComponent = ({
     }
 
     const path =
-      settingKey === "index" ? ["index"] : ["specification", "query"];
+      settingKey === "index"
+        ? [DISCOURSE_NODE_KEYS.index]
+        : [DISCOURSE_NODE_KEYS.specification, SPECIFICATION_KEYS.query];
 
     window.clearTimeout(blockPropSyncTimeoutRef.current);
     blockPropSyncTimeoutRef.current = window.setTimeout(() => {

apps/roam/src/components/SuggestionsBody.tsx

@@ -29,6 +29,10 @@ import {
   getFeatureFlag,
   getGlobalSetting,
 } from "~/components/settings/utils/accessors";
+import {
+  GLOBAL_KEYS,
+  SUGGESTIVE_MODE_KEYS,
+} from "~/components/settings/utils/settingKeys";
 import type { PageGroup } from "~/components/settings/utils/zodSchema";
 import { createReifiedRelation } from "~/utils/createReifiedBlock";
 import posthog from "posthog-js";
@@ -420,7 +424,10 @@ const SuggestionsBody = ({
 
   useEffect(() => {
     const groups =
-      getGlobalSetting<PageGroup[]>(["Suggestive mode", "Page groups"]) ?? [];
+      getGlobalSetting<PageGroup[]>([
+        GLOBAL_KEYS.suggestiveMode,
+        SUGGESTIVE_MODE_KEYS.pageGroups,
+      ]) ?? [];
 
     const groupsRecord = groups.reduce(
       (acc, group) => {

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

@@ -36,6 +36,7 @@ import { createTextJsxFromSpans } from "./DiscourseRelationShape/helpers";
 import { loadImage } from "~/utils/loadImage";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
 import { getPersonalSetting } from "~/components/settings/utils/accessors";
+import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors";
 import { render as renderToast } from "roamjs-components/components/Toast";
@@ -431,7 +432,7 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape>
     } = discourseContext.nodes[shape.type] || {};
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isOverlayEnabled = useMemo(
-      () => getPersonalSetting<boolean>(["Overlay in canvas"]),
+      () => getPersonalSetting<boolean>([PERSONAL_KEYS.overlayInCanvas]),
       [],
     );
 
@@ -513,7 +514,7 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape>
             });
 
             const autoCanvasRelations = getPersonalSetting<boolean>([
-              "Auto canvas relations",
+              PERSONAL_KEYS.autoCanvasRelations,
             ]);
             if (autoCanvasRelations) {
               try {

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

@@ -120,6 +120,7 @@ import {
 } from "./canvasSyncMode";
 import posthog from "posthog-js";
 import { getPersonalSetting } from "~/components/settings/utils/accessors";
+import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -1454,7 +1455,7 @@ const InsideEditorAndUiContext = ({
           const util = editor.getShapeUtil(shape);
           if (util instanceof BaseDiscourseNodeUtil) {
             const autoCanvasRelations = getPersonalSetting<boolean>([
-              "Auto canvas relations",
+              PERSONAL_KEYS.autoCanvasRelations,
             ]);
             if (autoCanvasRelations) {
               void util.createExistingRelations({

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

@@ -50,6 +50,7 @@ import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
 import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
 import { CanvasSyncMode } from "./canvasSyncMode";
 import { getPersonalSetting } from "~/components/settings/utils/accessors";
+import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 
 // const SyncModeMenuSwitchItem = ({
 //   checked,
@@ -326,7 +327,7 @@ export const createUiOverrides = ({
   tools: (editor, tools) => {
     // Get the custom keyboard shortcut for the discourse tool
     const discourseToolCombo = getPersonalSetting<IKeyCombo>([
-      "Discourse tool shortcut",
+      PERSONAL_KEYS.discourseToolShortcut,
     ]) || {
       key: "",
       modifiers: 0,