Give each task an assigned colour across the UI; lead links tasks

web/src/project.ts

@@ -3,6 +3,7 @@ import { errorText, h, replace, showAlert } from "./dom.js";
 import { markdown } from "./markdown.js";
 import { models } from "./task.js";
 import { currentSession, focusedProject, focusTask, on, onEach, state } from "./state.js";
+import { taskStyle } from "./taskcolor.js";
 
 type Todo = Schemas["Todo"];
 type TodoItem = Schemas["TodoItem"];
@@ -118,7 +119,7 @@ function tasksBlock(active: Task[]): HTMLElement {
       const count = state.inbox.filter((item) => item.task_id === task.id).length;
       return h(
         "li",
-        { class: task.id === state.selectedTaskId ? "selected" : "" },
+        { class: task.id === state.selectedTaskId ? "selected" : "", style: taskStyle(task.id) },
         h(
           "a",
           {
@@ -129,7 +130,7 @@ function tasksBlock(active: Task[]): HTMLElement {
             },
           },
           h("span", { class: `dot ${sess?.state ?? "none"}`, title: sess?.state ?? "no session" }),
-          h("span", { class: "task-title" }, task.title),
+          h("span", { class: "task-title task-name" }, task.title),
           count > 0 && h("span", { class: "badge", title: "inbox items" }, count),
           task.merge_queued_at !== undefined && h("span", { class: "task-state warn", title: "Waiting for the merge in progress in this project to finish" }, "merge held"),
           h("span", { class: "task-state" }, sess?.state ?? "no agent"),
@@ -193,8 +194,8 @@ function todoBlock(project: Project, todo: Todo | string | undefined, active: Ta
     list.append(
       h(
         "li",
-        { class: task && task.id === state.selectedTaskId ? "selected" : "" },
-        h("div", { class: "todo-head" }, h("span", { class: "todo-title" }, item.title), action),
+        { class: task && task.id === state.selectedTaskId ? "selected" : "", style: task ? taskStyle(task.id) : "" },
+        h("div", { class: "todo-head" }, h("span", { class: task ? "todo-title task-name" : "todo-title" }, item.title), action),
         item.body && markdown(item.body, "md todo-body"),
       ),
     );