Migrate small personal settings

Author: sid597

apps/roam/src/components/DiscourseFloatingMenu.tsx

@@ -12,6 +12,7 @@ import {
 } from "@blueprintjs/core";
 import { FeedbackWidget } from "./BirdEatsBugs";
 import { render as renderSettings } from "~/components/settings/Settings";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 
 type DiscourseFloatingMenuProps = {
   // CSS placement class
@@ -118,7 +119,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/settings/HomePersonalSettings.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { OnloadArgs } from "roamjs-components/types";
-import { Label, Checkbox } from "@blueprintjs/core";
+import { Label } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
 import { addStyle } from "roamjs-components/dom";
 import { NodeMenuTriggerComponent } from "~/components/DiscourseNodeMenu";
@@ -15,19 +15,12 @@ import {
   hideDiscourseFloatingMenu,
 } from "~/components/DiscourseFloatingMenu";
 import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
-import {
-  AUTO_CANVAS_RELATIONS_KEY,
-  DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-  DISCOURSE_TOOL_SHORTCUT_KEY,
-  STREAMLINE_STYLING_KEY,
-  DISALLOW_DIAGNOSTICS,
-} from "~/data/userSettings";
+import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { enablePostHog, disablePostHog } from "~/utils/posthog";
-import internalError from "~/utils/internalError";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
-import { getSetting, setSetting } from "~/utils/extensionSettings";
 import streamlineStyling from "~/styles/streamlineStyling";
 import { useFeatureFlag } from "./utils/hooks";
+import { PersonalFlagPanel } from "./components/BlockPropSettingPanels";
 
 const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const extensionAPI = onloadArgs.extensionAPI;
@@ -61,246 +54,94 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         description="Set a single key to activate the Discourse Tool in tldraw. Only single keys (no modifiers) are supported. Leave empty for no shortcut."
         placeholder="Click to set single key"
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("discourse-context-overlay") as boolean
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set(
-            "discourse-context-overlay",
-            target.checked,
-          );
-
-          onPageRefObserverChange(overlayHandler)(target.checked);
+      <PersonalFlagPanel
+        title="Overlay"
+        description="Whether or not to overlay Discourse Context information over Discourse Node references."
+        settingKeys={["Discourse Context Overlay"]}
+        onChange={(checked) => {
+          onPageRefObserverChange(overlayHandler)(checked);
         }}
-        labelElement={
-          <>
-            Overlay
-            <Description
-              description={
-                "Whether or not to overlay Discourse Context information over Discourse Node references."
-              }
-            />
-          </>
-        }
       />
       {suggestiveModeEnabled && (
-        <Checkbox
-          defaultChecked={
-            extensionAPI.settings.get("suggestive-mode-overlay") as boolean
-          }
-          onChange={(e) => {
-            const target = e.target as HTMLInputElement;
-            void extensionAPI.settings.set(
-              "suggestive-mode-overlay",
-              target.checked,
-            );
+        <PersonalFlagPanel
+          title="Suggestive Mode Overlay"
+          description="Whether or not to overlay Suggestive Mode button over Discourse Node references."
+          settingKeys={["Suggestive Mode Overlay"]}
+          onChange={(checked) => {
             onPageRefObserverChange(getSuggestiveOverlayHandler(onloadArgs))(
-              target.checked,
+              checked,
             );
           }}
-          labelElement={
-            <>
-              Suggestive Mode Overlay
-              <Description
-                description={
-                  "Whether or not to overlay Suggestive Mode button over Discourse Node references."
-                }
-              />
-            </>
-          }
         />
       )}
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("text-selection-popup") !== false
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("text-selection-popup", target.checked);
-        }}
-        labelElement={
-          <>
-            Text Selection Popup
-            <Description
-              description={
-                "Whether or not to show the Discourse Node Menu when selecting text."
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="Text Selection Popup"
+        description="Whether or not to show the Discourse Node Menu when selecting text."
+        settingKeys={["Text Selection Popup"]}
+        defaultValue={true}
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("disable-sidebar-open") as boolean
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("disable-sidebar-open", target.checked);
-        }}
-        labelElement={
-          <>
-            Disable Sidebar Open
-            <Description
-              description={
-                "Disable opening new nodes in the sidebar when created"
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="Disable Sidebar Open"
+        description="Disable opening new nodes in the sidebar when created"
+        settingKeys={["Disable Sidebar Open"]}
       />
-      <Checkbox
-        defaultChecked={extensionAPI.settings.get("page-preview") as boolean}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("page-preview", target.checked);
-          onPageRefObserverChange(previewPageRefHandler)(target.checked);
+      <PersonalFlagPanel
+        title="Preview"
+        description="Whether or not to display page previews when hovering over page refs"
+        settingKeys={["Page Preview"]}
+        onChange={(checked) => {
+          onPageRefObserverChange(previewPageRefHandler)(checked);
         }}
-        labelElement={
-          <>
-            Preview
-            <Description
-              description={
-                "Whether or not to display page previews when hovering over page refs"
-              }
-            />
-          </>
-        }
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("hide-feedback-button") as boolean
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("hide-feedback-button", target.checked);
-
-          if (target.checked) {
+      <PersonalFlagPanel
+        title="Hide Feedback Button"
+        description="Hide the 'Send feedback' button at the bottom right of the screen."
+        settingKeys={["Hide Feedback Button"]}
+        onChange={(checked) => {
+          if (checked) {
             hideDiscourseFloatingMenu();
           } else {
             showDiscourseFloatingMenu();
           }
         }}
-        labelElement={
-          <>
-            Hide Feedback Button
-            <Description
-              description={
-                "Hide the 'Send feedback' button at the bottom right of the screen."
-              }
-            />
-          </>
-        }
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get(AUTO_CANVAS_RELATIONS_KEY) === true
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          void extensionAPI.settings.set(
-            AUTO_CANVAS_RELATIONS_KEY,
-            target.checked,
-          );
-        }}
-        labelElement={
-          <>
-            Auto Canvas Relations
-            <Description
-              description={
-                "Automatically add discourse relations to canvas when a node is added"
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="Auto Canvas Relations"
+        description="Automatically add discourse relations to canvas when a node is added"
+        settingKeys={["Auto Canvas Relations"]}
       />
-      <Checkbox
-        defaultChecked={getSetting(
-          DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-          false,
-        )}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          void setSetting(
-            DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-            target.checked,
-          ).catch(() => undefined);
-        }}
-        labelElement={
-          <>
-            (BETA) Overlay in Canvas
-            <Description
-              description={
-                "Whether or not to overlay Discourse Context information over Canvas Nodes."
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="(BETA) Overlay in Canvas"
+        description="Whether or not to overlay Discourse Context information over Canvas Nodes."
+        settingKeys={["Overlay in Canvas"]}
       />
-      <Checkbox
-        defaultChecked={getSetting(STREAMLINE_STYLING_KEY, false)}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          void setSetting(STREAMLINE_STYLING_KEY, target.checked).catch(
-            () => undefined,
-          );
-
-          // Load or unload the streamline styling
+      <PersonalFlagPanel
+        title="Streamline Styling"
+        description="Apply streamlined styling to your personal graph for a cleaner appearance."
+        settingKeys={["Streamline Styling"]}
+        onChange={(checked) => {
           const existingStyleElement =
             document.getElementById("streamline-styling");
 
-          if (target.checked && !existingStyleElement) {
-            // Load the styles
+          if (checked && !existingStyleElement) {
             const styleElement = addStyle(streamlineStyling);
             styleElement.id = "streamline-styling";
-          } else if (!target.checked && existingStyleElement) {
-            // Unload the styles
+          } else if (!checked && existingStyleElement) {
             existingStyleElement.remove();
           }
         }}
-        labelElement={
-          <>
-            Streamline Styling
-            <Description
-              description={
-                "Apply streamlined styling to your personal graph for a cleaner appearance."
-              }
-            />
-          </>
-        }
       />
-      <Checkbox
-        defaultChecked={getSetting(DISALLOW_DIAGNOSTICS, false)}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          const disallow = target.checked;
-          void setSetting(DISALLOW_DIAGNOSTICS, disallow)
-            .then(() => {
-              if (disallow) {
-                disablePostHog();
-              } else {
-                enablePostHog();
-              }
-            })
-            .catch((error) => {
-              target.checked = !disallow;
-              internalError({
-                error,
-                userMessage: "Could not change settings",
-              });
-            });
+      <PersonalFlagPanel
+        title="Disable Product Diagnostics"
+        description="Disable sending usage signals and error reports that help us improve the product."
+        settingKeys={["Disable Product Diagnostics"]}
+        onChange={(checked) => {
+          if (checked) {
+            disablePostHog();
+          } else {
+            enablePostHog();
+          }
         }}
-        labelElement={
-          <>
-            Disable Product Diagnostics
-            <Description
-              description={
-                "Disable sending usage signals and error reports that help us improve the product."
-              }
-            />
-          </>
-        }
       />
     </div>
   );

apps/roam/src/utils/createDiscourseNode.ts

@@ -8,6 +8,7 @@ import getSubTree from "roamjs-components/util/getSubTree";
 import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
 import getDiscourseNodes from "./getDiscourseNodes";
 import isFlagEnabled from "./isFlagEnabled";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 import resolveQueryBuilderRef from "./resolveQueryBuilderRef";
 import { OnloadArgs, RoamBasicNode } from "roamjs-components/types";
 import runQuery from "./runQuery";
@@ -33,7 +34,7 @@ const createDiscourseNode = async ({
     text: text,
   });
   const handleOpenInSidebar = (uid: string) => {
-    if (extensionAPI?.settings.get("disable-sidebar-open")) return;
+    if (getPersonalSetting<boolean>(["Disable Sidebar Open"])) return;
     openBlockInSidebar(uid);
     setTimeout(() => {
       const sidebarTitle = document.querySelector(