wip

2026-08-29 10:05:03 +08:00 · 2026-08-08 22:25:33 +01:00
parent 92b6513f39
commit fed7d78495
29 changed files with 1091 additions and 122 deletions
@@ -0,0 +1,138 @@
+import { NodeViewWrapper } from "@tiptap/react";
+import { Avatar, Badge, Text } from "@mantine/core";
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import { getIntegrationIcon } from "@/features/integration/components/integration-icons";
+import { useUnfurl } from "./use-unfurl";
+import { toBadgeColor } from "./badge-color";
+import classes from "./integration-link-view.module.css";
+
+function shortUrl(url: string): string {
+  try {
+    const parsed = new URL(url);
+    return `${parsed.host}${parsed.pathname}`;
+  } catch {
+    return url;
+  }
+}
+
+function IntegrationMentionView(props: any) {
+  const { node, updateAttributes } = props;
+  const { url, provider, unfurlData, status } = node.attrs;
+  const { t } = useTranslation();
+
+  useUnfurl(url, status, updateAttributes);
+
+  const data = unfurlData;
+  const meta = data?.metadata ?? {};
+  const isSlackMessage =
+    provider === "slack" && (meta.type === "message" || (!meta.type && meta.ts));
+  const issueNumber = meta.iid ?? meta.number;
+  const typeLabel =
+    meta.type === "project"
+      ? t("Project")
+      : meta.type === "initiative"
+        ? t("Initiative")
+        : null;
+
+  const statusBadge = data?.status ? (
+    <Badge
+      size="xs"
+      variant="light"
+      color={toBadgeColor(data.statusColor)}
+      className={classes.mentionIcon}
+    >
+      {data.status}
+    </Badge>
+  ) : null;
+
+  let content;
+  if (!data) {
+    // pending / error / needs-connection: a compact link chip
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <span className={classes.mentionText}>{shortUrl(url)}</span>
+      </>
+    );
+  } else if (isSlackMessage) {
+    content = (
+      <>
+        <Avatar
+          src={data.authorAvatarUrl}
+          size={16}
+          radius="xl"
+          className={classes.mentionIcon}
+        >
+          {(data.author ?? "?").charAt(0)}
+        </Avatar>
+        {data.author && (
+          <Text component="span" size="sm" c="dimmed">
+            {data.author}
+          </Text>
+        )}
+        <span className={classes.mentionText}>
+          {(data.description ?? "").split("\n")[0] || shortUrl(url)}
+        </span>
+        {getIntegrationIcon("slack", 14)}
+        {data.status && (
+          <Badge
+            size="xs"
+            variant="light"
+            color="gray"
+            tt="none"
+            className={classes.mentionIcon}
+          >
+            {data.status}
+          </Badge>
+        )}
+      </>
+    );
+  } else if (issueNumber) {
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <Text component="span" size="sm" c="dimmed">
+          #{issueNumber}
+        </Text>
+        <span className={classes.mentionText}>{data.title}</span>
+        {statusBadge}
+      </>
+    );
+  } else if (typeLabel) {
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <Text component="span" size="sm" c="dimmed">
+          {typeLabel}
+        </Text>
+        <span className={classes.mentionText}>{data.title}</span>
+        {statusBadge}
+      </>
+    );
+  } else {
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <span className={classes.mentionText}>{data.title || shortUrl(url)}</span>
+        {statusBadge}
+      </>
+    );
+  }
+
+  return (
+    <NodeViewWrapper as="span" style={{ display: "inline" }}>
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener"
+        title={url}
+        className={classes.mention}
+      >
+        {content}
+      </a>
+    </NodeViewWrapper>
+  );
+}
+
+export default memo(IntegrationMentionView);