From dffec9b18937576bdcb3b003424f7f6de103c748 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sun, 14 Sep 2025 21:40:48 +0200
Subject: [PATCH] fix: enhance top friends display logic in FeedPage

---
 thoughts-frontend/app/page.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/thoughts-frontend/app/page.tsx b/thoughts-frontend/app/page.tsx
index 3964e24..2a64c1d 100644
--- a/thoughts-frontend/app/page.tsx
+++ b/thoughts-frontend/app/page.tsx
@@ -72,7 +72,10 @@ async function FeedPage({
   );
 
   const friends = (await getFriends(token)).users.map((user) => user.username);
-  const shouldDisplayTopFriends = me?.topFriends && me.topFriends.length > 8;
+  const shouldDisplayTopFriends =
+    token && me?.topFriends && me.topFriends.length > 8;
+
+  console.log("Should display top friends:", shouldDisplayTopFriends);
 
   return (
     <div className="container mx-auto max-w-6xl p-4 sm:p-6">
@@ -92,6 +95,13 @@ async function FeedPage({
 
           <div className="block lg:hidden space-y-6">
             <PopularTags />
+            {shouldDisplayTopFriends && (
+              <TopFriends mode="top-friends" usernames={me.topFriends} />
+            )}
+            {!shouldDisplayTopFriends && token && friends.length > 0 && (
+              <TopFriends mode="friends" usernames={friends || []} />
+            )}
+            <UsersCount />
           </div>
 
           <div className="space-y-6">
@@ -129,11 +139,13 @@ async function FeedPage({
 
         <aside className="hidden lg:block lg:col-span-1">
           <div className="sticky top-20 space-y-6">
+            <PopularTags />
             {shouldDisplayTopFriends && (
               <TopFriends mode="top-friends" usernames={me.topFriends} />
             )}
-            <PopularTags />
-            {token && <TopFriends mode="friends" usernames={friends || []} />}
+            {!shouldDisplayTopFriends && token && friends.length > 0 && (
+              <TopFriends mode="friends" usernames={friends || []} />
+            )}
             <UsersCount />
           </div>
         </aside>