Eng-1473 port non boolean personal setting consumers (#823)

sid597 · web-flow · commit 36c6a480fc1d · 2026-03-01T22:19:20.000+05:30
* ENG-1473: Rebase onto updated eng-1472, resolve conflicts and fix missing import

* ENG-1473: Review fixes — remove dead extensionAPI params, fix type casts

* ENG-1473: Fix restrict-template-expressions warnings in query utils

* rename persistQueryPages → setQueryPages, setQueryPages → setInitialQueryPages

* restore legacy type coercion for query-pages
diff --git a/apps/roam/src/components/DiscourseNodeMenu.tsx b/apps/roam/src/components/DiscourseNodeMenu.tsx
@@ -27,7 +27,10 @@ import { getNewDiscourseNodeText } from "~/utils/formatUtils";
 import { OnloadArgs } from "roamjs-components/types";
 import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
-import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 type Props = {
   textarea?: HTMLTextAreaElement;
@@ -423,9 +426,10 @@ export const NodeMenuTriggerComponent = ({
   const [isActive, setIsActive] = useState(false);
   const [comboKey, setComboKey] = useState<IKeyCombo>(
     () =>
-      (extensionAPI.settings.get(
-        "personal-node-menu-trigger",
-      ) as IKeyCombo) || { modifiers: 0, key: "" },
+      getPersonalSetting<IKeyCombo>(["Personal node menu trigger"]) || {
+        modifiers: 0,
+        key: "",
+      },
   );
 
   const handleKeyDown = useCallback(
diff --git a/apps/roam/src/components/DiscourseNodeSearchMenu.tsx b/apps/roam/src/components/DiscourseNodeSearchMenu.tsx
@@ -24,9 +24,11 @@ import { OnloadArgs } from "roamjs-components/types";
 import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
 import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpression";
 import { Result } from "~/utils/types";
-import { getSetting } from "~/utils/extensionSettings";
 import MiniSearch from "minisearch";
-import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 type Props = {
   textarea: HTMLTextAreaElement;
@@ -711,7 +713,7 @@ export const NodeSearchMenuTriggerSetting = ({
 }) => {
   const extensionAPI = onloadArgs.extensionAPI;
   const [nodeSearchTrigger, setNodeSearchTrigger] = useState<string>(
-    getSetting("node-search-trigger", "@"),
+    getPersonalSetting<string>(["Node search menu trigger"]) ?? "@",
   );
 
   const handleNodeSearchTriggerChange = (
diff --git a/apps/roam/src/components/ModifyNodeDialog.tsx b/apps/roam/src/components/ModifyNodeDialog.tsx
@@ -280,10 +280,7 @@ const ModifyNodeDialog = ({
       }
 
       if (keyImageOption === "query-builder") {
-        const parentUid = resolveQueryBuilderRef({
-          queryRef: qbAlias,
-          extensionAPI,
-        });
+        const parentUid = resolveQueryBuilderRef({ queryRef: qbAlias });
         const results = await runQuery({
           extensionAPI,
           parentUid,
diff --git a/apps/roam/src/components/settings/DefaultFilters.tsx b/apps/roam/src/components/settings/DefaultFilters.tsx
@@ -3,7 +3,10 @@ import React, { useEffect, useState } from "react";
 import type { OnloadArgs } from "roamjs-components/types";
 import type { Filters } from "roamjs-components/components/Filter";
 import posthog from "posthog-js";
-import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 //
 // TODO - REWORK THIS COMPONENT
@@ -106,10 +109,10 @@ const DefaultFilters = ({
   const [filters, setFilters] = useState(() =>
     Object.fromEntries(
       Object.entries(
-        (extensionAPI.settings.get("default-filters") as Record<
-          string,
-          StoredFilters
-        >) || {},
+        getPersonalSetting<Record<string, StoredFilters>>([
+          "Query",
+          "Default filters",
+        ]) ?? {},
       ).map(([k, v]) => [
         k,
         {
diff --git a/apps/roam/src/components/settings/KeyboardShortcutInput.tsx b/apps/roam/src/components/settings/KeyboardShortcutInput.tsx
@@ -9,7 +9,10 @@ import {
 } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
 import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
-import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 import { comboToString } from "~/components/DiscourseNodeMenu";
 
 type KeyboardShortcutInputProps = {
@@ -34,7 +37,7 @@ const KeyboardShortcutInput = ({
   const [isActive, setIsActive] = useState(false);
   const [comboKey, setComboKey] = useState<IKeyCombo>(
     () =>
-      (extensionAPI.settings.get(settingKey) as IKeyCombo) || {
+      getPersonalSetting<IKeyCombo>([blockPropKey]) || {
         modifiers: 0,
         key: "",
       },
diff --git a/apps/roam/src/components/settings/QueryPagesPanel.tsx b/apps/roam/src/components/settings/QueryPagesPanel.tsx
@@ -2,12 +2,18 @@ import { Button, InputGroup } from "@blueprintjs/core";
 import posthog from "posthog-js";
 import React, { useState } from "react";
 import type { OnloadArgs } from "roamjs-components/types";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
-export const getQueryPages = (extensionAPI: OnloadArgs["extensionAPI"]) => {
-  const value = extensionAPI.settings.get("query-pages") as
-    | string[]
-    | string
-    | Record<string, string>;
+// Legacy extensionAPI stored query-pages as string | string[] | Record<string, string>.
+// Coerce to string[] for backward compatibility with old stored formats.
+export const getQueryPages = (): string[] => {
+  const value = getPersonalSetting<string[] | string | Record<string, string>>([
+    "Query",
+    "Query pages",
+  ]);
   return typeof value === "string"
     ? [value]
     : Array.isArray(value)
@@ -22,8 +28,13 @@ const QueryPagesPanel = ({
 }: {
   extensionAPI: OnloadArgs["extensionAPI"];
 }) => {
-  const [texts, setTexts] = useState(() => getQueryPages(extensionAPI));
+  const [texts, setTexts] = useState(() => getQueryPages());
   const [value, setValue] = useState("");
+  const setQueryPages = (newTexts: string[]) => {
+    setPersonalSetting(["Query", "Query pages"], newTexts);
+    void extensionAPI.settings.set("query-pages", newTexts);
+  };
+
   return (
     <div
       className="flex flex-col"
@@ -45,7 +56,7 @@ const QueryPagesPanel = ({
           onClick={() => {
             const newTexts = [...texts, value];
             setTexts(newTexts);
-            extensionAPI.settings.set("query-pages", newTexts);
+            setQueryPages(newTexts);
             setValue("");
             posthog.capture("Query Page: Page Format Added", {
               newType: value,
@@ -70,7 +81,7 @@ const QueryPagesPanel = ({
             onClick={() => {
               const newTexts = texts.filter((_, jndex) => index !== jndex);
               setTexts(newTexts);
-              extensionAPI.settings.set("query-pages", newTexts);
+              setQueryPages(newTexts);
             }}
           />
         </div>
diff --git a/apps/roam/src/components/settings/QuerySettings.tsx b/apps/roam/src/components/settings/QuerySettings.tsx
@@ -4,7 +4,6 @@ import { Label } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
 import { DEFAULT_PAGE_SIZE_KEY, HIDE_METADATA_KEY } from "~/data/userSettings";
 import DefaultFilters from "./DefaultFilters";
-import { getQueryPages } from "./QueryPagesPanel";
 import {
   PersonalFlagPanel,
   PersonalNumberPanel,
@@ -37,9 +36,6 @@ const QuerySettings = ({
         title="Default page size"
         description="The default page size used for query results"
         settingKeys={["Query", "Default page size"]}
-        initialValue={
-          Number(extensionAPI.settings.get(DEFAULT_PAGE_SIZE_KEY)) || 10
-        }
         onChange={(value) => {
           void extensionAPI.settings.set(DEFAULT_PAGE_SIZE_KEY, value);
           posthog.capture("Query Settings: Default Page Size Changed", {
@@ -51,7 +47,6 @@ const QuerySettings = ({
         title="Query pages"
         description="The title formats of pages that you would like to serve as pages that generate queries"
         settingKeys={["Query", "Query pages"]}
-        initialValue={getQueryPages(extensionAPI)}
         onChange={(values) => {
           void extensionAPI.settings.set("query-pages", values);
         }}
diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts
@@ -13,7 +13,7 @@ import { listActiveQueries } from "./utils/listActiveQueries";
 import { registerSmartBlock } from "./utils/registerSmartBlock";
 import { initObservers } from "./utils/initializeObserversAndListeners";
 import { addGraphViewNodeStyling } from "./utils/graphViewNodeStyling";
-import { setQueryPages } from "./utils/setQueryPages";
+import { setInitialQueryPages } from "./utils/setQueryPages";
 import initializeDiscourseNodes from "./utils/initializeDiscourseNodes";
 import styles from "./styles/styles.css";
 import discourseFloatingMenuStyles from "./styles/discourseFloatingMenuStyles.css";
@@ -83,7 +83,7 @@ export default runExtension(async (onloadArgs) => {
   registerCommandPaletteCommands(onloadArgs);
   createSettingsPanel(onloadArgs);
   registerSmartBlock(onloadArgs);
-  setQueryPages(onloadArgs);
+  setInitialQueryPages(onloadArgs);
 
   const style = addStyle(styles);
   const discourseGraphStyle = addStyle(discourseGraphStyles);
@@ -133,7 +133,7 @@ export default runExtension(async (onloadArgs) => {
       const queryArgs = parseQuery(parentUid);
       return fireQuerySync(queryArgs);
     },
-    listActiveQueries: () => listActiveQueries(extensionAPI),
+    listActiveQueries: () => listActiveQueries(),
     isDiscourseNode: isDiscourseNode,
     // @ts-expect-error - we are still using roamjs-components global definition
     getDiscourseNodes: getDiscourseNodes,
diff --git a/apps/roam/src/utils/calcCanvasNodeSizeAndImg.ts b/apps/roam/src/utils/calcCanvasNodeSizeAndImg.ts
@@ -107,10 +107,7 @@ const calcCanvasNodeSizeAndImg = async ({
 
   let imageUrl;
   if (keyImageOption === "query-builder") {
-    const parentUid = resolveQueryBuilderRef({
-      queryRef: qbAlias,
-      extensionAPI,
-    });
+    const parentUid = resolveQueryBuilderRef({ queryRef: qbAlias });
     const results = await runQuery({
       extensionAPI,
       parentUid,
@@ -126,10 +123,15 @@ const calcCanvasNodeSizeAndImg = async ({
 
   try {
     const { width, height } = await loadImage(imageUrl);
-    if (!width || !height || !Number.isFinite(width) || !Number.isFinite(height)) {
+    if (
+      !width ||
+      !height ||
+      !Number.isFinite(width) ||
+      !Number.isFinite(height)
+    ) {
       return { w, h, imageUrl: "" };
     }
-    
+
     const aspectRatio = width / height;
     const nodeImageHeight = w / aspectRatio;
     const newHeight = h + nodeImageHeight;
diff --git a/apps/roam/src/utils/createDiscourseNode.ts b/apps/roam/src/utils/createDiscourseNode.ts
@@ -80,10 +80,7 @@ const createDiscourseNode = async ({
       if (keyImageOption === "query-builder") {
         if (!extensionAPI) return;
 
-        const parentUid = resolveQueryBuilderRef({
-          queryRef: qbAlias,
-          extensionAPI,
-        });
+        const parentUid = resolveQueryBuilderRef({ queryRef: qbAlias });
         const results = await runQuery({
           extensionAPI,
           parentUid,
diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts
@@ -40,6 +40,7 @@ import {
   getModifiersFromCombo,
   render as renderDiscourseNodeMenu,
 } from "~/components/DiscourseNodeMenu";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 import { IKeyCombo } from "@blueprintjs/core";
 import { configPageTabs } from "~/utils/configPageTabs";
 import { renderDiscourseNodeSearchMenu } from "~/components/DiscourseNodeSearchMenu";
@@ -51,7 +52,6 @@ import {
 import { renderNodeTagPopupButton } from "./renderNodeTagPopup";
 import { renderImageToolsMenu } from "./renderImageToolsMenu";
 import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
-import { getSetting } from "./extensionSettings";
 import { mountLeftSidebar } from "~/components/LeftSidebarView";
 import { getUidAndBooleanSetting } from "./getExportSettings";
 import { getCleanTagText } from "~/components/settings/NodeConfig";
@@ -128,7 +128,7 @@ export const initObservers = async ({
       }
 
       if (isNodeConfigPage(title)) renderNodeConfigPage(props);
-      else if (isQueryPage(props)) renderQueryPage(props);
+      else if (isQueryPage({ title })) renderQueryPage(props);
       else if (isCurrentPageCanvas(props)) renderTldrawCanvas(props);
       else if (isSidebarCanvas(props)) renderTldrawCanvasInSidebar(props);
     },
@@ -262,12 +262,13 @@ export const initObservers = async ({
     key: "trigger",
     defaultValue: "\\",
   }).trim();
-  const personalTriggerCombo =
-    (onloadArgs.extensionAPI.settings.get(
-      "personal-node-menu-trigger",
-    ) as IKeyCombo) || undefined;
+  const personalTriggerCombo = getPersonalSetting<IKeyCombo>([
+    "Personal node menu trigger",
+  ]);
   const personalTrigger = personalTriggerCombo?.key;
-  const personalModifiers = getModifiersFromCombo(personalTriggerCombo);
+  const personalModifiers = personalTriggerCombo
+    ? getModifiersFromCombo(personalTriggerCombo)
+    : [];
 
   const leftSidebarObserver = createHTMLObserver({
     tag: "DIV",
@@ -329,7 +330,8 @@ export const initObservers = async ({
     }
   };
 
-  const customTrigger = getSetting("node-search-trigger", "@");
+  const customTrigger =
+    getPersonalSetting<string>(["Node search menu trigger"]) ?? "@";
 
   const discourseNodeSearchTriggerListener = (e: Event) => {
     const evt = e as KeyboardEvent;
diff --git a/apps/roam/src/utils/isQueryPage.ts b/apps/roam/src/utils/isQueryPage.ts
@@ -1,15 +1,7 @@
-import { OnloadArgs } from "roamjs-components/types";
 import { getQueryPages } from "~/components/settings/QueryPagesPanel";
 
-export const isQueryPage = ({
-  title,
-  onloadArgs,
-}: {
-  title: string;
-  onloadArgs: OnloadArgs;
-}): boolean => {
-  const { extensionAPI } = onloadArgs;
-  const queryPages = getQueryPages(extensionAPI);
+export const isQueryPage = ({ title }: { title: string }): boolean => {
+  const queryPages = getQueryPages();
 
   const matchesQueryPage = queryPages.some((queryPage) => {
     const escapedPattern = queryPage
diff --git a/apps/roam/src/utils/listActiveQueries.ts b/apps/roam/src/utils/listActiveQueries.ts
@@ -1,19 +1,20 @@
 import { PullBlock } from "roamjs-components/types";
 import { getQueryPages } from "~/components/settings/QueryPagesPanel";
-import { OnloadArgs } from "roamjs-components/types";
 
-export const listActiveQueries = (extensionAPI: OnloadArgs["extensionAPI"]) =>
+export const listActiveQueries = () =>
   (
     window.roamAlphaAPI.data.fast.q(
       `[:find (pull ?b [:block/uid]) :where [or-join [?b] 
                [and [?b :block/string ?s] [[clojure.string/includes? ?s "{{query block}}"]] ]
-               ${getQueryPages(extensionAPI).map(
-                 (p) =>
-                   `[and [?b :node/title ?t] [[re-pattern "^${p.replace(
-                     /\*/,
-                     ".*",
-                   )}$"] ?regex] [[re-find ?regex ?t]]]`,
-               )}
+               ${getQueryPages()
+                 .map(
+                   (p) =>
+                     `[and [?b :node/title ?t] [[re-pattern "^${p.replace(
+                       /\*/,
+                       ".*",
+                     )}$"] ?regex] [[re-find ?regex ?t]]]`,
+                 )
+                 .join("\n")}
           ]]`,
     ) as [PullBlock][]
   ).map((b) => ({ uid: b[0][":block/uid"] || "" }));
diff --git a/apps/roam/src/utils/registerSmartBlock.ts b/apps/roam/src/utils/registerSmartBlock.ts
@@ -34,7 +34,7 @@ export const registerSmartBlock = (onloadArgs: OnloadArgs) => {
             }
           : { text: formatArg || "{text}", children: [], uid: "" };
         const queryRef = variables[arg] || arg;
-        const parentUid = resolveQueryBuilderRef({ queryRef, extensionAPI });
+        const parentUid = resolveQueryBuilderRef({ queryRef });
         return runQuery({
           parentUid,
           extensionAPI,
diff --git a/apps/roam/src/utils/resolveQueryBuilderRef.ts b/apps/roam/src/utils/resolveQueryBuilderRef.ts
diff --git a/apps/roam/src/utils/setQueryPages.ts b/apps/roam/src/utils/setQueryPages.ts
