show alert to reload the graph when left sidebar is enabled

Author: sid597

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

@@ -1,16 +1,28 @@
-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(() => {
     refreshConfigTree();
     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>
       <FlagPanel
         title="(BETA) Suggestive Mode Enabled"
         description="Whether or not to enable the suggestive mode, if this is first time enabling it, you will need to generate and upload all node embeddings to supabase. Go to Suggestive Mode -> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"