Share media attachment download pill

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -1,17 +1,13 @@
-import { ArrowDownToLine, LoaderCircle } from "lucide-react";
-import { useState } from "react";
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { useLightbox } from "../overlays/ImageLightbox";
+import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { autolink } from "../utils/autolink";
-import { downloadAttachment } from "../utils/downloadFile";
-import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
 export function ImageWithTextBubble({ post }: { post: Post }) {
   const { openLightbox } = useLightbox();
-  const { lang, t } = useI18n();
-  const [isDownloading, setIsDownloading] = useState(false);
+  const { lang } = useI18n();
   const att = post.attachments[0];
   const text = postDisplayText(post, lang);
   if (!att) return null;
@@ -34,34 +30,7 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
           style={{ aspectRatio: ratio }}
         />
       </button>
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          if (isDownloading) return;
-          setIsDownloading(true);
-          void downloadAttachment(post.id, att.id, att.filename)
-            .finally(() => setIsDownloading(false))
-            .catch(() => {});
-        }}
-        disabled={isDownloading}
-        className="group absolute left-3 top-3 z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-xs text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60 disabled:cursor-wait"
-        aria-label={
-          isDownloading ? t("downloading") : `Download ${att.filename}`
-        }
-        aria-busy={isDownloading}
-      >
-        <span className="flex h-8 w-8 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
-          {isDownloading ? (
-            <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
-          ) : (
-            <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
-          )}
-        </span>
-        <span className="flex h-8 items-center gap-1 px-2.5">
-          {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
-        </span>
-      </button>
+      <AttachmentDownloadPill postId={post.id} attachment={att} />
       {text ? (
         <div className="bg-gradient-to-b from-ark-panel/90 to-ark-panel px-4 py-3 text-[14px] leading-snug text-neutral-100">
           <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words">