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>
+  );
+}