feat: get iconUrl

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

@@ -5,6 +5,7 @@ import { HydraApi } from "@main/services/hydra-api";
 import { steamGamesWorker } from "@main/workers";
 import { UserProfile } from "@types";
 import { convertSteamGameToCatalogueEntry } from "../helpers/search-games";
+import { getSteamAppAsset } from "@main/helpers";
 
 const getUserProfile = async (
   _event: Electron.IpcMainInvokeEvent,
@@ -19,8 +20,11 @@ const getUserProfile = async (
         const steamGame = await steamGamesWorker.run(Number(game.objectId), {
           name: "getById",
         });
+        const iconUrl = steamGame?.clientIcon
+          ? getSteamAppAsset("icon", game.objectId, steamGame.clientIcon)
+          : null;
 
-        return convertSteamGameToCatalogueEntry(steamGame);
+        return { ...convertSteamGameToCatalogueEntry(steamGame), iconUrl };
       })
     );
 
@@ -29,7 +33,11 @@ const getUserProfile = async (
         const steamGame = await steamGamesWorker.run(Number(game.objectId), {
           name: "getById",
         });
-        return convertSteamGameToCatalogueEntry(steamGame);
+        const iconUrl = steamGame?.clientIcon
+          ? getSteamAppAsset("icon", game.objectId, steamGame.clientIcon)
+          : null;
+
+        return { ...convertSteamGameToCatalogueEntry(steamGame), iconUrl };
       })
     );
 

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

@@ -1,4 +1,5 @@
 import { UserProfile } from "@types";
+import cn from "classnames";
 import * as styles from "./profile.css";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
 
@@ -22,7 +23,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
       </section>
 
       <div className={styles.profileContent}>
-        <div style={{ width: "100%" }}>
+        <div className={styles.profileGameSection}>
           <div
             style={{
               display: "flex",
@@ -52,7 +53,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
               return (
                 <div key={game.objectID}>
                   <img
-                    src={game.cover}
+                    src={game.iconUrl}
                     width={50}
                     height={50}
                     alt={"Icon for " + game.title}
@@ -64,7 +65,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
           </div>
         </div>
 
-        <div className={styles.contentSidebar}>
+        <div className={cn(styles.contentSidebar, styles.profileGameSection)}>
           <div
             style={{
               display: "flex",
@@ -89,11 +90,11 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
             className={styles.profileContentBox}
             style={{ flexDirection: "column" }}
           >
-            {userProfile.libraryGames.map((game, index) => {
+            {userProfile.libraryGames.map((game) => {
               return (
                 <div key={game.objectID}>
                   <img
-                    src={game.cover}
+                    src={game.iconUrl}
                     width={50}
                     height={50}
                     alt={"Icon for " + game.title}

src/renderer/src/pages/profile/profile.css.tsx

@@ -6,7 +6,7 @@ export const wrapper = style({
   width: "100%",
   display: "flex",
   flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
+  gap: `${SPACING_UNIT * 3}px`,
 });
 
 export const profileContentBox = style({
@@ -46,9 +46,15 @@ export const profileContent = style({
   gap: `${SPACING_UNIT * 4}px`,
 });
 
+export const profileGameSection = style({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT}px`,
+});
+
 export const contentSidebar = style({
   width: "100%",
-  height: "100%",
   "@media": {
     "(min-width: 768px)": {
       width: "100%",

src/types/index.ts

@@ -85,6 +85,14 @@ export interface CatalogueEntry {
   repacks: GameRepack[];
 }
 
+export interface ProfileGame {
+  objectID: string;
+  shop: GameShop;
+  title: string;
+  iconUrl;
+  string?;
+}
+
 export interface DownloadQueue {
   id: number;
   createdAt: Date;
@@ -236,8 +244,8 @@ export interface RealDebridUser {
 
 export interface UserProfile {
   username: string;
-  libraryGames: Partial<CatalogueEntry>[];
-  recentGames: Partial<CatalogueEntry>[];
+  libraryGames: ProfileGame[];
+  recentGames: ProfileGame[];
 }
 
 export interface DownloadSource {