[ENG-602] Add color setting (#300)

* add color setting

* add default color

Author: trangdoan982

apps/obsidian/src/components/DiscourseContextView.tsx

@@ -49,7 +49,13 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
     return (
       <>
         <div className="mb-6">
-          <div className="text-md mb-2 font-bold">
+          <div className="text-md mb-2 flex items-center gap-2 font-bold">
+            {nodeType.color && (
+              <div
+                className="h-4 w-4 rounded-full"
+                style={{ backgroundColor: nodeType.color }}
+              />
+            )}
             {nodeType.name || "Unnamed Node Type"}
           </div>
 

apps/obsidian/src/components/NodeTypeModal.tsx

@@ -24,7 +24,14 @@ export class NodeTypeModal extends SuggestModal<DiscourseNode> {
   }
 
   renderSuggestion(nodeType: DiscourseNode, el: HTMLElement) {
-    el.createEl("div", { text: nodeType.name });
+    const container = el.createDiv({ cls: "flex items-center gap-2" });
+    if (nodeType.color) {
+      container.createDiv({
+        cls: "h-4 w-4 rounded-full",
+        attr: { style: `background-color: ${nodeType.color};` },
+      });
+    }
+    container.createDiv({ text: nodeType.name });
   }
 
   async onChooseSuggestion(nodeType: DiscourseNode) {

apps/obsidian/src/components/NodeTypeSettings.tsx

@@ -7,14 +7,14 @@ import { DiscourseNode } from "~/types";
 import { ConfirmationModal } from "./ConfirmationModal";
 import { getTemplateFiles, getTemplatePluginInfo } from "~/utils/templates";
 
-type EditableFieldKey = keyof Omit<DiscourseNode, "id" | "shortcut" | "color">;
+type EditableFieldKey = keyof Omit<DiscourseNode, "id" | "shortcut">;
 
 type BaseFieldConfig = {
   key: EditableFieldKey;
   label: string;
   description: string;
   required?: boolean;
-  type: "text" | "select";
+  type: "text" | "select" | "color";
   placeholder?: string;
   validate?: (
     value: string,
@@ -68,6 +68,13 @@ const FIELD_CONFIGS: Record<EditableFieldKey, BaseFieldConfig> = {
     type: "select",
     required: false,
   },
+  color: {
+    key: "color",
+    label: "Color",
+    description: "The color to use for this node type",
+    type: "color",
+    required: false,
+  },
 };
 
 const FIELD_CONFIG_ARRAY = Object.values(FIELD_CONFIGS);
@@ -92,6 +99,23 @@ const TextField = ({
   />
 );
 
+const ColorField = ({
+  value,
+  error,
+  onChange,
+}: {
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+}) => (
+  <input
+    type="color"
+    value={value || "#000000"}
+    onChange={(e) => onChange(e.target.value)}
+    className={`h-8 w-20 ${error ? "input-error" : ""}`}
+  />
+);
+
 const TemplateField = ({
   value,
   error,
@@ -367,6 +391,8 @@ const NodeTypeSettings = () => {
             templateConfig={templateConfig}
             templateFiles={templateFiles}
           />
+        ) : fieldConfig.type === "color" ? (
+          <ColorField value={value} error={error} onChange={handleChange} />
         ) : (
           <TextField
             fieldConfig={fieldConfig}
@@ -391,7 +417,15 @@ const NodeTypeSettings = () => {
           onClick={() => startEditing(index)}
         >
           <div className="flex items-center justify-between">
-            <span className="font-medium">{nodeType.name}</span>
+            <div className="flex items-center gap-2">
+            {nodeType.color && (
+              <div
+                className="h-4 w-4 rounded-full"
+                style={{ backgroundColor: nodeType.color }}
+              />
+            )}
+            <span>{nodeType.name}</span>
+          </div>
             <div className="flex gap-2">
               <button
                 className="icon-button"

apps/obsidian/src/constants.ts

@@ -6,16 +6,19 @@ export const DEFAULT_NODE_TYPES: Record<string, DiscourseNode> = {
     id: generateUid("node"),
     name: "Question",
     format: "QUE - {content}",
+    color: "#99890e",
   },
   Claim: {
     id: generateUid("node"),
     name: "Claim",
     format: "CLM - {content}",
+    color: "#7DA13E",
   },
   Evidence: {
     id: generateUid("node"),
     name: "Evidence",
     format: "EVD - {content}",
+    color: "#DB134A",
   },
 };
 export const DEFAULT_RELATION_TYPES: Record<string, DiscourseRelationType> = {