feat: polish message attachment downloads

src/components/messageStream/overlays/ImageLightbox.tsx

@@ -12,6 +12,7 @@ import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
 import { postNoBody } from "../../../api";
 import type { Attachment } from "../../../types/post";
 import { autolink } from "../utils/autolink";
+import { downloadFile } from "../utils/downloadFile";
 
 type LightboxState = {
   images: Attachment[];
@@ -137,11 +138,8 @@ function LightboxView({
         <X className="h-5 w-5" />
       </button>
 
-      <a
-        href={current.url}
-        download={current.filename}
-        target="_blank"
-        rel="noopener noreferrer"
+      <button
+        type="button"
         onClick={(e) => {
           e.stopPropagation();
           if (postId) {
@@ -149,12 +147,13 @@ function LightboxView({
               `/api/posts/${postId}/attachments/${current.id}/download`,
             );
           }
+          void downloadFile(current.url, current.filename).catch(() => {});
         }}
         className="absolute right-16 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
         aria-label="Download"
       >
         <Download className="h-5 w-5" />
-      </a>
+      </button>
 
       {images.length > 1 ? (
         <>
@@ -210,7 +209,7 @@ function LightboxView({
         />
         {caption ? (
           <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent px-4 pb-4 pt-12 text-sm leading-snug text-white sm:px-5 sm:pb-5">
-            <div className="message-stream-copyable-text max-h-[32vh] overflow-y-auto whitespace-pre-wrap break-words">
+            <div className="message-stream-copyable-text max-h-[32vh] overflow-y-auto whitespace-pre-wrap break-words [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
               {autolink(caption)}
             </div>
           </div>