ENG-1272 Migrate all small global settings components

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

@@ -1,80 +1,63 @@
 import React from "react";
-import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
-import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
-import NumberPanel from "roamjs-components/components/ConfigPanels/NumberPanel";
-import MultiTextPanel from "roamjs-components/components/ConfigPanels/MultiTextPanel";
-import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
+import {
+  GlobalFlagPanel,
+  GlobalNumberPanel,
+  GlobalSelectPanel,
+  GlobalMultiTextPanel,
+} from "./components/BlockPropSettingPanels";
 
-const DiscourseGraphExport = ({}: {}) => {
-  const settings = getFormattedConfigTree();
-  const exportSettings = settings.export;
-  const parentUid = settings.export.exportUid;
+const DiscourseGraphExport = () => {
   return (
     <div className="flex flex-col gap-4 p-1">
       <div>
-        <FlagPanel
+        <GlobalFlagPanel
           title="remove special characters"
           description="Whether or not to remove the special characters in a file name"
-          order={1}
-          uid={exportSettings.removeSpecialCharacters.uid}
-          parentUid={parentUid}
-          value={exportSettings.removeSpecialCharacters.value || false}
+          settingKeys={["Export", "Remove Special Characters"]}
+          defaultValue={false}
         />
 
-        <FlagPanel
+        <GlobalFlagPanel
           title="resolve block references"
           description="Replaces block references in the markdown content with the block's content"
-          order={3}
-          uid={exportSettings.optsRefs.uid}
-          parentUid={parentUid}
-          value={exportSettings.optsRefs.value || false}
+          settingKeys={["Export", "Resolve Block References"]}
+          defaultValue={false}
         />
-        <FlagPanel
+        <GlobalFlagPanel
           title="resolve block embeds"
           description="Replaces block embeds in the markdown content with the block's content tree"
-          order={4}
-          uid={exportSettings.optsEmbeds.uid}
-          parentUid={parentUid}
-          value={exportSettings.optsEmbeds.value || false}
+          settingKeys={["Export", "Resolve Block Embeds"]}
+          defaultValue={false}
         />
 
-        <FlagPanel
+        <GlobalFlagPanel
           title="append referenced node"
           description="If a referenced node is defined in a node's format, it will be appended to the discourse context"
-          order={6}
-          uid={exportSettings.appendRefNodeContext.uid}
-          parentUid={parentUid}
-          value={exportSettings.appendRefNodeContext.value || false}
+          settingKeys={["Export", "Append Referenced Node"]}
+          defaultValue={false}
         />
       </div>
       <div className="link-type-select-wrapper">
-        <SelectPanel
+        <GlobalSelectPanel
           title="link type"
           description="How to format links that appear in your export."
-          order={5}
-          options={{
-            items: ["alias", "wikilinks", "roam url"],
-          }}
-          uid={exportSettings.linkType.uid}
-          parentUid={parentUid}
-          value={exportSettings.linkType.value || "alias"}
+          settingKeys={["Export", "Link Type"]}
+          options={["alias", "wikilinks", "roam url"]}
+          defaultValue="alias"
         />
       </div>
-      <NumberPanel
+      <GlobalNumberPanel
         title="max filename length"
         description="Set the maximum name length for markdown file exports"
-        order={0}
-        uid={exportSettings.maxFilenameLength.uid}
-        parentUid={parentUid}
-        value={exportSettings.maxFilenameLength.value || 64}
+        settingKeys={["Export", "Max Filename Length"]}
+        defaultValue={64}
+        min={1}
       />
-      <MultiTextPanel
+      <GlobalMultiTextPanel
         title="frontmatter"
         description="Specify all the lines that should go to the Frontmatter of the markdown file"
-        order={2}
-        uid={exportSettings.frontmatter.uid}
-        parentUid={parentUid}
-        value={exportSettings.frontmatter.values || []}
+        settingKeys={["Export", "Frontmatter"]}
+        defaultValue={[]}
       />
     </div>
   );

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

@@ -1,33 +1,20 @@
-import React, { useMemo } from "react";
-import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
-import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
-import refreshConfigTree from "~/utils/refreshConfigTree";
+import React from "react";
 import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index";
-import { FeatureFlagPanel } from "./components/BlockPropSettingPanels";
+import { FeatureFlagPanel, GlobalTextPanel } from "./components/BlockPropSettingPanels";
 
 const DiscourseGraphHome = () => {
-  const settings = useMemo(() => {
-    refreshConfigTree();
-    return getFormattedConfigTree();
-  }, []);
-
   return (
     <div className="flex flex-col gap-4 p-1">
-      <TextPanel
+      <GlobalTextPanel
         title="trigger"
         description="The trigger to create the node menu."
-        order={0}
-        uid={settings.trigger.uid}
-        parentUid={settings.settingsUid}
-        value={settings.trigger.value}
+        settingKeys={["Trigger"]}
+        defaultValue="\\"
       />
-      <TextPanel
+      <GlobalTextPanel
         title="Canvas Page Format"
         description="The page format for canvas pages"
-        order={1}
-        uid={settings.canvasPageFormat.uid}
-        parentUid={settings.settingsUid}
-        value={settings.canvasPageFormat.value}
+        settingKeys={["Canvas Page Format"]}
         defaultValue={DEFAULT_CANVAS_PAGE_FORMAT}
       />
       <FeatureFlagPanel

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

@@ -2,26 +2,33 @@
 import React, { useEffect, useState } from "react";
 import { Button, Intent, Tabs, Tab, TabId } from "@blueprintjs/core";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
-import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import PageGroupsPanel from "./PageGroupPanel";
 import createBlock from "roamjs-components/writes/createBlock";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
 import { createOrUpdateDiscourseEmbedding } from "~/utils/syncDgNodesToSupabase";
 import { render as renderToast } from "roamjs-components/components/Toast";
+import { GlobalFlagPanel } from "./components/BlockPropSettingPanels";
+import { getGlobalSetting } from "./utils/accessors";
 
 const SuggestiveModeSettings = () => {
+  // Keep old config tree for PageGroups (not yet migrated)
   const settings = getFormattedConfigTree();
+  const pageGroupsUid = settings.suggestiveMode.pageGroups.uid;
 
   const [suggestiveModeUid, setSuggestiveModeUid] = useState(
     settings.suggestiveMode.parentUid,
   );
-  const pageGroupsUid = settings.suggestiveMode.pageGroups.uid;
 
-  const [includePageRelations, setIncludePageRelations] = useState(
-    settings.suggestiveMode.includePageRelations.value,
+  // Track includePageRelations to control the disabled state of includeParentAndChildren
+  const [includePageRelations, setIncludePageRelations] = useState(() =>
+    getGlobalSetting<boolean>([
+      "Suggestive Mode",
+      "Include Current Page Relations",
+    ]),
   );
 
+  // Keep this useEffect for PageGroups compatibility (old system)
   useEffect(() => {
     if (suggestiveModeUid) return;
     void (async () => {
@@ -33,9 +40,6 @@ const SuggestiveModeSettings = () => {
     })();
   }, [suggestiveModeUid]);
 
-  const effectiveSuggestiveModeUid =
-    suggestiveModeUid || settings.suggestiveMode.parentUid;
-
   const [selectedTabId, setSelectedTabId] = useState<TabId>("page-groups");
 
   return (
@@ -64,35 +68,21 @@ const SuggestiveModeSettings = () => {
           panel={
             <div className="flex flex-col gap-4 p-1">
               <div className="sync-config-settings">
-                <FlagPanel
+                <GlobalFlagPanel
                   title="Include Current Page Relations"
                   description="Include relations from pages referenced on the current page"
-                  order={0}
-                  uid={settings.suggestiveMode.includePageRelations.uid}
-                  parentUid={effectiveSuggestiveModeUid}
-                  value={includePageRelations}
-                  options={{
-                    onChange: (checked: boolean) => {
-                      setIncludePageRelations(checked);
-                    },
-                  }}
+                  settingKeys={["Suggestive Mode", "Include Current Page Relations"]}
+                  onChange={setIncludePageRelations}
                 />
 
-                <FlagPanel
+                <GlobalFlagPanel
                   title="Include Parent And Child Blocks"
                   description={
                     includePageRelations
                       ? "Include relations from parent and child blocks (automatically enabled when including page relations)"
                       : "Include relations from parent and child blocks"
                   }
-                  order={1}
-                  uid={settings.suggestiveMode.includeParentAndChildren.uid}
-                  parentUid={effectiveSuggestiveModeUid}
-                  value={
-                    includePageRelations
-                      ? true
-                      : settings.suggestiveMode.includeParentAndChildren.value
-                  }
+                  settingKeys={["Suggestive Mode", "Include Parent And Child Blocks"]}
                   disabled={includePageRelations}
                 />
               </div>

apps/roam/src/utils/getExportSettings.ts

@@ -3,6 +3,8 @@ import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTit
 import { RoamBasicNode } from "roamjs-components/types";
 import { getSubTree } from "roamjs-components/util";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { getGlobalSetting } from "~/components/settings/utils/accessors";
+import type { ExportSettings } from "~/components/settings/utils/zodSchema";
 
 type UidPair<T> = {
   uid?: string;
@@ -110,16 +112,18 @@ export const getExportSettingsAndUids = (): ExportConfigWithUids => {
 };
 
 export const getExportSettings = (): Omit<ExportConfig, "exportUid"> => {
-  const settings = getExportSettingsAndUids();
+  // Zod schema applies defaults, so we can trust the values exist
+  const exportSettings = getGlobalSetting<ExportSettings>(["Export"])!;
+
   return {
-    maxFilenameLength: settings.maxFilenameLength.value,
-    openSidebar: settings.openSidebar.value,
-    removeSpecialCharacters: settings.removeSpecialCharacters.value,
-    simplifiedFilename: settings.simplifiedFilename.value,
-    optsEmbeds: settings.optsEmbeds.value,
-    optsRefs: settings.optsRefs.value,
-    linkType: settings.linkType.value,
-    appendRefNodeContext: settings.appendRefNodeContext.value,
-    frontmatter: settings.frontmatter.values,
+    maxFilenameLength: exportSettings["Max Filename Length"],
+    openSidebar: false, // Only in old config page, not in Settings dialog
+    removeSpecialCharacters: exportSettings["Remove Special Characters"],
+    simplifiedFilename: false, // Only in old config page, not in Settings dialog
+    optsEmbeds: exportSettings["Resolve Block Embeds"],
+    optsRefs: exportSettings["Resolve Block References"],
+    linkType: exportSettings["Link Type"],
+    appendRefNodeContext: exportSettings["Append Referenced Node"],
+    frontmatter: exportSettings["Frontmatter"],
   };
 };

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -31,8 +31,6 @@ import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import { OnloadArgs } from "roamjs-components/types";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { render as renderGraphOverviewExport } from "~/components/ExportDiscourseContext";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
-import { getSettingValueFromTree } from "roamjs-components/util";
 import {
   getModifiersFromCombo,
   render as renderDiscourseNodeMenu,
@@ -52,7 +50,10 @@ import { getSetting } from "./extensionSettings";
 import { mountLeftSidebar, cacheOnloadArgs } from "~/components/LeftSidebarView";
 import { getUidAndBooleanSetting } from "./getExportSettings";
 import { getCleanTagText } from "~/components/settings/NodeConfig";
-import { getFeatureFlag } from "~/components/settings/utils/accessors";
+import {
+  getFeatureFlag,
+  getGlobalSetting,
+} from "~/components/settings/utils/accessors";
 import getPleasingColors from "@repo/utils/getPleasingColors";
 import { colord } from "colord";
 import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches";
@@ -239,12 +240,9 @@ export const initObservers = async ({
     }
   };
 
-  const configTree = getBasicTreeByParentUid(configPageUid);
-  const globalTrigger = getSettingValueFromTree({
-    tree: configTree,
-    key: "trigger",
-    defaultValue: "\\",
-  }).trim();
+  const globalTrigger = (
+    getGlobalSetting<string>(["Trigger"]) || "\\"
+  ).trim();
   const personalTriggerCombo =
     (onloadArgs.extensionAPI.settings.get(
       "personal-node-menu-trigger",

apps/roam/src/utils/isCanvasPage.ts

@@ -1,9 +1,10 @@
 import { DEFAULT_CANVAS_PAGE_FORMAT } from "..";
-import { getFormattedConfigTree } from "./discourseConfigRef";
+import { getGlobalSetting } from "~/components/settings/utils/accessors";
 
 export const isCanvasPage = ({ title }: { title: string }) => {
-  const { canvasPageFormat } = getFormattedConfigTree();
-  const format = canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT;
+  const format =
+    getGlobalSetting<string>(["Canvas Page Format"]) ||
+    DEFAULT_CANVAS_PAGE_FORMAT;
   const canvasRegex = new RegExp(`^${format}$`.replace(/\*/g, ".+"));
   return canvasRegex.test(title);
 };