Eng-1473 port non boolean personal setting consumers

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(

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 = (

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,

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,
         {

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: "",
       },

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

@@ -2,28 +2,29 @@ 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>;
-  return typeof value === "string"
-    ? [value]
-    : Array.isArray(value)
-      ? value
-      : typeof value === "object" && value !== null
-        ? Object.keys(value)
-        : ["queries/*"];
+export const getQueryPages = (): string[] => {
+  return (
+    getPersonalSetting<string[]>(["Query", "Query pages"]) ?? ["queries/*"]
+  );
 };
 
 const QueryPagesPanel = ({
   extensionAPI,
 }: {
   extensionAPI: OnloadArgs["extensionAPI"];
 }) => {
-  const [texts, setTexts] = useState(() => getQueryPages(extensionAPI));
+  const [texts, setTexts] = useState(() => getQueryPages());
   const [value, setValue] = useState("");
+  const persistQueryPages = (newTexts: string[]) => {
+    setPersonalSetting(["Query", "Query pages"], newTexts);
+    void extensionAPI.settings.set("query-pages", newTexts);
+  };
+
   return (
     <div
       className="flex flex-col"
@@ -45,7 +46,7 @@ const QueryPagesPanel = ({
           onClick={() => {
             const newTexts = [...texts, value];
             setTexts(newTexts);
-            extensionAPI.settings.set("query-pages", newTexts);
+            persistQueryPages(newTexts);
             setValue("");
             posthog.capture("Query Page: Page Format Added", {
               newType: value,
@@ -70,7 +71,7 @@ const QueryPagesPanel = ({
             onClick={() => {
               const newTexts = texts.filter((_, jndex) => index !== jndex);
               setTexts(newTexts);
-              extensionAPI.settings.set("query-pages", newTexts);
+              persistQueryPages(newTexts);
             }}
           />
         </div>

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);
         }}

apps/roam/src/index.ts

@@ -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,

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;

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,

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;

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

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"] || "" }));

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,

apps/roam/src/utils/resolveQueryBuilderRef.ts

@@ -1,24 +1,19 @@
 import isLiveBlock from "roamjs-components/queries/isLiveBlock";
 import extractRef from "roamjs-components/util/extractRef";
 import { getQueryPages } from "~/components/settings/QueryPagesPanel";
-import { OnloadArgs } from "roamjs-components/types";
 
-const resolveQueryBuilderRef = ({
-  queryRef,
-  extensionAPI,
-}: {
-  queryRef: string;
-  extensionAPI: OnloadArgs["extensionAPI"];
-}) => {
+const resolveQueryBuilderRef = ({ queryRef }: { queryRef: string }) => {
   const parentUid = isLiveBlock(extractRef(queryRef))
     ? extractRef(queryRef)
     : window.roamAlphaAPI.data.fast
         .q(
           `[:find ?uid :where [?b :block/uid ?uid] [or-join [?b] 
              [and [?b :block/string ?s] [[clojure.string/includes? ?s "{{query block:${queryRef}}}"]] ]
-             ${getQueryPages(extensionAPI).map(
-               (p) => `[and [?b :node/title "${p.replace(/\*/, queryRef)}"]]`,
-             )}
+             ${getQueryPages()
+               .map(
+                 (p) => `[and [?b :node/title "${p.replace(/\*/, queryRef)}"]]`,
+               )
+               .join("\n")}
               [and [?b :node/title "${queryRef}"]]
         ]]`,
         )[0]