feat: Add Todoist notification list item

src/integrations/linear/listitem/LinearIssueNotificationListItem.tsx

@@ -9,14 +9,12 @@ import { List } from "@raycast/api";
 import { match } from "ts-pattern";
 
 interface LinearIssueNotificationListItemProps {
-  icon: string;
   notification: Notification;
   linearIssueNotification: LinearIssueNotification;
   mutate: MutatePromise<Page<Notification> | undefined>;
 }
 
 export function LinearIssueNotificationListItem({
-  icon,
   notification,
   linearIssueNotification,
   mutate,
@@ -39,7 +37,7 @@ export function LinearIssueNotificationListItem({
     <List.Item
       key={notification.id}
       title={notification.title}
-      icon={icon}
+      icon={{ source: { light: "linear-logo-dark.svg", dark: "linear-logo-light.svg" } }}
       accessories={accessories}
       subtitle={subtitle}
       actions={

src/integrations/linear/listitem/LinearNotificationListItem.tsx

@@ -1,24 +1,14 @@
 import { LinearProjectNotificationListItem } from "./LinearProjectNotificationListItem";
 import { LinearIssueNotificationListItem } from "./LinearIssueNotificationListItem";
 import { NotificationListItemProps } from "../../../notification";
-import { environment } from "@raycast/api";
-import { useMemo } from "react";
 
 export function LinearNotificationListItem({ notification, mutate }: NotificationListItemProps) {
-  const icon = useMemo(() => {
-    if (environment.appearance === "dark") {
-      return "linear-logo-light.svg";
-    }
-    return "linear-logo-dark.svg";
-  }, [environment]);
-
   if (notification.metadata.type !== "Linear") return null;
 
   switch (notification.metadata.content.type) {
     case "IssueNotification":
       return (
         <LinearIssueNotificationListItem
-          icon={icon}
           notification={notification}
           linearIssueNotification={notification.metadata.content.content}
           mutate={mutate}
@@ -27,7 +17,6 @@ export function LinearNotificationListItem({ notification, mutate }: Notificatio
     case "ProjectNotification":
       return (
         <LinearProjectNotificationListItem
-          icon={icon}
           notification={notification}
           linearProjectNotification={notification.metadata.content.content}
           mutate={mutate}

src/integrations/linear/listitem/LinearProjectNotificationListItem.tsx

@@ -1,30 +1,31 @@
+import { LinearProjectNotification, LinearProjectState, LinearProject } from "../types";
 import { NotificationActions } from "../../../action/NotificationActions";
 import { LinearProjectPreview } from "../preview/LinearProjectPreview";
 import { getLinearUserAccessory } from "../accessories";
 import { Notification } from "../../../notification";
-import { LinearProjectNotification } from "../types";
 import { MutatePromise } from "@raycast/utils";
+import { List, Color } from "@raycast/api";
 import { Page } from "../../../types";
-import { List } from "@raycast/api";
+import { match } from "ts-pattern";
 
 interface LinearProjectNotificationListItemProps {
-  icon: string;
   notification: Notification;
   linearProjectNotification: LinearProjectNotification;
   mutate: MutatePromise<Page<Notification> | undefined>;
 }
 
 export function LinearProjectNotificationListItem({
-  icon,
   notification,
   linearProjectNotification,
   mutate,
 }: LinearProjectNotificationListItemProps) {
   const subtitle = linearProjectNotification.project.name;
 
+  const state = getLinearProjectStateAccessory(linearProjectNotification.project);
   const lead = getLinearUserAccessory(linearProjectNotification.project.lead);
 
   const accessories: List.Item.Accessory[] = [
+    state,
     lead,
     {
       date: new Date(linearProjectNotification.updated_at),
@@ -36,7 +37,7 @@ export function LinearProjectNotificationListItem({
     <List.Item
       key={notification.id}
       title={notification.title}
-      icon={icon}
+      icon={{ source: { light: "linear-logo-dark.svg", dark: "linear-logo-light.svg" } }}
       accessories={accessories}
       subtitle={subtitle}
       actions={
@@ -51,3 +52,29 @@ export function LinearProjectNotificationListItem({
     />
   );
 }
+
+export function getLinearProjectStateAccessory(project: LinearProject): List.Item.Accessory {
+  return {
+    icon: match(project)
+      .with({ state: LinearProjectState.Planned }, () => {
+        return { source: "linear-project-planned.svg", tintColor: Color.SecondaryText };
+      })
+      .with({ state: LinearProjectState.Backlog }, () => {
+        return { source: "linear-project-backlog.svg", tintColor: Color.PrimaryText };
+      })
+      .with({ state: LinearProjectState.Started }, () => {
+        return { source: "linear-project-started.svg", tintColor: Color.Blue };
+      })
+      .with({ state: LinearProjectState.Paused }, () => {
+        return { source: "linear-project-paused.svg", tintColor: Color.PrimaryText };
+      })
+      .with({ state: LinearProjectState.Completed }, () => {
+        return { source: "linear-project-completed.svg", tintColor: Color.Magenta };
+      })
+      .with({ state: LinearProjectState.Canceled }, () => {
+        return { source: "linear-project-canceled.svg", tintColor: Color.SecondaryText };
+      })
+      .exhaustive(),
+    tooltip: project.state,
+  };
+}