fix: using achievement count data from api

src/main/events/library/get-library.ts

@@ -4,7 +4,6 @@ import {
   downloadsSublevel,
   gamesShopAssetsSublevel,
   gamesSublevel,
-  gameAchievementsSublevel,
 } from "@main/level";
 
 const getLibrary = async (): Promise<LibraryGame[]> => {
@@ -19,33 +18,19 @@ const getLibrary = async (): Promise<LibraryGame[]> => {
             const download = await downloadsSublevel.get(key);
             const gameAssets = await gamesShopAssetsSublevel.get(key);
 
-            let unlockedAchievementCount = 0;
-            let achievementCount = 0;
-
-            try {
-              const achievements = await gameAchievementsSublevel.get(key);
-              if (achievements) {
-                achievementCount = achievements.achievements.length;
-                unlockedAchievementCount =
-                  achievements.unlockedAchievements.length;
-              }
-            } catch {
-              // No achievements data for this game
-            }
-
             return {
               id: key,
               ...game,
               download: download ?? null,
-              unlockedAchievementCount,
+              unlockedAchievementCount: game.unlockedAchievementCount ?? 0,
-              achievementCount,
+              achievementCount: game.achievementCount ?? 0,
               // Spread gameAssets last to ensure all image URLs are properly set
               ...gameAssets,
               // Preserve custom image URLs from game if they exist
               customIconUrl: game.customIconUrl,
               customLogoImageUrl: game.customLogoImageUrl,
               customHeroImageUrl: game.customHeroImageUrl,
-            } as LibraryGame;
+            };
           })
       );
     });

src/main/services/library-sync/merge-with-remote-games.ts

@@ -9,6 +9,8 @@ type ProfileGame = {
   hasManuallyUpdatedPlaytime: boolean;
   isFavorite?: boolean;
   isPinned?: boolean;
+  achievementCount: number;
+  unlockedAchievementCount: number;
 } & ShopAssets;
 
 export const mergeWithRemoteGames = async () => {
@@ -39,6 +41,8 @@ export const mergeWithRemoteGames = async () => {
             playTimeInMilliseconds: updatedPlayTime,
             favorite: game.isFavorite ?? localGame.favorite,
             isPinned: game.isPinned ?? localGame.isPinned,
+            achievementCount: game.achievementCount,
+            unlockedAchievementCount: game.unlockedAchievementCount,
           });
         } else {
           await gamesSublevel.put(gameKey, {
@@ -55,6 +59,8 @@ export const mergeWithRemoteGames = async () => {
             isDeleted: false,
             favorite: game.isFavorite ?? false,
             isPinned: game.isPinned ?? false,
+            achievementCount: game.achievementCount,
+            unlockedAchievementCount: game.unlockedAchievementCount,
           });
         }
 

src/renderer/src/components/game-card/game-card.tsx

@@ -47,7 +47,7 @@ export function GameCard({ game, ...props }: GameCardProps) {
     >
       <div className="game-card__backdrop">
         <img
-          src={game.libraryImageUrl}
+          src={game.libraryImageUrl ?? undefined}
           alt={game.title}
           className="game-card__cover"
           loading="lazy"

src/renderer/src/components/hero/hero.tsx

@@ -50,14 +50,14 @@ export function Hero() {
       >
         <div className="hero__backdrop">
           <img
-            src={game.libraryHeroImageUrl}
+            src={game.libraryHeroImageUrl ?? undefined}
             alt={game.description ?? ""}
             className="hero__media"
           />
 
           <div className="hero__content">
             <img
-              src={game.logoImageUrl}
+              src={game.logoImageUrl ?? undefined}
               width="250px"
               alt={game.description ?? ""}
               loading="eager"

src/renderer/src/pages/library/library-game-card-large.tsx

@@ -12,18 +12,12 @@ interface LibraryGameCardLargeProps {
   ) => void;
 }
 
-const normalizePathForCss = (url: string | null | undefined): string => {
-  if (!url) return "";
-  return url.replaceAll("\\", "/");
-};
-
 const getImageWithCustomPriority = (
   customUrl: string | null | undefined,
   originalUrl: string | null | undefined,
   fallbackUrl?: string | null | undefined
 ) => {
-  const selectedUrl = customUrl || originalUrl || fallbackUrl || "";
+  return customUrl || originalUrl || fallbackUrl || "";
-  return normalizePathForCss(selectedUrl);
 };
 
 export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
@@ -36,21 +30,15 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
   const backgroundImage = useMemo(
     () =>
       getImageWithCustomPriority(
-        game.customHeroImageUrl,
         game.libraryHeroImageUrl,
-        game.libraryImageUrl ?? game.iconUrl
+        game.libraryImageUrl,
+        game.iconUrl
       ),
-    [
+    [game.libraryHeroImageUrl, game.libraryImageUrl, game.iconUrl]
-      game.customHeroImageUrl,
-      game.libraryHeroImageUrl,
-      game.libraryImageUrl,
-      game.iconUrl,
-    ]
   );
 
   const backgroundStyle = useMemo(
-    () =>
+    () => ({ backgroundImage: `url(${backgroundImage})` }),
-      backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {},
     [backgroundImage]
   );
 
@@ -61,7 +49,7 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
     [game.unlockedAchievementCount, game.achievementCount]
   );
 
-  const logoImage = game.customLogoImageUrl ?? game.logoImageUrl;
+  const logoImage = game.logoImageUrl;
 
   return (
     <button

src/renderer/src/pages/library/library-game-card.tsx

@@ -25,14 +25,12 @@ export const LibraryGameCard = memo(function LibraryGameCard({
   const { formatPlayTime, handleCardClick, handleContextMenuClick } =
     useGameCard(game, onContextMenu);
 
-  const coverImage = (
+  const coverImage =
-    game.customIconUrl ??
     game.coverImageUrl ??
     game.libraryImageUrl ??
     game.libraryHeroImageUrl ??
     game.iconUrl ??
-    ""
+    undefined;
-  ).replaceAll("\\", "/");
 
   return (
     <button

src/renderer/src/pages/library/library.tsx

@@ -19,10 +19,7 @@ export default function Library() {
     onLibraryBatchComplete?: (cb: () => void) => () => void;
   };
 
-  const [viewMode, setViewMode] = useState<ViewMode>(() => {
+  const [viewMode, setViewMode] = useState<ViewMode>("compact");
-    const savedViewMode = localStorage.getItem("library-view-mode");
-    return (savedViewMode as ViewMode) || "compact";
-  });
   const [filterBy, setFilterBy] = useState<FilterOption>("all");
   const [contextMenu, setContextMenu] = useState<{
     game: LibraryGame | null;
@@ -34,11 +31,6 @@ export default function Library() {
   const dispatch = useAppDispatch();
   const { t } = useTranslation("library");
 
-  const handleViewModeChange = useCallback((mode: ViewMode) => {
-    setViewMode(mode);
-    localStorage.setItem("library-view-mode", mode);
-  }, []);
-
   useEffect(() => {
     dispatch(setHeaderTitle(t("library")));
     const electron = (globalThis as unknown as { electron?: ElectronAPI })
@@ -79,7 +71,7 @@ export default function Library() {
   );
 
   const handleCloseContextMenu = useCallback(() => {
-    setContextMenu((prev) => ({ ...prev, visible: false }));
+    setContextMenu({ game: null, visible: false, position: { x: 0, y: 0 } });
   }, []);
 
   const filteredLibrary = useMemo(() => {
@@ -155,10 +147,7 @@ export default function Library() {
             </div>
 
             <div className="library__controls-right">
-              <ViewOptions
+              <ViewOptions viewMode={viewMode} onViewModeChange={setViewMode} />
-                viewMode={viewMode}
-                onViewModeChange={handleViewModeChange}
-              />
             </div>
           </div>
         </div>

src/types/index.ts

@@ -42,9 +42,9 @@ export interface ShopAssets {
   shop: GameShop;
   title: string;
   iconUrl: string | null;
-  libraryHeroImageUrl: string;
+  libraryHeroImageUrl: string | null;
-  libraryImageUrl: string;
+  libraryImageUrl: string | null;
-  logoImageUrl: string;
+  logoImageUrl: string | null;
   logoPosition: string | null;
   coverImageUrl: string | null;
   downloadSources: string[];

src/types/level.types.ts

@@ -56,6 +56,8 @@ export interface Game {
   launchOptions?: string | null;
   favorite?: boolean;
   isPinned?: boolean;
+  achievementCount?: number;
+  unlockedAchievementCount?: number;
   pinnedDate?: Date | null;
   automaticCloudSync?: boolean;
   hasManuallyUpdatedPlaytime?: boolean;