From 092e96c39f2ef24def9506c6786edaeca2de23dc Mon Sep 17 00:00:00 2001
From: Guido X Jansen <x@gui.do>
Date: Tue, 3 Mar 2026 00:12:29 +0100
Subject: [PATCH] feat(homepage): add popular topics section, limit to 10
 (#121)

* feat(homepage): add popular topics section, limit to 10

Fetch both recent and popular topics (10 each) in parallel.
Renders "Popular Topics" below "Recent Topics" on the homepage.
Popular list only shown when topics exist.

* fix(test): use getAllByText for topic appearing in both lists

The homepage now renders the same topics in both Recent and Popular
sections (from mock data), so getByText fails with multiple matches.
Switch to getAllByText which correctly handles duplicates.
---
 src/app/page.test.tsx |  3 ++-
 src/app/page.tsx      | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx
index 4854de6..c48018d 100644
--- a/src/app/page.test.tsx
+++ b/src/app/page.test.tsx
@@ -78,7 +78,8 @@ describe('HomePage', () => {
   it('renders recent topics', async () => {
     const page = await HomePage()
     render(page)
-    expect(screen.getByText('Welcome to Barazo Forums')).toBeInTheDocument()
+    const matches = screen.getAllByText('Welcome to Barazo Forums')
+    expect(matches.length).toBeGreaterThan(0)
   })
 
   it('renders category navigation', async () => {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2c3a123..6b8ae80 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -25,14 +25,16 @@ export const metadata: Metadata = {
 
 export default async function HomePage() {
   let categoriesResult: CategoriesResponse = { categories: [] }
-  let topicsResult: TopicsResponse = { topics: [], cursor: null }
+  let recentTopics: TopicsResponse = { topics: [], cursor: null }
+  let popularTopics: TopicsResponse = { topics: [], cursor: null }
   let publicSettings: PublicSettings | null = null
   let apiError = false
 
   try {
-    ;[categoriesResult, topicsResult, publicSettings] = await Promise.all([
+    ;[categoriesResult, recentTopics, popularTopics, publicSettings] = await Promise.all([
       getCategories(),
-      getTopics({ limit: 20, sort: 'latest' }),
+      getTopics({ limit: 10, sort: 'latest' }),
+      getTopics({ limit: 10, sort: 'popular' }),
       getPublicSettings(),
     ])
   } catch {
@@ -96,7 +98,14 @@ export default async function HomePage() {
           )}
 
           {/* Recent Topics */}
-          <TopicList topics={topicsResult.topics} heading="Recent Topics" />
+          <TopicList topics={recentTopics.topics} heading="Recent Topics" />
+
+          {/* Popular Topics */}
+          {popularTopics.topics.length > 0 && (
+            <div className="mt-8">
+              <TopicList topics={popularTopics.topics} heading="Popular Topics" />
+            </div>
+          )}
         </>
       )}
     </ForumLayout>
-- 
2.51.2