From 14c3defd239e2410754f50552205f5e26ae04984 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 29 May 2026 12:38:50 +0800
Subject: [PATCH] feat: show attachment preview thumbnail in document bubble

Use thumbnailUrl/posterUrl (and the image url itself for image-type
attachments) inside the 52x52 box of the file/document bubble, falling
back to the file-type icon when no preview is available.

Also tune the deep-link scroll-mt offset (82px / 98px) so a targeted
bubble lands just below the sticky header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../messageStream/MessageBubble.tsx           |  2 +-
 .../messageStream/bubbles/FileDocBubble.tsx   | 27 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/messageStream/MessageBubble.tsx b/src/components/messageStream/MessageBubble.tsx
index 6dda60f..5dbfc93 100644
--- a/src/components/messageStream/MessageBubble.tsx
+++ b/src/components/messageStream/MessageBubble.tsx
@@ -35,7 +35,7 @@ export function MessageBubble({ post }: { post: Post }) {
   return (
     <div
       id={`post-${post.id}`}
-      className="mx-auto w-full max-w-[358px] scroll-mt-20 md:max-w-[680px] md:scroll-mt-24 lg:max-w-[900px] xl:max-w-[1120px]"
+      className="mx-auto w-full max-w-[358px] scroll-mt-[82px] md:max-w-[680px] md:scroll-mt-[98px] lg:max-w-[900px] xl:max-w-[1120px]"
     >
       <article
         className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${
diff --git a/src/components/messageStream/bubbles/FileDocBubble.tsx b/src/components/messageStream/bubbles/FileDocBubble.tsx
index 5642c57..fa8e492 100644
--- a/src/components/messageStream/bubbles/FileDocBubble.tsx
+++ b/src/components/messageStream/bubbles/FileDocBubble.tsx
@@ -33,15 +33,28 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
     }
   };
 
+  const isImage = att.kind === "image" || att.mime.startsWith("image/");
+  const previewUrl =
+    att.thumbnailUrl ?? att.posterUrl ?? (isImage ? att.url : undefined);
+
   return (
     <div className="group flex h-[52px] items-center gap-3">
-      <div
-        className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
-        style={{ backgroundColor: color }}
-        aria-hidden="true"
-      >
-        <Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
-      </div>
+      {previewUrl ? (
+        <img
+          src={previewUrl}
+          alt={displayFilename}
+          loading="lazy"
+          className="h-[52px] w-[52px] shrink-0 rounded-full object-cover"
+        />
+      ) : (
+        <div
+          className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
+          style={{ backgroundColor: color }}
+          aria-hidden="true"
+        >
+          <Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
+        </div>
+      )}
       <div className="min-w-0 flex-1">
         <div
           className="truncate text-[15px] font-medium leading-6 text-ark-gold group-hover:text-ark-gold2"
-- 
2.49.1