Merge pull request #1917 from hydralauncher/fix/friends-box-display

hotfix: add empty state for friends box and new translation key

src/locales/en/translation.json

@@ -689,6 +689,7 @@
     "blocked_users": "Blocked users",
     "unblock": "Unblock",
     "no_friends_added": "You have no added friends",
+    "no_friends_yet": "You haven't added any friends yet",
     "view_all": "View all",
     "load_more": "Load more",
     "loading": "Loading",

src/renderer/src/pages/profile/profile-content/friends-box.scss

@@ -4,6 +4,20 @@
   &__box {
     padding: calc(globals.$spacing-unit * 2);
     position: relative;
+
+    &--empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: calc(globals.$spacing-unit * 2);
+    }
+  }
+
+  &__empty-text {
+    color: globals.$muted-color;
+    font-size: globals.$small-font-size;
+    margin: 0;
+    text-align: center;
   }
 
   &__add-friend-button {

src/renderer/src/pages/profile/profile-content/friends-box.tsx

@@ -19,6 +19,7 @@ export function FriendsBox() {
   const [showAddFriendModal, setShowAddFriendModal] = useState(false);
 
   const isMe = userDetails?.id === userProfile?.id;
+  const hasFriends = userProfile?.friends && userProfile.friends.length > 0;
 
   const getGameImage = (game: { iconUrl: string | null; title: string }) => {
     if (game.iconUrl) {
@@ -35,7 +36,15 @@ export function FriendsBox() {
     return <SteamLogo width={16} height={16} />;
   };
 
-  if (!userProfile?.friends.length) return null;
+  if (!hasFriends) {
+    if (!isMe) return null;
+
+    return (
+      <div className="friends-box__box friends-box__box--empty">
+        <p className="friends-box__empty-text">{t("no_friends_yet")}</p>
+      </div>
+    );
+  }
 
   const visibleFriends = userProfile.friends.slice(0, MAX_VISIBLE_FRIENDS);
   const totalFriends = userProfile.friends.length;

src/renderer/src/pages/profile/profile-content/profile-content.tsx

@@ -376,7 +376,7 @@ export function ProfileContent() {
     const hasAnyGames = hasGames || hasPinnedGames;
 
     const shouldShowRightContent =
-      hasAnyGames || userProfile.friends.length > 0;
+      hasAnyGames || userProfile.friends.length > 0 || isMe;
 
     return (
       <section className="profile-content__section">
@@ -444,7 +444,7 @@ export function ProfileContent() {
                 <RecentGamesBox />
               </ProfileSection>
             )}
-            {userProfile?.friends.length > 0 && (
+            {(userProfile?.friends.length > 0 || isMe) && (
               <ProfileSection
                 title={t("friends")}
                 count={userStats?.friendsCount || userProfile.friends.length}