feat: ui adjustments and add friend playing game

src/locales/en/translation.json

@@ -368,7 +368,10 @@
     "background_image_updated": "Background image updated",
     "stats": "Stats",
     "achievements": "Achievements",
-    "games": "Games"
+    "games": "Games",
+    "top_percentile": "Top {{percentile}}%",
+    "ranking_updated_weekly": "Ranking is updated weekly",
+    "playing": "Playing {{game}}"
   },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",

src/locales/pt-BR/translation.json

@@ -300,7 +300,7 @@
     "last_time_played": "Última sessão {{period}}",
     "activity": "Atividades recentes",
     "library": "Biblioteca",
-    "total_play_time": "Tempo total de jogo: {{amount}}",
+    "total_play_time": "Tempo de jogo: {{amount}}",
     "no_recent_activity_title": "Hmmm… nada por aqui",
     "no_recent_activity_description": "Parece que você não jogou nada recentemente. Que tal começar agora?",
     "display_name": "Nome de exibição",
@@ -366,7 +366,8 @@
     "background_image_updated": "Imagem de fundo salva",
     "stats": "Estatísticas",
     "achievements": "Conquistas",
-    "games": "Jogos"
+    "games": "Jogos",
+    "ranking_updated_weekly": "Ranking é atualizado semanalmente"
   },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",

src/main/events/user/get-user.ts

@@ -11,7 +11,7 @@ const getSteamGame = async (objectId: string) => {
     });
 
     return {
-      title: steamGame.name,
+      title: steamGame.name as string,
       iconUrl: steamUrlBuilder.icon(objectId, steamGame.clientIcon),
     };
   } catch (err) {
@@ -67,8 +67,25 @@ const getUser = async (
       }
     }
 
+    const friends = await Promise.all(
+      profile.friends.map(async (friend) => {
+        if (!friend.currentGame) return friend;
+
+        const currentGame = await getSteamGame(friend.currentGame.objectId);
+
+        return {
+          ...friend,
+          currentGame: {
+            ...friend.currentGame,
+            ...currentGame,
+          },
+        };
+      })
+    );
+
     return {
       ...profile,
+      friends,
       libraryGames,
       recentGames,
     };

src/main/services/hydra-api.ts

@@ -30,7 +30,7 @@ export class HydraApi {
   private static instance: AxiosInstance;
 
   private static readonly EXPIRATION_OFFSET_IN_MS = 1000 * 60 * 5; // 5 minutes
-  private static readonly ADD_LOG_INTERCEPTOR = false;
+  private static readonly ADD_LOG_INTERCEPTOR = true;
 
   private static secondsToMilliseconds = (seconds: number) => seconds * 1000;
 

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

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import * as styles from "./profile-content.css";
 import { Avatar, Link } from "@renderer/components";
+import { buildGameDetailsPath } from "@renderer/helpers";
 
 export function FriendsBox() {
   const { userProfile, userStats } = useContext(userProfileContext);
@@ -35,7 +36,16 @@ export function FriendsBox() {
                   alt={friend.displayName}
                 />
 
-                <span className={styles.friendName}>{friend.displayName}</span>
+                <div>
+                  <span className={styles.friendName}>
+                    {friend.displayName}
+                  </span>
+                  {friend.currentGame && (
+                    <Link to={buildGameDetailsPath({ ...friend.currentGame })}>
+                      <p>{t("playing", { game: friend.currentGame.title })}</p>
+                    </Link>
+                  )}
+                </div>
               </Link>
             </li>
           ))}

src/renderer/src/pages/profile/profile-content/user-stats-box.tsx

@@ -42,16 +42,19 @@ export function UserStatsBox() {
         <ul className={styles.list}>
           {userStats.achievementsPointsEarnedSum && (
             <li>
-              <p className={styles.listItemTitle}>{t("achievements")}</p>
+              <h3 className={styles.listItemTitle}>{t("achievements")}</h3>
               <div style={{ display: "flex", justifyContent: "space-between" }}>
                 <p
                   style={{ display: "flex", alignItems: "center", gap: "4px" }}
                 >
                   <HydraIcon width={20} height={20} />
-                  {userStats.achievementsPointsEarnedSum.value} points
+                  {userStats.achievementsPointsEarnedSum.value}
                 </p>
-                <p>
+                <p title={t("ranking_updated_weekly")}>
-                  Top {userStats.achievementsPointsEarnedSum.topPercentile}%{" "}
+                  {t("top_percentile", {
+                    percentile:
+                      userStats.achievementsPointsEarnedSum.topPercentile,
+                  })}
                 </p>
               </div>
               <p>Unlock count: {userStats.unlockedAchievementSum}</p>
@@ -59,13 +62,20 @@ export function UserStatsBox() {
           )}
 
           <li>
-            <p className={styles.listItemTitle}>{t("games")}</p>
+            <h3 className={styles.listItemTitle}>{t("games")}</h3>
             <div style={{ display: "flex", justifyContent: "space-between" }}>
               <p>
-                Total playtime:{" "}
+                {t("total_play_time", {
-                {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
+                  amount: formatPlayTime(
+                    userStats.totalPlayTimeInSeconds.value
+                  ),
+                })}
+              </p>
+              <p title={t("ranking_updated_weekly")}>
+                {t("top_percentile", {
+                  percentile: userStats.totalPlayTimeInSeconds.topPercentile,
+                })}
               </p>
-              <p> Top {userStats.totalPlayTimeInSeconds.topPercentile}%</p>
             </div>
           </li>
         </ul>

src/types/index.ts

@@ -208,6 +208,13 @@ export interface UserFriend {
   profileImageUrl: string | null;
   createdAt: string;
   updatedAt: string;
+  currentGame: {
+    title: string;
+    iconUrl: string;
+    objectId: string;
+    shop: GameShop;
+    sessionDurationInSeconds: number;
+  } | null;
 }
 
 export interface UserFriends {