ENG-846 - Add Colors to Nodes in settings

[mdroidian]

Summary by CodeRabbit

• New Features
  • Node lists now display colored indicator dots next to node names, providing improved visual organization and easier node identification.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

ENG-846 Add Colors to Nodes in settings

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[mdroidian]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

Modified the Node list row in DiscourseNodeConfigPanel to display a colored indicator dot before node text. The color is derived from the node's canvas settings with a fallback to black, requiring an import of the formatHexColor utility function.

Changes

Cohort / File(s)	Change Summary
Node Color Indicator UI apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx	Added import for formatHexColor utility. Enhanced node list rendering to prepend a colored dot indicator (using canvas settings color or #000 fallback) before node text.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• ENG-986 Quick UI refactor on Canvas Drawer #507: Modifies UI around discourse node color handling, adding color-related utilities and visual indicators for nodes.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly corresponds to the main change: adding colored indicators to nodes in the settings panel. It is clear, concise, and accurately summarizes the primary modification.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 25d8e3a and 5aaebb3.

📒 Files selected for processing (1)

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Use Tailwind CSS for styling where possible
When refactoring inline styles, use tailwind classes
Prefer type over interface in TypeScript
Use explicit return types for functions
Avoid any types when possible
Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use PascalCase for components and types
Use camelCase for variables and functions
Use UPPERCASE for constants
Function names should describe their purpose clearly
Prefer early returns over nested conditionals for better readability

Files:

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

apps/roam/**/*.{js,ts,tsx,jsx,json}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Prefer existing dependencies from package.json when working on the Roam Research extension

Files:

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

apps/roam/**/*.{ts,tsx,jsx,js,css,scss}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Files:

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

apps/roam/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

apps/roam/**/*.{ts,tsx,js,jsx}: Use the roamAlphaApi docs from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when implementing Roam functionality
Use Roam Depot/Extension API docs from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when implementing extension functionality

Files:

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

apps/roam/**

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Implement the Discourse Graph protocol in the Roam Research extension

Files:

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

🧠 Learnings (2)

📚 Learning: 2025-11-25T00:52:41.934Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-11-25T00:52:41.934Z
Learning: Applies to apps/roam/**/*.{ts,tsx,jsx,js,css,scss} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Applied to files:

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

📚 Learning: 2025-08-25T15:53:21.799Z

Learnt from: sid597
Repo: DiscourseGraphs/discourse-graph PR: 372
File: apps/roam/src/components/DiscourseNodeMenu.tsx:116-116
Timestamp: 2025-08-25T15:53:21.799Z
Learning: In apps/roam/src/components/DiscourseNodeMenu.tsx, when handling tag insertion, multiple leading hashtags (like ##foo) should be preserved as they represent user intent, not normalized to a single hashtag. The current regex /^#/ is correct as it only removes one leading # before adding one back, maintaining any additional hashtags the user intended.

Applied to files:

• apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

🧬 Code graph analysis (1)

apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx (1)

apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx (1)

• formatHexColor (16-26)

🔇 Additional comments (2)

apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx (2)

18-18: LGTM!

Import is correctly sourced from the sibling module where formatHexColor is exported.

---

131-140: LGTM!

Good implementation of the color indicator:

• Correctly uses Tailwind for layout and structural styling (flex, items-center, gap-2, h-3, w-3, rounded-full)
• Appropriately uses inline style only for the dynamic backgroundColor value
• Properly handles edge cases with the || "#000" fallback when formatHexColor returns an empty string

Based on coding guidelines, this follows the pattern of using Tailwind CSS for styling where possible.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}