Revert "fix: download button on cards opens the post page"

This reverts commit 75ccfd78ed.

src/components/PopularRankList.tsx

@@ -4,6 +4,7 @@ import {
   FileText,
   Image as ImageIcon,
   Link as LinkIcon,
+  LoaderCircle,
   Music,
   Presentation,
   Video,
@@ -20,6 +21,9 @@ import { cleanCategoryDisplayName } from "../utils/categoryDisplay";
 import { formatDateYmd } from "../utils/format";
 import { postToResource } from "../utils/postResourceAdapter";
 import type { Post } from "../types/post";
+import { downloadAttachment } from "./messageStream/utils/downloadFile";
+import { mediaSaveKindFromType, useSaveToAlbumGuide } from "./SaveToAlbumGuide";
+import { useToast } from "./Toast";
 import { FavoriteButton } from "../favorites/FavoriteButton";
 
 const MEDALS = ["🥇", "🥈", "🥉"];
@@ -101,18 +105,31 @@ export function PopularRankRow({
   const { t, lang } = useI18n();
   const navigate = useNavigate();
   const lp = useLocalizedPath();
+  const { showToast } = useToast();
+  const { showSaveToAlbumGuide } = useSaveToAlbumGuide();
+  const [isDownloading, setIsDownloading] = useState(false);
   const [coverFailed, setCoverFailed] = useState(false);
 
   const r = postToResource(post, lang, categories);
   const cover = r.coverImage && !coverFailed ? assetUrl(r.coverImage) : "";
   const isTop3 = showRank && index < MEDALS.length;
 
-  const goToPost = () => {
-    const params = new URLSearchParams();
-    if (browseSort) params.set("sort", browseSort);
-    params.set("post", post.id);
-    if (singlePostLink) params.set("single", "1");
-    navigate(lp(`/browse?${params.toString()}`));
+  const handleDownload = async () => {
+    if (isDownloading || !r.downloadPostId || !r.downloadAttachmentId) return;
+    setIsDownloading(true);
+    try {
+      await downloadAttachment(
+        r.downloadPostId,
+        r.downloadAttachmentId,
+        r.title,
+      );
+      const mediaKind = mediaSaveKindFromType(r.type);
+      if (mediaKind) showSaveToAlbumGuide(mediaKind);
+    } catch {
+      showToast(t("downloadFail"), "error");
+    } finally {
+      setIsDownloading(false);
+    }
   };
 
   return (
@@ -125,7 +142,13 @@ export function PopularRankRow({
     >
       <button
         type="button"
-        onClick={goToPost}
+        onClick={() => {
+          const params = new URLSearchParams();
+          if (browseSort) params.set("sort", browseSort);
+          params.set("post", post.id);
+          if (singlePostLink) params.set("single", "1");
+          navigate(lp(`/browse?${params.toString()}`));
+        }}
         aria-label={r.title}
         className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
       />
@@ -193,16 +216,20 @@ export function PopularRankRow({
         {showDownload && r.isDownloadable ? (
           <button
             type="button"
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              goToPost();
-            }}
+            onClick={handleDownload}
+            disabled={isDownloading}
             aria-label={t("download")}
             title={t("download")}
-            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70"
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
           >
-            <DownloadCloudIcon className="h-5 w-5" />
+            {isDownloading ? (
+              <LoaderCircle
+                className="h-4 w-4 animate-spin"
+                strokeWidth={2.3}
+              />
+            ) : (
+              <DownloadCloudIcon className="h-5 w-5" />
+            )}
           </button>
         ) : null}
       </div>