feat: remembering the view user left the library and restoring it on opening library again

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

@@ -4,6 +4,7 @@ import {
   downloadsSublevel,
   gamesShopAssetsSublevel,
   gamesSublevel,
+  gameAchievementsSublevel,
 } from "@main/level";
 
 const getLibrary = async (): Promise<LibraryGame[]> => {
@@ -18,19 +19,33 @@ 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: game.unlockedAchievementCount ?? 0,
-              achievementCount: game.achievementCount ?? 0,
+              unlockedAchievementCount,
+              achievementCount,
               // 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,8 +9,6 @@ type ProfileGame = {
   hasManuallyUpdatedPlaytime: boolean;
   isFavorite?: boolean;
   isPinned?: boolean;
-  achievementCount: number;
-  unlockedAchievementCount: number;
 } & ShopAssets;
 
 export const mergeWithRemoteGames = async () => {
@@ -41,8 +39,6 @@ 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, {
@@ -59,8 +55,6 @@ 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 ?? undefined}
+          src={game.libraryImageUrl}
           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 ?? undefined}
+            src={game.libraryHeroImageUrl}
             alt={game.description ?? ""}
             className="hero__media"
           />
 
           <div className="hero__content">
             <img
-              src={game.logoImageUrl ?? undefined}
+              src={game.logoImageUrl}
               width="250px"
               alt={game.description ?? ""}
               loading="eager"

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.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]
   );
 
@@ -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 | null;
-  libraryImageUrl: string | null;
-  logoImageUrl: string | null;
+  libraryHeroImageUrl: string;
+  libraryImageUrl: string;
+  logoImageUrl: string;
   logoPosition: string | null;
   coverImageUrl: string | null;
   downloadSources: string[];

src/types/level.types.ts

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