diff --git a/src/renderer/src/pages/library/library.tsx b/src/renderer/src/pages/library/library.tsx index d9ef1c3c..323db73e 100644 --- a/src/renderer/src/pages/library/library.tsx +++ b/src/renderer/src/pages/library/library.tsx @@ -1,11 +1,10 @@ -import { useEffect, useMemo, useState, useCallback, useRef } from "react"; +import { useEffect, useMemo, useState, useCallback } from "react"; import { useLibrary, useAppDispatch, useAppSelector } from "@renderer/hooks"; import { setHeaderTitle } from "@renderer/features"; import { TelescopeIcon } from "@primer/octicons-react"; import { useTranslation } from "react-i18next"; import { LibraryGame } from "@types"; import { GameContextMenu } from "@renderer/components"; -import VirtualList from "rc-virtual-list"; import { LibraryGameCard } from "./library-game-card"; import { LibraryGameCardLarge } from "./library-game-card-large"; import { ViewOptions, ViewMode } from "./view-options"; @@ -21,14 +20,12 @@ export default function Library() { const [viewMode, setViewMode] = useState("compact"); const [filterBy, setFilterBy] = useState("all"); - const [containerHeight, setContainerHeight] = useState(800); const [contextMenu, setContextMenu] = useState<{ game: LibraryGame | null; visible: boolean; position: { x: number; y: number }; }>({ game: null, visible: false, position: { x: 0, y: 0 } }); - - const containerRef = useRef(null); + const searchQuery = useAppSelector((state) => state.library.searchQuery); const dispatch = useAppDispatch(); const { t } = useTranslation("library"); @@ -57,19 +54,6 @@ export default function Library() { }; }, [dispatch, t, updateLibrary]); - useEffect(() => { - const updateHeight = () => { - if (containerRef.current) { - const rect = containerRef.current.getBoundingClientRect(); - setContainerHeight(window.innerHeight - rect.top); - } - }; - - updateHeight(); - window.addEventListener("resize", updateHeight); - return () => window.removeEventListener("resize", updateHeight); - }, []); - const handleOnMouseEnterGameCard = useCallback(() => { // Optional: pause animations if needed }, []); @@ -158,17 +142,8 @@ export default function Library() { const hasGames = library.length > 0; - let itemHeight: number; - if (viewMode === "large") { - itemHeight = 200; - } else if (viewMode === "grid") { - itemHeight = 240; - } else { - itemHeight = 180; - } - return ( -
+
{hasGames && (
@@ -200,38 +175,18 @@ export default function Library() {
)} - {hasGames && sortedLibrary.length > 50 && viewMode === "large" && ( + {hasGames && viewMode === "large" && (
- `${game.shop}-${game.objectId}`} - > - {(game) => ( - - )} - + {sortedLibrary.map((game) => ( + + ))}
)} - {hasGames && - (sortedLibrary.length <= 50 || viewMode !== "large") && - viewMode === "large" && ( -
- {sortedLibrary.map((game) => ( - - ))} -
- )} - {hasGames && viewMode !== "large" && (
    {sortedLibrary.map((game) => (