feat: add profileImage to achievements page

src/renderer/src/helpers.ts

@@ -36,7 +36,7 @@ export const buildGameDetailsPath = (
 
 export const buildGameAchievementPath = (
   game: { shop: GameShop; objectId: string; title: string },
-  user?: { userId: string; displayName: string }
+  user?: { userId: string; displayName: string; profileImageUrl: string | null }
 ) => {
   const searchParams = new URLSearchParams({
     title: game.title,
@@ -44,6 +44,7 @@ export const buildGameAchievementPath = (
     objectId: game.objectId,
     userId: user?.userId || "",
     displayName: user?.displayName || "",
+    profileImageUrl: user?.profileImageUrl || "",
   });
 
   return `/achievements/?${searchParams.toString()}`;

src/renderer/src/pages/achievement/achievements-content.tsx

@@ -1,11 +1,11 @@
 import { setHeaderTitle } from "@renderer/features";
-import { useAppDispatch, useDate } from "@renderer/hooks";
+import { useAppDispatch, useDate, useUserDetails } from "@renderer/hooks";
 import { steamUrlBuilder } from "@shared";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import * as styles from "./achievements.css";
 import { formatDownloadProgress } from "@renderer/helpers";
-import { TrophyIcon } from "@primer/octicons-react";
+import { PersonIcon, TrophyIcon } from "@primer/octicons-react";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { gameDetailsContext } from "@renderer/context";
 import { UserAchievement } from "@types";
@@ -14,12 +14,15 @@ import Color from "color";
 
 const HERO_ANIMATION_THRESHOLD = 25;
 
-interface AchievementsContentProps {
+interface UserInfo {
-  otherUser: {
   userId: string;
   displayName: string;
   achievements: UserAchievement[];
-  } | null;
+  profileImageUrl: string;
+}
+
+interface AchievementsContentProps {
+  otherUser: UserInfo | null;
 }
 
 interface AchievementListProps {
@@ -30,11 +33,13 @@ interface AchievementListProps {
 interface AchievementPanelProps {
   achievements: UserAchievement[];
   displayName: string | null;
+  profileImageUrl: string | null;
 }
 
 function AchievementPanel({
   achievements,
   displayName,
+  profileImageUrl,
 }: AchievementPanelProps) {
   const { t } = useTranslation("achievement");
 
@@ -42,14 +47,38 @@ function AchievementPanel({
     (achievement) => achievement.unlocked
   ).length;
 
+  const { userDetails } = useUserDetails();
+
+  const getProfileImage = () => {
+    const imageUrl = profileImageUrl || userDetails?.profileImageUrl;
+    return (
+      <div className={styles.profileAvatar}>
+        {imageUrl ? (
+          <img className={styles.profileAvatar} src={imageUrl} alt={"teste"} />
+        ) : (
+          <PersonIcon size={24} />
+        )}
+      </div>
+    );
+  };
+
   const totalAchievementCount = achievements.length;
   return (
     <div
       style={{
         display: "flex",
-        flexDirection: "column",
+        flexDirection: "row",
         width: "100%",
         padding: `0 ${SPACING_UNIT * 2}px`,
+        gap: `${SPACING_UNIT * 2}px`,
+      }}
+    >
+      {getProfileImage()}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
         }}
       >
         <h1 style={{ fontSize: "1.2em", marginBottom: "8px" }}>
@@ -93,6 +122,7 @@ function AchievementPanel({
           className={styles.achievementsProgressBar}
         />
       </div>
+    </div>
   );
 }
 
@@ -311,12 +341,14 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
             <AchievementPanel
               displayName={otherUser.displayName}
               achievements={otherUser.achievements}
+              profileImageUrl={otherUser.profileImageUrl}
             />
           )}
 
           <AchievementPanel
             displayName={null}
             achievements={sortedAchievements}
+            profileImageUrl={null}
           />
         </div>
         <div

src/renderer/src/pages/achievement/achievements.css.ts

@@ -176,3 +176,15 @@ export const listItemSkeleton = style({
   padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
   gap: `${SPACING_UNIT * 2}px`,
 });
+
+export const profileAvatar = style({
+  height: "65px",
+  width: "65px",
+  borderRadius: "4px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: vars.color.background,
+  position: "relative",
+  objectFit: "cover",
+});

src/renderer/src/pages/achievement/achievements.tsx

@@ -19,6 +19,7 @@ export function Achievement() {
   const title = searchParams.get("title");
   const userId = searchParams.get("userId");
   const displayName = searchParams.get("displayName");
+  const profileImageUrl = searchParams.get("profileImageUrl");
 
   const { userDetails } = useUserDetails();
 
@@ -59,6 +60,7 @@ export function Achievement() {
         userId: otherUserId,
         displayName: displayName || "",
         achievements: otherUserAchievements || [],
+        profileImageUrl: profileImageUrl || "",
       }
     : null;
 

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

@@ -52,7 +52,11 @@ export function ProfileContent() {
     // });
 
     const userParams = userProfile
-      ? { userId: userProfile.id, displayName: userProfile.displayName }
+      ? {
+          userId: userProfile.id,
+          displayName: userProfile.displayName,
+          profileImageUrl: userProfile.profileImageUrl,
+        }
       : undefined;
 
     return buildGameAchievementPath({ ...game }, userParams);