feat: Add Google Mail thread list item

src/integrations/google-mail/listitem/GoogleMailNotificationListItem.tsx

@@ -0,0 +1,24 @@
+import { GoogleMailThreadListItem } from "./GoogleMailThreadListItem";
+import { NotificationListItemProps } from "../../../notification";
+import { environment } from "@raycast/api";
+import { useMemo } from "react";
+
+export function GoogleMailNotificationListItem({ notification, mutate }: NotificationListItemProps) {
+  const icon = useMemo(() => {
+    if (environment.appearance === "dark") {
+      return "google-mail-logo-light.svg";
+    }
+    return "google-mail-logo-dark.svg";
+  }, [environment]);
+
+  if (notification.metadata.type !== "GoogleMail") return null;
+
+  return (
+    <GoogleMailThreadListItem
+      icon={icon}
+      notification={notification}
+      googleMailThread={notification.metadata.content}
+      mutate={mutate}
+    />
+  );
+}

src/integrations/google-mail/listitem/GoogleMailThreadListItem.tsx

@@ -0,0 +1,65 @@
+import { GoogleMailThreadPreview } from "../preview/GoogleMailThreadPreview";
+import { NotificationActions } from "../../../action/NotificationActions";
+//import { getLinearUserAccessory } from "../accessories";
+import { Notification } from "../../../notification";
+import { Icon, Color, List } from "@raycast/api";
+import { MutatePromise } from "@raycast/utils";
+import { GoogleMailThread } from "../types";
+import { Page } from "../../../types";
+
+interface GoogleMailThreadListItemProps {
+  icon: string;
+  notification: Notification;
+  googleMailThread: GoogleMailThread;
+  mutate: MutatePromise<Page<Notification> | undefined>;
+}
+
+export function GoogleMailThreadListItem({
+  icon,
+  notification,
+  googleMailThread,
+  mutate,
+}: GoogleMailThreadListItemProps) {
+  const isStarred = googleMailThread.messages.some((message) => message.labelIds?.includes("STARRED"));
+  const isImportant = googleMailThread.messages.some((message) => message.labelIds?.includes("IMPORTANT"));
+  const fromAddress = googleMailThread.messages[0].payload.headers.find((header) => header.name === "From")?.value;
+  const subtitle = fromAddress;
+
+  const accessories: List.Item.Accessory[] = [
+    {
+      date: new Date(notification.updated_at),
+      tooltip: `Updated at ${notification.updated_at}`,
+    },
+  ];
+
+  if (isStarred) {
+    accessories.unshift({
+      icon: { source: Icon.Star, tintColor: Color.Yellow },
+      tooltip: "Starred",
+    });
+  }
+
+  if (isImportant) {
+    accessories.unshift({
+      icon: { source: Icon.Exclamationmark, tintColor: Color.Red },
+      tooltip: "Important",
+    });
+  }
+
+  return (
+    <List.Item
+      key={notification.id}
+      title={notification.title}
+      icon={icon}
+      accessories={accessories}
+      subtitle={subtitle}
+      actions={
+        <NotificationActions
+          notification={notification}
+          detailsTarget={<GoogleMailThreadPreview notification={notification} googleMailThread={googleMailThread} />}
+          mutate={mutate}
+        />
+      }
+    />
+  );
+}