ENG-1467: Port global setting consumer reads (→ getGlobalSetting)

apps/roam/src/components/SuggestionsBody.tsx

@@ -24,10 +24,12 @@ import getDiscourseRelations from "~/utils/getDiscourseRelations";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import normalizePageTitle from "roamjs-components/queries/normalizePageTitle";
 import { type RelationDetails } from "~/utils/hyde";
-import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import { render as renderToast } from "roamjs-components/components/Toast";
-import { getSetting } from "~/utils/extensionSettings";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
+import {
+  getFeatureFlag,
+  getGlobalSetting,
+} from "~/components/settings/utils/accessors";
+import type { PageGroup } from "~/components/settings/utils/zodSchema";
 import { createReifiedRelation } from "~/utils/createReifiedBlock";
 import posthog from "posthog-js";
 
@@ -310,7 +312,7 @@ const SuggestionsBody = ({
   };
 
   const handleCreateBlock = async (node: SuggestedNode) => {
-    if (getSetting<boolean>(USE_REIFIED_RELATIONS, false)) {
+    if (getFeatureFlag("Reified relation triples")) {
       if (discourseNode === false) {
         renderToast({
           id: "suggestions-create-block-error",
@@ -374,7 +376,7 @@ const SuggestionsBody = ({
       tag,
       nodeType: node.type,
       nodeText: node.text,
-      useReifiedRelations: getSetting<boolean>(USE_REIFIED_RELATIONS, false),
+      useReifiedRelations: getFeatureFlag("Reified relation triples"),
     });
     setHydeFilteredNodes((prev) => prev.filter((n) => n.uid !== node.uid));
   };
@@ -417,12 +419,12 @@ const SuggestionsBody = ({
   };
 
   useEffect(() => {
-    const config = getFormattedConfigTree();
-    const groups = config.suggestiveMode.pageGroups.groups;
+    const groups =
+      getGlobalSetting<PageGroup[]>(["Suggestive mode", "Page groups"]) ?? [];
 
     const groupsRecord = groups.reduce(
       (acc, group) => {
-        acc[group.name] = group.pages.map((p) => p.name);
+        acc[group.name] = group.pages;
         return acc;
       },
       {} as Record<string, string[]>,

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

@@ -14,7 +14,11 @@ import {
 } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
 import { Select } from "@blueprintjs/select";
-import { getSetting, setSetting } from "~/utils/extensionSettings";
+import { setSetting } from "~/utils/extensionSettings";
+import {
+  getFeatureFlag,
+  setFeatureFlag,
+} from "~/components/settings/utils/accessors";
 import {
   getSupabaseContext,
   getLoggedInClient,
@@ -38,7 +42,7 @@ import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 import posthog from "posthog-js";
-import { setFeatureFlag } from "~/components/settings/utils/accessors";
+
 import { FeatureFlagPanel } from "./components/BlockPropSettingPanels";
 
 const NodeRow = ({ node }: { node: PConceptFull }) => {
@@ -264,7 +268,7 @@ const MigrationTab = (): React.ReactElement => {
   const [useMigrationResults, setMigrationResults] = useState<string>("");
   const [useOngoing, setOngoing] = useState<boolean>(false);
   const [useDryRun, setDryRun] = useState<boolean>(false);
-  const enabled = getSetting<boolean>(USE_REIFIED_RELATIONS, false);
+  const enabled = getFeatureFlag("Reified relation triples");
   const doMigrateRelations = async () => {
     setOngoing(true);
     try {
@@ -349,7 +353,7 @@ const MigrationTab = (): React.ReactElement => {
 
 const FeatureFlagsTab = (): React.ReactElement => {
   const [useReifiedRelations, setUseReifiedRelations] = useState<boolean>(
-    getSetting<boolean>(USE_REIFIED_RELATIONS, false),
+    getFeatureFlag("Reified relation triples"),
   );
   const settings = useMemo(() => {
     refreshConfigTree();

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

@@ -50,8 +50,8 @@ import { getConditionLabels } from "~/utils/conditionToDatalog";
 import { formatHexColor } from "./DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 import {
+  getFeatureFlag,
   setGlobalSetting,
   getGlobalSettings,
 } from "~/components/settings/utils/accessors";
@@ -105,7 +105,7 @@ export const RelationEditPanel = ({
       ),
     [nodes],
   );
-  const useReifiedRelations = getSetting<boolean>(USE_REIFIED_RELATIONS, false);
+  const useReifiedRelations = getFeatureFlag("Reified relation triples");
   const containerRef = useRef<HTMLDivElement>(null);
   const idRef = useRef(0);
   const cyRef = useRef<cytoscape.Core>();
@@ -1026,10 +1026,7 @@ const DiscourseRelationConfigPanel: CustomField["options"]["component"] = ({
   const [deleteConfirmation, setDeleteConfirmation] = useState<string | null>(
     null,
   );
-  const shouldHideCanvasRelation = getSetting<boolean>(
-    USE_REIFIED_RELATIONS,
-    false,
-  );
+  const shouldHideCanvasRelation = getFeatureFlag("Reified relation triples");
   const visibleRelations = useMemo(() => {
     if (!shouldHideCanvasRelation) {
       return relations;

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

@@ -20,7 +20,6 @@ const DiscourseGraphExport = () => {
           title="remove special characters"
           description="Whether or not to remove the special characters in a file name"
           settingKeys={["Export", "Remove special characters"]}
-          initialValue={exportSettings.removeSpecialCharacters.value}
           order={1}
           uid={exportSettings.removeSpecialCharacters.uid}
           parentUid={parentUid}
@@ -30,7 +29,6 @@ const DiscourseGraphExport = () => {
           title="resolve block references"
           description="Replaces block references in the markdown content with the block's content"
           settingKeys={["Export", "Resolve block references"]}
-          initialValue={exportSettings.optsRefs.value}
           order={3}
           uid={exportSettings.optsRefs.uid}
           parentUid={parentUid}
@@ -39,7 +37,6 @@ const DiscourseGraphExport = () => {
           title="resolve block embeds"
           description="Replaces block embeds in the markdown content with the block's content tree"
           settingKeys={["Export", "Resolve block embeds"]}
-          initialValue={exportSettings.optsEmbeds.value}
           order={4}
           uid={exportSettings.optsEmbeds.uid}
           parentUid={parentUid}
@@ -49,7 +46,6 @@ const DiscourseGraphExport = () => {
           title="append referenced node"
           description="If a referenced node is defined in a node's format, it will be appended to the discourse context"
           settingKeys={["Export", "Append referenced node"]}
-          initialValue={exportSettings.appendRefNodeContext.value}
           order={6}
           uid={exportSettings.appendRefNodeContext.uid}
           parentUid={parentUid}
@@ -60,7 +56,6 @@ const DiscourseGraphExport = () => {
           title="link type"
           description="How to format links that appear in your export."
           settingKeys={["Export", "Link type"]}
-          initialValue={exportSettings.linkType.value || "alias"}
           order={5}
           options={["alias", "wikilinks", "roam url"]}
           uid={exportSettings.linkType.uid}
@@ -71,7 +66,6 @@ const DiscourseGraphExport = () => {
         title="max filename length"
         description="Set the maximum name length for markdown file exports"
         settingKeys={["Export", "Max filename length"]}
-        initialValue={exportSettings.maxFilenameLength.value || 64}
         order={0}
         uid={exportSettings.maxFilenameLength.uid}
         parentUid={parentUid}
@@ -80,7 +74,6 @@ const DiscourseGraphExport = () => {
         title="frontmatter"
         description="Specify all the lines that should go to the Frontmatter of the markdown file"
         settingKeys={["Export", "Frontmatter"]}
-        initialValue={exportSettings.frontmatter.values}
         order={2}
         uid={exportSettings.frontmatter.uid}
         parentUid={parentUid}

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

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import refreshConfigTree from "~/utils/refreshConfigTree";
-import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index";
+
 import { Alert, Intent } from "@blueprintjs/core";
 import {
   GlobalTextPanel,
@@ -24,7 +24,6 @@ const DiscourseGraphHome = () => {
         title="trigger"
         description="The trigger to create the node menu."
         settingKeys={["Trigger"]}
-        initialValue={settings.trigger.value || "\\"}
         order={0}
         uid={settings.trigger.uid}
         parentUid={settings.settingsUid}
@@ -33,9 +32,6 @@ const DiscourseGraphHome = () => {
         title="Canvas Page Format"
         description="The page format for canvas pages"
         settingKeys={["Canvas page format"]}
-        initialValue={
-          settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT
-        }
         order={1}
         uid={settings.canvasPageFormat.uid}
         parentUid={settings.settingsUid}

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { OnloadArgs } from "roamjs-components/types";
 import { Label } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
@@ -26,14 +26,13 @@ import { getSetting, setSetting } from "~/utils/extensionSettings";
 import { enablePostHog, disablePostHog } from "~/utils/posthog";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
 import streamlineStyling from "~/styles/streamlineStyling";
-import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
+import { getFeatureFlag } from "~/components/settings/utils/accessors";
 import { PersonalFlagPanel } from "./components/BlockPropSettingPanels";
 import posthog from "posthog-js";
 
 const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const extensionAPI = onloadArgs.extensionAPI;
   const overlayHandler = getOverlayHandler(onloadArgs);
-  const settings = useMemo(() => getFormattedConfigTree(), []);
 
   return (
     <div className="flex flex-col gap-4 p-1">
@@ -76,7 +75,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           });
         }}
       />
-      {settings.suggestiveModeEnabled?.value && (
+      {getFeatureFlag("Suggestive mode enabled") && (
         <PersonalFlagPanel
           title="Suggestive mode overlay"
           description="Whether or not to overlay suggestive mode button over discourse node references."

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import DualWriteBlocksPanel from "./components/EphemeralBlocksPanel";
 import { getSubTree } from "roamjs-components/util";
@@ -11,8 +11,7 @@ import DiscourseNodeIndex from "./DiscourseNodeIndex";
 import { OnloadArgs } from "roamjs-components/types";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
-import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
-import refreshConfigTree from "~/utils/refreshConfigTree";
+import { getFeatureFlag } from "~/components/settings/utils/accessors";
 import {
   DiscourseNodeTextPanel,
   DiscourseNodeFlagPanel,
@@ -45,10 +44,6 @@ const NodeConfig = ({
   node: DiscourseNode;
   onloadArgs: OnloadArgs;
 }) => {
-  const settings = useMemo(() => {
-    refreshConfigTree();
-    return getFormattedConfigTree();
-  }, []);
   const getUid = (key: string) =>
     getSubTree({
       parentUid: node.type,
@@ -296,7 +291,7 @@ const NodeConfig = ({
             </div>
           }
         />
-        {settings.suggestiveModeEnabled.value && (
+        {getFeatureFlag("Suggestive mode enabled") && (
           <Tab
             id="suggestive-mode"
             title="Suggestive mode"

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -34,8 +34,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,
@@ -53,14 +51,18 @@ 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";
 import getPleasingColors from "@repo/utils/getPleasingColors";
 import { colord } from "colord";
 import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import findDiscourseNode from "./findDiscourseNode";
+import {
+  getPersonalSetting,
+  getFeatureFlag,
+  getGlobalSetting,
+} from "~/components/settings/utils/accessors";
 
 const debounce = (fn: () => void, delay = 250) => {
   let timeout: number;
@@ -105,12 +107,7 @@ export const initObservers = async ({
       const { title, uid } = getTitleAndUidFromHeader(h1);
       const props = { title, h1, onloadArgs };
 
-      const isSuggestiveModeEnabled = getUidAndBooleanSetting({
-        tree: getBasicTreeByParentUid(
-          getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE),
-        ),
-        text: "(BETA) Suggestive Mode Enabled",
-      }).value;
+      const isSuggestiveModeEnabled = getFeatureFlag("Suggestive mode enabled");
 
       const node = findDiscourseNode({ uid, title });
       const isDiscourseNode = node && node.backedBy !== "default";
@@ -256,29 +253,22 @@ export const initObservers = async ({
     }
   };
 
-  const configTree = getBasicTreeByParentUid(configPageUid);
-  const globalTrigger = getSettingValueFromTree({
-    tree: configTree,
-    key: "trigger",
-    defaultValue: "\\",
-  }).trim();
-  const personalTriggerCombo =
-    (onloadArgs.extensionAPI.settings.get(
-      "personal-node-menu-trigger",
-    ) as IKeyCombo) || undefined;
+  const globalTrigger = (getGlobalSetting<string>(["Trigger"]) ?? "\\").trim();
+  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",
     useBody: true,
     className: "starred-pages-wrapper",
     callback: (el) => {
       void (async () => {
-        const isLeftSidebarEnabled = getUidAndBooleanSetting({
-          tree: configTree,
-          text: "(BETA) Left Sidebar",
-        }).value;
+        const isLeftSidebarEnabled = getFeatureFlag("Enable left sidebar");
         const container = el as HTMLDivElement;
         if (isLeftSidebarEnabled) {
           container.style.padding = "0";

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

apps/roam/src/utils/registerDiscourseDatalogTranslators.ts

@@ -19,9 +19,8 @@ import replaceDatalogVariables from "./replaceDatalogVariables";
 import parseQuery from "./parseQuery";
 import { fireQuerySync, getWhereClauses } from "./fireQuery";
 import { toVar } from "./compileDatalog";
-import { getSetting } from "./extensionSettings";
+import { getFeatureFlag } from "~/components/settings/utils/accessors";
 import { getExistingRelationPageUid } from "./createReifiedBlock";
-import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 
 const hasTag = (node: DiscourseNode): node is DiscourseNode & { tag: string } =>
   !!node.tag;
@@ -410,9 +409,8 @@ const registerDiscourseDatalogTranslators = () => {
       registerDatalogTranslator({
         key: label,
         callback: ({ source, target, uid }) => {
-          const useReifiedRelations = getSetting<boolean>(
-            USE_REIFIED_RELATIONS,
-            false,
+          const useReifiedRelations = getFeatureFlag(
+            "Reified relation triples",
           );
           const relationPageUid = getExistingRelationPageUid();