From e701a273d800c81a87298b3b91f81fc0b0a409ee Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 23 Sep 2024 14:20:57 -0300
Subject: [PATCH] fix: ui when game has no icon

---
 .../components/sidebar/sidebar-profile.tsx    | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 52223653..b241ef0e 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -5,6 +5,7 @@ import { useAppSelector, useUserDetails } from "@renderer/hooks";
 import { useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
+import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 
 const LONG_POLLING_INTERVAL = 60_000;
 
@@ -68,6 +69,23 @@ export function SidebarProfile() {
     );
   }, [userDetails, t, friendRequestCount, showFriendsModal]);
 
+  const gameRunningDetails = () => {
+    if (!userDetails || !gameRunning) return null;
+
+    if (gameRunning.iconUrl) {
+      return (
+        <img
+          alt={gameRunning.title}
+          width={24}
+          style={{ borderRadius: 4 }}
+          src={gameRunning.iconUrl}
+        />
+      );
+    }
+
+    return <SteamLogo />;
+  };
+
   return (
     <div className={styles.profileContainer}>
       <button
@@ -108,14 +126,7 @@ export function SidebarProfile() {
             )}
           </div>
 
-          {userDetails && gameRunning && (
-            <img
-              alt={gameRunning.title}
-              width={24}
-              style={{ borderRadius: 4 }}
-              src={gameRunning.iconUrl!}
-            />
-          )}
+          {gameRunningDetails()}
         </div>
       </button>