fix: hide empty popular home section

This commit is contained in:
TerryM
2026-05-28 17:40:35 +08:00
parent 5036c930bb
commit b6ba4d53e7

View File

@@ -179,6 +179,7 @@ export function Home() {
}, [hash, cats.length, rec.length, latest.length, popular.length]); }, [hash, cats.length, rec.length, latest.length, popular.length]);
const latestPlaceholderCount = Math.max(0, 5 - latest.length); const latestPlaceholderCount = Math.max(0, 5 - latest.length);
const hasPopular = popular.length > 0 || popularPosts.length > 0;
const popularPlaceholderCount = Math.max(0, 5 - popular.length); const popularPlaceholderCount = Math.max(0, 5 - popular.length);
const recommendedDotCount = rec.length; const recommendedDotCount = rec.length;
const activeRecommendedDot = const activeRecommendedDot =
@@ -388,11 +389,12 @@ export function Home() {
</div> </div>
</section> </section>
{hasPopular ? (
<section id="popular" className="scroll-mt-16 md:scroll-mt-24"> <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0"> <div className="px-4 md:px-0">
<SectionHeader <SectionHeader
title={t("popularSection")} title={t("popularSection")}
viewAllTo="/browse?tag=popular" viewAllTo="/browse?sort=popular"
viewAllLabel={t("viewAll")} viewAllLabel={t("viewAll")}
/> />
</div> </div>
@@ -403,7 +405,11 @@ export function Home() {
</div> </div>
<div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5"> <div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
{popular.map((r) => ( {popular.map((r) => (
<LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} /> <LatestUpdateRow
key={r.id}
r={r}
iconKey={iconKeyForResource(r)}
/>
))} ))}
{Array.from({ length: popularPlaceholderCount }).map((_, index) => ( {Array.from({ length: popularPlaceholderCount }).map((_, index) => (
<ComingSoonLatestUpdateRow <ComingSoonLatestUpdateRow
@@ -413,6 +419,7 @@ export function Home() {
))} ))}
</div> </div>
</section> </section>
) : null}
{categoryUnavailableOpen ? ( {categoryUnavailableOpen ? (
<div <div