ENG-906 Add node tag preview below tag input in settings (#967)

* ENG-906 Add node tag preview below tag input in settings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* pr comment

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: trangdoan982

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

@@ -24,6 +24,7 @@ import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByPar
 import setInputSetting from "roamjs-components/util/setInputSetting";
 import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
+import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
 import { isSyncEnabled } from "~/components/settings/utils/accessors";
 import {
   DiscourseNodeTextPanel,
@@ -180,19 +181,31 @@ const NodeConfig = ({
                 parentUid={node.type}
                 uid={shortcutUid}
               />
-              <DiscourseNodeTextPanel
-                nodeType={node.type}
-                title="Tag"
-                description={`Designate a hashtag for marking potential ${node.text}.`}
-                settingKeys={["tag"]}
-                initialValue={node.tag}
-                placeholder={generateTagPlaceholder(node)}
-                error={tagError}
-                onChange={setTagValue}
-                order={2}
-                parentUid={node.type}
-                uid={tagUid}
-              />
+              <div>
+                <DiscourseNodeTextPanel
+                  nodeType={node.type}
+                  title="Tag"
+                  description={`Designate a hashtag for marking potential ${node.text}.`}
+                  settingKeys={["tag"]}
+                  initialValue={node.tag}
+                  placeholder={generateTagPlaceholder(node)}
+                  error={tagError}
+                  onChange={setTagValue}
+                  order={2}
+                  parentUid={node.type}
+                  uid={tagUid}
+                />
+                {tagValue && (
+                  <div className="flex items-center gap-1.5 pl-1">
+                    <span className="text-xs italic text-gray-400">
+                      Preview:
+                    </span>
+                    <span style={color ? getNodeTagStyles(color) : undefined}>
+                      #{tagValue.replace(/^#/, "")}
+                    </span>
+                  </div>
+                )}
+              </div>
               <>
                 <Label>
                   Color

apps/roam/src/utils/getDiscourseNodeColors.ts

@@ -1,10 +1,12 @@
+import { CSSProperties } from "react";
 import { colord } from "colord";
 import getPleasingColors from "@repo/utils/getPleasingColors";
 import {
   COLOR_ARRAY,
   COLOR_PALETTE,
 } from "~/components/canvas/DiscourseNodeUtil";
 import getDiscourseNodes, { DiscourseNode } from "./getDiscourseNodes";
+import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
 
 type GetDiscourseNodeColorsParams = {
   nodeType?: string;
@@ -39,3 +41,25 @@ export const getDiscourseNodeColors = ({
   const textColor = pleasingColors.text;
   return { backgroundColor, textColor };
 };
+
+export const getNodeTagStyles = (color: string): CSSProperties | undefined => {
+  const formattedColor = formatHexColor(color);
+  if (!formattedColor) return undefined;
+  const { background, text, border } = getPleasingColors(
+    colord(formattedColor),
+  );
+  return {
+    backgroundColor: background,
+    color: text,
+    border: `1px solid ${border}`,
+    fontWeight: "500",
+    padding: "2px 6px",
+    borderRadius: "12px",
+    margin: "0 2px",
+    fontSize: "0.9em",
+    whiteSpace: "nowrap",
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+    display: "inline-block",
+    cursor: "pointer",
+  };
+};

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -50,14 +50,12 @@ import {
 } from "~/utils/renderTextSelectionPopup";
 import { renderNodeTagPopupButton } from "./renderNodeTagPopup";
 import { renderImageToolsMenu } from "./renderImageToolsMenu";
-import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
 import { getSetting } from "./extensionSettings";
 import { mountLeftSidebar } from "~/components/LeftSidebarView";
 import { getUidAndBooleanSetting } from "./getExportSettings";
 import { getFeatureFlag } from "~/components/settings/utils/accessors";
 import { getCleanTagText } from "~/components/settings/NodeConfig";
-import getPleasingColors from "@repo/utils/getPleasingColors";
-import { colord } from "colord";
+import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
 import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
@@ -145,29 +143,10 @@ export const initObservers = async ({
           const normalizedNodeTag = node.tag ? getCleanTagText(node.tag) : "";
           if (normalizedTag === normalizedNodeTag) {
             renderNodeTagPopupButton(s, node, onloadArgs.extensionAPI);
-            if (node.canvasSettings?.color) {
-              const formattedColor = formatHexColor(node.canvasSettings.color);
-              if (!formattedColor) {
-                break;
-              }
-              const contrastingColor = getPleasingColors(
-                colord(formattedColor),
-              );
-
-              Object.assign(s.style, {
-                backgroundColor: contrastingColor.background,
-                color: contrastingColor.text,
-                border: `1px solid ${contrastingColor.border}`,
-                fontWeight: "500",
-                padding: "2px 6px",
-                borderRadius: "12px",
-                margin: "0 2px",
-                fontSize: "0.9em",
-                whiteSpace: "nowrap",
-                boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
-                display: "inline-block",
-                cursor: "pointer",
-              });
+            const color = node.canvasSettings?.color ?? "";
+            const tagStyles = color ? getNodeTagStyles(color) : {};
+            if (tagStyles) {
+              Object.assign(s.style, tagStyles);
             }
             break;
           }