feature: render each label independently with colors

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "biome.lspBin": "/home/jamiebrynes/workspace/obsidian-todoist-plugin/plugin/node_modules/@biomejs/cli-linux-x64-musl/biome",
+  "biome.lspBin": "./plugin/node_modules/@biomejs/biome/bin/biome",
   "[typescript]": {
     "editor.defaultFormatter": "biomejs.biome"
   },

plugin/src/api/domain/label.ts

@@ -3,4 +3,5 @@ export type LabelId = string;
 export type Label = {
   id: LabelId;
   name: string;
+  color: string;
 };

plugin/src/data/index.ts

@@ -27,6 +27,12 @@ type DataAccessor = {
   labels: RepositoryReader<LabelId, Label>;
 };
 
+class LabelsRepository extends Repository<LabelId, Label> {
+  byName(name: string): Label | undefined {
+    return [...this.iter()].find((label) => label.name === name);
+  }
+}
+
 export class TodoistAdapter {
   public actions = {
     closeTask: async (id: TaskId) => await this.closeTask(id),
@@ -37,7 +43,7 @@ export class TodoistAdapter {
   private readonly api: Maybe<TodoistApiClient> = Maybe.Empty();
   private readonly projects: Repository<ProjectId, Project>;
   private readonly sections: Repository<SectionId, Section>;
-  private readonly labels: Repository<LabelId, Label>;
+  private readonly labels: LabelsRepository;
   private readonly subscriptions: SubscriptionManager<Subscription>;
 
   private readonly tasksPendingClose: TaskId[];
@@ -47,7 +53,7 @@ export class TodoistAdapter {
   constructor() {
     this.projects = new Repository(() => this.api.withInner((api) => api.getProjects()));
     this.sections = new Repository(() => this.api.withInner((api) => api.getSections()));
-    this.labels = new Repository(() => this.api.withInner((api) => api.getLabels()));
+    this.labels = new LabelsRepository(() => this.api.withInner((api) => api.getLabels()));
     this.subscriptions = new SubscriptionManager<Subscription>();
     this.tasksPendingClose = [];
   }
@@ -108,6 +114,8 @@ export class TodoistAdapter {
       ? this.sections.byId(apiTask.sectionId) ?? makeUnknownSection(apiTask.sectionId)
       : undefined;
 
+    const labels = apiTask.labels.map((id) => this.labels.byName(id) ?? makeUnknownLabel());
+
     return {
       id: apiTask.id,
       createdAt: apiTask.createdAt,
@@ -119,7 +127,7 @@ export class TodoistAdapter {
       section: section,
       parentId: apiTask.parentId ?? undefined,
 
-      labels: apiTask.labels,
+      labels: labels,
       priority: apiTask.priority,
 
       due: apiTask.due ?? undefined,
@@ -173,6 +181,14 @@ const makeUnknownSection = (id: string): Section => {
   };
 };
 
+const makeUnknownLabel = (): Label => {
+  return {
+    id: "unknown-label",
+    name: "Unknown Label",
+    color: "grey",
+  };
+};
+
 type SubscriptionFetcher = () => Promise<Task[]>;
 
 class Subscription {

plugin/src/data/task.ts

@@ -1,3 +1,4 @@
+import type { Label } from "@/api/domain/label";
 import type { DueDate } from "../api/domain/dueDate";
 import type { Project } from "../api/domain/project";
 import type { Section } from "../api/domain/section";
@@ -14,7 +15,7 @@ export type Task = {
   section?: Section;
   parentId?: TaskId;
 
-  labels: string[];
+  labels: Label[];
   priority: Priority;
 
   due?: DueDate;

plugin/src/data/transformations/grouping.test.ts

@@ -1,3 +1,4 @@
+import type { Label } from "@/api/domain/label";
 import { describe, expect, it, vi } from "vitest";
 import type { DueDate } from "../../api/domain/dueDate";
 import type { Project } from "../../api/domain/project";
@@ -57,6 +58,14 @@ function makeDueDate(date: string): DueDate {
   };
 }
 
+function makeLabel(name: string): Label {
+  return {
+    id: name,
+    name,
+    color: "grey",
+  };
+}
+
 type TestCase = {
   description: string;
   input: Task[];
@@ -294,54 +303,62 @@ describe("group by date", () => {
 });
 
 describe("group by label", () => {
+  const labelOne = makeLabel("foo");
+  const labelTwo = makeLabel("bar");
   const testcases: TestCase[] = [
     {
       description: "should group tasks by labels",
       input: [
-        makeTask("a", { labels: ["foo"] }),
-        makeTask("b", { labels: ["foo"] }),
-        makeTask("c", { labels: ["bar"] }),
+        makeTask("a", { labels: [labelOne] }),
+        makeTask("b", { labels: [labelOne] }),
+        makeTask("c", { labels: [labelTwo] }),
       ],
       expected: [
         {
           header: "bar",
-          tasks: [makeTask("c", { labels: ["bar"] })],
+          tasks: [makeTask("c", { labels: [labelTwo] })],
         },
         {
           header: "foo",
-          tasks: [makeTask("a", { labels: ["foo"] }), makeTask("b", { labels: ["foo"] })],
+          tasks: [makeTask("a", { labels: [labelOne] }), makeTask("b", { labels: [labelOne] })],
         },
       ],
     },
     {
       description: "should place task in multiple groups for multiple labels",
       input: [
-        makeTask("a", { labels: ["foo"] }),
-        makeTask("b", { labels: ["foo", "bar"] }),
-        makeTask("c", { labels: ["bar"] }),
+        makeTask("a", { labels: [labelOne] }),
+        makeTask("b", { labels: [labelOne, labelTwo] }),
+        makeTask("c", { labels: [labelTwo] }),
       ],
       expected: [
         {
           header: "bar",
-          tasks: [makeTask("b", { labels: ["foo", "bar"] }), makeTask("c", { labels: ["bar"] })],
+          tasks: [
+            makeTask("b", { labels: [labelOne, labelTwo] }),
+            makeTask("c", { labels: [labelTwo] }),
+          ],
         },
         {
           header: "foo",
-          tasks: [makeTask("a", { labels: ["foo"] }), makeTask("b", { labels: ["foo", "bar"] })],
+          tasks: [
+            makeTask("a", { labels: [labelOne] }),
+            makeTask("b", { labels: [labelOne, labelTwo] }),
+          ],
         },
       ],
     },
     {
       description: "should group tasks w/ no labels and place at the end",
       input: [
-        makeTask("a", { labels: ["foo"] }),
-        makeTask("b", { labels: ["foo"] }),
+        makeTask("a", { labels: [labelOne] }),
+        makeTask("b", { labels: [labelOne] }),
         makeTask("c"),
       ],
       expected: [
         {
           header: "foo",
-          tasks: [makeTask("a", { labels: ["foo"] }), makeTask("b", { labels: ["foo"] })],
+          tasks: [makeTask("a", { labels: [labelOne] }), makeTask("b", { labels: [labelOne] })],
         },
         {
           header: "No label",

plugin/src/data/transformations/grouping.ts

@@ -214,11 +214,11 @@ function groupByLabel(tasks: Task[]): GroupedTasks[] {
       return -1;
     }
 
-    return aLabel.localeCompare(bLabel);
+    return aLabel.name.localeCompare(bLabel.name);
   });
   return groups.map(([label, tasks]) => {
     return {
-      header: label ?? "No label",
+      header: label?.name ?? "No label",
       tasks,
     };
   });

plugin/src/index.ts

@@ -1,6 +1,6 @@
+import "@/styles/main.scss";
 import { App, Plugin } from "obsidian";
 import type { PluginManifest } from "obsidian";
-import "../styles.css";
 import { TodoistApiClient } from "./api";
 import { ObsidianFetcher } from "./api/fetcher";
 import { registerCommands } from "./commands";

plugin/src/styles/colors.scss

@@ -0,0 +1,22 @@
+$todoist-colors: (
+  "berry-red": #b8256f,
+  "red": #db4035,
+  "orange": #ff9933,
+  "yellow": #fad000,
+  "olive-green": #afb83b,
+  "lime-green": #7ecc49,
+  "green": #299438,
+  "mint-green": #6accbc,
+  "teal": #158fad,
+  "sky-blue": #14aaf5,
+  "light-blue": #96c3eb,
+  "blue": #4073ff,
+  "grape": #884dff,
+  "violet": #af38eb,
+  "lavender": #eb96eb,
+  "magenta": #e05194,
+  "salmon": #ff8d85,
+  "charcoal": #808080,
+  "grey": #b8b8b8,
+  "taupe": #ccac93,
+);

plugin/src/styles/main.scss

@@ -0,0 +1,47 @@
+@import "colors";
+
+body {
+  @each $name, $color in $todoist-colors {
+    --todoist-#{$name}: #{$color};
+  }
+}
+
+.theme-dark {
+  --todoist-p1-border: #ff7066;
+  --todoist-p1-border-hover: #ff706680;
+  --todoist-p1-background: rgba(255, 112, 102, 0.1);
+
+  --todoist-p2-border: #ff9a14;
+  --todoist-p2-border-hover: #ff9a1480;
+  --todoist-p2-background: rgba(255, 154, 20, 0.1);
+
+  --todoist-p3-border: #5297ff;
+  --todoist-p3-border-hover: #5297ff80;
+  --todoist-p3-background: rgba(82, 151, 255, 0.1);
+
+  --todoist-p4-border: var(--color-base-50);
+  --todoist-p4-border-hover: var(--color-base-50);
+  --todoist-p4-background: unset;
+
+  --todoist-task-separator-color: var(--color-base-30);
+}
+
+.theme-light {
+  --todoist-p1-border: #d1453b;
+  --todoist-p1-border-hover: #d1453b80;
+  --todoist-p1-background: rgba(209, 69, 59, 0.1);
+
+  --todoist-p2-border: #eb8909;
+  --todoist-p2-border-hover: #eb890980;
+  --todoist-p2-background: rgba(235, 137, 9, 0.1);
+
+  --todoist-p3-border: #246fe0;
+  --todoist-p3-border-hover: #246fe080;
+  --todoist-p3-background: rgba(36, 111, 224, 0.1);
+
+  --todoist-p4-border: var(--color-base-50);
+  --todoist-p4-border-hover: var(--color-base-50);
+  --todoist-p4-background: unset;
+
+  --todoist-task-separator-color: var(--color-base-25);
+}