feat: grayscale and update game details context on achievement event

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

@@ -138,6 +138,7 @@ export function GameDetailsContextProvider({
     setGame(null);
     setIsLoading(true);
     setisGameRunning(false);
+    setAchievements([]);
     dispatch(setHeaderTitle(gameTitle));
   }, [objectID, gameTitle, dispatch]);
 
@@ -158,6 +159,22 @@ export function GameDetailsContextProvider({
     };
   }, [game?.id, isGameRunning, updateGame]);
 
+  useEffect(() => {
+    const unsubscribe = window.electron.onAchievementUnlocked(
+      (objectId, shop) => {
+        if (objectID !== objectId || shop !== shop) return;
+
+        window.electron
+          .getGameAchievements(objectID!, shop as GameShop)
+          .then(setAchievements);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [objectID, shop]);
+
   const getDownloadsPath = async () => {
     if (userPreferences?.downloadsPath) return userPreferences.downloadsPath;
     return window.electron.getDefaultDownloadsPath();

src/renderer/src/declaration.d.ts

@@ -70,6 +70,9 @@ declare global {
       objectId: string,
       shop: GameShop
     ) => Promise<GameAchievement[]>;
+    onAchievementUnlocked: (
+      cb: (objectId: string, shop: GameShop) => void
+    ) => () => Electron.IpcRenderer;
 
     /* Library */
     addGameToLibrary: (

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

@@ -48,7 +48,7 @@ export function Sidebar() {
         isLoading={howLongToBeat.isLoading}
       /> */}
 
-      {achievements.length && (
+      {achievements.length > 0 && (
         <div
           style={{
             display: "flex",
@@ -71,11 +71,14 @@ export function Sidebar() {
               <img
                 style={{
                   height: "72px",
+                  width: "72px",
+                  filter: achievement.unlocked ? "none" : "grayscale(100%)",
                 }}
                 src={
                   achievement.unlocked ? achievement.icon : achievement.icongray
                 }
                 alt={achievement.displayName}
+                loading="lazy"
               />
               <div>
                 <p>{achievement.displayName}</p>