ENG-1456: Migrate personal boolean flag consumers (getSetting → getPersonalSetting)

Author: sid597

apps/roam/src/components/DiscourseFloatingMenu.tsx

@@ -13,6 +13,7 @@ import {
 import { FeedbackWidget } from "./BirdEatsBugs";
 import { render as renderSettings } from "~/components/settings/Settings";
 import posthog from "posthog-js";
+import { getPersonalSetting } from "./settings/utils/accessors";
 
 type DiscourseFloatingMenuProps = {
   // CSS placement class
@@ -128,7 +129,7 @@ export const installDiscourseFloatingMenu = (
     floatingMenuAnchor.id = ANCHOR_ID;
     document.getElementById("app")?.appendChild(floatingMenuAnchor);
   }
-  if (onLoadArgs.extensionAPI.settings.get("hide-feedback-button") as boolean) {
+  if (getPersonalSetting<boolean>(["Hide feedback button"])) {
     floatingMenuAnchor.classList.add("hidden");
   }
   ReactDOM.render(

apps/roam/src/components/canvas/DiscourseNodeUtil.tsx

@@ -35,11 +35,7 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import { createTextJsxFromSpans } from "./DiscourseRelationShape/helpers";
 import { loadImage } from "~/utils/loadImage";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
-import {
-  AUTO_CANVAS_RELATIONS_KEY,
-  DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-} from "~/data/userSettings";
-import { getSetting } from "~/utils/extensionSettings";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors";
 import { render as renderToast } from "roamjs-components/components/Toast";
@@ -435,7 +431,7 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape>
     } = discourseContext.nodes[shape.type] || {};
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isOverlayEnabled = useMemo(
-      () => getSetting(DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, false),
+      () => getPersonalSetting<boolean>(["Overlay in canvas"]),
       [],
     );
 
@@ -516,10 +512,9 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape>
               uid,
             });
 
-            const autoCanvasRelations = getSetting<boolean>(
-              AUTO_CANVAS_RELATIONS_KEY,
-              false,
-            );
+            const autoCanvasRelations = getPersonalSetting<boolean>([
+              "Auto canvas relations",
+            ]);
             if (autoCanvasRelations) {
               try {
                 const relationIds = getRelationIds();

apps/roam/src/components/canvas/Tldraw.tsx

@@ -96,15 +96,14 @@ import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import { CanvasDrawerPanel } from "./CanvasDrawer";
 import { ClipboardPanel, ClipboardProvider } from "./Clipboard";
 import internalError from "~/utils/internalError";
-import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
-import { getSetting } from "~/utils/extensionSettings";
 import { isPluginTimerReady, waitForPluginTimer } from "~/utils/pluginTimer";
 import { HistoryEntry } from "@tldraw/store";
 import { TLRecord } from "@tldraw/tlschema";
 import { WHITE_LOGO_SVG } from "~/icons";
 import { BLOCK_REF_REGEX } from "roamjs-components/dom";
 import { defaultHandleExternalTextContent } from "./defaultHandleExternalTextContent";
 import posthog from "posthog-js";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -1132,10 +1131,9 @@ const InsideEditorAndUiContext = ({
         editor.sideEffects.registerAfterCreateHandler("shape", (shape) => {
           const util = editor.getShapeUtil(shape);
           if (util instanceof BaseDiscourseNodeUtil) {
-            const autoCanvasRelations = getSetting<boolean>(
-              AUTO_CANVAS_RELATIONS_KEY,
-              false,
-            );
+            const autoCanvasRelations = getPersonalSetting<boolean>([
+              "Auto canvas relations",
+            ]);
             if (autoCanvasRelations) {
               void util.createExistingRelations({
                 shape: shape as DiscourseNodeShape,

apps/roam/src/components/canvas/uiOverrides.tsx

@@ -42,10 +42,9 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import { AddReferencedNodeType } from "./DiscourseRelationShape/DiscourseRelationTool";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
 import DiscourseGraphPanel from "./DiscourseToolPanel";
-import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
-import { getSetting } from "~/utils/extensionSettings";
 import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
 import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 
 export const getOnSelectForShape = ({
   shape,
@@ -271,10 +270,12 @@ export const createUiOverrides = ({
 }): TLUiOverrides => ({
   tools: (editor, tools) => {
     // Get the custom keyboard shortcut for the discourse tool
-    const discourseToolCombo = getSetting(DISCOURSE_TOOL_SHORTCUT_KEY, {
+    const discourseToolCombo = getPersonalSetting<IKeyCombo>([
+      "Discourse tool shortcut",
+    ]) || {
       key: "",
       modifiers: 0,
-    }) as IKeyCombo;
+    };
 
     // For discourse tool, just use the key directly since we don't allow modifiers
     const discourseToolShortcut = discourseToolCombo?.key?.toUpperCase() || "";

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

@@ -22,7 +22,7 @@ import {
   STREAMLINE_STYLING_KEY,
   DISALLOW_DIAGNOSTICS,
 } from "~/data/userSettings";
-import { getSetting, setSetting } from "~/utils/extensionSettings";
+import { setSetting } from "~/utils/extensionSettings";
 import { enablePostHog, disablePostHog } from "~/utils/posthog";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
 import streamlineStyling from "~/styles/streamlineStyling";
@@ -66,7 +66,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Overlay"
         description="Whether or not to overlay discourse context information over discourse node references."
         settingKeys={["Discourse context overlay"]}
-        initialValue={getSetting<boolean>("discourse-context-overlay", false)}
         onChange={(checked) => {
           void setSetting("discourse-context-overlay", checked);
           onPageRefObserverChange(overlayHandler)(checked);
@@ -80,7 +79,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           title="Suggestive mode overlay"
           description="Whether or not to overlay suggestive mode button over discourse node references."
           settingKeys={["Suggestive mode overlay"]}
-          initialValue={getSetting<boolean>("suggestive-mode-overlay", false)}
           onChange={(checked) => {
             void setSetting("suggestive-mode-overlay", checked);
             onPageRefObserverChange(getSuggestiveOverlayHandler(onloadArgs))(
@@ -93,7 +91,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Text selection popup"
         description="Whether or not to show the discourse node menu when selecting text."
         settingKeys={["Text selection popup"]}
-        initialValue={getSetting("text-selection-popup", true)}
         onChange={(checked) => {
           void setSetting("text-selection-popup", checked);
         }}
@@ -102,7 +99,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Disable sidebar open"
         description="Disable opening new nodes in the sidebar when created"
         settingKeys={["Disable sidebar open"]}
-        initialValue={getSetting<boolean>("disable-sidebar-open", false)}
         onChange={(checked) => {
           void setSetting("disable-sidebar-open", checked);
         }}
@@ -111,7 +107,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Page preview"
         description="Whether or not to display page previews when hovering over page refs"
         settingKeys={["Page preview"]}
-        initialValue={getSetting<boolean>("page-preview", false)}
         onChange={(checked) => {
           void setSetting("page-preview", checked);
           onPageRefObserverChange(previewPageRefHandler)(checked);
@@ -121,7 +116,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Hide feedback button"
         description="Hide the 'Send feedback' button at the bottom right of the screen."
         settingKeys={["Hide feedback button"]}
-        initialValue={getSetting<boolean>("hide-feedback-button", false)}
         onChange={(checked) => {
           void setSetting("hide-feedback-button", checked);
           if (checked) {
@@ -135,7 +129,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Auto canvas relations"
         description="Automatically add discourse relations to canvas when a node is added"
         settingKeys={["Auto canvas relations"]}
-        initialValue={getSetting<boolean>(AUTO_CANVAS_RELATIONS_KEY, false)}
         onChange={(checked) => {
           void setSetting(AUTO_CANVAS_RELATIONS_KEY, checked);
         }}
@@ -145,10 +138,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="(BETA) Overlay in canvas"
         description="Whether or not to overlay discourse context information over canvas nodes."
         settingKeys={["Overlay in canvas"]}
-        initialValue={getSetting<boolean>(
-          DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-          false,
-        )}
         onChange={(checked) => {
           void setSetting(DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, checked);
         }}
@@ -157,7 +146,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Streamline styling"
         description="Apply streamlined styling to your personal graph for a cleaner appearance."
         settingKeys={["Streamline styling"]}
-        initialValue={getSetting<boolean>(STREAMLINE_STYLING_KEY, false)}
         onChange={(checked) => {
           void setSetting(STREAMLINE_STYLING_KEY, checked);
           const existingStyleElement =
@@ -175,7 +163,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         title="Disable product diagnostics"
         description="Disable sending usage signals and error reports that help us improve the product."
         settingKeys={["Disable product diagnostics"]}
-        initialValue={getSetting<boolean>(DISALLOW_DIAGNOSTICS, false)}
         onChange={(checked) => {
           void setSetting(DISALLOW_DIAGNOSTICS, checked);
           if (checked) {

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

@@ -23,9 +23,6 @@ const QuerySettings = ({
         title="Hide query metadata"
         description="Hide the Roam blocks that are used to power each query"
         settingKeys={["Query", "Hide query metadata"]}
-        initialValue={
-          (extensionAPI.settings.get(HIDE_METADATA_KEY) as boolean) ?? true
-        }
         onChange={(checked) => {
           void extensionAPI.settings.set(HIDE_METADATA_KEY, checked);
           posthog.capture("Query Settings: Hide Metadata Toggled", {

apps/roam/src/components/settings/utils/accessors.ts

@@ -194,10 +194,6 @@ const PERSONAL_OLD_KEY_MAP = new Map<string, string>([
   [pathKey(["Query", "Default filters"]), "default-filters"],
 ]);
 
-const PERSONAL_OLD_DEFAULT_OVERRIDES = new Map<string, unknown>([
-  [pathKey(["Query", "Hide query metadata"]), true],
-]);
-
 const getLegacyPersonalLeftSidebarSetting = (): Record<string, unknown> => {
   const settings = getFormattedConfigTree();
 
@@ -223,12 +219,9 @@ const getLegacyPersonalLeftSidebarSetting = (): Record<string, unknown> => {
 const getLegacyPersonalSetting = (keys: string[]): unknown => {
   const mappedOldKey = PERSONAL_OLD_KEY_MAP.get(pathKey(keys));
   if (mappedOldKey) {
-    const path = pathKey(keys);
     return getSetting<unknown>(
       mappedOldKey,
-      PERSONAL_OLD_DEFAULT_OVERRIDES.has(path)
-        ? PERSONAL_OLD_DEFAULT_OVERRIDES.get(path)
-        : readPathValue(DEFAULT_PERSONAL_SETTINGS, keys),
+      readPathValue(DEFAULT_PERSONAL_SETTINGS, keys),
     );
   }
 

apps/roam/src/index.ts

@@ -35,20 +35,18 @@ import { getUidAndBooleanSetting } from "./utils/getExportSettings";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "./utils/renderNodeConfigPage";
-import { getSetting } from "./utils/extensionSettings";
 import { initPostHog } from "./utils/posthog";
-import {
-  STREAMLINE_STYLING_KEY,
-  DISALLOW_DIAGNOSTICS,
-} from "./data/userSettings";
 import { initSchema } from "./components/settings/utils/init";
 import { setupPullWatchOnSettingsPage } from "./components/settings/utils/pullWatchers";
+import { getPersonalSetting } from "./components/settings/utils/accessors";
 export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*";
 
 export default runExtension(async (onloadArgs) => {
   const isEncrypted = window.roamAlphaAPI.graph.isEncrypted;
   const isOffline = window.roamAlphaAPI.graph.type === "offline";
-  const disallowDiagnostics = getSetting(DISALLOW_DIAGNOSTICS, false);
+  const disallowDiagnostics = getPersonalSetting<boolean>([
+    "Disable product diagnostics",
+  ]);
   if (!isEncrypted && !isOffline && !disallowDiagnostics) {
     initPostHog();
   }
@@ -91,7 +89,9 @@ export default runExtension(async (onloadArgs) => {
   const discourseFloatingMenuStyle = addStyle(discourseFloatingMenuStyles);
 
   // Add streamline styling only if enabled
-  const isStreamlineStylingEnabled = getSetting(STREAMLINE_STYLING_KEY, false);
+  const isStreamlineStylingEnabled = getPersonalSetting<boolean>([
+    "Streamline styling",
+  ]);
   let streamlineStyleElement: HTMLStyleElement | null = null;
   if (isStreamlineStylingEnabled) {
     streamlineStyleElement = addStyle(streamlineStyling);

apps/roam/src/utils/createDiscourseNode.ts

@@ -12,6 +12,7 @@ import { OnloadArgs, RoamBasicNode } from "roamjs-components/types";
 import runQuery from "./runQuery";
 import updateBlock from "roamjs-components/writes/updateBlock";
 import posthog from "posthog-js";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 
 type Props = {
   text: string;
@@ -32,8 +33,8 @@ const createDiscourseNode = async ({
     text: text,
   });
   const handleOpenInSidebar = (uid: string) => {
-    if (extensionAPI?.settings.get("disable-sidebar-open")) return;
-    openBlockInSidebar(uid);
+    if (getPersonalSetting<boolean>(["Disable sidebar open"])) return;
+    void openBlockInSidebar(uid);
     setTimeout(() => {
       const sidebarTitle = document.querySelector(
         ".rm-sidebar-outline .rm-title-display",

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -61,6 +61,7 @@ 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 } from "~/components/settings/utils/accessors";
 
 const debounce = (fn: () => void, delay = 250) => {
   let timeout: number;
@@ -191,19 +192,19 @@ export const initObservers = async ({
     }>,
   ) => {
     if (!/page/i.test(e.detail.action)) return;
-    window.roamAlphaAPI.ui.mainWindow
+    void window.roamAlphaAPI.ui.mainWindow
       .getOpenPageOrBlockUid()
       .then((u) => u || window.roamAlphaAPI.util.dateToPageUid(new Date()))
       .then((parentUid) => {
-        createBlock({
+        return createBlock({
           parentUid,
           order: Number.MAX_VALUE,
           node: { text: `[[${e.detail.val}]]` },
         });
       });
   }) as EventListener;
 
-  if (onloadArgs.extensionAPI.settings.get("suggestive-mode-overlay")) {
+  if (getPersonalSetting<boolean>(["Suggestive mode overlay"])) {
     addPageRefObserver(getSuggestiveOverlayHandler(onloadArgs));
   }
 
@@ -226,9 +227,9 @@ export const initObservers = async ({
     },
   });
 
-  if (onloadArgs.extensionAPI.settings.get("page-preview"))
+  if (getPersonalSetting<boolean>(["Page preview"]))
     addPageRefObserver(previewPageRefHandler);
-  if (onloadArgs.extensionAPI.settings.get("discourse-context-overlay")) {
+  if (getPersonalSetting<boolean>(["Discourse context overlay"])) {
     const overlayHandler = getOverlayHandler(onloadArgs);
     onPageRefObserverChange(overlayHandler)(true);
   }
@@ -383,7 +384,7 @@ export const initObservers = async ({
 
   const nodeCreationPopoverListener = debounce(() => {
     const isTextSelectionPopupEnabled =
-      onloadArgs.extensionAPI.settings.get("text-selection-popup") !== false;
+      getPersonalSetting<boolean>(["Text selection popup"]) !== false;
 
     if (!isTextSelectionPopupEnabled) return;