feat: polish message attachment downloads

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -1,10 +1,11 @@
-import { Download, Play } from "lucide-react";
+import { ArrowDownToLine, Play } from "lucide-react";
 import { useRef, useState } from "react";
 import { postNoBody } from "../../../api";
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { useVideoPlayer } from "../overlays/VideoPlayer";
 import { autolink } from "../utils/autolink";
+import { downloadFile } from "../utils/downloadFile";
 import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
@@ -26,6 +27,7 @@ export function VideoBubble({ post }: { post: Post }) {
   const ratio =
     att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
   const posterUrl = att.posterUrl ?? att.thumbnailUrl;
+  const duration = formatDuration(att.durationSec);
   const previewVideoUrl = att.url.includes("#") ? att.url : `${att.url}#t=0.1`;
 
   return (
@@ -68,33 +70,31 @@ export function VideoBubble({ post }: { post: Post }) {
                 aria-hidden="true"
               />
             )}
-            <div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 text-xs text-white">
-              <a
-                href={att.url}
-                download={att.filename}
-                target="_blank"
-                rel="noreferrer"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  void postNoBody(
-                    `/api/posts/${post.id}/attachments/${att.id}/download`,
-                  );
-                }}
-                className="flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur transition hover:bg-black/75"
-                aria-label={`Download ${att.filename}`}
-              >
-                <Download className="h-4 w-4" />
-              </a>
-              <div className="flex items-center gap-1.5 rounded-full bg-black/55 px-2.5 py-1.5">
-                {formatDuration(att.durationSec) ? (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                void postNoBody(
+                  `/api/posts/${post.id}/attachments/${att.id}/download`,
+                );
+                void downloadFile(att.url, att.filename).catch(() => {});
+              }}
+              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"
+              aria-label={`Download ${att.filename}`}
+            >
+              <span className="flex h-8 w-8 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
+                <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
+              </span>
+              <span className="flex h-8 items-center gap-1 px-2.5">
+                {duration ? (
                   <>
-                    <span>{formatDuration(att.durationSec)}</span>
-                    <span className="opacity-70">·</span>
+                    <span>{duration}</span>
+                    <span className="opacity-60">·</span>
                   </>
                 ) : null}
                 <span>{formatBytes(att.sizeBytes)}</span>
-              </div>
-            </div>
+              </span>
+            </button>
             <button
               type="button"
               onClick={(e) => {