From 15bcb6bdf0dd7fbd60b9a93cd9cf82c33d5ddbbc Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sat, 30 May 2026 00:52:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9B=B8=E5=86=8C=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E8=83=B6=E5=9B=8A=E8=87=AA=E9=80=82=E5=BA=94=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?(=E9=9A=8F=E5=9B=BE=E5=9D=97=E5=A4=A7=E5=B0=8F=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AttachmentDownloadPill 新增 adaptive 模式:用容器查询单位 cqw + clamp,
  尺寸随所在容器宽度缩放(图标框 22~30px、图标 13~18px、文字 10~12px)
- 相册图块设 container-type: inline-size 作为查询容器,小缩略图上的下载按钮
  自动缩小;单图/视频默认固定尺寸不受影响

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../messageStream/AttachmentDownloadPill.tsx  | 33 ++++++++++++++++---
 .../messageStream/bubbles/AlbumBubble.tsx     |  8 ++++-
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/messageStream/AttachmentDownloadPill.tsx b/src/components/messageStream/AttachmentDownloadPill.tsx
index 9822131..f484304 100644
--- a/src/components/messageStream/AttachmentDownloadPill.tsx
+++ b/src/components/messageStream/AttachmentDownloadPill.tsx
@@ -12,6 +12,14 @@ type AttachmentDownloadPillProps = {
   attachment: Attachment;
   leadingLabel?: string;
   className?: string;
+  /**
+   * When true, the pill scales with its container's width via container-query
+   * units (clamped to a min/max). The host element must establish a query
+   * container (e.g. `style={{ containerType: "inline-size" }}`). Use this on
+   * album tiles so the pill shrinks on small thumbnails. Defaults to a fixed
+   * size for standalone images/videos.
+   */
+  adaptive?: boolean;
 };
 
 export function AttachmentDownloadPill({
@@ -19,6 +27,7 @@ export function AttachmentDownloadPill({
   attachment,
   leadingLabel,
   className = "absolute left-2 top-2",
+  adaptive = false,
 }: AttachmentDownloadPillProps) {
   const { t } = useI18n();
   const { showToast } = useToast();
@@ -38,28 +47,42 @@ export function AttachmentDownloadPill({
     }
   };
 
+  // Fixed default vs. container-query-driven adaptive sizing (clamped).
+  const fontCls = adaptive ? "text-[clamp(10px,5cqw,12px)]" : "text-[12px]";
+  const squareCls = adaptive
+    ? "h-[clamp(22px,11cqw,30px)] w-[clamp(22px,11cqw,30px)]"
+    : "h-[30px] w-[30px]";
+  const iconCls = adaptive
+    ? "h-[clamp(13px,6.5cqw,18px)] w-[clamp(13px,6.5cqw,18px)]"
+    : "h-[18px] w-[18px]";
+  const textBoxCls = adaptive
+    ? "h-[clamp(22px,11cqw,30px)] px-[clamp(6px,3cqw,10px)]"
+    : "h-[30px] px-2.5";
+
   return (
     <button
       type="button"
       onClick={handleDownload}
       disabled={isDownloading}
-      className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 text-[12px] text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
+      className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 ${fontCls} text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
       aria-label={
         isDownloading ? t("downloading") : `Download ${attachment.filename}`
       }
       aria-busy={isDownloading}
     >
-      <span className="flex h-[30px] w-[30px] items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70">
+      <span
+        className={`flex ${squareCls} items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70`}
+      >
         {isDownloading ? (
           <LoaderCircle
-            className="h-[18px] w-[18px] animate-spin"
+            className={`${iconCls} animate-spin`}
             strokeWidth={2.3}
           />
         ) : (
-          <DownloadCloudIcon className="h-[18px] w-[18px]" />
+          <DownloadCloudIcon className={iconCls} />
         )}
       </span>
-      <span className="flex h-[30px] items-center gap-0.5 px-2.5">
+      <span className={`flex ${textBoxCls} items-center gap-0.5`}>
         {isDownloading ? (
           t("downloading")
         ) : (
diff --git a/src/components/messageStream/bubbles/AlbumBubble.tsx b/src/components/messageStream/bubbles/AlbumBubble.tsx
index fe1c68d..6720d05 100644
--- a/src/components/messageStream/bubbles/AlbumBubble.tsx
+++ b/src/components/messageStream/bubbles/AlbumBubble.tsx
@@ -51,6 +51,8 @@ export function AlbumBubble({ post }: { post: Post }) {
                 top: `${tile.top * 100}%`,
                 width: `calc(${tile.width * 100}% - ${ALBUM_GAP}px)`,
                 height: `calc(${tile.height * 100}% - ${ALBUM_GAP}px)`,
+                // Query container so the download pill scales with this tile.
+                containerType: "inline-size",
               }}
             >
               <button
@@ -76,7 +78,11 @@ export function AlbumBubble({ post }: { post: Post }) {
                 ) : null}
               </button>
               {!isLastSlot ? (
-                <AttachmentDownloadPill postId={post.id} attachment={att} />
+                <AttachmentDownloadPill
+                  postId={post.id}
+                  attachment={att}
+                  adaptive
+                />
               ) : null}
             </div>
           );