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/app.tsx

@@ -52,7 +52,7 @@ export function App() {
 
   const { clearDownload, setLastPacket } = useDownload();
 
-  const wokwondersRef = useRef<WorkWondersSdk | null>(null);
+  const workwondersRef = useRef<WorkWondersSdk | null>(null);
 
   const {
     hasActiveSubscription,
@@ -118,24 +118,25 @@ export function App() {
 
   const setupWorkWonders = useCallback(
     async (token?: string, locale?: string) => {
-      if (wokwondersRef.current) return;
+      if (workwondersRef.current) return;
 
       const possibleLocales = ["en", "pt", "ru"];
 
       const parsedLocale =
         possibleLocales.find((l) => l === locale?.slice(0, 2)) ?? "en";
 
-      wokwondersRef.current = new WorkWondersSdk();
-      await wokwondersRef.current.init({
+      workwondersRef.current = new WorkWondersSdk();
+      await workwondersRef.current.init({
         organization: "hydra",
         token,
         locale: parsedLocale,
       });
 
-      await wokwondersRef.current.initChangelogWidget();
-      wokwondersRef.current.initChangelogWidgetMini();
+      await workwondersRef.current.initChangelogWidget();
+      workwondersRef.current.initChangelogWidgetMini();
+      workwondersRef.current.initFeedbackWidget();
     },
-    [wokwondersRef]
+    [workwondersRef]
   );
 
   const setupExternalResources = useCallback(async () => {
@@ -232,7 +233,7 @@ export function App() {
 
   useEffect(() => {
     if (contentRef.current) contentRef.current.scrollTop = 0;
-    wokwondersRef.current?.notifyUrlChange();
+    workwondersRef.current?.notifyUrlChange();
   }, [location.pathname, location.search]);
 
   useEffect(() => {

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}