From e02875ad56769b391279bd91c66cae87225d0078 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:08:56 -0300
Subject: [PATCH] feat: improve friends playing game box

---
 .../profile/profile-content/friends-box.tsx   | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

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 51ee25d2..6cc40b23 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -2,7 +2,7 @@ import { userProfileContext } from "@renderer/context";
 import { useFormat } from "@renderer/hooks";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
-
+import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import * as styles from "./profile-content.css";
 import { Avatar, Link } from "@renderer/components";
 
@@ -13,6 +13,21 @@ export function FriendsBox() {
 
   const { numberFormatter } = useFormat();
 
+  const getGameImage = (game: { iconUrl: string | null; title: string }) => {
+    if (game.iconUrl) {
+      return (
+        <img
+          alt={game.title}
+          width={16}
+          style={{ borderRadius: 4 }}
+          src={game.iconUrl}
+        />
+      );
+    }
+
+    return <SteamLogo width={16} height={16} />;
+  };
+
   if (!userProfile?.friends.length) return null;
 
   return (
@@ -27,7 +42,14 @@ export function FriendsBox() {
       <div className={styles.box}>
         <ul className={styles.list}>
           {userProfile?.friends.map((friend) => (
-            <li key={friend.id}>
+            <li
+              key={friend.id}
+              title={
+                friend.currentGame
+                  ? t("playing", { game: friend.currentGame.title })
+                  : undefined
+              }
+            >
               <Link to={`/profile/${friend.id}`} className={styles.listItem}>
                 <Avatar
                   size={32}
@@ -35,12 +57,17 @@ export function FriendsBox() {
                   alt={friend.displayName}
                 />
 
-                <div>
+                <div
+                  style={{ display: "flex", flexDirection: "column", gap: 4 }}
+                >
                   <span className={styles.friendName}>
                     {friend.displayName}
                   </span>
                   {friend.currentGame && (
-                    <p>{t("playing", { game: friend.currentGame.title })}</p>
+                    <div style={{ display: "flex", gap: 4 }}>
+                      {getGameImage(friend.currentGame)}
+                      <small>{friend.currentGame.title}</small>
+                    </div>
                   )}
                 </div>
               </Link>