[ENG-844] Add color setting for relation types

[trangdoan982]

Summary by CodeRabbit

• New Features
  • Relation types now support colors. You can set a color for each relation type via a new color input.
  • Default colors applied to built-ins: Supports (green), Opposes (red), Informs (blue).
  • New relation types default to black and must include a color to save.

[linear]

ENG-844 Create color setting for relation types

[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 ↗︎.

[trangdoan982]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a color property to DiscourseRelationType across types, constants, and UI. Updates RelationshipTypeSettings to capture, validate, and store color per relation type, defaulting to "black" for new entries. DEFAULT_RELATION_TYPES now specify color values. handleRelationTypeChange made synchronous. Save validation now requires color.

Changes

Cohort / File(s)	Summary of Changes
UI settings and validation apps/obsidian/src/components/RelationshipTypeSettings.tsx	Added color input bound to relationType.color; default color "black" when creating/adding types; save validation includes color; handleRelationTypeChange made synchronous; data model and handlers updated to include color.
Defaults for relation types apps/obsidian/src/constants.ts	Added color field to DEFAULT_RELATION_TYPES: supports "green", opposes "red", informs "blue".
Type surface apps/obsidian/src/types.ts	Extended DiscourseRelationType with color: string.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant UI as RelationshipTypeSettings
  participant S as Local State

  U->>UI: Change color for a relation type
  UI->>S: handleRelationTypeChange(index,"color",value) (sync update)
  Note right of S: State now includes color per type (default "black" for new)

  U->>UI: Click "Add relation type"
  UI->>S: Append {id,label,complement,color:"black"}

  U->>UI: Click "Save"
  UI->>UI: Validate id, label, complement, color
  alt Any missing field
    UI-->>U: Show validation error
  else All fields present
    UI->>S: Persist updated relation types
    UI-->>U: Confirm saved
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [ENG-42] Create setting to define a relationship #99 — Extends the same RelationshipType settings by adding the color property across UI, defaults, and types; directly tied to these changes.

Pre-merge checks (3 passed)

✅ 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 “[ENG-844] Add color setting for relation types” succinctly and accurately captures the primary change of the pull request by highlighting the addition of a color attribute for relation types and does so in a clear, single sentence without extraneous details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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.}

[coderabbitai]

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

apps/obsidian/src/components/RelationshipTypeSettings.tsx (2)

79-85: Validate hex format and trim text fields before save.

Prevents whitespace-only labels/complements and rejects non-hex colors that slipped in from legacy data.

   const handleSave = async (): Promise<void> => {
-    for (const relType of relationTypes) {
-      if (!relType.id || !relType.label || !relType.complement || !relType.color) {
+    const HEX_COLOR_RE = /^#[0-9A-Fa-f]{6}$/;
+    for (const relType of relationTypes) {
+      const label = relType.label?.trim();
+      const complement = relType.complement?.trim();
+      const color = relType.color || "#000000";
+      if (!relType.id || !label || !complement || !color) {
         new Notice("All fields are required for relation types.");
         return;
       }
+      if (!HEX_COLOR_RE.test(color)) {
+        new Notice("Color must be a 6-digit hex (e.g., #22C55E).");
+        return;
+      }
     }

Optionally also enforce case-insensitive uniqueness using the trimmed values.

---

10-12: Initialize state with normalized colors (migration-in-place).

Backfill missing/invalid colors when seeding state so the form renders valid values for legacy settings.

Add near state initialization:

-  const [relationTypes, setRelationTypes] = useState<DiscourseRelationType[]>(
-    () => plugin.settings.relationTypes ?? [],
-  );
+  const [relationTypes, setRelationTypes] = useState<DiscourseRelationType[]>(
+    () => (plugin.settings.relationTypes ?? []).map(rt => ({
+      ...rt,
+      color: /^#[0-9A-Fa-f]{6}$/.test(rt.color ?? "") ? rt.color! : "#000000",
+    })),
+  );

This avoids React controlled/uncontrolled warnings and keeps the color input valid from the start.

🧹 Nitpick comments (2)

apps/obsidian/src/components/RelationshipTypeSettings.tsx (2)

107-110: Prefer stable keys over array indices.

Use relationType.id to avoid key-mismatch issues on reorder/insert.

-        <div key={index} className="setting-item">
+        <div key={relationType.id || index} className="setting-item">

---

22-23: Unify ID prefixes for readability (optional).

Elsewhere uses generateUid("relation"); here it’s "rel". Align unless there’s a reason to diverge.

-      const newId = generateUid("rel");
+      const newId = generateUid("relation");

(Same change in handleAddRelationType.)

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ab34054 and f3880de.

📒 Files selected for processing (3)

• apps/obsidian/src/components/RelationshipTypeSettings.tsx (4 hunks)
• apps/obsidian/src/constants.ts (1 hunks)
• apps/obsidian/src/types.ts (1 hunks)

🔇 Additional comments (2)

apps/obsidian/src/types.ts (1)

17-18: I’ve initiated searches to locate where relationTypes are loaded/saved and if default/color backfills occur in the plugin code.

apps/obsidian/src/components/RelationshipTypeSettings.tsx (1)

15-20: Sync handler change LGTM.

Good move making handleRelationTypeChange synchronous.

[mdroidian]

👍
Could changes requested, then good to merge.