ENG-993 Move sync settings to tabs (#514)

* move sync settings to a new tab, make other setting disabled if page one is enabled

* merge conflict fix

Author: sid597

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { useEffect, useState } from "react";
-import { Button, Intent } from "@blueprintjs/core";
+import { Button, Intent, Tabs, Tab, TabId } from "@blueprintjs/core";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import PageGroupsPanel from "./PageGroupPanel";
@@ -16,89 +16,122 @@ const SuggestiveModeSettings = () => {
   const [suggestiveModeUid, setSuggestiveModeUid] = useState(
     settings.suggestiveMode.parentUid,
   );
-  const [pageGroupsUid, setPageGroupsUid] = useState(
-    settings.suggestiveMode.pageGroups.uid,
+  const pageGroupsUid = settings.suggestiveMode.pageGroups.uid;
+
+  const [includePageRelations, setIncludePageRelations] = useState(
+    settings.suggestiveMode.includePageRelations.value,
   );
+
   useEffect(() => {
-    if (pageGroupsUid) return;
+    if (suggestiveModeUid) return;
     void (async () => {
       const smUid = await createBlock({
         parentUid: getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE),
         node: { text: "Suggestive Mode" },
       });
-      const pgUid = await createBlock({
-        parentUid: smUid,
-        node: { text: "Page Groups" },
-      });
       setSuggestiveModeUid(smUid);
-      setPageGroupsUid(pgUid);
     })();
-  }, [pageGroupsUid]);
+  }, [suggestiveModeUid]);
 
   const effectiveSuggestiveModeUid =
     suggestiveModeUid || settings.suggestiveMode.parentUid;
 
+  const [selectedTabId, setSelectedTabId] = useState<TabId>("page-groups");
+
   return (
-    <div className="relative flex flex-col gap-4 p-1">
-      <div className="mt-4">
-        <Button
-          icon="cloud-upload"
-          text={"Generate & Upload All Node Embeddings"}
-          onClick={() =>
-            void (async () => {
-              renderToast({
-                id: "discourse-embedding-start",
-                content:
-                  "Creating and uploading your discourse node's embeddings to supabase",
-                intent: "primary",
-                timeout: 3000,
-              });
-              try {
-                await createOrUpdateDiscourseEmbedding();
-              } catch (e) {
-                console.error("Failed to generate embeddings", e);
-                renderToast({
-                  id: "discourse-embedding-error",
-                  content: "Embedding generation failed. Check the console.",
-                  intent: "danger",
-                  timeout: 5000,
-                });
-              }
-            })()
+    <>
+      <Tabs
+        onChange={(id) => setSelectedTabId(id)}
+        selectedTabId={selectedTabId}
+        renderActiveTabPanelOnly={true}
+      >
+        <Tab
+          id="page-groups"
+          title="Page Groups"
+          panel={
+            <div className="flex flex-col gap-4 p-1">
+              <PageGroupsPanel
+                key={pageGroupsUid}
+                uid={pageGroupsUid}
+                initialGroups={settings.suggestiveMode.pageGroups.groups}
+              />
+            </div>
           }
-          intent={Intent.PRIMARY}
-          className={"mt-2"}
-        />
-      </div>
-      <div className="context-settings">
-        <FlagPanel
-          title="Include Current Page Relations"
-          description="Include relations from pages referenced on the current page"
-          order={0}
-          uid={settings.suggestiveMode.includePageRelations.uid}
-          parentUid={effectiveSuggestiveModeUid}
-          value={settings.suggestiveMode.includePageRelations.value}
         />
+        <Tab
+          id="sync-config"
+          title="Sync Config"
+          panel={
+            <div className="flex flex-col gap-4 p-1">
+              <div className="sync-config-settings">
+                <FlagPanel
+                  title="Include Current Page Relations"
+                  description="Include relations from pages referenced on the current page"
+                  order={0}
+                  uid={settings.suggestiveMode.includePageRelations.uid}
+                  parentUid={effectiveSuggestiveModeUid}
+                  value={includePageRelations}
+                  options={{
+                    onChange: (checked: boolean) => {
+                      setIncludePageRelations(checked);
+                    },
+                  }}
+                />
 
-        {/* TODO: if "Include Current Page Relations" is checked "Include Parent and Child Blocks"
-         should be checked and disabled, use `selection` instead */}
-        <FlagPanel
-          title="Include Parent And Child Blocks"
-          description="Include relations from parent and child blocks"
-          order={1}
-          uid={settings.suggestiveMode.includeParentAndChildren.uid}
-          parentUid={effectiveSuggestiveModeUid}
-          value={settings.suggestiveMode.includeParentAndChildren.value}
-        />
-      </div>
-      <div className="page-groups-settings">
-        <PageGroupsPanel
-          key={pageGroupsUid}
-          uid={pageGroupsUid}
-          initialGroups={settings.suggestiveMode.pageGroups.groups}
+                <FlagPanel
+                  title="Include Parent And Child Blocks"
+                  description={
+                    includePageRelations
+                      ? "Include relations from parent and child blocks (automatically enabled when including page relations)"
+                      : "Include relations from parent and child blocks"
+                  }
+                  order={1}
+                  uid={settings.suggestiveMode.includeParentAndChildren.uid}
+                  parentUid={effectiveSuggestiveModeUid}
+                  value={
+                    includePageRelations
+                      ? true
+                      : settings.suggestiveMode.includeParentAndChildren.value
+                  }
+                  disabled={includePageRelations}
+                />
+              </div>
+              <div className="mt-4">
+                <Button
+                  icon="cloud-upload"
+                  text={"Generate & Upload All Node Embeddings"}
+                  onClick={() =>
+                    void (async () => {
+                      renderToast({
+                        id: "discourse-embedding-start",
+                        content:
+                          "Creating and uploading your discourse node's embeddings to supabase",
+                        intent: "primary",
+                        timeout: 3000,
+                      });
+                      try {
+                        await createOrUpdateDiscourseEmbedding();
+                      } catch (e) {
+                        console.error("Failed to generate embeddings", e);
+                        renderToast({
+                          id: "discourse-embedding-error",
+                          content:
+                            "Embedding generation failed. Check the console.",
+                          intent: "danger",
+                          timeout: 5000,
+                        });
+                      }
+                    })()
+                  }
+                  intent={Intent.PRIMARY}
+                  className={"mt-2"}
+                />
+              </div>
+            </div>
+          }
         />
-      </div>
-    </div>
+      </Tabs>
+    </>
   );
 };