fix: hide rank badges on favorites

This commit is contained in:
TerryM
2026-06-05 18:25:17 +08:00
parent 5d550e0342
commit 4e459aa4be
2 changed files with 26 additions and 9 deletions

View File

@@ -88,12 +88,14 @@ export function PopularRankRow({
index, index,
categories, categories,
browseSort = "popular", browseSort = "popular",
showRank = true,
onFavoriteChange, onFavoriteChange,
}: { }: {
post: Post; post: Post;
index: number; index: number;
categories: Category[]; categories: Category[];
browseSort?: string; browseSort?: string;
showRank?: boolean;
onFavoriteChange?: (postId: string, favorited: boolean) => void; onFavoriteChange?: (postId: string, favorited: boolean) => void;
}) { }) {
const { t, lang } = useI18n(); const { t, lang } = useI18n();
@@ -106,7 +108,7 @@ export function PopularRankRow({
const r = postToResource(post, lang, categories); const r = postToResource(post, lang, categories);
const cover = r.coverImage && !coverFailed ? assetUrl(r.coverImage) : ""; const cover = r.coverImage && !coverFailed ? assetUrl(r.coverImage) : "";
const isTop3 = index < MEDALS.length; const isTop3 = showRank && index < MEDALS.length;
const handleDownload = async () => { const handleDownload = async () => {
if (isDownloading || !r.downloadPostId || !r.downloadAttachmentId) return; if (isDownloading || !r.downloadPostId || !r.downloadAttachmentId) return;
@@ -127,7 +129,13 @@ export function PopularRankRow({
}; };
return ( return (
<article className="relative flex items-center gap-3 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:h-[90px] md:gap-0 md:p-0"> <article
className={`relative grid items-center gap-x-3 gap-y-2 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:flex md:h-[90px] md:gap-0 md:p-0 ${
showRank
? "grid-cols-[28px_64px_minmax(0,1fr)]"
: "grid-cols-[64px_minmax(0,1fr)]"
}`}
>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@@ -140,7 +148,7 @@ export function PopularRankRow({
className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70" className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
/> />
<RankBadge index={index} /> {showRank ? <RankBadge index={index} /> : null}
<div <div
className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[90px] md:w-[246px] md:rounded-none ${ className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[90px] md:w-[246px] md:rounded-none ${
@@ -161,15 +169,19 @@ export function PopularRankRow({
)} )}
</div> </div>
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4"> <div
<div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]"> className={`pointer-events-none relative z-10 row-start-1 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4 ${
showRank ? "col-start-3" : "col-start-2"
}`}
>
<div className="break-words text-sm font-bold leading-snug text-white md:line-clamp-2 md:text-base md:font-semibold md:leading-[23px]">
{r.title} {r.title}
</div> </div>
<div className="flex items-center gap-2 text-xs text-[#9b9ca6] md:gap-3 md:text-[#9FA0A8]"> <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[#9b9ca6] md:flex-nowrap md:gap-3 md:text-[#9FA0A8]">
<span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1"> <span className="shrink-0 rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
{resourceTypeLabel(t, r.type)} {resourceTypeLabel(t, r.type)}
</span> </span>
<span className="truncate"> <span className="min-w-0 break-words">
{cleanCategoryDisplayName(r.categoryName)} {cleanCategoryDisplayName(r.categoryName)}
</span> </span>
<span className="text-[#55565e]">·</span> <span className="text-[#55565e]">·</span>
@@ -179,7 +191,11 @@ export function PopularRankRow({
</div> </div>
</div> </div>
<div className="relative z-10 flex shrink-0 items-center gap-2 pr-4 md:pr-6"> <div
className={`relative z-10 row-start-2 ml-auto flex shrink-0 items-center gap-2 md:ml-0 md:pr-6 ${
showRank ? "col-start-3" : "col-start-2"
}`}
>
<FavoriteButton <FavoriteButton
resourceId={r.id} resourceId={r.id}
onFavoriteChange={(favorited) => onFavoriteChange={(favorited) =>

View File

@@ -168,6 +168,7 @@ export default function Favorites() {
index={index} index={index}
categories={categories} categories={categories}
browseSort="" browseSort=""
showRank={false}
onFavoriteChange={(_, favorited) => { onFavoriteChange={(_, favorited) => {
if (!favorited) setReloadKey((value) => value + 1); if (!favorited) setReloadKey((value) => value + 1);
}} }}