use global settings for BETA left sidebar feature

Author: sid597

apps/roam/src/components/LeftSidebarView.tsx

@@ -175,7 +175,7 @@ const PersonalSectionItem = ({
 
   return (
     <>
-      <div className="sidebar-title-button flex w-full cursor-pointer items-center border-none bg-transparent pl-7 pr-2.5 font-semibold outline-none">
+      <div className="sidebar-title-button flex w-full cursor-pointer items-center border-none bg-transparent pl-6 pr-2.5 font-semibold outline-none">
         <div className="flex w-full items-center justify-between">
           <div
             className="flex items-center"
@@ -235,7 +235,7 @@ const GlobalSection = ({ config }: { config: LeftSidebarConfig["global"] }) => {
   return (
     <>
       <div
-        className="sidebar-title-button flex w-full items-center border-none bg-transparent py-1 pl-7 pr-2.5 font-semibold outline-none"
+        className="sidebar-title-button flex w-full items-center border-none bg-transparent py-1 pl-6 pr-2.5 font-semibold outline-none"
         onClick={() => {
           if (!isCollapsable || !config.settings) return;
           toggleFoldedState({
@@ -352,7 +352,7 @@ const FavouritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
     <>
       <Divider className="mx-5" style={{ borderColor: "rgb(57, 75, 89)" }} />
       <div style={{ height: "8px" }}></div>
-      <div className="flex w-full items-center justify-between pb-1 pl-7 pr-2.5 font-semibold">
+      <div className="flex w-full items-center justify-between pb-1 pl-6 pr-2.5 font-semibold">
         <span className="flex items-baseline">
           <Icon icon="star" iconSize={14} />
           <div style={{ width: 8 }}></div>

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

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
+import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index";
@@ -29,6 +30,14 @@ const DiscourseGraphHome = () => {
         value={settings.canvasPageFormat.value}
         defaultValue={DEFAULT_CANVAS_PAGE_FORMAT}
       />
+      <FlagPanel
+        title="(BETA) Left Sidebar"
+        description="Whether or not to enable the left sidebar."
+        order={2}
+        uid={settings.leftSidebarEnabled.uid}
+        parentUid={settings.settingsUid}
+        value={settings.leftSidebarEnabled.value || false}
+      />
     </div>
   );
 };

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

@@ -17,7 +17,6 @@ import {
   AUTO_CANVAS_RELATIONS_KEY,
   DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
   DISCOURSE_TOOL_SHORTCUT_KEY,
-  LEFT_SIDEBAR_ENABLED_KEY,
 } from "~/data/userSettings";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
@@ -200,21 +199,6 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           </>
         }
       />
-      <Checkbox
-        defaultChecked={getSetting(LEFT_SIDEBAR_ENABLED_KEY, false)}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          setSetting(LEFT_SIDEBAR_ENABLED_KEY, target.checked);
-        }}
-        labelElement={
-          <>
-            (BETA) Left Sidebar
-            <Description
-              description={"Whether or not to enable the left sidebar."}
-            />
-          </>
-        }
-      />
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState, memo } from "react";
 import { Button, Collapse } from "@blueprintjs/core";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
@@ -15,7 +15,6 @@ import { LeftSidebarGlobalSectionConfig } from "~/utils/getLeftSidebarSettings";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { refreshAndNotify } from "~/components/LeftSidebarView";
-import { memo } from "react";
 
 const PageItem = memo(
   ({

apps/roam/src/data/userSettings.ts

@@ -7,4 +7,3 @@ export const AUTO_CANVAS_RELATIONS_KEY = "auto-canvas-relations";
 export const DISCOURSE_TOOL_SHORTCUT_KEY = "discourse-tool-shortcut";
 export const DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY =
   "discourse-context-overlay-in-canvas";
-export const LEFT_SIDEBAR_ENABLED_KEY = "left-sidebar-enabled";

apps/roam/src/styles/styles.css

@@ -141,7 +141,3 @@
   background-color: #10161a;
   color: #f5f8fa;
 }
-
-.starred-pages-wrapper {
-  padding: 0 !important;
-}

apps/roam/src/utils/discourseConfigRef.ts

@@ -4,6 +4,8 @@ import {
   StringSetting,
   ExportConfigWithUids,
   getUidAndStringSetting,
+  getUidAndBooleanSetting,
+  BooleanSetting,
 } from "./getExportSettings";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
@@ -29,10 +31,9 @@ export const subscribe = (listener: () => void) => {
 };
 
 export const notify = () => {
-  listeners.forEach(listener => listener());
+  listeners.forEach((listener) => listener());
 };
 
-
 type FormattedConfigTree = {
   settingsUid: string;
   grammarUid: string;
@@ -43,6 +44,7 @@ type FormattedConfigTree = {
   canvasPageFormat: StringSetting;
   suggestiveMode: SuggestiveModeConfigWithUids;
   leftSidebar: LeftSidebarConfig;
+  leftSidebarEnabled: BooleanSetting;
 };
 
 export const getFormattedConfigTree = (): FormattedConfigTree => {
@@ -71,6 +73,10 @@ export const getFormattedConfigTree = (): FormattedConfigTree => {
     }),
     suggestiveMode: getSuggestiveModeConfigAndUids(configTreeRef.tree),
     leftSidebar: getLeftSidebarSettings(configTreeRef.tree),
+    leftSidebarEnabled: getUidAndBooleanSetting({
+      tree: configTreeRef.tree,
+      text: "(BETA) Left Sidebar",
+    }),
   };
 };
 export default configTreeRef;

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -47,7 +47,7 @@ import { renderNodeTagPopupButton } from "./renderNodeTagPopup";
 import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
 import { getSetting } from "./extensionSettings";
 import { mountLeftSidebar } from "~/components/LeftSidebarView";
-import { LEFT_SIDEBAR_ENABLED_KEY } from "~/data/userSettings";
+import { getUidAndBooleanSetting } from "./getExportSettings";
 
 const debounce = (fn: () => void, delay = 250) => {
   let timeout: number;
@@ -102,18 +102,6 @@ export const initObservers = async ({
     render: (b) => renderQueryBlock(b, onloadArgs),
   });
 
-  const leftSidebarObserver = createHTMLObserver({
-    tag: "DIV",
-    useBody: true,
-    className: "starred-pages-wrapper",
-    callback: (el) => {
-      const isLeftSidebarEnabled = getSetting(LEFT_SIDEBAR_ENABLED_KEY, false);
-      if (!isLeftSidebarEnabled) return;
-      const container = el as HTMLDivElement;
-      mountLeftSidebar(container, onloadArgs);
-    },
-  });
-
   const nodeTagPopupButtonObserver = createHTMLObserver({
     className: "rm-page-ref--tag",
     tag: "SPAN",
@@ -204,6 +192,24 @@ export const initObservers = async ({
     ) as IKeyCombo) || undefined;
   const personalTrigger = personalTriggerCombo?.key;
   const personalModifiers = getModifiersFromCombo(personalTriggerCombo);
+
+  const leftSidebarObserver = createHTMLObserver({
+    tag: "DIV",
+    useBody: true,
+    className: "starred-pages-wrapper",
+    callback: (el) => {
+      const isLeftSidebarEnabled = getUidAndBooleanSetting({
+        tree: configTree,
+        text: "(BETA) Left Sidebar",
+      }).value;
+      const container = el as HTMLDivElement;
+      if (isLeftSidebarEnabled) {
+        container.style.padding = "0";
+        mountLeftSidebar(container, onloadArgs);
+      }
+    },
+  });
+
   const handleNodeMenuRender = (target: HTMLElement, evt: KeyboardEvent) => {
     if (
       target.tagName === "TEXTAREA" &&