rerender left sidebar on enable/disable

Author: sid597

apps/roam/src/components/LeftSidebarView.tsx

@@ -508,12 +508,20 @@ const migrateFavorites = async () => {
   refreshConfigTree();
 };
 
+let cachedOnloadArgs: OnloadArgs | null = null;
+
+export const cacheOnloadArgs = (onloadArgs: OnloadArgs): void => {
+  cachedOnloadArgs = onloadArgs;
+};
+
 export const mountLeftSidebar = async (
   wrapper: HTMLElement,
   onloadArgs: OnloadArgs,
 ): Promise<void> => {
   if (!wrapper) return;
 
+  cachedOnloadArgs = onloadArgs;
+
   const id = "dg-left-sidebar-root";
   let root = wrapper.querySelector(`#${id}`) as HTMLDivElement;
   if (!root) {
@@ -531,4 +539,24 @@ export const mountLeftSidebar = async (
   ReactDOM.render(<LeftSidebarView onloadArgs={onloadArgs} />, root);
 };
 
+export const unmountLeftSidebar = (): void => {
+  const wrapper = document.querySelector(".starred-pages-wrapper") as HTMLDivElement;
+  if (!wrapper) return;
+
+  const root = wrapper.querySelector("#dg-left-sidebar-root") as HTMLDivElement;
+  if (root) {
+    ReactDOM.unmountComponentAtNode(root);
+    root.remove();
+  }
+  wrapper.style.padding = "";
+};
+
+export const remountLeftSidebar = async (): Promise<void> => {
+  const wrapper = document.querySelector(".starred-pages-wrapper") as HTMLDivElement;
+  if (!wrapper || !cachedOnloadArgs) return;
+
+  wrapper.style.padding = "0";
+  await mountLeftSidebar(wrapper, cachedOnloadArgs);
+};
+
 export default LeftSidebarView;

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

@@ -14,6 +14,8 @@ import {
   type PersonalSettings,
   type DiscourseNodeSettings,
 } from "./zodSchema";
+import { render as renderToast } from "roamjs-components/components/Toast";
+import { unmountLeftSidebar, remountLeftSidebar } from "~/components/LeftSidebarView";
 
 type PullWatchCallback = (before: unknown, after: unknown) => void;
 
@@ -91,10 +93,47 @@ type DiscourseNodeHandler = (
 export const featureFlagHandlers: Partial<
   Record<keyof FeatureFlags, FeatureFlagHandler>
 > = {
-  // Add handlers as needed:
-  // "Enable Left Sidebar": (newValue) => { ... },
-  // "Suggestive Mode Enabled": (newValue) => { ... },
-  // "Reified Relation Triples": (newValue) => { ... },
+  "Enable Left Sidebar": (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      if (newValue) {
+        void remountLeftSidebar();
+        renderToast({
+          id: "left-sidebar-enabled",
+          content: "Left Sidebar enabled.",
+          intent: "success",
+          timeout: 3000,
+        });
+      } else {
+        unmountLeftSidebar();
+        renderToast({
+          id: "left-sidebar-disabled",
+          content: "Left Sidebar disabled.",
+          intent: "primary",
+          timeout: 3000,
+        });
+      }
+    }
+  },
+  "Suggestive Mode Enabled": (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      renderToast({
+        id: "suggestive-mode-changed",
+        content: `Suggestive Mode ${newValue ? "enabled" : "disabled"}. Please reload the graph for changes to take effect.`,
+        intent: "primary",
+        timeout: 5000,
+      });
+    }
+  },
+  "Reified Relation Triples": (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      renderToast({
+        id: "reified-relations-changed",
+        content: `Reified Relation Triples ${newValue ? "enabled" : "disabled"}. Please reload the graph for changes to take effect.`,
+        intent: "primary",
+        timeout: 5000,
+      });
+    }
+  },
 };
 
 export const globalSettingsHandlers: Partial<

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -49,7 +49,7 @@ import { renderNodeTagPopupButton } from "./renderNodeTagPopup";
 import { renderImageToolsMenu } from "./renderImageToolsMenu";
 import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
 import { getSetting } from "./extensionSettings";
-import { mountLeftSidebar } from "~/components/LeftSidebarView";
+import { mountLeftSidebar, cacheOnloadArgs } from "~/components/LeftSidebarView";
 import { getUidAndBooleanSetting } from "./getExportSettings";
 import { getCleanTagText } from "~/components/settings/NodeConfig";
 import { getFeatureFlag } from "~/components/settings/utils/accessors";
@@ -259,6 +259,8 @@ export const initObservers = async ({
     className: "starred-pages-wrapper",
     callback: (el) => {
       void (async () => {
+        cacheOnloadArgs(onloadArgs);
+
         const isLeftSidebarEnabled = getFeatureFlag("Enable Left Sidebar");
         const container = el as HTMLDivElement;
         if (isLeftSidebarEnabled) {