ENG-1473: Port non-boolean personal setting consumers

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -27,6 +27,9 @@ import { getNewDiscourseNodeText } from "~/utils/formatUtils";
 import { OnloadArgs } from "roamjs-components/types";
 import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
+import {
+  getPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 type Props = {
   textarea?: HTMLTextAreaElement;
@@ -415,9 +418,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,8 +24,11 @@
 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 {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 type Props = {
   textarea: HTMLTextAreaElement;
@@ -710,7 +713,7 @@
 }) => {
   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/settings/DefaultFilters.tsx

@@ -3,6 +3,10 @@
 import type { OnloadArgs } from "roamjs-components/types";
 import type { Filters } from "roamjs-components/components/Filter";
 import posthog from "posthog-js";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 //
 // TODO - REWORK THIS COMPONENT
@@ -105,10 +109,10 @@
   const [filters, setFilters] = useState(() =>
     Object.fromEntries(
       Object.entries(
-        (extensionAPI.settings.get("default-filters") as Record<
-          string,
-          StoredFilters
-        >) || {},
+        getPersonalSetting<Record<string, StoredFilters>>([
+          "Query",
+          "Default filters",
+        ]) as Record<string, StoredFilters>,
       ).map(([k, v]) => [
         k,
         {
@@ -146,7 +150,9 @@
         ]),
       ),
     );
-  }, [filters]);
+    void extensionAPI.settings.set("default-filters", serialized);
+    setPersonalSetting(["Query", "Default filters"], serialized);
+  }, [extensionAPI.settings, filters]);
   return (
     <div
       style={{

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

@@ -10,6 +10,10 @@
 import Description from "roamjs-components/components/Description";
 import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 
+import {
+  getPersonalSetting
+} from "~/components/settings/utils/accessors";
+
 type KeyboardShortcutInputProps = {
   onloadArgs: OnloadArgs;
   settingKey: string;
@@ -74,7 +78,7 @@
   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,19 +2,16 @@ 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 = (
+  extensionAPI: OnloadArgs["extensionAPI"],
+): string[] => {
+  void extensionAPI;
+  return getPersonalSetting<string[]>(["Query", "Query pages"]) as string[];
 };
 
 const QueryPagesPanel = ({
@@ -24,6 +21,11 @@ const QueryPagesPanel = ({
 }) => {
   const [texts, setTexts] = useState(() => getQueryPages(extensionAPI));
   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 +47,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 +72,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,
@@ -34,9 +33,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", {
@@ -48,7 +44,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/components/settings/utils/accessors.ts

@@ -217,7 +217,8 @@ const getLegacyPersonalLeftSidebarSetting = (): Record<string, unknown> => {
 };
 
 const getLegacyPersonalSetting = (keys: string[]): unknown => {
-  const mappedOldKey = PERSONAL_OLD_KEY_MAP.get(pathKey(keys));
+  const path = pathKey(keys);
+  const mappedOldKey = PERSONAL_OLD_KEY_MAP.get(path);
   if (mappedOldKey) {
     return getSetting<unknown>(
       mappedOldKey,

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -51,7 +51,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";
@@ -263,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",
@@ -330,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/setQueryPages.ts

@@ -1,18 +1,15 @@
 import { OnloadArgs } from "roamjs-components/types";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 export const setQueryPages = (onloadArgs: OnloadArgs) => {
-  const queryPages = onloadArgs.extensionAPI.settings.get("query-pages");
-  const queryPageArray = Array.isArray(queryPages)
-    ? queryPages
-    : typeof queryPages === "object"
-      ? []
-      : typeof queryPages === "string" && queryPages
-        ? [queryPages]
-        : [];
+  const queryPages = getPersonalSetting<string[]>(["Query", "Query pages"]);
+  const queryPageArray = Array.isArray(queryPages) ? queryPages : [];
   if (!queryPageArray.includes("discourse-graph/queries/*")) {
-    onloadArgs.extensionAPI.settings.set("query-pages", [
-      ...queryPageArray,
-      "discourse-graph/queries/*",
-    ]);
+    const updated = [...queryPageArray, "discourse-graph/queries/*"];
+    void onloadArgs.extensionAPI.settings.set("query-pages", updated);
+    setPersonalSetting(["Query", "Query pages"], updated);
   }
 };