diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 87ad52b3..0aaf2c09 100755 --- a/src/locales/en/translation.json +++ b/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", diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.scss b/src/renderer/src/pages/profile/profile-content/friends-box.scss index 088b204f..c1f4826d 100644 --- a/src/renderer/src/pages/profile/profile-content/friends-box.scss +++ b/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 { diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.tsx b/src/renderer/src/pages/profile/profile-content/friends-box.tsx index cd0fed24..81e2b708 100644 --- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx +++ b/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 ; }; - if (!userProfile?.friends.length) return null; + if (!hasFriends) { + if (!isMe) return null; + + return ( +
+

{t("no_friends_yet")}

+
+ ); + } const visibleFriends = userProfile.friends.slice(0, MAX_VISIBLE_FRIENDS); const totalFriends = userProfile.friends.length; diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx index dfd489ec..81246124 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx +++ b/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 (
@@ -444,7 +444,7 @@ export function ProfileContent() { )} - {userProfile?.friends.length > 0 && ( + {(userProfile?.friends.length > 0 || isMe) && (