From b6ba4d53e785b715006c700f668ce31d4c3162fe Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Thu, 28 May 2026 17:40:35 +0800
Subject: [PATCH] fix: hide empty popular home section

---
 src/pages/Home/index.tsx | 55 ++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 3bdbfab..07cf491 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -179,6 +179,7 @@ export function Home() {
   }, [hash, cats.length, rec.length, latest.length, popular.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 recommendedDotCount = rec.length;
   const activeRecommendedDot =
@@ -388,31 +389,37 @@ export function Home() {
         </div>
       </section>
 
-      <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
-        <div className="px-4 md:px-0">
-          <SectionHeader
-            title={t("popularSection")}
-            viewAllTo="/browse?tag=popular"
-            viewAllLabel={t("viewAll")}
-          />
-        </div>
-        <div className="flex flex-col gap-3 md:hidden">
-          {popularPosts.slice(0, 5).map((post) => (
-            <MessageBubble key={post.id} post={post} />
-          ))}
-        </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">
-          {popular.map((r) => (
-            <LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
-          ))}
-          {Array.from({ length: popularPlaceholderCount }).map((_, index) => (
-            <ComingSoonLatestUpdateRow
-              key={`popular-coming-soon-${index}`}
-              index={popular.length + index}
+      {hasPopular ? (
+        <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
+          <div className="px-4 md:px-0">
+            <SectionHeader
+              title={t("popularSection")}
+              viewAllTo="/browse?sort=popular"
+              viewAllLabel={t("viewAll")}
             />
-          ))}
-        </div>
-      </section>
+          </div>
+          <div className="flex flex-col gap-3 md:hidden">
+            {popularPosts.slice(0, 5).map((post) => (
+              <MessageBubble key={post.id} post={post} />
+            ))}
+          </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">
+            {popular.map((r) => (
+              <LatestUpdateRow
+                key={r.id}
+                r={r}
+                iconKey={iconKeyForResource(r)}
+              />
+            ))}
+            {Array.from({ length: popularPlaceholderCount }).map((_, index) => (
+              <ComingSoonLatestUpdateRow
+                key={`popular-coming-soon-${index}`}
+                index={popular.length + index}
+              />
+            ))}
+          </div>
+        </section>
+      ) : null}
 
       {categoryUnavailableOpen ? (
         <div