test

fix: custom assets not being showed in library page

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/components/sidebar/sidebar.scss

@@ -128,7 +128,6 @@
     border: 1px solid rgba(34, 197, 94, 0.5);
   }
 
-
   &__section-header {
     display: flex;
     justify-content: space-between;

src/renderer/src/hooks/use-library.ts

@@ -7,9 +7,25 @@ export function useLibrary() {
   const library = useAppSelector((state) => state.library.value);
 
   const updateLibrary = useCallback(async () => {
-    return window.electron
+    return window.electron.getLibrary().then(async (updatedLibrary) => {
-      .getLibrary()
+      const libraryWithAchievements = await Promise.all(
-      .then((updatedLibrary) => dispatch(setLibrary(updatedLibrary)));
+        updatedLibrary.map(async (game) => {
+          const unlockedAchievements =
+            await window.electron.getUnlockedAchievements(
+              game.objectId,
+              game.shop
+            );
+
+          return {
+            ...game,
+            unlockedAchievementCount:
+              game.unlockedAchievementCount || unlockedAchievements.length,
+          };
+        })
+      );
+
+      dispatch(setLibrary(libraryWithAchievements));
+    });
   }, [dispatch]);
 
   return { library, updateLibrary };

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

@@ -12,12 +12,18 @@ 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
 ) => {
-  return customUrl || originalUrl || fallbackUrl || "";
+  const selectedUrl = customUrl || originalUrl || fallbackUrl || "";
+  return normalizePathForCss(selectedUrl);
 };
 
 export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
@@ -30,15 +36,21 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
   const backgroundImage = useMemo(
     () =>
       getImageWithCustomPriority(
+        game.customHeroImageUrl,
         game.libraryHeroImageUrl,
-        game.libraryImageUrl,
+        game.libraryImageUrl ?? game.iconUrl
-        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]
   );
 
@@ -49,7 +61,7 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
     [game.unlockedAchievementCount, game.achievementCount]
   );
 
-  const logoImage = game.logoImageUrl;
+  const logoImage = game.customLogoImageUrl ?? game.logoImageUrl;
 
   return (
     <button

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

@@ -25,12 +25,14 @@ 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,7 +19,10 @@ export default function Library() {
     onLibraryBatchComplete?: (cb: () => void) => () => void;
   };
 
-  const [viewMode, setViewMode] = useState<ViewMode>("compact");
+  const [viewMode, setViewMode] = useState<ViewMode>(() => {
+    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;
@@ -31,6 +34,11 @@ 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 })
@@ -71,7 +79,7 @@ export default function Library() {
   );
 
   const handleCloseContextMenu = useCallback(() => {
-    setContextMenu({ game: null, visible: false, position: { x: 0, y: 0 } });
+    setContextMenu((prev) => ({ ...prev, visible: false }));
   }, []);
 
   const filteredLibrary = useMemo(() => {
@@ -147,7 +155,10 @@ export default function Library() {
             </div>
 
             <div className="library__controls-right">
-              <ViewOptions viewMode={viewMode} onViewModeChange={setViewMode} />
+              <ViewOptions
+                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;