From 41af8713741aba4adfe322c0a7aff65b95814b6f Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Tue, 7 Apr 2026 17:51:25 -0400 Subject: [PATCH 1/8] ENG-739 Move color selector from Canvas tab to General tab Co-Authored-By: Claude Sonnet 4.6 --- .../settings/DiscourseNodeCanvasSettings.tsx | 49 ------------- .../src/components/settings/NodeConfig.tsx | 73 ++++++++++++++++++- 2 files changed, 71 insertions(+), 51 deletions(-) diff --git a/apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx b/apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx index 287f4194b..6718642e8 100644 --- a/apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx +++ b/apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx @@ -1,11 +1,9 @@ import { InputGroup, - Label, Radio, RadioGroup, Tooltip, Icon, - ControlGroup, } from "@blueprintjs/core"; import React, { useState, useMemo } from "react"; import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; @@ -37,10 +35,6 @@ const DiscourseNodeCanvasSettings = ({ uid: string; }) => { const tree = useMemo(() => getBasicTreeByParentUid(uid), [uid]); - const [color, setColor] = useState(() => { - const color = getSettingValueFromTree({ tree, key: "color" }); - return formatHexColor(color); - }); const alias = getSettingValueFromTree({ tree, key: "alias" }); const [queryBuilderAlias, setQueryBuilderAlias] = useState(() => getSettingValueFromTree({ tree, key: "query-builder-alias" }), @@ -54,49 +48,6 @@ const DiscourseNodeCanvasSettings = ({ return (
-
- - - { - const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link - setColor(e.target.value); - void setInputSetting({ - blockUid: uid, - key: "color", - value: colorValue, - }); - setDiscourseNodeSetting( - nodeType, - ["canvasSettings", "color"], - colorValue, - ); - }} - /> - - { - setColor(""); - void setInputSetting({ - blockUid: uid, - key: "color", - value: "", - }); - setDiscourseNodeSetting( - nodeType, - ["canvasSettings", "color"], - "", - ); - }} - /> - - -
getBasicTreeByParentUid(canvasUid), + [canvasUid], + ); + const [color, setColor] = useState(() => { + const colorValue = getSettingValueFromTree({ + tree: canvasTree, + key: "color", + }); + return formatHexColor(colorValue); + }); + const [selectedTabId, setSelectedTabId] = useState("general"); const [tagError, setTagError] = useState(""); const [formatError, setFormatError] = useState(""); @@ -181,6 +207,49 @@ const NodeConfig = ({ parentUid={node.type} uid={tagUid} /> +
+ + + { + const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link + setColor(e.target.value); + void setInputSetting({ + blockUid: canvasUid, + key: "color", + value: colorValue, + }); + setDiscourseNodeSetting( + node.type, + ["canvasSettings", "color"], + colorValue, + ); + }} + /> + + { + setColor(""); + void setInputSetting({ + blockUid: canvasUid, + key: "color", + value: "", + }); + setDiscourseNodeSetting( + node.type, + ["canvasSettings", "color"], + "", + ); + }} + /> + + +
} /> From 71989efb1a2e6f861782150cbc619edd2c682d50 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Tue, 7 Apr 2026 18:19:37 -0400 Subject: [PATCH 2/8] some small fix --- apps/roam/src/components/settings/NodeConfig.tsx | 2 ++ .../components/settings/components/BlockPropSettingPanels.tsx | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx index f6154fc0a..77f09205c 100644 --- a/apps/roam/src/components/settings/NodeConfig.tsx +++ b/apps/roam/src/components/settings/NodeConfig.tsx @@ -12,6 +12,7 @@ import { ControlGroup, Tooltip, Icon, + Tag, } from "@blueprintjs/core"; import DiscourseNodeSpecification from "./DiscourseNodeSpecification"; import DiscourseNodeAttributes from "./DiscourseNodeAttributes"; @@ -206,6 +207,7 @@ const NodeConfig = ({ order={2} parentUid={node.type} uid={tagUid} + inputStyle={color ? { color } : undefined} />
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index eeed53191..d31972d97 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -50,6 +50,7 @@ type BaseTextPanelProps = { multiline?: boolean; error?: string; onChange?: (value: string) => void; + inputStyle?: React.CSSProperties; } & RoamBlockSyncProps; type BaseFlagPanelProps = { @@ -105,6 +106,7 @@ const BaseTextPanel = ({ multiline, error, onChange, + inputStyle, parentUid, uid, order, @@ -162,6 +164,7 @@ const BaseTextPanel = ({ value={value} onChange={handleChange} placeholder={placeholder || initialValue} + style={inputStyle} /> )} @@ -612,6 +615,7 @@ export const DiscourseNodeTextPanel = ({ multiline?: boolean; error?: string; onChange?: (value: string) => void; + inputStyle?: React.CSSProperties; }) => ( ); From a02b9a86e70a1568ea59f86852a847db0ff9909e Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Wed, 8 Apr 2026 15:23:44 -0400 Subject: [PATCH 3/8] little lint --- apps/roam/src/components/settings/NodeConfig.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx index 77f09205c..d15b967cf 100644 --- a/apps/roam/src/components/settings/NodeConfig.tsx +++ b/apps/roam/src/components/settings/NodeConfig.tsx @@ -12,7 +12,6 @@ import { ControlGroup, Tooltip, Icon, - Tag, } from "@blueprintjs/core"; import DiscourseNodeSpecification from "./DiscourseNodeSpecification"; import DiscourseNodeAttributes from "./DiscourseNodeAttributes"; From 14d3fe40b020d9675567c8b03d148ca33042d479 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Wed, 15 Apr 2026 14:22:51 -0400 Subject: [PATCH 4/8] address PR comments --- apps/roam/src/components/settings/NodeConfig.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx index d15b967cf..2c00590fa 100644 --- a/apps/roam/src/components/settings/NodeConfig.tsx +++ b/apps/roam/src/components/settings/NodeConfig.tsx @@ -206,10 +206,12 @@ const NodeConfig = ({ order={2} parentUid={node.type} uid={tagUid} - inputStyle={color ? { color } : undefined} /> -
- + <> + -
+
} /> From 78dc53731b5f24c1897b849be8fd4c9a60d341b6 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Wed, 15 Apr 2026 14:26:33 -0400 Subject: [PATCH 5/8] address PR comments --- .../src/components/settings/NodeConfig.tsx | 43 ++++++------------- 1 file changed, 12 insertions(+), 31 deletions(-) diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx index 2c00590fa..389395851 100644 --- a/apps/roam/src/components/settings/NodeConfig.tsx +++ b/apps/roam/src/components/settings/NodeConfig.tsx @@ -211,47 +211,28 @@ const NodeConfig = ({ - - { - const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link - setColor(e.target.value); - void setInputSetting({ - blockUid: canvasUid, - key: "color", - value: colorValue, - }); - setDiscourseNodeSetting( - node.type, - ["canvasSettings", "color"], - colorValue, - ); - }} - /> - - { - setColor(""); + + { + const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link + setColor(e.target.value); void setInputSetting({ blockUid: canvasUid, key: "color", - value: "", + value: colorValue, }); setDiscourseNodeSetting( node.type, ["canvasSettings", "color"], - "", + colorValue, ); }} /> - - + + } From 0c484632beec71eb6f00948c4dbbb6ccf6b58936 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Wed, 15 Apr 2026 14:27:04 -0400 Subject: [PATCH 6/8] remove unused import --- apps/roam/src/components/settings/NodeConfig.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx index 389395851..2068c9188 100644 --- a/apps/roam/src/components/settings/NodeConfig.tsx +++ b/apps/roam/src/components/settings/NodeConfig.tsx @@ -10,8 +10,6 @@ import { TabId, InputGroup, ControlGroup, - Tooltip, - Icon, } from "@blueprintjs/core"; import DiscourseNodeSpecification from "./DiscourseNodeSpecification"; import DiscourseNodeAttributes from "./DiscourseNodeAttributes"; From b20828d31a98a735f51a5b4aab2bc518e8cf69fe Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Wed, 15 Apr 2026 14:41:26 -0400 Subject: [PATCH 7/8] remove prop --- .../components/settings/components/BlockPropSettingPanels.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index d31972d97..eeed53191 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -50,7 +50,6 @@ type BaseTextPanelProps = { multiline?: boolean; error?: string; onChange?: (value: string) => void; - inputStyle?: React.CSSProperties; } & RoamBlockSyncProps; type BaseFlagPanelProps = { @@ -106,7 +105,6 @@ const BaseTextPanel = ({ multiline, error, onChange, - inputStyle, parentUid, uid, order, @@ -164,7 +162,6 @@ const BaseTextPanel = ({ value={value} onChange={handleChange} placeholder={placeholder || initialValue} - style={inputStyle} /> )} @@ -615,7 +612,6 @@ export const DiscourseNodeTextPanel = ({ multiline?: boolean; error?: string; onChange?: (value: string) => void; - inputStyle?: React.CSSProperties; }) => ( ); From 71033e1efa8b2a88048ec7c5a70658dd9f556aa5 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Wed, 15 Apr 2026 15:43:16 -0400 Subject: [PATCH 8/8] address PR comments --- .../src/components/settings/NodeConfig.tsx | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx index 2068c9188..e87786efc 100644 --- a/apps/roam/src/components/settings/NodeConfig.tsx +++ b/apps/roam/src/components/settings/NodeConfig.tsx @@ -10,6 +10,8 @@ import { TabId, InputGroup, ControlGroup, + Tooltip, + Icon, } from "@blueprintjs/core"; import DiscourseNodeSpecification from "./DiscourseNodeSpecification"; import DiscourseNodeAttributes from "./DiscourseNodeAttributes"; @@ -19,7 +21,6 @@ import DiscourseNodeCanvasSettings, { import DiscourseNodeIndex from "./DiscourseNodeIndex"; import { OnloadArgs } from "roamjs-components/types"; import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; -import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree"; import setInputSetting from "roamjs-components/util/setInputSetting"; import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors"; import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules"; @@ -82,17 +83,9 @@ const NodeConfig = ({ key: "Attributes", }); - const canvasTree = useMemo( - () => getBasicTreeByParentUid(canvasUid), - [canvasUid], + const [color, setColor] = useState(() => + formatHexColor(node.canvasSettings?.color ?? ""), ); - const [color, setColor] = useState(() => { - const colorValue = getSettingValueFromTree({ - tree: canvasTree, - key: "color", - }); - return formatHexColor(colorValue); - }); const [selectedTabId, setSelectedTabId] = useState("general"); const [tagError, setTagError] = useState(""); @@ -229,6 +222,25 @@ const NodeConfig = ({ ); }} /> + + { + setColor(""); + void setInputSetting({ + blockUid: canvasUid, + key: "color", + value: "", + }); + setDiscourseNodeSetting( + node.type, + ["canvasSettings", "color"], + "", + ); + }} + /> +