Implement Steam catalog page with infinite scroll and View Transition API

.github/workflows/ci.yml

@@ -0,0 +1,102 @@
+name: CI & Cache
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/desktop/**"
+      - ".github/workflows/ci.yml"
+      - ".github/workflows/release.yml"
+      - "package.json"
+      - "bun.lock"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "apps/desktop/**"
+      - ".github/workflows/ci.yml"
+      - ".github/workflows/release.yml"
+      - "package.json"
+      - "bun.lock"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
+jobs:
+  typecheck-frontend:
+    name: Frontend Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+        working-directory: apps/desktop
+
+      - name: Typecheck
+        run: bun run tsc
+        working-directory: apps/desktop
+
+  rust-check-cache:
+    name: Rust Check & Cache (${{ matrix.platform }})
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: windows-latest
+          - platform: ubuntu-22.04
+          - platform: macos-latest
+            rustTargets: "aarch64-apple-darwin x86_64-apple-darwin"
+    runs-on: ${{ matrix.platform }}
+
+    env:
+      CMAKE_POLICY_VERSION_MINIMUM: "3.5"
+      CMAKEFLAGS: "-DCMAKE_POLICY_VERSION_MINIMUM=3.5"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.rustTargets || '' }}
+
+      - name: Rust cache
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "apps/desktop/src-tauri -> apps/desktop/src-tauri/target"
+          cache-all-crates: "true"
+          prefix-key: "v1-rust-${{ matrix.platform }}"
+          shared-key: "desktop-cache-${{ matrix.platform }}"
+
+      - name: Install dependencies (macOS)
+        if: matrix.platform == 'macos-latest'
+        run: brew install opus pkg-config
+
+      - name: Install dependencies (Ubuntu)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf libudev-dev build-essential curl wget file libxdo-dev libssl-dev
+
+      - name: Cargo Check
+        run: cargo check --manifest-path apps/desktop/src-tauri/Cargo.toml

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
   push:
     tags:
       - "v*"
+  workflow_dispatch:
 
 permissions:
   contents: write
@@ -134,8 +135,10 @@ jobs:
       - name: Rust cache
         uses: Swatinem/rust-cache@v2
         with:
-          workspaces: "apps/desktop/src-tauri"
-          shared-key: "desktop-release-cache"
+          workspaces: "apps/desktop/src-tauri -> apps/desktop/src-tauri/target"
+          cache-all-crates: "true"
+          prefix-key: "v1-rust-${{ matrix.platform }}"
+          shared-key: "desktop-cache-${{ matrix.platform }}"
 
       - name: Setup Python
         uses: actions/setup-python@v5

apps/desktop/package.json

@@ -18,7 +18,6 @@
     "@heroui/react": "^2.8.9",
     "@tailwindcss/vite": "^4.2.1",
     "@tanstack/react-query": "^5",
-    "@tanstack/react-virtual": "^3.14.9",
     "@tauri-apps/api": "^2.11.0",
     "@tauri-apps/plugin-autostart": "^2.5.1",
     "@tauri-apps/plugin-dialog": "~2",

apps/desktop/src/features/games/GameCard.tsx

@@ -201,7 +201,7 @@ export const GameCard = memo(function GameCard(props: GameCardProps) {
 
         {!isCatalog && syncProgress && <GameCardSyncProgress progress={syncProgress} />}
 
-        <MaybeViewTransition name={`game-hero-${game.id}`} share="hero-morph" disabled={isLowPerf}>
+        <MaybeViewTransition name={`game-hero-${game.id}`} share="hero-morph" disabled={isLowPerf || isCatalog}>
           <div className="relative size-full overflow-hidden bg-zinc-950 rounded-xl">
             {(isEffectivelyLoading || (displayImageUrl && !imgLoaded && !imgError)) && (
               <Skeleton className="absolute inset-0 z-10 size-full rounded-xl" />

apps/desktop/src/features/steam-catalog/components/SteamCatalogGridItem.tsx

@@ -1,5 +1,4 @@
 import { memo, startTransition } from "react";
-import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { addTransitionType } from "react";
@@ -10,6 +9,7 @@ import { GameCard } from "@features/games/GameCard";
 import { catalogListItemToConfiguredGame } from "@features/steam-catalog/model/catalogConfiguredGame";
 import { useLowPerformanceMode } from "@hooks/useLowPerformanceMode";
 import { sourceCandidateKey } from "@utils/sourceMatch";
+import { useShellUiStore } from "@store/ShellUiStore";
 
 export type CatalogGridItemProps = {
   item: CatalogListItem;
@@ -56,7 +56,7 @@ export const CatalogGridItem = memo(function CatalogGridItem({
   const best = candidates.length > 0 ? candidates[0] : undefined;
 
   return (
-    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.15 }}>
+    <div>
       <div className="space-y-2">
         <div
           className="overflow-hidden rounded-xl ring-1 ring-transparent 
@@ -72,6 +72,10 @@ export const CatalogGridItem = memo(function CatalogGridItem({
             mediaBySteamAppId={mediaBySteamAppId ?? null}
             mediaFromBatch
             onCardNavigate={() => {
+              const currentY = window.scrollY || document.documentElement.scrollTop;
+              if (currentY > 0) {
+                useShellUiStore.getState().setCatalogScrollPosition(currentY);
+              }
               const from = `${location.pathname}${location.search}`;
               if (libraryGame) {
                 navigate(`/games/${libraryGame.id}`, {
@@ -171,6 +175,6 @@ export const CatalogGridItem = memo(function CatalogGridItem({
           )}
         </div>
       </div>
-    </motion.div>
+    </div>
   );
 });

apps/desktop/src/features/steam-catalog/components/SteamCatalogTrendingHero.tsx

@@ -17,6 +17,7 @@ import {
 import { TrendingHeroSlide } from "@features/steam-catalog/components/TrendingHeroSlide";
 import { visibilityManager } from "@hooks/useAppVisibility";
 import { useLowPerformanceMode } from "@hooks/useLowPerformanceMode";
+import { useShellUiStore } from "@store/ShellUiStore";
 
 type SteamCatalogTrendingHeroProps = {
   items: CatalogListItem[];
@@ -66,6 +67,10 @@ export function SteamCatalogTrendingHero({
 
   const openGame = useCallback(
     (item: CatalogListItem) => {
+      const currentY = window.scrollY || document.documentElement.scrollTop;
+      if (currentY > 0) {
+        useShellUiStore.getState().setCatalogScrollPosition(currentY);
+      }
       if (isLowPerf) {
         navigate(`/games/${toRouteGameId(item)}`, {
           state: {
@@ -140,7 +145,7 @@ export function SteamCatalogTrendingHero({
             pauseOnMouseEnter: true,
           }}
           speed={520}
-          className="sg-trending-swiper min-h-[380px] overflow-hidden rounded-2xl border border-default-200/70 shadow-sm dark:border-default-100/15">
+          className="sg-trending-swiper min-h-95 overflow-hidden rounded-2xl border border-default-200/70 shadow-sm dark:border-default-100/15">
           {slides.map((featured, slideIndex) => (
             <SwiperSlide key={featured.steamAppId} className="h-auto!">
               <TrendingHeroSlide

apps/desktop/src/features/steam-catalog/components/SteamCatalogVirtualizedGrid.tsx

@@ -1,5 +1,4 @@
-import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { memo } from "react";
 import { cn } from "@heroui/react";
 import type { CatalogListItem, SteamAppdetailsMediaResult, SourceBestMatch } from "@services/tauri";
 import type { ConfiguredGame } from "@app-types/config";
@@ -28,96 +27,43 @@ export const SteamCatalogVirtualizedGrid = memo(function SteamCatalogVirtualized
   onInstall,
   consoleMode = false,
 }: SteamCatalogVirtualizedGridProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [columnCount, setColumnCount] = useState(4);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const minWidth = consoleMode ? 320 : 280;
-    const gap = 20;
-
-    const updateColumns = () => {
-      if (!containerRef.current) return;
-      const width = containerRef.current.clientWidth;
-      const cols = Math.max(1, Math.floor((width + gap) / (minWidth + gap)));
-      setColumnCount(cols);
-    };
-
-    updateColumns();
-    const observer = new ResizeObserver(updateColumns);
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, [consoleMode]);
-
-  const rowCount = Math.ceil(items.length / columnCount);
-
-  const virtualizer = useWindowVirtualizer({
-    count: rowCount,
-    estimateSize: () => (consoleMode ? 320 : 266),
-    getItemKey: (index) => index,
-    overscan: 6,
-    scrollMargin: containerRef.current?.offsetTop ?? 0,
-  });
-
-  useLayoutEffect(() => {
-    virtualizer.measure();
-  }, [columnCount, consoleMode]);
-
   return (
-    <div ref={containerRef} className="relative w-full">
-      <div
-        style={{
-          height: `${virtualizer.getTotalSize()}px`,
-          width: "100%",
-          position: "relative",
-        }}>
-        {virtualizer.getVirtualItems().map((virtualRow) => {
-          const rowStartIndex = virtualRow.index * columnCount;
-          const rowItems = items.slice(rowStartIndex, rowStartIndex + columnCount);
-
-          return (
-            <div
-              key={virtualRow.key}
-              data-index={virtualRow.index}
-              className="absolute left-0 top-0 w-full pb-5"
-              style={{
-                transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
-              }}>
-              <div
-                className={cn(
-                  "grid gap-5",
-                  consoleMode
-                    ? "grid-cols-[repeat(auto-fill,minmax(320px,1fr))]"
-                    : "grid-cols-[repeat(auto-fill,minmax(280px,1fr))]"
-                )}>
-                {rowItems.map((item, colIdx) => {
-                  const idx = rowStartIndex + colIdx;
-                  const libraryGame =
-                    (item.steamAppId ? libraryGamesMap.get(String(item.steamAppId)) : undefined) ??
-                    libraryGamesMap.get(item.name.toLowerCase());
+    <div
+      className={cn(
+        "grid gap-5",
+        consoleMode
+          ? "grid-cols-[repeat(auto-fill,minmax(320px,1fr))]"
+          : "grid-cols-[repeat(auto-fill,minmax(280px,1fr))]"
+      )}>
+      {items.map((item, idx) => {
+        const libraryGame =
+          (item.steamAppId ? libraryGamesMap.get(String(item.steamAppId)) : undefined) ??
+          libraryGamesMap.get(item.name.toLowerCase());
 
-                  const uniqueKey = item.steamAppId ? `steam-${item.steamAppId}` : `${item.name}-${idx}`;
+        const uniqueKey = item.steamAppId ? `steam-${item.steamAppId}` : `${item.name}-${idx}`;
 
-                  return (
-                    <CatalogGridItem
-                      key={uniqueKey}
-                      item={item}
-                      libraryGame={libraryGame}
-                      mediaBySteamAppId={mediaBySteamAppId}
-                      match={matchByGameName[item.name]}
-                      selectKey={pickByGame[item.name]}
-                      isMatchingPending={isMatchingPending && !(item.name in matchByGameName)}
-                      onPickChange={onPickChange}
-                      onInstall={onInstall}
-                      consoleMode={consoleMode}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
-      </div>
+        return (
+          <div
+            key={uniqueKey}
+            className="w-full"
+            style={{
+              contentVisibility: "auto",
+              containIntrinsicSize: consoleMode ? "auto 320px" : "auto 240px",
+            }}>
+            <CatalogGridItem
+              item={item}
+              libraryGame={libraryGame}
+              mediaBySteamAppId={mediaBySteamAppId}
+              match={matchByGameName[item.name]}
+              selectKey={pickByGame[item.name]}
+              isMatchingPending={isMatchingPending && !(item.name in matchByGameName)}
+              onPickChange={onPickChange}
+              onInstall={onInstall}
+              consoleMode={consoleMode}
+            />
+          </div>
+        );
+      })}
     </div>
   );
 });