Share media attachment download pill

src/components/messageStream/bubbles/ImageBubble.tsx

@@ -1,4 +1,5 @@
 import type { Post } from "../../../types/post";
+import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { useLightbox } from "../overlays/ImageLightbox";
 
 export function ImageBubble({ post }: { post: Post }) {
@@ -9,19 +10,22 @@ export function ImageBubble({ post }: { post: Post }) {
     att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
 
   return (
-    <button
-      type="button"
-      onClick={() => openLightbox([att], 0, undefined, post.id)}
-      className="relative block w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]"
-      aria-label={att.filename}
-    >
-      <img
-        src={att.url}
-        alt={att.filename}
-        loading="lazy"
-        className="h-full w-full object-cover"
-        style={{ aspectRatio: ratio }}
-      />
-    </button>
+    <div className="relative w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]">
+      <button
+        type="button"
+        onClick={() => openLightbox([att], 0, undefined, post.id)}
+        className="block w-full"
+        aria-label={att.filename}
+      >
+        <img
+          src={att.url}
+          alt={att.filename}
+          loading="lazy"
+          className="h-full w-full object-cover"
+          style={{ aspectRatio: ratio }}
+        />
+      </button>
+      <AttachmentDownloadPill postId={post.id} attachment={att} />
+    </div>
   );
 }