From 8ddb764e3cb43f537536d1e185d39fab881af171 Mon Sep 17 00:00:00 2001 From: sid597 Date: Sat, 21 Feb 2026 00:52:01 +0530 Subject: [PATCH 1/3] ENG-1217: Port section component in left sidebar --- .../settings/LeftSidebarGlobalSettings.tsx | 65 ++++-- .../settings/LeftSidebarPersonalSettings.tsx | 205 ++++++++++++------ .../components/BlockPropSettingPanels.tsx | 8 +- .../components/settings/utils/zodSchema.ts | 7 +- 4 files changed, 199 insertions(+), 86 deletions(-) diff --git a/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx index a40f1184c..61c1be821 100644 --- a/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx +++ b/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useEffect, useMemo, useState, memo } from "react"; import { Button, ButtonGroup, Collapse } from "@blueprintjs/core"; -import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel"; +import { GlobalFlagPanel } from "~/components/settings/components/BlockPropSettingPanels"; +import { setGlobalSetting } from "~/components/settings/utils/accessors"; import AutocompleteInput from "roamjs-components/components/AutocompleteInput"; import getAllPageNames from "roamjs-components/queries/getAllPageNames"; import createBlock from "roamjs-components/writes/createBlock"; @@ -19,6 +20,9 @@ import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageU import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid"; import posthog from "posthog-js"; +const pagesToUids = (pages: RoamBasicNode[]) => pages.map((p) => p.text); + + const PageItem = memo( ({ page, @@ -160,6 +164,11 @@ const LeftSidebarGlobalSectionsContent = ({ newPages.splice(newIndex, 0, removed); setPages(newPages); + setGlobalSetting( + ["Left sidebar", "Children"], + pagesToUids(newPages), + ); + if (childrenUid) { const order = direction === "down" ? newIndex + 1 : newIndex; @@ -201,7 +210,13 @@ const LeftSidebarGlobalSectionsContent = ({ children: [], }; - setPages((prev) => [...prev, newPage]); + const updatedPages = [...pages, newPage]; + setPages(updatedPages); + setGlobalSetting( + ["Left sidebar", "Children"], + pagesToUids(updatedPages), + ); + setNewPageInput(""); setAutocompleteKey((prev) => prev + 1); posthog.capture("Left Sidebar Global Settings: Page Added", { @@ -219,19 +234,28 @@ const LeftSidebarGlobalSectionsContent = ({ [childrenUid, pages], ); - const removePage = useCallback(async (page: RoamBasicNode) => { - try { - await deleteBlock(page.uid); - setPages((prev) => prev.filter((p) => p.uid !== page.uid)); - refreshAndNotify(); - } catch (error) { - renderToast({ - content: "Failed to remove page", - intent: "danger", - id: "remove-page-error", - }); - } - }, []); + const removePage = useCallback( + async (page: RoamBasicNode) => { + try { + await deleteBlock(page.uid); + const updatedPages = pages.filter((p) => p.uid !== page.uid); + setPages(updatedPages); + setGlobalSetting( + ["Left sidebar", "Children"], + pagesToUids(updatedPages), + ); + + refreshAndNotify(); + } catch (error) { + renderToast({ + content: "Failed to remove page", + intent: "danger", + id: "remove-page-error", + }); + } + }, + [pages], + ); const handlePageInputChange = useCallback((value: string) => { setNewPageInput(value); @@ -263,21 +287,26 @@ const LeftSidebarGlobalSectionsContent = ({ border: "1px solid rgba(51, 51, 51, 0.2)", }} > - - diff --git a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx index 6f561fef7..e5179e978 100644 --- a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx +++ b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx @@ -19,7 +19,8 @@ import createBlock from "roamjs-components/writes/createBlock"; import deleteBlock from "roamjs-components/writes/deleteBlock"; import updateBlock from "roamjs-components/writes/updateBlock"; import type { RoamBasicNode } from "roamjs-components/types"; -import NumberPanel from "roamjs-components/components/ConfigPanels/NumberPanel"; +import { setPersonalSetting } from "~/components/settings/utils/accessors"; +import { PersonalNumberPanel } from "~/components/settings/components/BlockPropSettingPanels"; import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel"; import { LeftSidebarPersonalSectionConfig, @@ -37,12 +38,34 @@ import { memo, Dispatch, SetStateAction } from "react"; import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid"; import posthog from "posthog-js"; +/* eslint-disable @typescript-eslint/naming-convention */ +const sectionsToBlockProps = (sections: LeftSidebarPersonalSectionConfig[]) => + sections.map((s) => ({ + name: s.text, + Children: (s.children || []).map((c) => ({ + uid: c.text, + Alias: c.alias?.value || "", + })), + Settings: { + "Truncate-result?": s.settings?.truncateResult?.value ?? 75, + Folded: s.settings?.folded?.value ?? false, + }, + })); +/* eslint-enable @typescript-eslint/naming-convention */ + +const syncAllSectionsToBlockProps = ( + sections: LeftSidebarPersonalSectionConfig[], +) => { + setPersonalSetting(["Left sidebar"], sectionsToBlockProps(sections)); +}; + const SectionItem = memo( ({ section, setSettingsDialogSectionUid, pageNames, setSections, + sectionsRef, index, isFirst, isLast, @@ -50,6 +73,7 @@ const SectionItem = memo( }: { section: LeftSidebarPersonalSectionConfig; setSections: Dispatch>; + sectionsRef: React.MutableRefObject; setSettingsDialogSectionUid: (uid: string | null) => void; pageNames: string[]; index: number; @@ -62,6 +86,7 @@ const SectionItem = memo( const originalName = blockText || section.text; const [childInput, setChildInput] = useState(""); const [childInputKey, setChildInputKey] = useState(0); + const aliasDebounceRef = useRef>(); const [expandedChildLists, setExpandedChildLists] = useState>( new Set(), @@ -125,6 +150,22 @@ const SectionItem = memo( }), ); + syncAllSectionsToBlockProps( + sectionsRef.current.map((s) => + s.uid === section.uid + ? { + ...s, + settings: { + uid: settingsUid, + folded: { uid: foldedUid, value: false }, + truncateResult: { uid: truncateSettingUid, value: 75 }, + }, + children: [], + } + : s, + ), + ); + setExpandedChildLists((prev) => new Set([...prev, section.uid])); refreshAndNotify(); } catch (error) { @@ -135,7 +176,7 @@ const SectionItem = memo( }); } }, - [setSections], + [setSections, sectionsRef], ); const removeSection = useCallback( @@ -143,7 +184,11 @@ const SectionItem = memo( try { await deleteBlock(section.uid); - setSections((prev) => prev.filter((s) => s.uid !== section.uid)); + const updatedSections = sectionsRef.current.filter( + (s) => s.uid !== section.uid, + ); + setSections(updatedSections); + syncAllSectionsToBlockProps(updatedSections); refreshAndNotify(); } catch (error) { renderToast({ @@ -153,7 +198,7 @@ const SectionItem = memo( }); } }, - [setSections], + [setSections, sectionsRef], ); const addChildToSection = useCallback( @@ -173,25 +218,25 @@ const SectionItem = memo( node: { text: targetUid }, }); - setSections((prev) => - prev.map((s) => { - if (s.uid === section.uid) { - return { - ...s, - children: [ - ...(s.children || []), - { - text: targetUid, - uid: newChild, - children: [], - alias: { value: "" }, - }, - ], - }; - } - return s; - }), - ); + const updatedSections = sectionsRef.current.map((s) => { + if (s.uid === section.uid) { + return { + ...s, + children: [ + ...(s.children || []), + { + text: targetUid, + uid: newChild, + children: [], + alias: { value: "" }, + }, + ], + }; + } + return s; + }); + setSections(updatedSections); + syncAllSectionsToBlockProps(updatedSections); refreshAndNotify(); } catch (error) { renderToast({ @@ -201,7 +246,7 @@ const SectionItem = memo( }); } }, - [setSections], + [setSections, sectionsRef], ); const removeChild = useCallback( async ( @@ -211,17 +256,17 @@ const SectionItem = memo( try { await deleteBlock(child.uid); - setSections((prev) => - prev.map((s) => { - if (s.uid === section.uid) { - return { - ...s, - children: s.children?.filter((c) => c.uid !== child.uid), - }; - } - return s; - }), - ); + const updatedSections = sectionsRef.current.map((s) => { + if (s.uid === section.uid) { + return { + ...s, + children: s.children?.filter((c) => c.uid !== child.uid), + }; + } + return s; + }); + setSections(updatedSections); + syncAllSectionsToBlockProps(updatedSections); refreshAndNotify(); } catch (error) { renderToast({ @@ -231,7 +276,7 @@ const SectionItem = memo( }); } }, - [setSections], + [setSections, sectionsRef], ); const moveChild = useCallback( @@ -250,17 +295,17 @@ const SectionItem = memo( const newIndex = direction === "up" ? index - 1 : index + 1; newChildren.splice(newIndex, 0, removed); - setSections((prev) => - prev.map((s) => { - if (s.uid === section.uid) { - return { - ...s, - children: newChildren, - }; - } - return s; - }), - ); + const updatedSections = sectionsRef.current.map((s) => { + if (s.uid === section.uid) { + return { + ...s, + children: newChildren, + }; + } + return s; + }); + setSections(updatedSections); + syncAllSectionsToBlockProps(updatedSections); if (section.childrenUid) { const order = direction === "down" ? newIndex + 1 : newIndex; @@ -276,7 +321,7 @@ const SectionItem = memo( }); } }, - [setSections], + [setSections, sectionsRef], ); const handleAddChild = useCallback(async () => { @@ -490,6 +535,12 @@ const SectionItem = memo( : s, ), ); + clearTimeout(aliasDebounceRef.current); + aliasDebounceRef.current = setTimeout(() => { + syncAllSectionsToBlockProps( + sectionsRef.current, + ); + }, 250); }, }} /> @@ -532,6 +583,8 @@ const LeftSidebarPersonalSectionsContent = ({ string | null >(null); const sectionTitleUpdateTimeoutRef = useRef>(); + const sectionsRef = useRef(sections); + sectionsRef.current = sections; useEffect(() => { const initialize = async () => { @@ -576,16 +629,16 @@ const LeftSidebarPersonalSectionsContent = ({ node: { text: sectionName }, }); - setSections((prev) => [ - ...prev, - { - text: sectionName, - uid: newBlock, - settings: undefined, - children: undefined, - childrenUid: undefined, - } as LeftSidebarPersonalSectionConfig, - ]); + const newSection = { + text: sectionName, + uid: newBlock, + settings: undefined, + children: undefined, + childrenUid: undefined, + } as LeftSidebarPersonalSectionConfig; + const updatedSections = [...sections, newSection]; + setSections(updatedSections); + syncAllSectionsToBlockProps(updatedSections); posthog.capture("Left Sidebar Personal Settings: Section Added", { sectionName, @@ -618,6 +671,7 @@ const LeftSidebarPersonalSectionsContent = ({ newSections.splice(newIndex, 0, removed); setSections(newSections); + syncAllSectionsToBlockProps(newSections); if (personalSectionUid) { const order = direction === "down" ? newIndex + 1 : newIndex; @@ -685,6 +739,7 @@ const LeftSidebarPersonalSectionsContent = ({ setSettingsDialogSectionUid={setSettingsDialogSectionUid} pageNames={pageNames} setSections={setSections} + sectionsRef={sectionsRef} index={index} isFirst={index === 0} isLast={index === sections.length - 1} @@ -697,7 +752,9 @@ const LeftSidebarPersonalSectionsContent = ({ {activeDialogSection && activeDialogSection.settings && ( setSettingsDialogSectionUid(null)} + onClose={() => { + setSettingsDialogSectionUid(null); + }} title={`Settings for "${activeDialogSection.text}"`} style={{ width: "500px" }} > @@ -729,17 +786,41 @@ const LeftSidebarPersonalSectionsContent = ({ }).then(() => { refreshAndNotify(); }); + syncAllSectionsToBlockProps(sectionsRef.current); }, 300); }} /> - { + const updatedSections = sectionsRef.current.map((s) => + s.uid === activeDialogSection.uid + ? { + ...s, + settings: s.settings + ? { + ...s.settings, + truncateResult: { + ...s.settings.truncateResult, + value, + }, + } + : s.settings, + } + : s, + ); + setSections(updatedSections); + syncAllSectionsToBlockProps(updatedSections); + }} /> diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index 0002c8028..67d442478 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -459,7 +459,9 @@ const BaseMultiTextPanel = ({ type TextWrapperProps = Omit; type FlagWrapperProps = Omit; -type NumberWrapperProps = Omit; +type NumberWrapperProps = Omit & { + setter?: NumberSetter; +}; type SelectWrapperProps = Omit; type MultiTextWrapperProps = Omit; @@ -565,8 +567,8 @@ export const PersonalFlagPanel = (props: FlagWrapperProps) => ( ); -export const PersonalNumberPanel = (props: NumberWrapperProps) => ( - +export const PersonalNumberPanel = ({ setter, ...props }: NumberWrapperProps) => ( + ); export const PersonalSelectPanel = (props: SelectWrapperProps) => ( diff --git a/apps/roam/src/components/settings/utils/zodSchema.ts b/apps/roam/src/components/settings/utils/zodSchema.ts index 4d914b284..378020d42 100644 --- a/apps/roam/src/components/settings/utils/zodSchema.ts +++ b/apps/roam/src/components/settings/utils/zodSchema.ts @@ -202,10 +202,11 @@ export const GlobalSettingsSchema = z.object({ }); export const PersonalSectionSchema = z.object({ + name: z.string(), Children: z .array( z.object({ - Page: z.string(), + uid: z.string(), Alias: z.string().default(""), }), ) @@ -219,8 +220,8 @@ export const PersonalSectionSchema = z.object({ }); export const LeftSidebarPersonalSettingsSchema = z - .record(z.string(), PersonalSectionSchema) - .default({}); + .array(PersonalSectionSchema) + .default([]); export const StoredFiltersSchema = z.object({ includes: z.object({ values: z.array(z.string()).default([]) }).default({}), From f9d434c6bf2d2ce16b47213e53351691fb4127cb Mon Sep 17 00:00:00 2001 From: sid597 Date: Sat, 21 Feb 2026 01:28:25 +0530 Subject: [PATCH 2/3] fix review --- .../settings/LeftSidebarPersonalSettings.tsx | 6 +-- .../settings/utils/zodSchema.example.ts | 47 ++++++++++--------- 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx index e5179e978..425570df7 100644 --- a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx +++ b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx @@ -620,7 +620,7 @@ const LeftSidebarPersonalSectionsContent = ({ const addSection = useCallback( async (sectionName: string) => { if (!sectionName || !personalSectionUid) return; - if (sections.some((s) => s.text === sectionName)) return; + if (sectionsRef.current.some((s) => s.text === sectionName)) return; try { const newBlock = await createBlock({ @@ -636,7 +636,7 @@ const LeftSidebarPersonalSectionsContent = ({ children: undefined, childrenUid: undefined, } as LeftSidebarPersonalSectionConfig; - const updatedSections = [...sections, newSection]; + const updatedSections = [...sectionsRef.current, newSection]; setSections(updatedSections); syncAllSectionsToBlockProps(updatedSections); @@ -653,7 +653,7 @@ const LeftSidebarPersonalSectionsContent = ({ }); } }, - [personalSectionUid, sections], + [personalSectionUid], ); const handleNewSectionInputChange = useCallback((value: string) => { diff --git a/apps/roam/src/components/settings/utils/zodSchema.example.ts b/apps/roam/src/components/settings/utils/zodSchema.example.ts index 60de6f584..f413d26e2 100644 --- a/apps/roam/src/components/settings/utils/zodSchema.example.ts +++ b/apps/roam/src/components/settings/utils/zodSchema.example.ts @@ -276,10 +276,11 @@ const defaultGlobalSettings: GlobalSettings = { }; const personalSection: PersonalSection = { + name: "My Workspace", Children: [ - { Page: "daily-notes-uid", Alias: "Daily Notes" }, - { Page: "inbox-uid", Alias: "Inbox" }, - { Page: "projects-uid", Alias: "" }, + { uid: "daily-notes-uid", Alias: "Daily Notes" }, + { uid: "inbox-uid", Alias: "Inbox" }, + { uid: "projects-uid", Alias: "" }, ], Settings: { "Truncate-result?": 100, @@ -287,29 +288,31 @@ const personalSection: PersonalSection = { }, }; -const leftSidebarPersonalSettings: LeftSidebarPersonalSettings = { - "My Workspace": { +const leftSidebarPersonalSettings: LeftSidebarPersonalSettings = [ + { + name: "My Workspace", Children: [ - { Page: "daily-notes-uid", Alias: "Daily Notes" }, - { Page: "inbox-uid", Alias: "Inbox" }, + { uid: "daily-notes-uid", Alias: "Daily Notes" }, + { uid: "inbox-uid", Alias: "Inbox" }, ], Settings: { "Truncate-result?": 75, Folded: false, }, }, - Research: { + { + name: "Research", Children: [ - { Page: "papers-uid", Alias: "Papers" }, - { Page: "notes-uid", Alias: "Notes" }, - { Page: "ideas-uid", Alias: "Ideas" }, + { uid: "papers-uid", Alias: "Papers" }, + { uid: "notes-uid", Alias: "Notes" }, + { uid: "ideas-uid", Alias: "Ideas" }, ], Settings: { "Truncate-result?": 50, Folded: true, }, }, -}; +]; const storedFilters: StoredFilters = { includes: { values: ["Claim", "Evidence"] }, @@ -333,28 +336,30 @@ const querySettings: QuerySettings = { }; const personalSettings: PersonalSettings = { - "Left sidebar": { - "My Workspace": { + "Left sidebar": [ + { + name: "My Workspace", Children: [ - { Page: "daily-notes-uid", Alias: "Daily Notes" }, - { Page: "inbox-uid", Alias: "Inbox" }, + { uid: "daily-notes-uid", Alias: "Daily Notes" }, + { uid: "inbox-uid", Alias: "Inbox" }, ], Settings: { "Truncate-result?": 75, Folded: false, }, }, - Research: { + { + name: "Research", Children: [ - { Page: "papers-uid", Alias: "Papers" }, - { Page: "notes-uid", Alias: "Notes" }, + { uid: "papers-uid", Alias: "Papers" }, + { uid: "notes-uid", Alias: "Notes" }, ], Settings: { "Truncate-result?": 50, Folded: true, }, }, - }, + ], "Personal node menu trigger": { modifiers: 0, key: ";;" }, "Node search menu trigger": "//", "Discourse tool shortcut": { modifiers: 0, key: "d" }, @@ -382,7 +387,7 @@ const personalSettings: PersonalSettings = { }; const defaultPersonalSettings: PersonalSettings = { - "Left sidebar": {}, + "Left sidebar": [], "Personal node menu trigger": { modifiers: 0, key: "" }, "Node search menu trigger": "", "Discourse tool shortcut": { modifiers: 0, key: "" }, From b18c761104b61746fc6290e5dc1a90b704b32b52 Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 23 Feb 2026 15:43:32 +0530 Subject: [PATCH 3/3] prettier, port alias textpanel to presonaltextpanel --- .../settings/LeftSidebarGlobalSettings.tsx | 13 +--- .../settings/LeftSidebarPersonalSettings.tsx | 66 ++++++++----------- .../components/BlockPropSettingPanels.tsx | 18 +++-- 3 files changed, 45 insertions(+), 52 deletions(-) diff --git a/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx index 61c1be821..838346ab5 100644 --- a/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx +++ b/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx @@ -22,7 +22,6 @@ import posthog from "posthog-js"; const pagesToUids = (pages: RoamBasicNode[]) => pages.map((p) => p.text); - const PageItem = memo( ({ page, @@ -164,11 +163,7 @@ const LeftSidebarGlobalSectionsContent = ({ newPages.splice(newIndex, 0, removed); setPages(newPages); - setGlobalSetting( - ["Left sidebar", "Children"], - pagesToUids(newPages), - ); - + setGlobalSetting(["Left sidebar", "Children"], pagesToUids(newPages)); if (childrenUid) { const order = direction === "down" ? newIndex + 1 : newIndex; @@ -216,7 +211,7 @@ const LeftSidebarGlobalSectionsContent = ({ ["Left sidebar", "Children"], pagesToUids(updatedPages), ); - + setNewPageInput(""); setAutocompleteKey((prev) => prev + 1); posthog.capture("Left Sidebar Global Settings: Page Added", { @@ -244,7 +239,7 @@ const LeftSidebarGlobalSectionsContent = ({ ["Left sidebar", "Children"], pagesToUids(updatedPages), ); - + refreshAndNotify(); } catch (error) { renderToast({ @@ -296,7 +291,6 @@ const LeftSidebarGlobalSectionsContent = ({ uid={globalSection.settings?.folded?.uid || ""} parentUid={globalSection.settings?.uid || ""} disabled={!globalSection.children?.length} - /> diff --git a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx index 425570df7..ab4eeb61a 100644 --- a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx +++ b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx @@ -20,8 +20,10 @@ import deleteBlock from "roamjs-components/writes/deleteBlock"; import updateBlock from "roamjs-components/writes/updateBlock"; import type { RoamBasicNode } from "roamjs-components/types"; import { setPersonalSetting } from "~/components/settings/utils/accessors"; -import { PersonalNumberPanel } from "~/components/settings/components/BlockPropSettingPanels"; -import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel"; +import { + PersonalNumberPanel, + PersonalTextPanel, +} from "~/components/settings/components/BlockPropSettingPanels"; import { LeftSidebarPersonalSectionConfig, getLeftSidebarPersonalSectionConfig, @@ -86,7 +88,6 @@ const SectionItem = memo( const originalName = blockText || section.text; const [childInput, setChildInput] = useState(""); const [childInputKey, setChildInputKey] = useState(0); - const aliasDebounceRef = useRef>(); const [expandedChildLists, setExpandedChildLists] = useState>( new Set(), @@ -503,45 +504,36 @@ const SectionItem = memo( style={{ width: "400px" }} >
- , - ) => { - const nextValue = event.target.value; - setSections((prev) => - prev.map((s) => - s.uid === section.uid - ? { - ...s, - children: s.children?.map((c) => - c.uid === child.uid - ? { - ...c, - alias: { - ...c.alias, - value: nextValue, - }, - } - : c, - ), - } - : s, - ), - ); - clearTimeout(aliasDebounceRef.current); - aliasDebounceRef.current = setTimeout(() => { - syncAllSectionsToBlockProps( - sectionsRef.current, - ); - }, 250); - }, + setter={(_keys, value) => { + const updatedSections = sectionsRef.current.map( + (s) => + s.uid === section.uid + ? { + ...s, + children: s.children?.map((c) => + c.uid === child.uid + ? { + ...c, + alias: { + ...c.alias, + value, + }, + } + : c, + ), + } + : s, + ); + setSections(updatedSections); + syncAllSectionsToBlockProps(updatedSections); }} />
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index 67d442478..65d5225f5 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -457,7 +457,9 @@ const BaseMultiTextPanel = ({ ); }; -type TextWrapperProps = Omit; +type TextWrapperProps = Omit & { + setter?: TextSetter; +}; type FlagWrapperProps = Omit; type NumberWrapperProps = Omit & { setter?: NumberSetter; @@ -559,16 +561,22 @@ export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => ( ); -export const PersonalTextPanel = (props: TextWrapperProps) => ( - +export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => ( + ); export const PersonalFlagPanel = (props: FlagWrapperProps) => ( ); -export const PersonalNumberPanel = ({ setter, ...props }: NumberWrapperProps) => ( - +export const PersonalNumberPanel = ({ + setter, + ...props +}: NumberWrapperProps) => ( + ); export const PersonalSelectPanel = (props: SelectWrapperProps) => (