From 58974a35ad2e34105e5b3a73341f0a3a81d9e04b Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Fri, 12 Dec 2025 19:59:35 +0530
Subject: [PATCH 1/2] show alert to reload the graph when left sidebar is
 enabled

---
 .../components/settings/GeneralSettings.tsx   | 61 ++++++++++++++++---
 1 file changed, 53 insertions(+), 8 deletions(-)

diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx
index ac1ab5cae..037b8013a 100644
--- a/apps/roam/src/components/settings/GeneralSettings.tsx
+++ b/apps/roam/src/components/settings/GeneralSettings.tsx
@@ -1,9 +1,13 @@
-import React, { useMemo } from "react";
+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, Checkbox, Intent } from "@blueprintjs/core";
+import Description from "roamjs-components/components/Description";
+import createBlock from "roamjs-components/writes/createBlock";
+import deleteBlock from "roamjs-components/writes/deleteBlock";
 
 const DiscourseGraphHome = () => {
   const settings = useMemo(() => {
@@ -11,6 +15,14 @@ const DiscourseGraphHome = () => {
     return getFormattedConfigTree();
   }, []);
 
+  const [leftSidebarEnabled, setLeftSidebarEnabled] = useState(
+    settings.leftSidebarEnabled.value || false,
+  );
+  const [leftSidebarUid, setLeftSidebarUid] = useState(
+    settings.leftSidebarEnabled.uid,
+  );
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+
   return (
     <div className="flex flex-col gap-4 p-1">
       <TextPanel
@@ -30,14 +42,47 @@ 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}
+      <Checkbox
+        checked={leftSidebarEnabled}
+        onChange={(e) => {
+          const checked = (e.target as HTMLInputElement).checked;
+          if (checked) {
+            void createBlock({
+              parentUid: settings.settingsUid,
+              node: { text: "(BETA) Left Sidebar" },
+            }).then((uid) => {
+              setLeftSidebarUid(uid);
+              setLeftSidebarEnabled(true);
+              setIsAlertOpen(true);
+            });
+          } else {
+            if (leftSidebarUid) {
+              void deleteBlock(leftSidebarUid);
+              setLeftSidebarUid(undefined);
+            }
+            setLeftSidebarEnabled(false);
+          }
+        }}
+        labelElement={
+          <>
+            (BETA) Left Sidebar
+            <Description
+              description={"Whether or not to enable the left sidebar."}
+            />
+          </>
+        }
       />
+      <Alert
+        isOpen={isAlertOpen}
+        onConfirm={() => window.location.reload()}
+        onCancel={() => setIsAlertOpen(false)}
+        confirmButtonText="Reload Graph"
+        cancelButtonText="Later"
+        intent={Intent.PRIMARY}
+      >
+        <p>Enabling the Left Sidebar requires a graph reload to take effect.</p>
+        <p>Would you like to reload now?</p>
+      </Alert>
     </div>
   );
 };

From bf1b4a2b5e845a9a55acc0dd28d255c048bfcf5d Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Mon, 15 Dec 2025 10:30:44 +0530
Subject: [PATCH 2/2] use flag panel instead of checkbox

---
 .../components/settings/GeneralSettings.tsx   | 48 +++++--------------
 1 file changed, 12 insertions(+), 36 deletions(-)

diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx
index 037b8013a..3270ef616 100644
--- a/apps/roam/src/components/settings/GeneralSettings.tsx
+++ b/apps/roam/src/components/settings/GeneralSettings.tsx
@@ -4,10 +4,7 @@ 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, Checkbox, Intent } from "@blueprintjs/core";
-import Description from "roamjs-components/components/Description";
-import createBlock from "roamjs-components/writes/createBlock";
-import deleteBlock from "roamjs-components/writes/deleteBlock";
+import { Alert, Intent } from "@blueprintjs/core";
 
 const DiscourseGraphHome = () => {
   const settings = useMemo(() => {
@@ -15,12 +12,6 @@ const DiscourseGraphHome = () => {
     return getFormattedConfigTree();
   }, []);
 
-  const [leftSidebarEnabled, setLeftSidebarEnabled] = useState(
-    settings.leftSidebarEnabled.value || false,
-  );
-  const [leftSidebarUid, setLeftSidebarUid] = useState(
-    settings.leftSidebarEnabled.uid,
-  );
   const [isAlertOpen, setIsAlertOpen] = useState(false);
 
   return (
@@ -42,35 +33,20 @@ const DiscourseGraphHome = () => {
         value={settings.canvasPageFormat.value}
         defaultValue={DEFAULT_CANVAS_PAGE_FORMAT}
       />
-      <Checkbox
-        checked={leftSidebarEnabled}
-        onChange={(e) => {
-          const checked = (e.target as HTMLInputElement).checked;
-          if (checked) {
-            void createBlock({
-              parentUid: settings.settingsUid,
-              node: { text: "(BETA) Left Sidebar" },
-            }).then((uid) => {
-              setLeftSidebarUid(uid);
-              setLeftSidebarEnabled(true);
+      <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}
+        options={{
+          onChange: (checked: boolean) => {
+            if (checked) {
               setIsAlertOpen(true);
-            });
-          } else {
-            if (leftSidebarUid) {
-              void deleteBlock(leftSidebarUid);
-              setLeftSidebarUid(undefined);
             }
-            setLeftSidebarEnabled(false);
-          }
+          },
         }}
-        labelElement={
-          <>
-            (BETA) Left Sidebar
-            <Description
-              description={"Whether or not to enable the left sidebar."}
-            />
-          </>
-        }
       />
       <Alert
         isOpen={isAlertOpen}