Skip to content

ENG-993 Move sync settings to tabs #514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 26, 2025
Merged

ENG-993 Move sync settings to tabs #514

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4024190
move sync settings to a new tab, make other setting disabled if page …
sid597 Oct 24, 2025
c6463c8
merge conflict fix
sid597 Oct 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 99 additions & 66 deletions apps/roam/src/components/settings/SuggestiveModeSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
</>
);
};

Expand Down