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

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -30,7 +30,7 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
         />
       </button>
       {text ? (
-        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/55 to-transparent px-4 pb-4 pt-16 text-[14px] leading-snug text-neutral-100">
+        <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">
             {autolink(text)}
           </div>

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) => {