web: add lightweight inline link preview cards in messages

web/src/components/MessageList.tsx

@@ -1264,7 +1264,23 @@ function renderMessageContent(
   if (!text) {
     return <p className="opacity-80">[empty]</p>;
   }
-  return <p className="whitespace-pre-wrap break-words" dangerouslySetInnerHTML={{ __html: formatMessageHtml(text) }} />;
+  const firstUrl = extractFirstUrl(text);
+  return (
+    <div className="space-y-1.5">
+      <p className="whitespace-pre-wrap break-words" dangerouslySetInnerHTML={{ __html: formatMessageHtml(text) }} />
+      {firstUrl ? (
+        <a
+          className="block rounded-xl border border-slate-600/70 bg-slate-900/55 px-3 py-2 transition-colors hover:bg-slate-800/70"
+          href={firstUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <p className="truncate text-[11px] uppercase tracking-wide text-slate-400">{extractDomain(firstUrl)}</p>
+          <p className="truncate text-sm font-medium text-sky-300">{truncateLink(firstUrl, 88)}</p>
+        </a>
+      ) : null}
+    </div>
+  );
 }
 
 function renderStatus(status: string | undefined): string {
@@ -1295,6 +1311,38 @@ function isStickerOrGifMedia(url: string): boolean {
   return /\.gif($|\?)/.test(value);
 }
 
+function extractFirstUrl(text: string): string | null {
+  const match = text.match(/\bhttps?:\/\/[^\s<>"')]+/i);
+  if (!match) {
+    return null;
+  }
+  const candidate = match[0].trim();
+  try {
+    const parsed = new URL(candidate);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.toString();
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+function extractDomain(url: string): string {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return "Link";
+  }
+}
+
+function truncateLink(url: string, limit: number): string {
+  if (url.length <= limit) {
+    return url;
+  }
+  return `${url.slice(0, Math.max(0, limit - 1))}…`;
+}
+
 function chatLabel(chat: { display_title?: string | null; title: string | null; type: "private" | "group" | "channel"; is_saved?: boolean }): string {
   if (chat.display_title?.trim()) return chat.display_title;
   if (chat.title?.trim()) return chat.title;