Share media attachment download pill

src/components/messageStream/AttachmentDownloadPill.tsx

@@ -0,0 +1,68 @@
+import { ArrowDownToLine, LoaderCircle } from "lucide-react";
+import { useState, type MouseEvent } from "react";
+import { useI18n } from "../../i18n";
+import type { Attachment } from "../../types/post";
+import { downloadAttachment } from "./utils/downloadFile";
+import { formatBytes } from "./utils/formatBytes";
+
+type AttachmentDownloadPillProps = {
+  postId: string;
+  attachment: Attachment;
+  leadingLabel?: string;
+  className?: string;
+};
+
+export function AttachmentDownloadPill({
+  postId,
+  attachment,
+  leadingLabel,
+  className = "absolute left-2 top-2",
+}: AttachmentDownloadPillProps) {
+  const { t } = useI18n();
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (isDownloading) return;
+    setIsDownloading(true);
+    void downloadAttachment(postId, attachment.id, attachment.filename)
+      .finally(() => setIsDownloading(false))
+      .catch(() => {});
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleDownload}
+      disabled={isDownloading}
+      className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-[10px] text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60 disabled:cursor-wait ${className}`}
+      aria-label={
+        isDownloading ? t("downloading") : `Download ${attachment.filename}`
+      }
+      aria-busy={isDownloading}
+    >
+      <span className="flex h-6 w-6 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
+        {isDownloading ? (
+          <LoaderCircle className="h-3 w-3 animate-spin" strokeWidth={2.3} />
+        ) : (
+          <ArrowDownToLine className="h-3 w-3" strokeWidth={2.3} />
+        )}
+      </span>
+      <span className="flex h-6 items-center gap-0.5 px-1.5">
+        {isDownloading ? (
+          t("downloading")
+        ) : (
+          <>
+            {leadingLabel ? (
+              <>
+                <span>{leadingLabel}</span>
+                <span className="opacity-60">·</span>
+              </>
+            ) : null}
+            <span>{formatBytes(attachment.sizeBytes)}</span>
+          </>
+        )}
+      </span>
+    </button>
+  );
+}

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
+    <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]">
-      type="button"
+      <button
-      onClick={() => openLightbox([att], 0, undefined, post.id)}
+        type="button"
-      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]"
+        onClick={() => openLightbox([att], 0, undefined, post.id)}
-      aria-label={att.filename}
+        className="block w-full"
-    >
+        aria-label={att.filename}
-      <img
+      >
-        src={att.url}
+        <img
-        alt={att.filename}
+          src={att.url}
-        loading="lazy"
+          alt={att.filename}
-        className="h-full w-full object-cover"
+          loading="lazy"
-        style={{ aspectRatio: ratio }}
+          className="h-full w-full object-cover"
-      />
+          style={{ aspectRatio: ratio }}
-    </button>
+        />
+      </button>
+      <AttachmentDownloadPill postId={post.id} attachment={att} />
+    </div>
   );
 }

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 { lang } = useI18n();
-  const [isDownloading, setIsDownloading] = useState(false);
   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
+      <AttachmentDownloadPill postId={post.id} attachment={att} />
-        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>
       {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">

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -1,11 +1,10 @@
-import { ArrowDownToLine, LoaderCircle, Play } from "lucide-react";
+import { Play } from "lucide-react";
 import { useRef, useState } from "react";
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { useVideoPlayer } from "../overlays/VideoPlayer";
+import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { autolink } from "../utils/autolink";
-import { downloadAttachment } from "../utils/downloadFile";
-import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
 function formatDuration(sec: number | undefined): string {
@@ -17,10 +16,9 @@ function formatDuration(sec: number | undefined): string {
 
 export function VideoBubble({ post }: { post: Post }) {
   const { openVideo } = useVideoPlayer();
-  const { lang, t } = useI18n();
+  const { lang } = useI18n();
   const att = post.attachments[0];
   const [playing, setPlaying] = useState(false);
-  const [isDownloading, setIsDownloading] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
   const text = postDisplayText(post, lang);
   if (!att) return null;
@@ -70,49 +68,11 @@ export function VideoBubble({ post }: { post: Post }) {
                 aria-hidden="true"
               />
             )}
-            <button
+            <AttachmentDownloadPill
-              type="button"
+              postId={post.id}
-              onClick={(e) => {
+              attachment={att}
-                e.stopPropagation();
+              leadingLabel={duration}
-                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 ? (
-                  <span>{t("downloading")}</span>
-                ) : (
-                  <>
-                    {duration ? (
-                      <>
-                        <span>{duration}</span>
-                        <span className="opacity-60">·</span>
-                      </>
-                    ) : null}
-                    <span>{formatBytes(att.sizeBytes)}</span>
-                  </>
-                )}
-              </span>
-            </button>
             <button
               type="button"
               onClick={(e) => {