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/slack/preview/SlackReactionPreview.tsx

@@ -1,26 +1,41 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
-import { Detail, ActionPanel, Action } from "@raycast/api";
-import { SlackReaction } from "../types";
-import { useMemo } from "react";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
+import { SlackReaction, SlackReactionState } from "../types";
+import { Notification } from "../../../notification";
+import { slackMessageToMarkdown } from "../markdown";
+import { Color, Detail } from "@raycast/api";
+import { match } from "ts-pattern";
 
 interface SlackReactionPreviewProps {
   notification: Notification;
   slack_reaction: SlackReaction;
 }
 
-export function SlackReactionPreview({ notification }: SlackReactionPreviewProps) {
-  const notificationHtmlUrl = useMemo(() => {
-    return getNotificationHtmlUrl(notification);
-  }, [notification]);
-
-  return (
-    <Detail
-      markdown={`# ${notification.title}`}
-      actions={
-        <ActionPanel>
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
-        </ActionPanel>
-      }
-    />
-  );
+function reactionContent(reaction: SlackReaction): { body: string; channel?: string } {
+  return match(reaction.item)
+    .with({ type: "Message" }, (item) => ({
+      body: slackMessageToMarkdown(item.content.message),
+      channel: item.content.channel.name,
+    }))
+    .with({ type: "File" }, (item) => ({ body: "_Reacted file_", channel: item.content.channel.name }))
+    .exhaustive();
+}
+
+export function SlackReactionPreview({ notification, slack_reaction }: SlackReactionPreviewProps) {
+  const { body, channel } = reactionContent(slack_reaction);
+  const markdown = `# ${notification.title}\n\n:${slack_reaction.name}:\n\n${body}`;
+
+  const metadata = (
+    <>
+      <Detail.Metadata.TagList title="State">
+        <Detail.Metadata.TagList.Item
+          text={slack_reaction.state === SlackReactionState.ReactionAdded ? "Added" : "Removed"}
+          color={slack_reaction.state === SlackReactionState.ReactionAdded ? Color.Green : Color.SecondaryText}
+        />
+      </Detail.Metadata.TagList>
+      <Detail.Metadata.Label title="Reaction" text={`:${slack_reaction.name}:`} />
+      {channel ? <Detail.Metadata.Label title="Channel" text={`#${channel}`} /> : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }