ENG-1193: add left sidebar feature flag

apps/roam/src/components/LeftSidebarView.tsx

@@ -531,4 +531,14 @@ export const mountLeftSidebar = async (
   ReactDOM.render(<LeftSidebarView onloadArgs={onloadArgs} />, root);
 };
 
+export const unmountLeftSidebar = (wrapper: HTMLElement): void => {
+  if (!wrapper) return;
+  const root = wrapper.querySelector(`#${"dg-left-sidebar-root"}`) as HTMLDivElement;
+  if (root) {
+    ReactDOM.unmountComponentAtNode(root);
+    root.remove();
+  }
+  wrapper.style.padding = "";
+};
+
 export default LeftSidebarView;

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

@@ -1,10 +1,10 @@
 import React, { useMemo, useState } 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";
 import { Alert, Intent } from "@blueprintjs/core";
+import { BlockPropFeatureFlagPanel } from "./BlockPropFeatureFlagPanel";
 
 const DiscourseGraphHome = () => {
   const settings = useMemo(() => {
@@ -33,20 +33,10 @@ const DiscourseGraphHome = () => {
         value={settings.canvasPageFormat.value}
         defaultValue={DEFAULT_CANVAS_PAGE_FORMAT}
       />
-      <FlagPanel
+      <BlockPropFeatureFlagPanel
         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}
-        options={{
-          onChange: (checked: boolean) => {
-            if (checked) {
-              setIsAlertOpen(true);
-            }
-          },
-        }}
+        featureKey="Enable Left Sidebar"
       />
       <Alert
         isOpen={isAlertOpen}

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -49,11 +49,16 @@ import { renderNodeTagPopupButton } from "./renderNodeTagPopup";
 import { renderImageToolsMenu } from "./renderImageToolsMenu";
 import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
 import { getSetting } from "./extensionSettings";
-import { mountLeftSidebar } from "~/components/LeftSidebarView";
-import { getUidAndBooleanSetting } from "./getExportSettings";
+import {
+  mountLeftSidebar,
+  unmountLeftSidebar,
+} from "~/components/LeftSidebarView";
 import { getCleanTagText } from "~/components/settings/NodeConfig";
 import getPleasingColors from "@repo/utils/getPleasingColors";
 import { colord } from "colord";
+import { getFeatureFlag } from "./manageFeatureFlag";
+import { setupPullWatchBlockPropsBasedSettings } from "./pullWatchBlockPropsBasedSettings";
+import { initSchema } from "./initBlockPropSettings";
 
 const debounce = (fn: () => void, delay = 250) => {
   let timeout: number;
@@ -77,6 +82,7 @@ export const initObservers = async ({
     nodeCreationPopoverListener: EventListener;
   };
 }> => {
+  const topLevelBlockProps = await initSchema();
   const pageTitleObserver = createHTMLObserver({
     tag: "H1",
     className: "rm-title-display",
@@ -238,25 +244,33 @@ export const initObservers = async ({
   const personalTrigger = personalTriggerCombo?.key;
   const personalModifiers = getModifiersFromCombo(personalTriggerCombo);
 
+  let leftSidebarContainer: HTMLDivElement | null = null;
+
+  const updateLeftSidebar = (container: HTMLDivElement) => {
+    const isLeftSidebarEnabled = getFeatureFlag("Enable Left Sidebar");
+    if (isLeftSidebarEnabled) {
+      container.style.padding = "0";
+      void mountLeftSidebar(container, onloadArgs);
+    } else {
+      unmountLeftSidebar(container);
+    }
+  };
   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 container = el as HTMLDivElement;
-        if (isLeftSidebarEnabled) {
-          container.style.padding = "0";
-          await mountLeftSidebar(container, onloadArgs);
-        }
-      })();
+      leftSidebarContainer = el as HTMLDivElement;
+      updateLeftSidebar(leftSidebarContainer);
     },
   });
 
+  setupPullWatchBlockPropsBasedSettings(
+    topLevelBlockProps,
+    updateLeftSidebar,
+    leftSidebarContainer as unknown as HTMLDivElement,
+  );
+
   const handleNodeMenuRender = (target: HTMLElement, evt: KeyboardEvent) => {
     if (
       target.tagName === "TEXTAREA" &&

apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts

@@ -1,7 +1,10 @@
 import { TOP_LEVEL_BLOCK_PROP_KEYS } from "~/data/blockPropsSettingsConfig";
+import { json, normalizeProps } from "./getBlockProps";
 
 export const setupPullWatchBlockPropsBasedSettings = (
   blockUids: Record<string, string>,
+  updateLeftSidebar: (container: HTMLDivElement) => void,
+  leftSidebarContainer: HTMLDivElement,
 ) => {
   const featureFlagsBlockUid =
     blockUids[TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags];
@@ -11,7 +14,24 @@ export const setupPullWatchBlockPropsBasedSettings = (
       "[:block/props]",
       `[:block/uid "${featureFlagsBlockUid}"]`,
       (before, after) => {
-        console.log("feature flags changed", before, after);
+        const beforeProps = normalizeProps(
+          (before?.[":block/props"] || {}) as json,
+        ) as Record<string, json>;
+        const afterProps = normalizeProps(
+          (after?.[":block/props"] || {}) as json,
+        ) as Record<string, json>;
+
+        const beforeEnabled = beforeProps["Enable Left Sidebar"] as
+          | boolean
+          | undefined;
+        const afterEnabled = afterProps["Enable Left Sidebar"] as
+          | boolean
+          | undefined;
+
+        // Only update if the flag actually changed
+        if (beforeEnabled !== afterEnabled) {
+          updateLeftSidebar(leftSidebarContainer);
+        }
       },
     );
   }

apps/roam/src/utils/zodSchemaForSettings.ts

@@ -2,6 +2,7 @@ import { z } from "zod";
 
 /* eslint-disable @typescript-eslint/naming-convention */
 export const FeatureFlagsSchema = z.object({
+  "Enable Left Sidebar": z.boolean().default(false),
 });
 /* eslint-disable @typescript-eslint/naming-convention */