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

web/dist/panes.js

@@ -29,11 +29,18 @@ export function taskPane() {
     const body = h("div", { class: "pane-body" });
     const picker = h("button", { class: "task-picker", title: "Switch task (⌘K)" });
     picker.onclick = openSwitcher;
+    const pane = h("section", { class: "pane task-pane", tabIndex: -1 }, strip, body);
     let shown;
     let dispose = () => { };
     const renderPicker = () => {
         const task = state.selectedTaskId ? findTask(state.selectedTaskId) : undefined;
         const project = focusedProject();
+        if (task) {
+            pane.style.setProperty("--task", `var(--task-${task.color})`);
+        }
+        else {
+            pane.style.removeProperty("--task");
+        }
         replace(picker, task ? `${project?.name ?? ""} ▸ ${task.title}` : (project?.name ?? "No task"), " ▾");
     };
     const render = () => {
@@ -60,7 +67,6 @@ export function taskPane() {
     onEach(["projects", "tasks", "selection", "focus"], renderPicker);
     render();
     renderPicker();
-    const pane = h("section", { class: "pane", tabIndex: -1 }, strip, body);
     trackPaneFocus(pane);
     return pane;
 }