From 3b4d8a0ab32df9925a0d951343deff5923be4ead Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 12 Jan 2026 19:38:03 +0530 Subject: [PATCH 01/13] ENG-1272 Migrate all small global settings components --- .../components/settings/GeneralSettings.tsx | 20 +- .../BlockPropGlobalSettingPanels.tsx | 217 ++++++++++++++++++ apps/roam/src/utils/getExportSettings.ts | 24 +- .../utils/initializeObserversAndListeners.ts | 18 +- apps/roam/src/utils/isCanvasPage.ts | 7 +- 5 files changed, 252 insertions(+), 34 deletions(-) create mode 100644 apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index 3270ef616..a44006543 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -1,36 +1,30 @@ 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, Intent } from "@blueprintjs/core"; +import { GlobalTextPanel } from "./components/BlockPropSettingPanels"; const DiscourseGraphHome = () => { - const settings = useMemo(() => { + const settings = useMemo(() => { refreshConfigTree(); return getFormattedConfigTree(); }, []); const [isAlertOpen, setIsAlertOpen] = useState(false); - return (
- - { + const [value, setValue] = useState( + () => getGlobalSetting(settingKeys) ?? defaultValue, + ); + + const handleChange = (e: React.ChangeEvent) => { + const newValue = e.target.value; + setValue(newValue); + setGlobalSetting(settingKeys, newValue); + }; + + return ( + + ); +}; + +export const BlockPropFlagPanel = ({ + title, + description, + settingKeys, + defaultValue = false, + disabled = false, + onChange, +}: BaseProps & { + defaultValue?: boolean; + disabled?: boolean; + onChange?: (checked: boolean) => void; +}) => { + const [value, setValue] = useState( + () => getGlobalSetting(settingKeys) ?? defaultValue, + ); + + const handleChange = (e: React.ChangeEvent) => { + const { checked } = e.target; + setValue(checked); + setGlobalSetting(settingKeys, checked); + onChange?.(checked); + }; + + return ( + + {idToTitle(title)} + + + } + /> + ); +}; + +export const BlockPropNumberPanel = ({ + title, + description, + settingKeys, + defaultValue = 0, + min, + max, +}: BaseProps & { + defaultValue?: number; + min?: number; + max?: number; +}) => { + const [value, setValue] = useState( + () => getGlobalSetting(settingKeys) ?? defaultValue, + ); + + const handleChange = (valueAsNumber: number) => { + setValue(valueAsNumber); + setGlobalSetting(settingKeys, valueAsNumber); + }; + + return ( + + ); +}; + +export const BlockPropSelectPanel = ({ + title, + description, + settingKeys, + options, + defaultValue, +}: BaseProps & { + options: string[]; + defaultValue?: string; +}) => { + const [value, setValue] = useState( + () => getGlobalSetting(settingKeys) ?? defaultValue ?? options[0], + ); + + const handleChange = (e: React.ChangeEvent) => { + const newValue = e.target.value; + setValue(newValue); + setGlobalSetting(settingKeys, newValue); + }; + + return ( + + ); +}; + +export const BlockPropMultiTextPanel = ({ + title, + description, + settingKeys, + defaultValue = [], +}: BaseProps & { + defaultValue?: string[]; +}) => { + const [values, setValues] = useState( + () => getGlobalSetting(settingKeys) ?? defaultValue, + ); + const [inputValue, setInputValue] = useState(""); + + const handleAdd = () => { + if (inputValue.trim() && !values.includes(inputValue.trim())) { + const newValues = [...values, inputValue.trim()]; + setValues(newValues); + setGlobalSetting(settingKeys, newValues); + setInputValue(""); + } + }; + + const handleRemove = (index: number) => { + const newValues = values.filter((_, i) => i !== index); + setValues(newValues); + setGlobalSetting(settingKeys, newValues); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + e.preventDefault(); + handleAdd(); + } + }; + + return ( + + ); +}; diff --git a/apps/roam/src/utils/getExportSettings.ts b/apps/roam/src/utils/getExportSettings.ts index 21cadbc5c..0e33a1aa9 100644 --- a/apps/roam/src/utils/getExportSettings.ts +++ b/apps/roam/src/utils/getExportSettings.ts @@ -3,6 +3,8 @@ import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTit import { RoamBasicNode } from "roamjs-components/types"; import { getSubTree } from "roamjs-components/util"; import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage"; +import { getGlobalSetting } from "~/components/settings/utils/accessors"; +import type { ExportSettings } from "~/components/settings/utils/zodSchema"; type UidPair = { uid?: string; @@ -110,16 +112,18 @@ export const getExportSettingsAndUids = (): ExportConfigWithUids => { }; export const getExportSettings = (): Omit => { - const settings = getExportSettingsAndUids(); + // Zod schema applies defaults, so we can trust the values exist + const exportSettings = getGlobalSetting(["Export"])!; + return { - maxFilenameLength: settings.maxFilenameLength.value, - openSidebar: settings.openSidebar.value, - removeSpecialCharacters: settings.removeSpecialCharacters.value, - simplifiedFilename: settings.simplifiedFilename.value, - optsEmbeds: settings.optsEmbeds.value, - optsRefs: settings.optsRefs.value, - linkType: settings.linkType.value, - appendRefNodeContext: settings.appendRefNodeContext.value, - frontmatter: settings.frontmatter.values, + maxFilenameLength: exportSettings["Max Filename Length"], + openSidebar: false, // Only in old config page, not in Settings dialog + removeSpecialCharacters: exportSettings["Remove Special Characters"], + simplifiedFilename: false, // Only in old config page, not in Settings dialog + optsEmbeds: exportSettings["Resolve Block Embeds"], + optsRefs: exportSettings["Resolve Block References"], + linkType: exportSettings["Link Type"], + appendRefNodeContext: exportSettings["Append Referenced Node"], + frontmatter: exportSettings["Frontmatter"], }; }; diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts index 4f2a3fa68..7e3d6765c 100644 --- a/apps/roam/src/utils/initializeObserversAndListeners.ts +++ b/apps/roam/src/utils/initializeObserversAndListeners.ts @@ -34,8 +34,6 @@ import getDiscourseNodes from "~/utils/getDiscourseNodes"; import { OnloadArgs } from "roamjs-components/types"; import refreshConfigTree from "~/utils/refreshConfigTree"; import { render as renderGraphOverviewExport } from "~/components/ExportDiscourseContext"; -import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; -import { getSettingValueFromTree } from "roamjs-components/util"; import { getModifiersFromCombo, render as renderDiscourseNodeMenu, @@ -55,6 +53,13 @@ import { getSetting } from "./extensionSettings"; import { mountLeftSidebar } from "~/components/LeftSidebarView"; import { getUidAndBooleanSetting } from "./getExportSettings"; import { getCleanTagText } from "~/components/settings/NodeConfig"; +<<<<<<< HEAD +======= +import { + getFeatureFlag, + getGlobalSetting, +} from "~/components/settings/utils/accessors"; +>>>>>>> 4e14c9ed (ENG-1272 Migrate all small global settings components) import getPleasingColors from "@repo/utils/getPleasingColors"; import { colord } from "colord"; import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches"; @@ -256,12 +261,9 @@ export const initObservers = async ({ } }; - const configTree = getBasicTreeByParentUid(configPageUid); - const globalTrigger = getSettingValueFromTree({ - tree: configTree, - key: "trigger", - defaultValue: "\\", - }).trim(); + const globalTrigger = ( + getGlobalSetting(["Trigger"]) || "\\" + ).trim(); const personalTriggerCombo = (onloadArgs.extensionAPI.settings.get( "personal-node-menu-trigger", diff --git a/apps/roam/src/utils/isCanvasPage.ts b/apps/roam/src/utils/isCanvasPage.ts index 591ccea5c..c2dcd2177 100644 --- a/apps/roam/src/utils/isCanvasPage.ts +++ b/apps/roam/src/utils/isCanvasPage.ts @@ -1,9 +1,10 @@ import { DEFAULT_CANVAS_PAGE_FORMAT } from ".."; -import { getFormattedConfigTree } from "./discourseConfigRef"; +import { getGlobalSetting } from "~/components/settings/utils/accessors"; export const isCanvasPage = ({ title }: { title: string }) => { - const { canvasPageFormat } = getFormattedConfigTree(); - const format = canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT; + const format = + getGlobalSetting(["Canvas Page Format"]) || + DEFAULT_CANVAS_PAGE_FORMAT; const canvasRegex = new RegExp(`^${format}$`.replace(/\*/g, ".+")); return canvasRegex.test(title); }; From 4e406d93fab17a0a096dc7fe811b4b7eacc385e8 Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 12 Jan 2026 19:51:33 +0530 Subject: [PATCH 02/13] suggestive mode flags migrate --- .../settings/SuggestiveModeSettings.tsx | 42 +++++++------------ .../BlockPropGlobalSettingPanels.tsx | 1 + 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx index 8b457e7ca..706753f35 100644 --- a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx +++ b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx @@ -2,26 +2,33 @@ import React, { useEffect, useState } from "react"; 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"; import createBlock from "roamjs-components/writes/createBlock"; import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle"; import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage"; import { createOrUpdateDiscourseEmbedding } from "~/utils/syncDgNodesToSupabase"; import { render as renderToast } from "roamjs-components/components/Toast"; +import { BlockPropFlagPanel } from "./components/BlockPropGlobalSettingPanels"; +import { getGlobalSetting } from "./utils/accessors"; const SuggestiveModeSettings = () => { + // Keep old config tree for PageGroups (not yet migrated) const settings = getFormattedConfigTree(); + const pageGroupsUid = settings.suggestiveMode.pageGroups.uid; const [suggestiveModeUid, setSuggestiveModeUid] = useState( settings.suggestiveMode.parentUid, ); - const pageGroupsUid = settings.suggestiveMode.pageGroups.uid; - const [includePageRelations, setIncludePageRelations] = useState( - settings.suggestiveMode.includePageRelations.value, + // Track includePageRelations to control the disabled state of includeParentAndChildren + const [includePageRelations, setIncludePageRelations] = useState(() => + getGlobalSetting([ + "Suggestive Mode", + "Include Current Page Relations", + ]), ); + // Keep this useEffect for PageGroups compatibility (old system) useEffect(() => { if (suggestiveModeUid) return; void (async () => { @@ -33,9 +40,6 @@ const SuggestiveModeSettings = () => { })(); }, [suggestiveModeUid]); - const effectiveSuggestiveModeUid = - suggestiveModeUid || settings.suggestiveMode.parentUid; - const [selectedTabId, setSelectedTabId] = useState("page-groups"); return ( @@ -64,35 +68,21 @@ const SuggestiveModeSettings = () => { panel={
- { - setIncludePageRelations(checked); - }, - }} + settingKeys={["Suggestive Mode", "Include Current Page Relations"]} + onChange={setIncludePageRelations} /> -
diff --git a/apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx index 34808b24d..c8662b59a 100644 --- a/apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx @@ -177,6 +177,7 @@ export const BlockPropMultiTextPanel = ({ }; const handleRemove = (index: number) => { + // eslint-disable-next-line @typescript-eslint/naming-convention const newValues = values.filter((_, i) => i !== index); setValues(newValues); setGlobalSetting(settingKeys, newValues); From 8f6abd796fac7c087e13b4cee3e89b37846abcd4 Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 12 Jan 2026 21:10:36 +0530 Subject: [PATCH 03/13] prettier --- .../components/settings/GeneralSettings.tsx | 25 +- .../settings/SuggestiveModeSettings.tsx | 28 +-- .../BlockPropGlobalSettingPanels.tsx | 218 ------------------ .../components/BlockPropSettingPanels.tsx | 7 + apps/roam/src/utils/getExportSettings.ts | 24 +- .../utils/initializeObserversAndListeners.ts | 18 +- apps/roam/src/utils/isCanvasPage.ts | 7 +- 7 files changed, 57 insertions(+), 270 deletions(-) delete mode 100644 apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index a44006543..f43ad8154 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -1,13 +1,12 @@ import React, { useMemo, useState } from "react"; -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, Intent } from "@blueprintjs/core"; -import { GlobalTextPanel } from "./components/BlockPropSettingPanels"; +import { GlobalTextPanel, FeatureFlagPanel } from "./components/BlockPropSettingPanels"; const DiscourseGraphHome = () => { - const settings = useMemo(() => { + const settings = useMemo(() => { refreshConfigTree(); return getFormattedConfigTree(); }, []); @@ -20,26 +19,30 @@ const DiscourseGraphHome = () => { description="The trigger to create the node menu." settingKeys={["Trigger"]} defaultValue="\\" + order={0} + uid={settings.trigger.uid} + parentUid={settings.settingsUid} /> - { - if (checked) { - setIsAlertOpen(true); - } - }, + onAfterChange={(checked: boolean) => { + if (checked) { + setIsAlertOpen(true); + } }} /> { - // Keep old config tree for PageGroups (not yet migrated) const settings = getFormattedConfigTree(); - const pageGroupsUid = settings.suggestiveMode.pageGroups.uid; const [suggestiveModeUid, setSuggestiveModeUid] = useState( settings.suggestiveMode.parentUid, ); + const pageGroupsUid = settings.suggestiveMode.pageGroups.uid; - // Track includePageRelations to control the disabled state of includeParentAndChildren - const [includePageRelations, setIncludePageRelations] = useState(() => - getGlobalSetting([ - "Suggestive Mode", - "Include Current Page Relations", - ]), + const [includePageRelations, setIncludePageRelations] = useState( + settings.suggestiveMode.includePageRelations.value, ); - // Keep this useEffect for PageGroups compatibility (old system) useEffect(() => { if (suggestiveModeUid) return; void (async () => { @@ -40,6 +33,9 @@ const SuggestiveModeSettings = () => { })(); }, [suggestiveModeUid]); + const effectiveSuggestiveModeUid = + suggestiveModeUid || settings.suggestiveMode.parentUid; + const [selectedTabId, setSelectedTabId] = useState("page-groups"); return ( @@ -68,14 +64,17 @@ const SuggestiveModeSettings = () => { panel={
- - { : "Include relations from parent and child blocks" } settingKeys={["Suggestive Mode", "Include Parent And Child Blocks"]} + order={1} + uid={settings.suggestiveMode.includeParentAndChildren.uid} + parentUid={effectiveSuggestiveModeUid} disabled={includePageRelations} />
diff --git a/apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx deleted file mode 100644 index c8662b59a..000000000 --- a/apps/roam/src/components/settings/components/BlockPropGlobalSettingPanels.tsx +++ /dev/null @@ -1,218 +0,0 @@ -import React, { useState } from "react"; -import { - Checkbox, - InputGroup, - Label, - NumericInput, - HTMLSelect, - Button, - Tag, -} from "@blueprintjs/core"; -import Description from "roamjs-components/components/Description"; -import idToTitle from "roamjs-components/util/idToTitle"; -import { getGlobalSetting, setGlobalSetting } from "../utils/accessors"; - -type BaseProps = { - title: string; - description: string; - settingKeys: string[]; -}; - -export const BlockPropTextPanel = ({ - title, - description, - settingKeys, - defaultValue = "", - placeholder, -}: BaseProps & { - defaultValue?: string; - placeholder?: string; -}) => { - const [value, setValue] = useState( - () => getGlobalSetting(settingKeys) ?? defaultValue, - ); - - const handleChange = (e: React.ChangeEvent) => { - const newValue = e.target.value; - setValue(newValue); - setGlobalSetting(settingKeys, newValue); - }; - - return ( - - ); -}; - -export const BlockPropFlagPanel = ({ - title, - description, - settingKeys, - defaultValue = false, - disabled = false, - onChange, -}: BaseProps & { - defaultValue?: boolean; - disabled?: boolean; - onChange?: (checked: boolean) => void; -}) => { - const [value, setValue] = useState( - () => getGlobalSetting(settingKeys) ?? defaultValue, - ); - - const handleChange = (e: React.ChangeEvent) => { - const { checked } = e.target; - setValue(checked); - setGlobalSetting(settingKeys, checked); - onChange?.(checked); - }; - - return ( - - {idToTitle(title)} - - - } - /> - ); -}; - -export const BlockPropNumberPanel = ({ - title, - description, - settingKeys, - defaultValue = 0, - min, - max, -}: BaseProps & { - defaultValue?: number; - min?: number; - max?: number; -}) => { - const [value, setValue] = useState( - () => getGlobalSetting(settingKeys) ?? defaultValue, - ); - - const handleChange = (valueAsNumber: number) => { - setValue(valueAsNumber); - setGlobalSetting(settingKeys, valueAsNumber); - }; - - return ( - - ); -}; - -export const BlockPropSelectPanel = ({ - title, - description, - settingKeys, - options, - defaultValue, -}: BaseProps & { - options: string[]; - defaultValue?: string; -}) => { - const [value, setValue] = useState( - () => getGlobalSetting(settingKeys) ?? defaultValue ?? options[0], - ); - - const handleChange = (e: React.ChangeEvent) => { - const newValue = e.target.value; - setValue(newValue); - setGlobalSetting(settingKeys, newValue); - }; - - return ( - - ); -}; - -export const BlockPropMultiTextPanel = ({ - title, - description, - settingKeys, - defaultValue = [], -}: BaseProps & { - defaultValue?: string[]; -}) => { - const [values, setValues] = useState( - () => getGlobalSetting(settingKeys) ?? defaultValue, - ); - const [inputValue, setInputValue] = useState(""); - - const handleAdd = () => { - if (inputValue.trim() && !values.includes(inputValue.trim())) { - const newValues = [...values, inputValue.trim()]; - setValues(newValues); - setGlobalSetting(settingKeys, newValues); - setInputValue(""); - } - }; - - const handleRemove = (index: number) => { - // eslint-disable-next-line @typescript-eslint/naming-convention - const newValues = values.filter((_, i) => i !== index); - setValues(newValues); - setGlobalSetting(settingKeys, newValues); - }; - - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - e.preventDefault(); - handleAdd(); - } - }; - - return ( - - ); -}; diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index e226588d9..a44f36572 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -472,6 +472,9 @@ export const FeatureFlagPanel = ({ featureKey, onBeforeEnable, onAfterChange, + parentUid, + uid, + order, }: { title: string; description: string; @@ -485,6 +488,7 @@ export const FeatureFlagPanel = ({ ? async (checked) => { if (checked) { return onBeforeEnable(); + } return true; } @@ -499,6 +503,9 @@ export const FeatureFlagPanel = ({ setter={featureFlagSetter} onBeforeChange={handleBeforeChange} onChange={onAfterChange} + parentUid={parentUid} + uid={uid} + order={order} /> ); }; diff --git a/apps/roam/src/utils/getExportSettings.ts b/apps/roam/src/utils/getExportSettings.ts index 0e33a1aa9..21cadbc5c 100644 --- a/apps/roam/src/utils/getExportSettings.ts +++ b/apps/roam/src/utils/getExportSettings.ts @@ -3,8 +3,6 @@ import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTit import { RoamBasicNode } from "roamjs-components/types"; import { getSubTree } from "roamjs-components/util"; import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage"; -import { getGlobalSetting } from "~/components/settings/utils/accessors"; -import type { ExportSettings } from "~/components/settings/utils/zodSchema"; type UidPair = { uid?: string; @@ -112,18 +110,16 @@ export const getExportSettingsAndUids = (): ExportConfigWithUids => { }; export const getExportSettings = (): Omit => { - // Zod schema applies defaults, so we can trust the values exist - const exportSettings = getGlobalSetting(["Export"])!; - + const settings = getExportSettingsAndUids(); return { - maxFilenameLength: exportSettings["Max Filename Length"], - openSidebar: false, // Only in old config page, not in Settings dialog - removeSpecialCharacters: exportSettings["Remove Special Characters"], - simplifiedFilename: false, // Only in old config page, not in Settings dialog - optsEmbeds: exportSettings["Resolve Block Embeds"], - optsRefs: exportSettings["Resolve Block References"], - linkType: exportSettings["Link Type"], - appendRefNodeContext: exportSettings["Append Referenced Node"], - frontmatter: exportSettings["Frontmatter"], + maxFilenameLength: settings.maxFilenameLength.value, + openSidebar: settings.openSidebar.value, + removeSpecialCharacters: settings.removeSpecialCharacters.value, + simplifiedFilename: settings.simplifiedFilename.value, + optsEmbeds: settings.optsEmbeds.value, + optsRefs: settings.optsRefs.value, + linkType: settings.linkType.value, + appendRefNodeContext: settings.appendRefNodeContext.value, + frontmatter: settings.frontmatter.values, }; }; diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts index 7e3d6765c..4f2a3fa68 100644 --- a/apps/roam/src/utils/initializeObserversAndListeners.ts +++ b/apps/roam/src/utils/initializeObserversAndListeners.ts @@ -34,6 +34,8 @@ import getDiscourseNodes from "~/utils/getDiscourseNodes"; import { OnloadArgs } from "roamjs-components/types"; import refreshConfigTree from "~/utils/refreshConfigTree"; import { render as renderGraphOverviewExport } from "~/components/ExportDiscourseContext"; +import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; +import { getSettingValueFromTree } from "roamjs-components/util"; import { getModifiersFromCombo, render as renderDiscourseNodeMenu, @@ -53,13 +55,6 @@ import { getSetting } from "./extensionSettings"; import { mountLeftSidebar } from "~/components/LeftSidebarView"; import { getUidAndBooleanSetting } from "./getExportSettings"; import { getCleanTagText } from "~/components/settings/NodeConfig"; -<<<<<<< HEAD -======= -import { - getFeatureFlag, - getGlobalSetting, -} from "~/components/settings/utils/accessors"; ->>>>>>> 4e14c9ed (ENG-1272 Migrate all small global settings components) import getPleasingColors from "@repo/utils/getPleasingColors"; import { colord } from "colord"; import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches"; @@ -261,9 +256,12 @@ export const initObservers = async ({ } }; - const globalTrigger = ( - getGlobalSetting(["Trigger"]) || "\\" - ).trim(); + const configTree = getBasicTreeByParentUid(configPageUid); + const globalTrigger = getSettingValueFromTree({ + tree: configTree, + key: "trigger", + defaultValue: "\\", + }).trim(); const personalTriggerCombo = (onloadArgs.extensionAPI.settings.get( "personal-node-menu-trigger", diff --git a/apps/roam/src/utils/isCanvasPage.ts b/apps/roam/src/utils/isCanvasPage.ts index c2dcd2177..591ccea5c 100644 --- a/apps/roam/src/utils/isCanvasPage.ts +++ b/apps/roam/src/utils/isCanvasPage.ts @@ -1,10 +1,9 @@ import { DEFAULT_CANVAS_PAGE_FORMAT } from ".."; -import { getGlobalSetting } from "~/components/settings/utils/accessors"; +import { getFormattedConfigTree } from "./discourseConfigRef"; export const isCanvasPage = ({ title }: { title: string }) => { - const format = - getGlobalSetting(["Canvas Page Format"]) || - DEFAULT_CANVAS_PAGE_FORMAT; + const { canvasPageFormat } = getFormattedConfigTree(); + const format = canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT; const canvasRegex = new RegExp(`^${format}$`.replace(/\*/g, ".+")); return canvasRegex.test(title); }; From 878dada7dc3d2e7b5f2e504da85bd75192020c95 Mon Sep 17 00:00:00 2001 From: sid597 Date: Sat, 7 Feb 2026 00:23:23 +0530 Subject: [PATCH 04/13] address review --- .../components/settings/ExportSettings.tsx | 49 +++++++++++-------- .../components/settings/GeneralSettings.tsx | 4 +- .../settings/SuggestiveModeSettings.tsx | 3 ++ .../components/BlockPropSettingPanels.tsx | 34 ++++++++----- 4 files changed, 54 insertions(+), 36 deletions(-) diff --git a/apps/roam/src/components/settings/ExportSettings.tsx b/apps/roam/src/components/settings/ExportSettings.tsx index b3761c2a2..4fea4b703 100644 --- a/apps/roam/src/components/settings/ExportSettings.tsx +++ b/apps/roam/src/components/settings/ExportSettings.tsx @@ -1,9 +1,11 @@ import React from "react"; import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; -import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel"; -import NumberPanel from "roamjs-components/components/ConfigPanels/NumberPanel"; -import MultiTextPanel from "roamjs-components/components/ConfigPanels/MultiTextPanel"; -import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel"; +import { + GlobalFlagPanel, + GlobalNumberPanel, + GlobalMultiTextPanel, + GlobalSelectPanel, +} from "./components/BlockPropSettingPanels"; const DiscourseGraphExport = ({}: {}) => { const settings = getFormattedConfigTree(); @@ -12,69 +14,74 @@ const DiscourseGraphExport = ({}: {}) => { return (
- - - -
-
- -
); diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index f43ad8154..0ce30dde8 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -18,7 +18,7 @@ const DiscourseGraphHome = () => { title="trigger" description="The trigger to create the node menu." settingKeys={["Trigger"]} - defaultValue="\\" + defaultValue={settings.trigger.value || "\\"} order={0} uid={settings.trigger.uid} parentUid={settings.settingsUid} @@ -27,7 +27,7 @@ const DiscourseGraphHome = () => { title="Canvas Page Format" description="The page format for canvas pages" settingKeys={["Canvas Page Format"]} - defaultValue={DEFAULT_CANVAS_PAGE_FORMAT} + defaultValue={settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT} order={1} uid={settings.canvasPageFormat.uid} parentUid={settings.settingsUid} diff --git a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx index 332fd1ed2..995ad8d34 100644 --- a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx +++ b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx @@ -68,6 +68,7 @@ const SuggestiveModeSettings = () => { title="Include Current Page Relations" description="Include relations from pages referenced on the current page" settingKeys={["Suggestive Mode", "Include Current Page Relations"]} + defaultValue={settings.suggestiveMode.includePageRelations.value} order={0} uid={settings.suggestiveMode.includePageRelations.uid} parentUid={effectiveSuggestiveModeUid} @@ -82,6 +83,8 @@ const SuggestiveModeSettings = () => { : "Include relations from parent and child blocks" } settingKeys={["Suggestive Mode", "Include Parent And Child Blocks"]} + defaultValue={settings.suggestiveMode.includeParentAndChildren.value} + overrideValue={includePageRelations ? true : undefined} order={1} uid={settings.suggestiveMode.includeParentAndChildren.uid} parentUid={effectiveSuggestiveModeUid} diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index a44f36572..39cff907b 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -57,6 +57,7 @@ type BaseFlagPanelProps = { getter: FlagGetter; setter: FlagSetter; defaultValue?: boolean; + overrideValue?: boolean; disabled?: boolean; onBeforeChange?: (checked: boolean) => Promise; onChange?: (checked: boolean) => void; @@ -98,20 +99,22 @@ const BaseTextPanel = ({ settingKeys, getter, setter, - defaultValue = "", + defaultValue, placeholder, parentUid, uid, order, }: BaseTextPanelProps) => { - const [value, setValue] = useState(() => getter(settingKeys) ?? defaultValue); + const [value, setValue] = useState( + () => defaultValue ?? getter(settingKeys) ?? "", + ); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue, + defaultValue: defaultValue ?? "", transform: (s: string) => s, toStr: (s: string) => s, }); @@ -143,7 +146,8 @@ const BaseFlagPanel = ({ settingKeys, getter, setter, - defaultValue = false, + defaultValue, + overrideValue, disabled = false, onBeforeChange, onChange, @@ -151,7 +155,9 @@ const BaseFlagPanel = ({ uid: initialBlockUid, order, }: BaseFlagPanelProps) => { - const [value, setValue] = useState(() => getter(settingKeys) ?? defaultValue); + const [value, setValue] = useState( + () => defaultValue ?? getter(settingKeys) ?? false, + ); const blockUidRef = useRef(initialBlockUid); const syncFlagToBlock = useCallback( @@ -193,7 +199,7 @@ const BaseFlagPanel = ({ return ( void handleChange(e)} disabled={disabled} labelElement={ @@ -212,21 +218,23 @@ const BaseNumberPanel = ({ settingKeys, getter, setter, - defaultValue = 0, + defaultValue, min, max, parentUid, uid, order, }: BaseNumberPanelProps) => { - const [value, setValue] = useState(() => getter(settingKeys) ?? defaultValue); + const [value, setValue] = useState( + () => defaultValue ?? getter(settingKeys) ?? 0, + ); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue, + defaultValue: defaultValue ?? 0, transform: (s: string) => parseInt(s, 10), toStr: (v: number) => `${v}`, }); @@ -267,7 +275,7 @@ const BaseSelectPanel = ({ order, }: BaseSelectPanelProps) => { const [value, setValue] = useState( - () => getter(settingKeys) ?? defaultValue ?? options[0], + () => defaultValue ?? getter(settingKeys) ?? options[0], ); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ @@ -308,13 +316,13 @@ const BaseMultiTextPanel = ({ settingKeys, getter, setter, - defaultValue = [], + defaultValue, parentUid, uid: initialBlockUid, order, }: BaseMultiTextPanelProps) => { const [values, setValues] = useState( - () => getter(settingKeys) ?? defaultValue, + () => defaultValue ?? getter(settingKeys) ?? [], ); const [inputValue, setInputValue] = useState(""); const hasBlockSync = parentUid !== undefined && order !== undefined; @@ -481,7 +489,7 @@ export const FeatureFlagPanel = ({ featureKey: keyof FeatureFlags; onBeforeEnable?: () => Promise; onAfterChange?: (checked: boolean) => void; -}) => { +} & RoamBlockSyncProps) => { const handleBeforeChange: | ((checked: boolean) => Promise) | undefined = onBeforeEnable From bcef65e244e9582423d2eabd76e95d3d93a8b3ae Mon Sep 17 00:00:00 2001 From: sid597 Date: Sat, 7 Feb 2026 00:29:38 +0530 Subject: [PATCH 05/13] add comments for testing --- .../components/BlockPropSettingPanels.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index 39cff907b..0ce92eacd 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -125,6 +125,9 @@ const BaseTextPanel = ({ setValue(newValue); setter(settingKeys, newValue); syncToBlock?.(newValue); + setTimeout(() => { + console.log(`[TextPanel] "${title}" after set, blockProp:`, getter(settingKeys)); + }, 500); }; return ( @@ -195,6 +198,9 @@ const BaseFlagPanel = ({ setter(settingKeys, checked); await syncFlagToBlock(checked); onChange?.(checked); + setTimeout(() => { + console.log(`[FlagPanel] "${title}" after set, blockProp:`, getter(settingKeys)); + }, 500); }; return ( @@ -245,6 +251,9 @@ const BaseNumberPanel = ({ setValue(valueAsNumber); setter(settingKeys, valueAsNumber); syncToBlock?.(valueAsNumber); + setTimeout(() => { + console.log(`[NumberPanel] "${title}" after set, blockProp:`, getter(settingKeys)); + }, 500); }; return ( @@ -294,6 +303,9 @@ const BaseSelectPanel = ({ setValue(newValue); setter(settingKeys, newValue); syncToBlock?.(newValue); + setTimeout(() => { + console.log(`[SelectPanel] "${title}" after set, blockProp:`, getter(settingKeys)); + }, 500); }; return ( @@ -371,6 +383,9 @@ const BaseMultiTextPanel = ({ }); childUidsRef.current = [...childUidsRef.current, valueUid]; } + setTimeout(() => { + console.log(`[MultiTextPanel] "${title}" after add, blockProp:`, getter(settingKeys)); + }, 500); } }; @@ -390,6 +405,9 @@ const BaseMultiTextPanel = ({ (_, i) => i !== index, ); } + setTimeout(() => { + console.log(`[MultiTextPanel] "${title}" after remove, blockProp:`, getter(settingKeys)); + }, 500); }; const handleKeyDown = (e: React.KeyboardEvent) => { From d5c968a5aca12d2499622dc74e0847916da444a1 Mon Sep 17 00:00:00 2001 From: sid597 Date: Sat, 7 Feb 2026 00:49:31 +0530 Subject: [PATCH 06/13] add comment for testing --- apps/roam/src/index.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index 1bed828d4..3db41316b 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -41,6 +41,7 @@ import { STREAMLINE_STYLING_KEY, DISALLOW_DIAGNOSTICS, } from "./data/userSettings"; +import { initSchema } from "./components/settings/utils/init"; export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*"; @@ -78,8 +79,6 @@ export default runExtension(async (onloadArgs) => { await initializeDiscourseNodes(); refreshConfigTree(); - // For testing purposes - // await initSchema(); addGraphViewNodeStyling(); registerCommandPaletteCommands(onloadArgs); createSettingsPanel(onloadArgs); @@ -156,6 +155,9 @@ export default runExtension(async (onloadArgs) => { }); } + // For testing purposes + await initSchema(); + return { elements: [ style, From 9a5ebbdc9457cac40d44c5c3c872b2849df10b4b Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 9 Feb 2026 11:18:35 +0530 Subject: [PATCH 07/13] remove comments --- .../components/BlockPropSettingPanels.tsx | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index 0ce92eacd..39cff907b 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -125,9 +125,6 @@ const BaseTextPanel = ({ setValue(newValue); setter(settingKeys, newValue); syncToBlock?.(newValue); - setTimeout(() => { - console.log(`[TextPanel] "${title}" after set, blockProp:`, getter(settingKeys)); - }, 500); }; return ( @@ -198,9 +195,6 @@ const BaseFlagPanel = ({ setter(settingKeys, checked); await syncFlagToBlock(checked); onChange?.(checked); - setTimeout(() => { - console.log(`[FlagPanel] "${title}" after set, blockProp:`, getter(settingKeys)); - }, 500); }; return ( @@ -251,9 +245,6 @@ const BaseNumberPanel = ({ setValue(valueAsNumber); setter(settingKeys, valueAsNumber); syncToBlock?.(valueAsNumber); - setTimeout(() => { - console.log(`[NumberPanel] "${title}" after set, blockProp:`, getter(settingKeys)); - }, 500); }; return ( @@ -303,9 +294,6 @@ const BaseSelectPanel = ({ setValue(newValue); setter(settingKeys, newValue); syncToBlock?.(newValue); - setTimeout(() => { - console.log(`[SelectPanel] "${title}" after set, blockProp:`, getter(settingKeys)); - }, 500); }; return ( @@ -383,9 +371,6 @@ const BaseMultiTextPanel = ({ }); childUidsRef.current = [...childUidsRef.current, valueUid]; } - setTimeout(() => { - console.log(`[MultiTextPanel] "${title}" after add, blockProp:`, getter(settingKeys)); - }, 500); } }; @@ -405,9 +390,6 @@ const BaseMultiTextPanel = ({ (_, i) => i !== index, ); } - setTimeout(() => { - console.log(`[MultiTextPanel] "${title}" after remove, blockProp:`, getter(settingKeys)); - }, 500); }; const handleKeyDown = (e: React.KeyboardEvent) => { From 27d40da7e72e1dcb59c28166b6919af33a7643a8 Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 9 Feb 2026 11:19:21 +0530 Subject: [PATCH 08/13] remove init stub --- apps/roam/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index 3db41316b..1073cbe8d 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -41,7 +41,7 @@ import { STREAMLINE_STYLING_KEY, DISALLOW_DIAGNOSTICS, } from "./data/userSettings"; -import { initSchema } from "./components/settings/utils/init"; +// import { initSchema } from "./components/settings/utils/init"; export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*"; @@ -156,7 +156,7 @@ export default runExtension(async (onloadArgs) => { } // For testing purposes - await initSchema(); + // await initSchema(); return { elements: [ From d2973d8f82d9f3be06574ddc13dbd43fb09606e3 Mon Sep 17 00:00:00 2001 From: sid597 Date: Sun, 15 Feb 2026 22:37:56 +0530 Subject: [PATCH 09/13] address review --- .../components/settings/ExportSettings.tsx | 14 +-- .../components/settings/GeneralSettings.tsx | 4 +- .../settings/SuggestiveModeSettings.tsx | 6 +- .../components/BlockPropSettingPanels.tsx | 111 ++++++------------ apps/roam/src/index.ts | 5 +- 5 files changed, 52 insertions(+), 88 deletions(-) diff --git a/apps/roam/src/components/settings/ExportSettings.tsx b/apps/roam/src/components/settings/ExportSettings.tsx index 4fea4b703..df7404d01 100644 --- a/apps/roam/src/components/settings/ExportSettings.tsx +++ b/apps/roam/src/components/settings/ExportSettings.tsx @@ -18,7 +18,7 @@ const DiscourseGraphExport = ({}: {}) => { title="remove special characters" description="Whether or not to remove the special characters in a file name" settingKeys={["Export", "Remove Special Characters"]} - defaultValue={exportSettings.removeSpecialCharacters.value} + initialValue={exportSettings.removeSpecialCharacters.value} order={1} uid={exportSettings.removeSpecialCharacters.uid} parentUid={parentUid} @@ -28,7 +28,7 @@ const DiscourseGraphExport = ({}: {}) => { title="resolve block references" description="Replaces block references in the markdown content with the block's content" settingKeys={["Export", "Resolve Block References"]} - defaultValue={exportSettings.optsRefs.value} + initialValue={exportSettings.optsRefs.value} order={3} uid={exportSettings.optsRefs.uid} parentUid={parentUid} @@ -37,7 +37,7 @@ const DiscourseGraphExport = ({}: {}) => { title="resolve block embeds" description="Replaces block embeds in the markdown content with the block's content tree" settingKeys={["Export", "Resolve Block Embeds"]} - defaultValue={exportSettings.optsEmbeds.value} + initialValue={exportSettings.optsEmbeds.value} order={4} uid={exportSettings.optsEmbeds.uid} parentUid={parentUid} @@ -47,7 +47,7 @@ const DiscourseGraphExport = ({}: {}) => { title="append referenced node" description="If a referenced node is defined in a node's format, it will be appended to the discourse context" settingKeys={["Export", "Append Referenced Node"]} - defaultValue={exportSettings.appendRefNodeContext.value} + initialValue={exportSettings.appendRefNodeContext.value} order={6} uid={exportSettings.appendRefNodeContext.uid} parentUid={parentUid} @@ -58,7 +58,7 @@ const DiscourseGraphExport = ({}: {}) => { title="link type" description="How to format links that appear in your export." settingKeys={["Export", "Link Type"]} - defaultValue={exportSettings.linkType.value || "alias"} + initialValue={exportSettings.linkType.value || "alias"} order={5} options={["alias", "wikilinks", "roam url"]} uid={exportSettings.linkType.uid} @@ -69,7 +69,7 @@ const DiscourseGraphExport = ({}: {}) => { title="max filename length" description="Set the maximum name length for markdown file exports" settingKeys={["Export", "Max Filename Length"]} - defaultValue={exportSettings.maxFilenameLength.value || 64} + initialValue={exportSettings.maxFilenameLength.value || 64} order={0} uid={exportSettings.maxFilenameLength.uid} parentUid={parentUid} @@ -78,7 +78,7 @@ const DiscourseGraphExport = ({}: {}) => { title="frontmatter" description="Specify all the lines that should go to the Frontmatter of the markdown file" settingKeys={["Export", "Frontmatter"]} - defaultValue={exportSettings.frontmatter.values} + initialValue={exportSettings.frontmatter.values} order={2} uid={exportSettings.frontmatter.uid} parentUid={parentUid} diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index 0ce30dde8..b20877bb2 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -18,7 +18,7 @@ const DiscourseGraphHome = () => { title="trigger" description="The trigger to create the node menu." settingKeys={["Trigger"]} - defaultValue={settings.trigger.value || "\\"} + initialValue={settings.trigger.value || "\\"} order={0} uid={settings.trigger.uid} parentUid={settings.settingsUid} @@ -27,7 +27,7 @@ const DiscourseGraphHome = () => { title="Canvas Page Format" description="The page format for canvas pages" settingKeys={["Canvas Page Format"]} - defaultValue={settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT} + initialValue={settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT} order={1} uid={settings.canvasPageFormat.uid} parentUid={settings.settingsUid} diff --git a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx index 995ad8d34..3adf6605e 100644 --- a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx +++ b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx @@ -68,7 +68,7 @@ const SuggestiveModeSettings = () => { title="Include Current Page Relations" description="Include relations from pages referenced on the current page" settingKeys={["Suggestive Mode", "Include Current Page Relations"]} - defaultValue={settings.suggestiveMode.includePageRelations.value} + initialValue={settings.suggestiveMode.includePageRelations.value} order={0} uid={settings.suggestiveMode.includePageRelations.uid} parentUid={effectiveSuggestiveModeUid} @@ -83,8 +83,8 @@ const SuggestiveModeSettings = () => { : "Include relations from parent and child blocks" } settingKeys={["Suggestive Mode", "Include Parent And Child Blocks"]} - defaultValue={settings.suggestiveMode.includeParentAndChildren.value} - overrideValue={includePageRelations ? true : undefined} + initialValue={settings.suggestiveMode.includeParentAndChildren.value} + value={includePageRelations ? true : undefined} order={1} uid={settings.suggestiveMode.includeParentAndChildren.uid} parentUid={effectiveSuggestiveModeUid} diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index 39cff907b..b33c7cd60 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -13,9 +13,7 @@ import idToTitle from "roamjs-components/util/idToTitle"; import useSingleChildValue from "roamjs-components/components/ConfigPanels/useSingleChildValue"; import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeByParentUid"; import { - getGlobalSetting, setGlobalSetting, - getPersonalSetting, setPersonalSetting, getFeatureFlag, setFeatureFlag, @@ -28,25 +26,20 @@ type RoamBlockSyncProps = { order?: number; }; -type TextGetter = (keys: string[]) => string | undefined; type TextSetter = (keys: string[], value: string) => void; -type FlagGetter = (keys: string[]) => boolean | undefined; type FlagSetter = (keys: string[], value: boolean) => void; -type NumberGetter = (keys: string[]) => number | undefined; type NumberSetter = (keys: string[], value: number) => void; -type MultiTextGetter = (keys: string[]) => string[] | undefined; type MultiTextSetter = (keys: string[], value: string[]) => void; type BaseTextPanelProps = { title: string; description: string; settingKeys: string[]; - getter: TextGetter; setter: TextSetter; - defaultValue?: string; + initialValue?: string; placeholder?: string; } & RoamBlockSyncProps; @@ -54,10 +47,9 @@ type BaseFlagPanelProps = { title: string; description: string; settingKeys: string[]; - getter: FlagGetter; setter: FlagSetter; - defaultValue?: boolean; - overrideValue?: boolean; + initialValue?: boolean; + value?: boolean; disabled?: boolean; onBeforeChange?: (checked: boolean) => Promise; onChange?: (checked: boolean) => void; @@ -67,9 +59,8 @@ type BaseNumberPanelProps = { title: string; description: string; settingKeys: string[]; - getter: NumberGetter; setter: NumberSetter; - defaultValue?: number; + initialValue?: number; min?: number; max?: number; } & RoamBlockSyncProps; @@ -78,43 +69,38 @@ type BaseSelectPanelProps = { title: string; description: string; settingKeys: string[]; - getter: TextGetter; setter: TextSetter; options: string[]; - defaultValue?: string; + initialValue?: string; } & RoamBlockSyncProps; type BaseMultiTextPanelProps = { title: string; description: string; settingKeys: string[]; - getter: MultiTextGetter; setter: MultiTextSetter; - defaultValue?: string[]; + initialValue?: string[]; } & RoamBlockSyncProps; const BaseTextPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue, + initialValue, placeholder, parentUid, uid, order, }: BaseTextPanelProps) => { - const [value, setValue] = useState( - () => defaultValue ?? getter(settingKeys) ?? "", - ); + const [value, setValue] = useState(() => initialValue ?? ""); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue: defaultValue ?? "", + defaultValue: initialValue ?? "", transform: (s: string) => s, toStr: (s: string) => s, }); @@ -134,7 +120,7 @@ const BaseTextPanel = ({ ); @@ -144,10 +130,9 @@ const BaseFlagPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue, - overrideValue, + initialValue, + value, disabled = false, onBeforeChange, onChange, @@ -155,9 +140,7 @@ const BaseFlagPanel = ({ uid: initialBlockUid, order, }: BaseFlagPanelProps) => { - const [value, setValue] = useState( - () => defaultValue ?? getter(settingKeys) ?? false, - ); + const [internalValue, setInternalValue] = useState(() => initialValue ?? false); const blockUidRef = useRef(initialBlockUid); const syncFlagToBlock = useCallback( @@ -191,7 +174,7 @@ const BaseFlagPanel = ({ if (!shouldProceed) return; } - setValue(checked); + setInternalValue(checked); setter(settingKeys, checked); await syncFlagToBlock(checked); onChange?.(checked); @@ -199,7 +182,7 @@ const BaseFlagPanel = ({ return ( void handleChange(e)} disabled={disabled} labelElement={ @@ -216,25 +199,22 @@ const BaseNumberPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue, + initialValue, min, max, parentUid, uid, order, }: BaseNumberPanelProps) => { - const [value, setValue] = useState( - () => defaultValue ?? getter(settingKeys) ?? 0, - ); + const [value, setValue] = useState(() => initialValue ?? 0); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue: defaultValue ?? 0, + defaultValue: initialValue ?? 0, transform: (s: string) => parseInt(s, 10), toStr: (v: number) => `${v}`, }); @@ -266,24 +246,21 @@ const BaseSelectPanel = ({ title, description, settingKeys, - getter, setter, options, - defaultValue, + initialValue, parentUid, uid, order, }: BaseSelectPanelProps) => { - const [value, setValue] = useState( - () => defaultValue ?? getter(settingKeys) ?? options[0], - ); + const [value, setValue] = useState(() => initialValue ?? options[0]); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue: defaultValue ?? options[0] ?? "", + defaultValue: initialValue ?? options[0] ?? "", transform: (s: string) => s, toStr: (s: string) => s, }); @@ -314,16 +291,13 @@ const BaseMultiTextPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue, + initialValue, parentUid, uid: initialBlockUid, order, }: BaseMultiTextPanelProps) => { - const [values, setValues] = useState( - () => defaultValue ?? getter(settingKeys) ?? [], - ); + const [values, setValues] = useState(() => initialValue ?? []); const [inputValue, setInputValue] = useState(""); const hasBlockSync = parentUid !== undefined && order !== undefined; const blockUidRef = useRef(initialBlockUid); @@ -430,17 +404,11 @@ const BaseMultiTextPanel = ({ ); }; -type TextWrapperProps = Omit; -type FlagWrapperProps = Omit; -type NumberWrapperProps = Omit; -type SelectWrapperProps = Omit; -type MultiTextWrapperProps = Omit; - -const featureFlagGetter: FlagGetter = (keys) => { - const key = keys[0]; - if (!key) return undefined; - return getFeatureFlag(key as keyof FeatureFlags); -}; +type TextWrapperProps = Omit; +type FlagWrapperProps = Omit; +type NumberWrapperProps = Omit; +type SelectWrapperProps = Omit; +type MultiTextWrapperProps = Omit; const featureFlagSetter: FlagSetter = (keys, value) => { const key = keys[0]; @@ -448,30 +416,27 @@ const featureFlagSetter: FlagSetter = (keys, value) => { setFeatureFlag(key as keyof FeatureFlags, value); }; -type Getter = (keys: string[]) => T | undefined; type Setter = (keys: string[], value: T) => void; -type Accessors = { getter: Getter; setter: Setter }; +type Accessors = { setter: Setter }; const createAccessors = ( - getFn: (keys: string[]) => U | undefined, setFn: (keys: string[], value: T) => void, ): Accessors => ({ - getter: (keys) => getFn(keys), setter: setFn, }); const globalAccessors = { - text: createAccessors(getGlobalSetting, setGlobalSetting), - flag: createAccessors(getGlobalSetting, setGlobalSetting), - number: createAccessors(getGlobalSetting, setGlobalSetting), - multiText: createAccessors(getGlobalSetting, setGlobalSetting), + text: createAccessors(setGlobalSetting), + flag: createAccessors(setGlobalSetting), + number: createAccessors(setGlobalSetting), + multiText: createAccessors(setGlobalSetting), }; const personalAccessors = { - text: createAccessors(getPersonalSetting, setPersonalSetting), - flag: createAccessors(getPersonalSetting, setPersonalSetting), - number: createAccessors(getPersonalSetting, setPersonalSetting), - multiText: createAccessors(getPersonalSetting, setPersonalSetting), + text: createAccessors(setPersonalSetting), + flag: createAccessors(setPersonalSetting), + number: createAccessors(setPersonalSetting), + multiText: createAccessors(setPersonalSetting), }; export const FeatureFlagPanel = ({ @@ -507,8 +472,8 @@ export const FeatureFlagPanel = ({ title={title} description={description} settingKeys={[featureKey as string]} - getter={featureFlagGetter} setter={featureFlagSetter} + initialValue={getFeatureFlag(featureKey)} onBeforeChange={handleBeforeChange} onChange={onAfterChange} parentUid={parentUid} diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index 1073cbe8d..9eb8095aa 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -41,7 +41,7 @@ import { STREAMLINE_STYLING_KEY, DISALLOW_DIAGNOSTICS, } from "./data/userSettings"; -// import { initSchema } from "./components/settings/utils/init"; +import { initSchema } from "./components/settings/utils/init"; export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*"; @@ -155,8 +155,7 @@ export default runExtension(async (onloadArgs) => { }); } - // For testing purposes - // await initSchema(); + await initSchema(); return { elements: [ From 00530c023b97d6f55499f0480c1aeb6f054210e8 Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 16 Feb 2026 12:57:33 +0530 Subject: [PATCH 10/13] lint fix --- apps/roam/src/components/settings/ExportSettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/roam/src/components/settings/ExportSettings.tsx b/apps/roam/src/components/settings/ExportSettings.tsx index df7404d01..754e7f088 100644 --- a/apps/roam/src/components/settings/ExportSettings.tsx +++ b/apps/roam/src/components/settings/ExportSettings.tsx @@ -7,7 +7,7 @@ import { GlobalSelectPanel, } from "./components/BlockPropSettingPanels"; -const DiscourseGraphExport = ({}: {}) => { +const DiscourseGraphExport = () => { const settings = getFormattedConfigTree(); const exportSettings = settings.export; const parentUid = settings.export.exportUid; From 296bad61dd66631ce41cc0c94ff02a992f984ed6 Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 16 Feb 2026 12:59:56 +0530 Subject: [PATCH 11/13] prettier --- .../components/settings/GeneralSettings.tsx | 9 +++++++-- .../settings/SuggestiveModeSettings.tsx | 20 ++++++++++++++----- .../components/BlockPropSettingPanels.tsx | 5 +++-- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index b20877bb2..ab47fdeda 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -3,7 +3,10 @@ import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; import refreshConfigTree from "~/utils/refreshConfigTree"; import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index"; import { Alert, Intent } from "@blueprintjs/core"; -import { GlobalTextPanel, FeatureFlagPanel } from "./components/BlockPropSettingPanels"; +import { + GlobalTextPanel, + FeatureFlagPanel, +} from "./components/BlockPropSettingPanels"; const DiscourseGraphHome = () => { const settings = useMemo(() => { @@ -27,7 +30,9 @@ const DiscourseGraphHome = () => { title="Canvas Page Format" description="The page format for canvas pages" settingKeys={["Canvas Page Format"]} - initialValue={settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT} + initialValue={ + settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT + } order={1} uid={settings.canvasPageFormat.uid} parentUid={settings.settingsUid} diff --git a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx index 3adf6605e..49724faf5 100644 --- a/apps/roam/src/components/settings/SuggestiveModeSettings.tsx +++ b/apps/roam/src/components/settings/SuggestiveModeSettings.tsx @@ -34,7 +34,7 @@ const SuggestiveModeSettings = () => { }, [suggestiveModeUid]); const effectiveSuggestiveModeUid = - suggestiveModeUid || settings.suggestiveMode.parentUid; + suggestiveModeUid || settings.suggestiveMode.parentUid; const [selectedTabId, setSelectedTabId] = useState("page-groups"); @@ -67,8 +67,13 @@ const SuggestiveModeSettings = () => { { ? "Include relations from parent and child blocks (automatically enabled when including page relations)" : "Include relations from parent and child blocks" } - settingKeys={["Suggestive Mode", "Include Parent And Child Blocks"]} - initialValue={settings.suggestiveMode.includeParentAndChildren.value} + settingKeys={[ + "Suggestive Mode", + "Include Parent And Child Blocks", + ]} + initialValue={ + settings.suggestiveMode.includeParentAndChildren.value + } value={includePageRelations ? true : undefined} order={1} uid={settings.suggestiveMode.includeParentAndChildren.uid} diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index b33c7cd60..e5e27bd99 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -140,7 +140,9 @@ const BaseFlagPanel = ({ uid: initialBlockUid, order, }: BaseFlagPanelProps) => { - const [internalValue, setInternalValue] = useState(() => initialValue ?? false); + const [internalValue, setInternalValue] = useState( + () => initialValue ?? false, + ); const blockUidRef = useRef(initialBlockUid); const syncFlagToBlock = useCallback( @@ -461,7 +463,6 @@ export const FeatureFlagPanel = ({ ? async (checked) => { if (checked) { return onBeforeEnable(); - } return true; } From e318b6e8e9c8961d3fc134a0e734653b2fd73f67 Mon Sep 17 00:00:00 2001 From: sid597 Date: Tue, 17 Feb 2026 10:46:03 +0530 Subject: [PATCH 12/13] dummy --- apps/roam/src/components/settings/utils/accessors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/roam/src/components/settings/utils/accessors.ts b/apps/roam/src/components/settings/utils/accessors.ts index ec1fdc4c2..9d8959404 100644 --- a/apps/roam/src/components/settings/utils/accessors.ts +++ b/apps/roam/src/components/settings/utils/accessors.ts @@ -535,4 +535,4 @@ export const getAllDiscourseNodes = (): DiscourseNodeSettings[] => { } return nodes; -}; \ No newline at end of file +}; From 43a9f109bafc4ca832907ad581f66570614f0f64 Mon Sep 17 00:00:00 2001 From: sid597 Date: Tue, 17 Feb 2026 21:04:47 +0530 Subject: [PATCH 13/13] pass initialvalue to featureflag --- apps/roam/src/components/settings/GeneralSettings.tsx | 1 + .../settings/components/BlockPropSettingPanels.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index ab47fdeda..05ae157d4 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -41,6 +41,7 @@ const DiscourseGraphHome = () => { title="(BETA) Left Sidebar" description="Whether or not to enable the left sidebar." featureKey="Enable Left Sidebar" + initialValue={settings.leftSidebarEnabled.value} order={2} uid={settings.leftSidebarEnabled.uid} parentUid={settings.settingsUid} diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index e5e27bd99..dde8e936d 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -15,7 +15,6 @@ import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeB import { setGlobalSetting, setPersonalSetting, - getFeatureFlag, setFeatureFlag, } from "~/components/settings/utils/accessors"; import type { FeatureFlags } from "~/components/settings/utils/zodSchema"; @@ -445,6 +444,7 @@ export const FeatureFlagPanel = ({ title, description, featureKey, + initialValue, onBeforeEnable, onAfterChange, parentUid, @@ -454,6 +454,7 @@ export const FeatureFlagPanel = ({ title: string; description: string; featureKey: keyof FeatureFlags; + initialValue?: boolean; onBeforeEnable?: () => Promise; onAfterChange?: (checked: boolean) => void; } & RoamBlockSyncProps) => { @@ -474,7 +475,7 @@ export const FeatureFlagPanel = ({ description={description} settingKeys={[featureKey as string]} setter={featureFlagSetter} - initialValue={getFeatureFlag(featureKey)} + initialValue={initialValue} onBeforeChange={handleBeforeChange} onChange={onAfterChange} parentUid={parentUid}