fix: show download buttons on image albums

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
+import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
 import { downloadAttachment } from "../utils/downloadFile";
@@ -147,21 +148,26 @@ export function AlbumBubble({ post }: { post: Post }) {
     return (
       <div className="flex flex-col gap-1.5">
         {images.map((att, i) => (
-          <button
+          <div
             key={att.id}
-            type="button"
+            className="relative max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
-            onClick={() => openLightbox(images, i, text, post.id)}
-            className="relative block max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
-            aria-label={att.filename}
           >
-            <img
+            <button
-              src={att.url}
+              type="button"
-              alt={att.filename}
+              onClick={() => openLightbox(images, i, text, post.id)}
-              loading="lazy"
+              className="block w-full"
-              className="h-full w-full object-cover"
+              aria-label={att.filename}
-              style={{ aspectRatio: imageRatio(att) }}
+            >
-            />
+              <img
-          </button>
+                src={att.url}
+                alt={att.filename}
+                loading="lazy"
+                className="h-full w-full object-cover"
+                style={{ aspectRatio: imageRatio(att) }}
+              />
+            </button>
+            <AttachmentDownloadPill postId={post.id} attachment={att} />
+          </div>
         ))}
         {text ? (
           <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
@@ -181,30 +187,37 @@ export function AlbumBubble({ post }: { post: Post }) {
         {visible.map((att, i) => {
           const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
           return (
-            <button
+            <div
               key={att.id}
-              type="button"
+              className="relative h-full w-full overflow-hidden"
-              onClick={() => {
-                if (isLastSlot) setListOpen(true);
-                else openLightbox(images, i, text, post.id);
-              }}
-              className="relative block h-full w-full overflow-hidden"
-              aria-label={isLastSlot ? "Open image list" : att.filename}
             >
-              <img
+              <button
-                src={att.thumbnailUrl ?? att.url}
+                type="button"
-                alt={att.filename}
+                onClick={() => {
-                loading="lazy"
+                  if (isLastSlot) setListOpen(true);
-                className={`h-full w-full object-cover ${
+                  else openLightbox(images, i, text, post.id);
-                  isLastSlot ? "blur-sm scale-105" : ""
+                }}
-                }`}
+                className="block h-full w-full"
-              />
+                aria-label={isLastSlot ? "Open image list" : att.filename}
-              {isLastSlot ? (
+              >
-                <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white">
+                <img
-                  +{extra}
+                  src={att.thumbnailUrl ?? att.url}
-                </div>
+                  alt={att.filename}
+                  loading="lazy"
+                  className={`h-full w-full object-cover ${
+                    isLastSlot ? "blur-sm scale-105" : ""
+                  }`}
+                />
+                {isLastSlot ? (
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white">
+                    +{extra}
+                  </div>
+                ) : null}
+              </button>
+              {!isLastSlot ? (
+                <AttachmentDownloadPill postId={post.id} attachment={att} />
               ) : null}
-            </button>
+            </div>
           );
         })}
       </div>