fix: download button on cards opens the post page

On compact cards the user cannot see which file is attached, especially for multi-attachment posts. Make the small download button on PopularRankRow, RecommendedCard, and LatestUpdateCard navigate to the post detail page instead of triggering an immediate download, so the user lands in the full post and picks the exact attachment to download.

src/components/PopularRankList.tsx

@@ -4,7 +4,6 @@ import {
   FileText,
   Image as ImageIcon,
   Link as LinkIcon,
-  LoaderCircle,
   Music,
   Presentation,
   Video,
@@ -21,9 +20,6 @@ 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 = ["🥇", "🥈", "🥉"];
@@ -105,31 +101,18 @@ 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 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);
-    }
+  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()}`));
   };
 
   return (
@@ -142,13 +125,7 @@ export function PopularRankRow({
     >
       <button
         type="button"
-        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()}`));
-        }}
+        onClick={goToPost}
         aria-label={r.title}
         className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
       />
@@ -216,20 +193,16 @@ export function PopularRankRow({
         {showDownload && r.isDownloadable ? (
           <button
             type="button"
-            onClick={handleDownload}
-            disabled={isDownloading}
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              goToPost();
+            }}
             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 disabled:cursor-wait"
+            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"
           >
-            {isDownloading ? (
-              <LoaderCircle
-                className="h-4 w-4 animate-spin"
-                strokeWidth={2.3}
-              />
-            ) : (
-              <DownloadCloudIcon className="h-5 w-5" />
-            )}
+            <DownloadCloudIcon className="h-5 w-5" />
           </button>
         ) : null}
       </div>