ENG-2189 Reorganize Roam settings: replace the Personal/Global split with four topic-based sections

apps/roam/src/components/LeftSidebarView.tsx

@@ -60,6 +60,7 @@ import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { Dispatch, SetStateAction } from "react";
 import { SettingsDialog } from "./settings/Settings";
+import { SETTINGS_TAB_IDS } from "./settings/utils/settingsTabs";
 import { OnloadArgs } from "roamjs-components/types";
 import renderOverlay from "roamjs-components/util/renderOverlay";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
@@ -862,16 +863,9 @@ const FavoritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           content={
             <Menu>
               <MenuItem
-                text="Global Section"
+                text="Left sidebar"
                 onClick={() => {
-                  renderSettingsDialog("left-sidebar-global-settings");
-                  setIsMenuOpen(false);
-                }}
-              />
-              <MenuItem
-                text="Personal Section"
-                onClick={() => {
-                  renderSettingsDialog("left-sidebar-personal-settings");
+                  renderSettingsDialog(SETTINGS_TAB_IDS.featuresLeftSidebar);
                   setIsMenuOpen(false);
                 }}
               />

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { OnloadArgs } from "roamjs-components/types";
+import {
+  DISCOURSE_TOOL_SHORTCUT_KEY,
+  AUTO_CANVAS_RELATIONS_KEY,
+} from "~/data/userSettings";
+import { setSetting } from "~/utils/extensionSettings";
+import KeyboardShortcutInput from "./KeyboardShortcutInput";
+import CanvasShortcutSettings from "./CanvasShortcutSettings";
+import {
+  GlobalTextPanel,
+  PersonalFlagPanel,
+} from "./components/BlockPropSettingPanels";
+import { GLOBAL_KEYS, PERSONAL_KEYS } from "./utils/settingKeys";
+import { type SettingsSnapshot } from "./utils/accessors";
+import { useLegacyConfigBlocks } from "./utils/useLegacyConfigBlocks";
+import { SettingsSectionHeading } from "./components/SettingsHeadings";
+import { ROAM_DOCS, withDocsLink } from "./utils/docs";
+
+const CanvasSettings = ({
+  onloadArgs,
+  globalSettings,
+  personalSettings,
+}: {
+  onloadArgs: OnloadArgs;
+  globalSettings: SettingsSnapshot["globalSettings"];
+  personalSettings: SettingsSnapshot["personalSettings"];
+}): React.ReactElement => {
+  const legacyBlocks = useLegacyConfigBlocks();
+  return (
+    <div className="flex flex-col gap-4 p-1">
+      <GlobalTextPanel
+        title="Canvas Page Format"
+        description="The page format for canvas pages"
+        settingKeys={[GLOBAL_KEYS.canvasPageFormat]}
+        initialValue={globalSettings[GLOBAL_KEYS.canvasPageFormat]}
+        {...legacyBlocks.canvasPageFormat}
+      />
+      <KeyboardShortcutInput
+        onloadArgs={onloadArgs}
+        settingKey={DISCOURSE_TOOL_SHORTCUT_KEY}
+        blockPropKey={PERSONAL_KEYS.discourseToolShortcut}
+        label="Discourse tool keyboard shortcut"
+        description={withDocsLink(
+          "Set a single key to activate the discourse tool in tldraw. Only single keys (no modifiers) are supported. Leave empty for no shortcut.",
+          ROAM_DOCS.creatingNodes,
+        )}
+        placeholder="Click to set single key"
+        initialValue={personalSettings[PERSONAL_KEYS.discourseToolShortcut]}
+      />
+      <PersonalFlagPanel
+        title="Auto canvas relations"
+        description={withDocsLink(
+          "Automatically add discourse relations to canvas when a node is added",
+          ROAM_DOCS.storedRelations,
+        )}
+        settingKeys={[PERSONAL_KEYS.autoCanvasRelations]}
+        initialValue={personalSettings[PERSONAL_KEYS.autoCanvasRelations]}
+        onChange={(checked) => {
+          void setSetting(AUTO_CANVAS_RELATIONS_KEY, checked);
+        }}
+      />
+      <SettingsSectionHeading>Node on canvas</SettingsSectionHeading>
+      <CanvasShortcutSettings personalSettings={personalSettings} />
+    </div>
+  );
+};
+
+export default CanvasSettings;

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

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import { Checkbox, InputGroup, Tabs, Tab } from "@blueprintjs/core";
+import { Checkbox, InputGroup } from "@blueprintjs/core";
 import Description from "~/components/settings/SettingsDescription";
 import getDiscourseNodes, {
   excludeDefaultNodes,
 } from "~/utils/getDiscourseNodes";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
 import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 import { setSetting } from "~/utils/extensionSettings";
+import { settingAnchor } from "~/components/settings/utils/settingAnchor";
 import { CANVAS_NODE_SHORTCUTS_KEY } from "~/data/userSettings";
 import type { CanvasNodeShortcuts, PersonalSettings } from "./utils/zodSchema";
 
@@ -55,7 +56,7 @@ const ShortcutRow = ({
   };
 
   return (
-    <>
+    <div className="flex items-center justify-between gap-4">
       <Checkbox
         checked={enabled}
         onChange={handleEnabledChange}
@@ -75,9 +76,9 @@ const ShortcutRow = ({
         onKeyDown={handleKeyDown}
         disabled={!enabled}
         placeholder={defaultShortcut || "(no shortcut)"}
-        className="w-20"
+        className="w-20 flex-none"
       />
-    </>
+    </div>
   );
 };
 
@@ -103,45 +104,36 @@ const CanvasShortcutSettings = ({
   };
 
   return (
-    <Tabs renderActiveTabPanelOnly={true}>
-      <Tab
-        id="shortcuts"
-        title="Shortcuts"
-        panel={
-          <div className="inline-grid grid-cols-[auto_auto] items-center gap-x-4 gap-y-2 p-1">
-            <div className="col-span-2 mb-2">
-              <div className="text-base">
-                Override the canvas keyboard shortcuts
-              </div>
-              <div className="text-sm italic text-gray-500">
-                Changes take effect next time a canvas is opened
-              </div>
-            </div>
-            {nodes.map((node) => {
-              const override = shortcuts[node.type];
-              return (
-                <ShortcutRow
-                  key={node.type}
-                  nodeText={node.text}
-                  defaultShortcut={node.shortcut}
-                  initialEnabled={override?.enabled ?? false}
-                  initialValue={override?.value ?? ""}
-                  onEnabledChange={(enabled) =>
-                    updateShortcut(node.type, {
-                      enabled,
-                      ...(enabled ? {} : { value: "" }),
-                    })
-                  }
-                  onValueChange={(value) =>
-                    updateShortcut(node.type, { value })
-                  }
-                />
-              );
-            })}
-          </div>
-        }
-      />
-    </Tabs>
+    <div
+      className="flex max-w-md flex-col gap-2 p-1"
+      {...settingAnchor([PERSONAL_KEYS.canvasNodeShortcuts])}
+    >
+      <div className="mb-2">
+        <div className="text-base">Override the canvas keyboard shortcuts</div>
+        <div className="text-sm italic text-gray-500">
+          Changes take effect next time a canvas is opened
+        </div>
+      </div>
+      {nodes.map((node) => {
+        const override = shortcuts[node.type];
+        return (
+          <ShortcutRow
+            key={node.type}
+            nodeText={node.text}
+            defaultShortcut={node.shortcut}
+            initialEnabled={override?.enabled ?? false}
+            initialValue={override?.value ?? ""}
+            onEnabledChange={(enabled) =>
+              updateShortcut(node.type, {
+                enabled,
+                ...(enabled ? {} : { value: "" }),
+              })
+            }
+            onValueChange={(value) => updateShortcut(node.type, { value })}
+          />
+        );
+      })}
+    </div>
   );
 };
 

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { OnloadArgs } from "roamjs-components/types";
+import posthog from "posthog-js";
+import {
+  getOverlayHandler,
+  onPageRefObserverChange,
+} from "~/utils/pageRefObserverHandlers";
+import { setSetting } from "~/utils/extensionSettings";
+import { PersonalFlagPanel } from "./components/BlockPropSettingPanels";
+import { PERSONAL_KEYS } from "./utils/settingKeys";
+import { type SettingsSnapshot } from "./utils/accessors";
+import { ROAM_DOCS, withDocsLink } from "./utils/docs";
+
+const DiscourseContextSettings = ({
+  onloadArgs,
+  personalSettings,
+}: {
+  onloadArgs: OnloadArgs;
+  personalSettings: SettingsSnapshot["personalSettings"];
+}) => {
+  const overlayHandler = getOverlayHandler(onloadArgs);
+  return (
+    <div className="flex flex-col gap-4 p-1">
+      <PersonalFlagPanel
+        title="Overlay"
+        description={withDocsLink(
+          "Whether or not to overlay discourse context information over discourse node references.",
+          ROAM_DOCS.discourseContextOverlay,
+        )}
+        settingKeys={[PERSONAL_KEYS.discourseContextOverlay]}
+        initialValue={personalSettings[PERSONAL_KEYS.discourseContextOverlay]}
+        onChange={(checked) => {
+          void setSetting("discourse-context-overlay", checked);
+          onPageRefObserverChange(overlayHandler)(checked);
+          posthog.capture("Personal Settings: Overlay Toggled", {
+            enabled: checked,
+          });
+        }}
+      />
+    </div>
+  );
+};
+
+export default DiscourseContextSettings;

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

@@ -8,6 +8,7 @@ import {
   Label,
 } from "@blueprintjs/core";
 import Description from "~/components/settings/SettingsDescription";
+import { settingAnchor } from "~/components/settings/utils/settingAnchor";
 import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
 import { comboToString } from "~/components/DiscourseNodeMenu";
@@ -92,7 +93,7 @@ const KeyboardShortcutInput = ({
   }, [extensionAPI, settingKey, blockPropKey]);
 
   return (
-    <Label>
+    <Label {...settingAnchor([blockPropKey])}>
       {label}
       <Description description={description} />
       <InputGroup