add color setting

apps/obsidian/src/components/RelationshipTypeSettings.tsx

@@ -12,15 +12,15 @@ const RelationshipTypeSettings = () => {
   );
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  const handleRelationTypeChange = async (
+  const handleRelationTypeChange = (
     index: number,
     field: keyof DiscourseRelationType,
     value: string,
-  ): Promise<void> => {
+  ): void => {
     const updatedRelationTypes = [...relationTypes];
     if (!updatedRelationTypes[index]) {
       const newId = generateUid("rel");
-      updatedRelationTypes[index] = { id: newId, label: "", complement: "" };
+      updatedRelationTypes[index] = { id: newId, label: "", complement: "", color: "black" };
     }
 
     updatedRelationTypes[index][field] = value;
@@ -37,6 +37,7 @@ const RelationshipTypeSettings = () => {
         id: newId,
         label: "",
         complement: "",
+        color: "black",
       },
     ];
     setRelationTypes(updatedRelationTypes);
@@ -77,7 +78,7 @@ const RelationshipTypeSettings = () => {
 
   const handleSave = async (): Promise<void> => {
     for (const relType of relationTypes) {
-      if (!relType.id || !relType.label || !relType.complement) {
+      if (!relType.id || !relType.label || !relType.complement || !relType.color) {
         new Notice("All fields are required for relation types.");
         return;
       }
@@ -125,6 +126,15 @@ const RelationshipTypeSettings = () => {
                 }
                 className="flex-1"
               />
+              <input
+                type="color"
+                value={relationType.color}
+                onChange={(e) =>
+                  handleRelationTypeChange(index, "color", e.target.value)
+                }
+                className="w-12 h-8 rounded border"
+                title="Relation color"
+              />
               <button
                 onClick={() => confirmDeleteRelationType(index)}
                 className="mod-warning p-2"

apps/obsidian/src/constants.ts

@@ -26,16 +26,19 @@ export const DEFAULT_RELATION_TYPES: Record<string, DiscourseRelationType> = {
     id: generateUid("relation"),
     label: "supports",
     complement: "is supported by",
+    color: "green",
   },
   opposes: {
     id: generateUid("relation"),
     label: "opposes",
     complement: "is opposed by",
+    color: "red",
   },
   informs: {
     id: generateUid("relation"),
     label: "informs",
     complement: "is informed by",
+    color: "blue",
   },
 };
 

apps/obsidian/src/types.ts

@@ -14,6 +14,7 @@ export type DiscourseRelationType = {
   id: string;
   label: string;
   complement: string;
+  color: string;
 };
 
 export type DiscourseRelation = {