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.
This commit is contained in:
TerryM
2026-06-05 19:36:54 +08:00
parent 69bef7ee6e
commit 75ccfd78ed
3 changed files with 38 additions and 131 deletions

View File

@@ -1,17 +1,10 @@
import { LoaderCircle, Play } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router-dom";
import { Play } from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import { FavoriteButton } from "../favorites/FavoriteButton";
import { useI18n } from "../i18n";
import { useLocalizedPath } from "../useLocalizedPath";
import type { Attachment, Post } from "../types/post";
import { DownloadCloudIcon } from "./icons/DownloadCloudIcon";
import {
mediaSaveKindFromAttachment,
useSaveToAlbumGuide,
} from "./SaveToAlbumGuide";
import { useToast } from "./Toast";
import { downloadAttachment } from "./messageStream/utils/downloadFile";
import { fileIcon } from "./messageStream/utils/fileIcon";
import {
filenameWithExtension,
@@ -30,24 +23,11 @@ function LatestActions({
attachment?: Attachment;
}) {
const { t } = useI18n();
const { showToast } = useToast();
const { showSaveToAlbumGuide } = useSaveToAlbumGuide();
const [isDownloading, setIsDownloading] = useState(false);
const lp = useLocalizedPath();
const navigate = useNavigate();
const handleDownload = async () => {
if (!attachment || isDownloading) return;
setIsDownloading(true);
try {
await downloadAttachment(post.id, attachment.id, attachment.filename, {
sizeBytes: attachment.sizeBytes,
});
const mediaKind = mediaSaveKindFromAttachment(attachment);
if (mediaKind) showSaveToAlbumGuide(mediaKind);
} catch {
showToast(t("downloadFail"), "error");
} finally {
setIsDownloading(false);
}
const goToPost = () => {
navigate(lp(`/browse?post=${encodeURIComponent(post.id)}`));
};
return (
@@ -59,23 +39,13 @@ function LatestActions({
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
void handleDownload();
goToPost();
}}
disabled={isDownloading}
aria-label={
isDownloading ? t("downloading") : `Download ${attachment.filename}`
}
aria-busy={isDownloading}
className="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] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
aria-label={t("download")}
title={t("download")}
className="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] focus-visible:ring-2 focus-visible:ring-ark-gold/70"
>
{isDownloading ? (
<LoaderCircle
className="h-4 w-4 animate-spin text-[#A8A9AE]"
strokeWidth={2.3}
/>
) : (
<DownloadCloudIcon className="h-5 w-5" />
)}
<DownloadCloudIcon className="h-5 w-5" />
</button>
) : null}
</div>