feat: add missing integrations and rich notification previews

Add TickTick, Google Calendar, Google Drive and API (WebPage) notification
types, which the backend already supported but the extension ignored.

Fill the previously empty notification previews with content modeled on the
web app: a metadata sidebar (status, priority, assignee, labels, dates,
channel, etc.) plus a markdown body and comment/message threads. Add shared
helpers: PreviewDetail wrapper, TaskMetadata, Slack mrkdwn renderer, GitHub
check/review emoji, and date/HTML utils (cleanHtml strips raw HTML from
GitHub bodies).

The preview metadata "Type" row shows the source item type (Linear Issue,
GitHub Pull Request, Slack Thread, etc.).

Swap list-screen shortcuts: Enter shows details, Cmd+Enter opens in browser.

src/integrations/google-mail/preview/GoogleMailThreadPreview.tsx

@@ -1,26 +1,49 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
-import { Detail, ActionPanel, Action } from "@raycast/api";
-import { GoogleMailThread } from "../types";
-import { useMemo } from "react";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
+import { GoogleMailMessage, GoogleMailThread } from "../types";
+import { Notification } from "../../../notification";
+import { formatDateTime } from "../../../utils";
+import { Color, Detail } from "@raycast/api";
 
 interface GoogleMailThreadPreviewProps {
   notification: Notification;
   googleMailThread: GoogleMailThread;
 }
 
-export function GoogleMailThreadPreview({ notification }: GoogleMailThreadPreviewProps) {
-  const notificationHtmlUrl = useMemo(() => {
-    return getNotificationHtmlUrl(notification);
-  }, [notification]);
-
-  return (
-    <Detail
-      markdown={`# ${notification.title}`}
-      actions={
-        <ActionPanel>
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
-        </ActionPanel>
-      }
-    />
-  );
+function header(message: GoogleMailMessage, name: string): string | undefined {
+  return message.payload.headers.find((h) => h.name.toLowerCase() === name.toLowerCase())?.value;
+}
+
+export function GoogleMailThreadPreview({ notification, googleMailThread }: GoogleMailThreadPreviewProps) {
+  const messages = googleMailThread.messages;
+  const firstMessage = messages[0];
+  const subject = (firstMessage && header(firstMessage, "Subject")) || notification.title;
+
+  const isStarred = messages.some((m) => m.labelIds?.includes("STARRED"));
+  const isImportant = messages.some((m) => m.labelIds?.includes("IMPORTANT"));
+
+  const body = messages
+    .map((message) => {
+      const from = header(message, "From") ?? "Unknown sender";
+      const date = formatDateTime(message.internalDate);
+      return `**${from}** · ${date}\n\n${message.snippet}`;
+    })
+    .join("\n\n---\n\n");
+
+  const markdown = `# ${subject}\n\n${body}`;
+
+  const metadata = (
+    <>
+      {firstMessage ? <Detail.Metadata.Label title="From" text={header(firstMessage, "From") ?? "Unknown"} /> : null}
+      <Detail.Metadata.Label title="Subject" text={subject} />
+      <Detail.Metadata.Label title="Messages" text={`${messages.length}`} />
+      {isStarred || isImportant ? (
+        <Detail.Metadata.TagList title="Labels">
+          {isStarred ? <Detail.Metadata.TagList.Item text="Starred" color={Color.Yellow} /> : null}
+          {isImportant ? <Detail.Metadata.TagList.Item text="Important" color={Color.Red} /> : null}
+        </Detail.Metadata.TagList>
+      ) : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }