feat: starting showing local achievements

src/renderer/src/context/game-details/game-details.context.tsx

@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector, useDownload } from "@renderer/hooks";
 
 import type {
   Game,
+  GameAchievement,
   GameRepack,
   GameShop,
   GameStats,
@@ -53,6 +54,7 @@ export function GameDetailsContextProvider({
 
   const [shopDetails, setShopDetails] = useState<ShopDetails | null>(null);
   const [repacks, setRepacks] = useState<GameRepack[]>([]);
+  const [achievements, setAchievements] = useState<GameAchievement[]>([]);
   const [game, setGame] = useState<Game | null>(null);
   const [hasNSFWContentBlocked, setHasNSFWContentBlocked] = useState(false);
 
@@ -99,8 +101,9 @@ export function GameDetailsContextProvider({
       ),
       window.electron.searchGameRepacks(gameTitle),
       window.electron.getGameStats(objectID!, shop as GameShop),
+      window.electron.getGameAchievements(objectID!, shop as GameShop),
     ])
-      .then(([appDetailsResult, repacksResult, statsResult]) => {
+      .then(([appDetailsResult, repacksResult, statsResult, achievements]) => {
         if (appDetailsResult.status === "fulfilled") {
           setShopDetails(appDetailsResult.value);
 
@@ -117,6 +120,11 @@ export function GameDetailsContextProvider({
           setRepacks(repacksResult.value);
 
         if (statsResult.status === "fulfilled") setStats(statsResult.value);
+
+        if (achievements.status === "fulfilled") {
+          console.log(achievements.value);
+          setAchievements(achievements.value);
+        }
       })
       .finally(() => {
         setIsLoading(false);
@@ -193,6 +201,7 @@ export function GameDetailsContextProvider({
         showGameOptionsModal,
         showRepacksModal,
         stats,
+        achievements,
         hasNSFWContentBlocked,
         setHasNSFWContentBlocked,
         setGameColor,

src/renderer/src/context/game-details/game-details.context.types.ts

@@ -1,5 +1,6 @@
 import type {
   Game,
+  GameAchievement,
   GameRepack,
   GameShop,
   GameStats,
@@ -19,6 +20,7 @@ export interface GameDetailsContext {
   showRepacksModal: boolean;
   showGameOptionsModal: boolean;
   stats: GameStats | null;
+  achievements: GameAchievement[];
   hasNSFWContentBlocked: boolean;
   setGameColor: React.Dispatch<React.SetStateAction<string>>;
   selectGameExecutable: () => Promise<string | null>;

src/renderer/src/declaration.d.ts

@@ -25,6 +25,7 @@ import type {
   UserStats,
   UserDetails,
   FriendRequestSync,
+  GameAchievement,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -65,6 +66,10 @@ declare global {
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;
     getGameStats: (objectId: string, shop: GameShop) => Promise<GameStats>;
     getTrendingGames: () => Promise<TrendingGame[]>;
+    getGameAchievements: (
+      objectId: string,
+      shop: GameShop
+    ) => Promise<GameAchievement[]>;
 
     /* Library */
     addGameToLibrary: (

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -17,7 +17,8 @@ export function Sidebar() {
   const [activeRequirement, setActiveRequirement] =
     useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
 
-  const { gameTitle, shopDetails, stats } = useContext(gameDetailsContext);
+  const { gameTitle, shopDetails, stats, achievements } =
+    useContext(gameDetailsContext);
 
   const { t } = useTranslation("game_details");
 
@@ -45,6 +46,17 @@ export function Sidebar() {
         isLoading={howLongToBeat.isLoading}
       /> */}
 
+      {achievements.map((achievement, index) => (
+        <div key={index}>
+          <img
+            src={achievement.unlocked ? achievement.icon : achievement.icongray}
+          />
+          <p>{achievement.displayName}</p>
+          {achievement.unlockTime &&
+            new Date(achievement.unlockTime).toDateString()}
+        </div>
+      ))}
+
       {stats && (
         <>
           <div