feat: polish message attachment downloads

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -1,38 +1,40 @@
-import { Download } from "lucide-react";
+import { ArrowDownToLine } from "lucide-react";
 import { postNoBody } from "../../../api";
 import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
+import { downloadFile } from "../utils/downloadFile";
 import { fileIcon } from "../utils/fileIcon";
+import {
+  filenameWithExtension,
+  middleEllipsisFilename,
+} from "../utils/filenameDisplay";
 import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
 function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
   const isImageAsDoc = att.mime.startsWith("image/");
   const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
+  const displayFilename = filenameWithExtension(att.filename, att.mime);
+
+  const handleDownload = () => {
+    void postNoBody(`/api/posts/${postId}/attachments/${att.id}/download`);
+    void downloadFile(att.url, displayFilename).catch(() => {});
+  };
 
   return (
-    <a
-      href={att.url}
-      download={att.filename}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5"
-      onClick={() => {
-        void postNoBody(`/api/posts/${postId}/attachments/${att.id}/download`);
-      }}
-    >
-      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full md:h-12 md:w-12">
+    <div className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5">
+      <button
+        type="button"
+        onClick={handleDownload}
+        className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full md:h-12 md:w-12"
+        aria-label={`Download ${att.filename}`}
+      >
         {isImageAsDoc && att.thumbnailUrl ? (
-          <>
-            <img
-              src={att.thumbnailUrl}
-              alt=""
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 flex items-center justify-center bg-black/35">
-              <Download className="h-4 w-4 text-white" />
-            </div>
-          </>
+          <img
+            src={att.thumbnailUrl}
+            alt=""
+            className="absolute inset-0 h-full w-full object-cover"
+          />
         ) : (
           <div
             className="flex h-full w-full items-center justify-center"
@@ -41,16 +43,22 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
             <Icon className="h-5 w-5 text-white" strokeWidth={2.2} />
           </div>
         )}
-      </div>
+        <div className="absolute inset-0 flex items-center justify-center bg-black/35 text-white opacity-100 transition group-hover:bg-black/45 group-focus-visible:bg-black/45">
+          <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
+        </div>
+      </button>
       <div className="min-w-0 flex-1">
-        <div className="truncate text-[14px] font-medium text-ark-gold2 group-hover:text-ark-gold">
-          {att.filename}
+        <div
+          className="truncate text-[14px] font-medium text-ark-gold2 group-hover:text-ark-gold"
+          title={displayFilename}
+        >
+          {middleEllipsisFilename(displayFilename)}
         </div>
         <div className="text-[11px] text-neutral-400">
           {formatBytes(att.sizeBytes)}
         </div>
       </div>
-    </a>
+    </div>
   );
 }