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

This reverts commit 75ccfd78ed.

src/components/RecommendedCard.tsx

@@ -1,13 +1,20 @@
+import { Download, LoaderCircle } from "lucide-react";
 import { m } from "framer-motion";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import type { Resource } from "../api";
 import { assetUrl } from "../api";
 import { useI18n } from "../i18n";
 import { useLocalizedPath } from "../useLocalizedPath";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { formatDateYmd } from "../utils/format";
 import { DownloadCloudIcon } from "./icons/DownloadCloudIcon";
 import { officialRecommendationCoverFallbacks } from "./FigmaBanner";
+import {
+  downloadAttachment,
+  downloadFile,
+} from "./messageStream/utils/downloadFile";
+import { mediaSaveKindFromType, useSaveToAlbumGuide } from "./SaveToAlbumGuide";
+import { useToast } from "./Toast";
 import { FavoriteButton } from "../favorites/FavoriteButton";
 
 function isPlaceholderAsset(path: string | undefined | null) {
@@ -46,7 +53,9 @@ export function RecommendedCard({
 }) {
   const { t } = useI18n();
   const lp = useLocalizedPath();
-  const navigate = useNavigate();
+  const { showToast } = useToast();
+  const { showSaveToAlbumGuide } = useSaveToAlbumGuide();
+  const [isDownloading, setIsDownloading] = useState(false);
   const figmaCover =
     officialRecommendationCoverFallbacks[
       visualIndex % officialRecommendationCoverFallbacks.length
@@ -68,10 +77,26 @@ export function RecommendedCard({
       ? assetUrl(r.fileUrl || r.previewUrl)
       : "";
 
-  const goToPost = () => {
-    // Same destination as the card-wide overlay link, so the user lands on the
-    // post and can choose exactly which attachment to download.
-    navigate(lp(`/resource/${r.id}`));
+  const handleDownload = async () => {
+    if (isDownloading) return;
+    setIsDownloading(true);
+    try {
+      if (r.downloadPostId && r.downloadAttachmentId) {
+        await downloadAttachment(
+          r.downloadPostId,
+          r.downloadAttachmentId,
+          displayTitle,
+        );
+      } else {
+        await downloadFile(dl, displayTitle);
+      }
+      const mediaKind = mediaSaveKindFromType(r.type);
+      if (mediaKind) showSaveToAlbumGuide(mediaKind);
+    } catch {
+      showToast(t("downloadFail"), "error");
+    } finally {
+      setIsDownloading(false);
+    }
   };
 
   return (
@@ -168,18 +193,29 @@ export function RecommendedCard({
                 type="button"
                 className={
                   useFigmaDesign
-                    ? "relative z-20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80"
-                    : "relative z-20 shrink-0 rounded-lg p-1 text-white outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80"
+                    ? "relative z-20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
+                    : "relative z-20 shrink-0 rounded-lg p-1 text-white outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
                 }
-                title={t("download")}
-                aria-label={t("download")}
+                title={isDownloading ? t("downloading") : t("download")}
+                aria-label={isDownloading ? t("downloading") : t("download")}
+                aria-busy={isDownloading}
+                disabled={isDownloading}
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
-                  goToPost();
+                  void handleDownload();
                 }}
               >
-                <DownloadCloudIcon className="h-5 w-5" />
+                {isDownloading ? (
+                  <LoaderCircle
+                    className="h-4 w-4 animate-spin"
+                    strokeWidth={2.2}
+                  />
+                ) : useFigmaDesign ? (
+                  <DownloadCloudIcon className="h-5 w-5" />
+                ) : (
+                  <Download className="h-5 w-5" strokeWidth={2.2} />
+                )}
               </button>
             ) : null}
           </div>