Merge branch 'main' of https://github.com/hydralauncher/hydra into feat/custom-achievement-sound

2026-01-11 13:56:16 +00:00 · 2025-11-10 22:57:59 +00:00
parent 95894484f1 77b2fc3946
commit b8647a3300
21 changed files with 628 additions and 868 deletions
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -93,6 +93,7 @@
  },
  "header": {
    "search": "Search games",
+    "search_library": "Search library",
    "home": "Home",
    "catalogue": "Catalogue",
    "library": "Library",
@@ -727,9 +728,8 @@
    "amount_minutes_short": "{{amount}}m",
    "manual_playtime_tooltip": "This playtime has been manually updated",
    "all_games": "All Games",
-    "favourited_games": "Favourited",
-    "new_games": "New Games",
-    "top_10": "Top 10"
+    "recently_played": "Recently Played",
+    "favorites": "Favorites"
  },
  "achievement": {
    "achievement_unlocked": "Achievement unlocked",
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -13,6 +13,7 @@
  },
  "sidebar": {
    "catalogue": "Catálogo",
+    "library": "Librería",
    "downloads": "Descargas",
    "settings": "Ajustes",
    "my_library": "Mi Librería",
@@ -722,5 +723,26 @@
    "hydra_cloud_feature_found": "¡Acabas de descubrir una característica de Hydra Cloud!",
    "learn_more": "Descubrir más",
    "debrid_description": "Descargas hasta x4 veces más rápidas con Nimbus"
+  },
+  "library": {
+    "library": "Librería",
+    "play": "Jugar",
+    "download": "Descargar",
+    "downloading": "Descargando",
+    "game": "juego",
+    "games": "juegos",
+    "grid_view": "Vista de cuadrícula",
+    "compact_view": "Vista compacta",
+    "large_view": "Vista grande",
+    "no_games_title": "Tu librería está vacía",
+    "no_games_description": "Agregá juegos del catálogo o descargalos para comenzar",
+    "amount_hours": "{{amount}} horas",
+    "amount_minutes": "{{amount}} minutos",
+    "amount_hours_short": "{{amount}}h",
+    "amount_minutes_short": "{{amount}}m",
+    "manual_playtime_tooltip": "Este tiempo de juego ha sido modificado manualmente",
+    "all_games": "Todos los Juegos",
+    "recently_played": "Jugados Recientemente",
+    "favorites": "Favoritos"
  }
 }
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -13,6 +13,7 @@
  },
  "sidebar": {
    "catalogue": "Catálogo",
+    "library": "Biblioteca",
    "downloads": "Downloads",
    "settings": "Ajustes",
    "my_library": "Biblioteca",
@@ -737,5 +738,26 @@
    "hydra_cloud_feature_found": "Você descobriu uma funcionalidade Hydra Cloud!",
    "learn_more": "Saiba mais",
    "debrid_description": "Baixe até 4x mais rápido com Nimbus"
+  },
+  "library": {
+    "library": "Biblioteca",
+    "play": "Jogar",
+    "download": "Baixar",
+    "downloading": "Baixando",
+    "game": "jogo",
+    "games": "jogos",
+    "grid_view": "Visualização em grade",
+    "compact_view": "Visualização compacta",
+    "large_view": "Visualização grande",
+    "no_games_title": "Sua biblioteca está vazia",
+    "no_games_description": "Adicione jogos do catálogo ou baixe-os para começar",
+    "amount_hours": "{{amount}} horas",
+    "amount_minutes": "{{amount}} minutos",
+    "amount_hours_short": "{{amount}}h",
+    "amount_minutes_short": "{{amount}}m",
+    "manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente",
+    "all_games": "Todos os Jogos",
+    "recently_played": "Jogados Recentemente",
+    "favorites": "Favoritos"
  }
 }
--- a/src/locales/ru/translation.json
+++ b/src/locales/ru/translation.json
@@ -13,6 +13,7 @@
  },
  "sidebar": {
    "catalogue": "Каталог",
+    "library": "Библиотека",
    "downloads": "Загрузки",
    "settings": "Настройки",
    "my_library": "Библиотека",
@@ -733,5 +734,26 @@
    "hydra_cloud_feature_found": "Вы только что открыли для себя функцию Hydra Cloud!",
    "learn_more": "Подробнее",
    "debrid_description": "Скачивайте в 4 раза быстрее с Nimbus"
+  },
+  "library": {
+    "library": "Библиотека",
+    "play": "Играть",
+    "download": "Скачать",
+    "downloading": "Скачивание",
+    "game": "игра",
+    "games": "игры",
+    "grid_view": "Вид сетки",
+    "compact_view": "Компактный вид",
+    "large_view": "Большой вид",
+    "no_games_title": "Ваша библиотека пуста",
+    "no_games_description": "Добавьте игры из каталога или скачайте их, чтобы начать",
+    "amount_hours": "{{amount}} часов",
+    "amount_minutes": "{{amount}} минут",
+    "amount_hours_short": "{{amount}}ч",
+    "amount_minutes_short": "{{amount}}м",
+    "manual_playtime_tooltip": "Время игры было обновлено вручную",
+    "all_games": "Все игры",
+    "recently_played": "Недавно сыгранные",
+    "favorites": "Избранное"
  }
 }
--- a/src/renderer/src/app.scss
+++ b/src/renderer/src/app.scss
@@ -5,7 +5,7 @@
 }

 ::-webkit-scrollbar {
-  width: 4px;
+  width: 9px;
  background-color: globals.$dark-background-color;
 }

@@ -90,6 +90,7 @@ img {

 progress[value] {
  -webkit-appearance: none;
+  appearance: none;
 }

 .container {
--- a/src/renderer/src/components/header/header.scss
+++ b/src/renderer/src/components/header/header.scss
@@ -24,7 +24,7 @@
    background-color: globals.$background-color;
    display: inline-flex;
    transition: all ease 0.2s;
-    width: 300px;
+    width: 200px;
    align-items: center;
    border-radius: 8px;
    border: solid 1px globals.$border-color;
@@ -35,7 +35,7 @@
    }

    &--focused {
-      width: 350px;
+      width: 250px;
      border-color: #dadbe1;
    }
  }
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -7,7 +7,7 @@ import { useAppDispatch, useAppSelector } from "@renderer/hooks";

 import "./header.scss";
 import { AutoUpdateSubHeader } from "./auto-update-sub-header";
-import { setFilters } from "@renderer/features";
+import { setFilters, setLibrarySearchQuery } from "@renderer/features";
 import cn from "classnames";

 const pathTitle: Record<string, string> = {
@@ -28,10 +28,20 @@ export function Header() {
    (state) => state.window
  );

-  const searchValue = useAppSelector(
+  const catalogueSearchValue = useAppSelector(
    (state) => state.catalogueSearch.filters.title
  );

+  const librarySearchValue = useAppSelector(
+    (state) => state.library.searchQuery
+  );
+
+  const isOnLibraryPage = location.pathname.startsWith("/library");
+
+  const searchValue = isOnLibraryPage
+    ? librarySearchValue
+    : catalogueSearchValue;
+
  const dispatch = useAppDispatch();

  const [isFocused, setIsFocused] = useState(false);
@@ -63,18 +73,29 @@ export function Header() {
  };

  const handleSearch = (value: string) => {
+    if (isOnLibraryPage) {
+      dispatch(setLibrarySearchQuery(value.slice(0, 255)));
+    } else {
      dispatch(setFilters({ title: value.slice(0, 255) }));
-
      if (!location.pathname.startsWith("/catalogue")) {
        navigate("/catalogue");
      }
+    }
+  };
+
+  const handleClearSearch = () => {
+    if (isOnLibraryPage) {
+      dispatch(setLibrarySearchQuery(""));
+    } else {
+      dispatch(setFilters({ title: "" }));
+    }
  };

  useEffect(() => {
-    if (!location.pathname.startsWith("/catalogue") && searchValue) {
+    if (!location.pathname.startsWith("/catalogue") && catalogueSearchValue) {
      dispatch(setFilters({ title: "" }));
    }
-  }, [location.pathname, searchValue, dispatch]);
+  }, [location.pathname, catalogueSearchValue, dispatch]);

  return (
    <>
@@ -123,7 +144,7 @@ export function Header() {
              ref={inputRef}
              type="text"
              name="search"
-              placeholder={t("search")}
+              placeholder={isOnLibraryPage ? t("search_library") : t("search")}
              value={searchValue}
              className="header__search-input"
              onChange={(event) => handleSearch(event.target.value)}
@@ -134,7 +155,7 @@ export function Header() {
            {searchValue && (
              <button
                type="button"
-                onClick={() => dispatch(setFilters({ title: "" }))}
+                onClick={handleClearSearch}
                className="header__action-button"
              >
                <XIcon />
--- a/src/renderer/src/features/library-slice.ts
+++ b/src/renderer/src/features/library-slice.ts
@@ -5,10 +5,12 @@ import type { LibraryGame } from "@types";

 export interface LibraryState {
  value: LibraryGame[];
+  searchQuery: string;
 }

 const initialState: LibraryState = {
  value: [],
+  searchQuery: "",
 };

 export const librarySlice = createSlice({
@@ -18,7 +20,10 @@ export const librarySlice = createSlice({
    setLibrary: (state, action: PayloadAction<LibraryState["value"]>) => {
      state.value = action.payload;
    },
+    setLibrarySearchQuery: (state, action: PayloadAction<string>) => {
+      state.searchQuery = action.payload;
+    },
  },
 });

-export const { setLibrary } = librarySlice.actions;
+export const { setLibrary, setLibrarySearchQuery } = librarySlice.actions;
--- a/src/renderer/src/hooks/index.ts
+++ b/src/renderer/src/hooks/index.ts
@@ -6,3 +6,4 @@ export * from "./redux";
 export * from "./use-user-details";
 export * from "./use-format";
 export * from "./use-feature";
+export * from "./use-game-card";
--- a/src/renderer/src/hooks/use-game-card.ts
+++ b/src/renderer/src/hooks/use-game-card.ts
@@ -0,0 +1,66 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useFormat } from "./use-format";
+import { useTranslation } from "react-i18next";
+import { buildGameDetailsPath } from "@renderer/helpers";
+import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import { LibraryGame } from "@types";
+
+export function useGameCard(
+  game: LibraryGame,
+  onContextMenu: (game: LibraryGame, position: { x: number; y: number }) => void
+) {
+  const { t } = useTranslation("library");
+  const { numberFormatter } = useFormat();
+  const navigate = useNavigate();
+
+  const formatPlayTime = useCallback(
+    (playTimeInMilliseconds = 0, isShort = false) => {
+      const minutes = playTimeInMilliseconds / 60000;
+
+      if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+        return t(isShort ? "amount_minutes_short" : "amount_minutes", {
+          amount: minutes.toFixed(0),
+        });
+      }
+
+      const hours = minutes / 60;
+      const hoursKey = isShort ? "amount_hours_short" : "amount_hours";
+      const hoursAmount = isShort
+        ? Math.floor(hours)
+        : numberFormatter.format(hours);
+
+      return t(hoursKey, { amount: hoursAmount });
+    },
+    [numberFormatter, t]
+  );
+
+  const handleCardClick = useCallback(() => {
+    navigate(buildGameDetailsPath(game));
+  }, [navigate, game]);
+
+  const handleContextMenuClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onContextMenu(game, { x: e.clientX, y: e.clientY });
+    },
+    [game, onContextMenu]
+  );
+
+  const handleMenuButtonClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const rect = e.currentTarget.getBoundingClientRect();
+      onContextMenu(game, { x: rect.right, y: rect.bottom });
+    },
+    [game, onContextMenu]
+  );
+
+  return {
+    formatPlayTime,
+    handleCardClick,
+    handleContextMenuClick,
+    handleMenuButtonClick,
+  };
+}
--- a/src/renderer/src/pages/library/filter-options.scss
+++ b/src/renderer/src/pages/library/filter-options.scss
@@ -1,63 +1,55 @@
@use "../../scss/globals.scss";

 .library-filter-options {
-  &__container {
+  &__tabs {
    display: flex;
-    align-items: center;
    gap: calc(globals.$spacing-unit);
-    flex-wrap: wrap;
+    position: relative;
  }

-  &__option {
-    display: flex;
-    align-items: center;
-    gap: calc(globals.$spacing-unit);
-    padding: 8px 16px;
-    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.9);
+  &__tab-wrapper {
+    position: relative;
+  }
+
+  &__tab {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    padding: calc(globals.$spacing-unit) calc(globals.$spacing-unit * 2);
    cursor: pointer;
-    font-size: 13px;
+    font-size: 14px;
    font-weight: 500;
-    transition: all ease 0.2s;
-    white-space: nowrap; /* prevent label and count from wrapping */
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    transition: color ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 0.5);

-    &:hover {
-      color: rgba(255, 255, 255, 0.9);
-      background: rgba(255, 255, 255, 0.08);
-    }
-
-    &.active {
-      color: #000;
-      background: #fff;
-      svg,
-      svg * {
-        fill: currentColor;
-        color: currentColor;
-      }
-
-      .library-filter-options__count {
-        background: #ebebeb;
-        color: rgba(0, 0, 0, 0.9);
-      }
+    &--active {
+      color: white;
    }
  }

-  &__label {
-    font-weight: 500;
-    white-space: nowrap;
-  }
-
-  &__count {
-    background: rgba(255, 255, 255, 0.16);
-    color: rgba(255, 255, 255, 0.95);
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 12px;
+  &__tab-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 6px;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 9px;
+    font-size: 11px;
    font-weight: 600;
-    min-width: 24px;
-    text-align: center;
-    transition: all ease 0.2s;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1;
+  }
+
+  &__tab-underline {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: white;
  }
 }
--- a/src/renderer/src/pages/library/filter-options.tsx
+++ b/src/renderer/src/pages/library/filter-options.tsx
@@ -1,61 +1,103 @@
+import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import "./filter-options.scss";

-export type FilterOption = "all" | "favourited" | "new" | "top10";
+export type FilterOption = "all" | "recently_played" | "favorites";

 interface FilterOptionsProps {
  filterBy: FilterOption;
  onFilterChange: (filterBy: FilterOption) => void;
  allGamesCount: number;
-  favouritedCount: number;
-  newGamesCount: number;
-  top10Count: number;
+  recentlyPlayedCount: number;
+  favoritesCount: number;
 }

 export function FilterOptions({
  filterBy,
  onFilterChange,
  allGamesCount,
-  favouritedCount,
-  newGamesCount,
-  top10Count,
+  recentlyPlayedCount,
+  favoritesCount,
 }: Readonly<FilterOptionsProps>) {
  const { t } = useTranslation("library");

  return (
-    <div className="library-filter-options__container">
+    <div className="library-filter-options__tabs">
+      <div className="library-filter-options__tab-wrapper">
        <button
-        className={`library-filter-options__option ${filterBy === "all" ? "active" : ""}`}
+          type="button"
+          className={`library-filter-options__tab ${filterBy === "all" ? "library-filter-options__tab--active" : ""}`}
          onClick={() => onFilterChange("all")}
        >
-        <span className="library-filter-options__label">{t("all_games")}</span>
-        <span className="library-filter-options__count">{allGamesCount}</span>
-      </button>
-      <button
-        className={`library-filter-options__option ${filterBy === "favourited" ? "active" : ""}`}
-        onClick={() => onFilterChange("favourited")}
-      >
-        <span className="library-filter-options__label">
-          {t("Favourite Games")}
+          {t("all_games")}
+          {allGamesCount > 0 && (
+            <span className="library-filter-options__tab-badge">
+              {allGamesCount}
            </span>
-        <span className="library-filter-options__count">{favouritedCount}</span>
+          )}
        </button>
+        {filterBy === "all" && (
+          <motion.div
+            className="library-filter-options__tab-underline"
+            layoutId="library-tab-underline"
+            transition={{
+              type: "spring",
+              stiffness: 300,
+              damping: 30,
+            }}
+          />
+        )}
+      </div>
+      <div className="library-filter-options__tab-wrapper">
        <button
-        className={`library-filter-options__option ${filterBy === "new" ? "active" : ""}`}
-        onClick={() => onFilterChange("new")}
+          type="button"
+          className={`library-filter-options__tab ${filterBy === "recently_played" ? "library-filter-options__tab--active" : ""}`}
+          onClick={() => onFilterChange("recently_played")}
        >
-        <span className="library-filter-options__label">{t("new_games")}</span>
-        <span className="library-filter-options__count">{newGamesCount}</span>
-      </button>
-      <button
-        className={`library-filter-options__option ${filterBy === "top10" ? "active" : ""}`}
-        onClick={() => onFilterChange("top10")}
-      >
-        <span className="library-filter-options__label">
-          {t("Most Played")}
+          {t("recently_played")}
+          {recentlyPlayedCount > 0 && (
+            <span className="library-filter-options__tab-badge">
+              {recentlyPlayedCount}
            </span>
-        <span className="library-filter-options__count">{top10Count}</span>
+          )}
        </button>
+        {filterBy === "recently_played" && (
+          <motion.div
+            className="library-filter-options__tab-underline"
+            layoutId="library-tab-underline"
+            transition={{
+              type: "spring",
+              stiffness: 300,
+              damping: 30,
+            }}
+          />
+        )}
+      </div>
+      <div className="library-filter-options__tab-wrapper">
+        <button
+          type="button"
+          className={`library-filter-options__tab ${filterBy === "favorites" ? "library-filter-options__tab--active" : ""}`}
+          onClick={() => onFilterChange("favorites")}
+        >
+          {t("favorites")}
+          {favoritesCount > 0 && (
+            <span className="library-filter-options__tab-badge">
+              {favoritesCount}
+            </span>
+          )}
+        </button>
+        {filterBy === "favorites" && (
+          <motion.div
+            className="library-filter-options__tab-underline"
+            layoutId="library-tab-underline"
+            transition={{
+              type: "spring",
+              stiffness: 300,
+              damping: 30,
+            }}
+          />
+        )}
+      </div>
    </div>
  );
 }
--- a/src/renderer/src/pages/library/library-game-card-large.scss
+++ b/src/renderer/src/pages/library/library-game-card-large.scss
@@ -11,7 +11,6 @@
  cursor: pointer;
  display: flex;
  align-items: center;
-  padding: 0;
  text-align: left;

  &:before {
@@ -25,7 +24,7 @@
      35deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.07) 51.5%,
-      rgba(255, 255, 255, 0.15) 74%,
+      rgba(255, 255, 255, 0.15) 64%,
      rgba(255, 255, 255, 0.1) 100%
    );
    transition: all ease 0.3s;
@@ -63,12 +62,7 @@
    left: 0;
    right: 0;
    bottom: 0;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 0, 0, 0.1) 0%,
-      rgba(0, 0, 0, 0.2) 50%,
-      rgba(0, 0, 0, 0.3) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
    z-index: 1;
  }

@@ -80,7 +74,7 @@
    display: flex;
    flex-direction: column;
    justify-content: space-between;
-    padding: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
  }

  &__top-section {
@@ -90,36 +84,6 @@
    gap: calc(globals.$spacing-unit);
  }

-  &__menu-button {
-    align-self: flex-start;
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    border: solid 1px rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
-    width: 36px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all ease 0.2s;
-    color: rgba(255, 255, 255, 0.95);
-    padding: 0;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    opacity: 0;
-    transform: scale(0.9);
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.6);
-      border-color: rgba(255, 255, 255, 0.25);
-      transform: scale(1.05);
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-  }

  &__logo-container {
    flex: 1;
@@ -168,9 +132,9 @@
    display: flex;
    align-items: center;
    gap: 6px;
-    padding: 8px 12px;
+    padding: 6px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    font-size: 14px;
+    font-size: 12px;
  }

  &__playtime-text {
@@ -185,7 +149,6 @@
    display: flex;
    flex-direction: column;
    gap: 6px;
-    padding: 6px 12px;
    flex: 1 1 auto;
    min-width: 0;
  }
@@ -193,7 +156,6 @@
  &__achievement-header {
    display: flex;
    align-items: center;
-    gap: 8px;
    justify-content: space-between;
  }
  &__achievements-gap {
@@ -241,55 +203,9 @@
  }

  &__achievement-percentage {
-    font-size: 12px;
+    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
  }

-  &__action-button {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
-    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    transition: all ease 0.2s;
-    flex: 0 0 auto;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.15);
-      border-color: rgba(255, 255, 255, 0.3);
-      transform: scale(1.05);
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-  }
-
-  &:hover &__menu-button {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  &__action-icon--downloading {
-    animation: pulse 1.5s ease-in-out infinite;
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
 }
--- a/src/renderer/src/pages/library/library-game-card-large.tsx
+++ b/src/renderer/src/pages/library/library-game-card-large.tsx
@@ -1,25 +1,19 @@
 import { LibraryGame } from "@types";
-import { useDownload, useFormat } from "@renderer/hooks";
-import { useNavigate } from "react-router-dom";
-import { buildGameDetailsPath } from "@renderer/helpers";
+import { useGameCard } from "@renderer/hooks";
 import {
-  PlayIcon,
-  DownloadIcon,
  ClockIcon,
  AlertFillIcon,
-  ThreeBarsIcon,
  TrophyIcon,
-  XIcon,
 } from "@primer/octicons-react";
-import { useTranslation } from "react-i18next";
-import { useCallback, useState } from "react";
-import { useGameActions } from "@renderer/components/game-context-menu/use-game-actions";
-import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
-import { GameContextMenu } from "@renderer/components";
+import { memo, useMemo } from "react";
 import "./library-game-card-large.scss";

 interface LibraryGameCardLargeProps {
  game: LibraryGame;
+  onContextMenu: (
+    game: LibraryGame,
+    position: { x: number; y: number }
+  ) => void;
 }

 const getImageWithCustomPriority = (
@@ -30,122 +24,50 @@ const getImageWithCustomPriority = (
  return customUrl || originalUrl || fallbackUrl || "";
 };

-export function LibraryGameCardLarge({
+export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
  game,
+  onContextMenu,
 }: Readonly<LibraryGameCardLargeProps>) {
-  const { t } = useTranslation("library");
-  const { numberFormatter } = useFormat();
-  const navigate = useNavigate();
-  const { lastPacket } = useDownload();
-  const [contextMenu, setContextMenu] = useState<{
-    visible: boolean;
-    position: { x: number; y: number };
-  }>({ visible: false, position: { x: 0, y: 0 } });
-
-  const isGameDownloading =
-    game?.download?.status === "active" && lastPacket?.gameId === game?.id;
-
-  const formatPlayTime = useCallback(
-    (playTimeInMilliseconds = 0, isShort = false) => {
-      const minutes = playTimeInMilliseconds / 60000;
-
-      if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
-        return t(isShort ? "amount_minutes_short" : "amount_minutes", {
-          amount: minutes.toFixed(0),
-        });
-      }
-
-      const hours = minutes / 60;
-      const hoursKey = isShort ? "amount_hours_short" : "amount_hours";
-      const hoursAmount = isShort
-        ? Math.floor(hours)
-        : numberFormatter.format(hours);
-
-      return t(hoursKey, { amount: hoursAmount });
-    },
-    [numberFormatter, t]
-  );
-
-  const handleCardClick = () => {
-    navigate(buildGameDetailsPath(game));
-  };
-
  const {
-    handlePlayGame,
-    handleOpenDownloadOptions,
-    handleCloseGame,
-    isGameRunning,
-  } = useGameActions(game);
+    formatPlayTime,
+    handleCardClick,
+    handleContextMenuClick,
+  } = useGameCard(game, onContextMenu);

-  const handleActionClick = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-
-    if (isGameRunning) {
-      try {
-        await handleCloseGame();
-      } catch (e) {
-        console.error(e);
-      }
-      return;
-    }
-    try {
-      await handlePlayGame();
-    } catch (err) {
-      console.error(err);
-      try {
-        handleOpenDownloadOptions();
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  };
-
-  const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setContextMenu({
-      visible: true,
-      position: { x: e.clientX, y: e.clientY },
-    });
-  };
-
-  const handleMenuButtonClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setContextMenu({
-      visible: true,
-      position: {
-        x: e.currentTarget.getBoundingClientRect().right,
-        y: e.currentTarget.getBoundingClientRect().bottom,
-      },
-    });
-  };
-
-  const handleCloseContextMenu = () => {
-    setContextMenu({ visible: false, position: { x: 0, y: 0 } });
-  };
-
-  // Use libraryHeroImageUrl as background, fallback to libraryImageUrl
-  const backgroundImage = getImageWithCustomPriority(
+  const backgroundImage = useMemo(
+    () =>
+      getImageWithCustomPriority(
        game.libraryHeroImageUrl,
        game.libraryImageUrl,
        game.iconUrl
+      ),
+    [game.libraryHeroImageUrl, game.libraryImageUrl, game.iconUrl]
+  );
+
+  const backgroundStyle = useMemo(
+    () => ({ backgroundImage: `url(${backgroundImage})` }),
+    [backgroundImage]
+  );
+
+  const achievementBarStyle = useMemo(
+    () => ({
+      width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
+    }),
+    [game.unlockedAchievementCount, game.achievementCount]
  );

-  // For logo, check if logoImageUrl exists (similar to game details page)
  const logoImage = game.logoImageUrl;

  return (
-    <>
    <button
      type="button"
      className="library-game-card-large"
      onClick={handleCardClick}
-        onContextMenu={handleContextMenu}
+      onContextMenu={handleContextMenuClick}
    >
      <div
        className="library-game-card-large__background"
-          style={{ backgroundImage: `url(${backgroundImage})` }}
+        style={backgroundStyle}
      />
      <div className="library-game-card-large__gradient" />

@@ -164,14 +86,6 @@ export function LibraryGameCardLarge({
              {formatPlayTime(game.playTimeInMilliseconds)}
            </span>
          </div>
-            <button
-              type="button"
-              className="library-game-card-large__menu-button"
-              onClick={handleMenuButtonClick}
-              title="More options"
-            >
-              <ThreeBarsIcon size={16} />
-            </button>
        </div>

        <div className="library-game-card-large__logo-container">
@@ -213,67 +127,13 @@ export function LibraryGameCardLarge({
              <div className="library-game-card-large__achievement-progress">
                <div
                  className="library-game-card-large__achievement-bar"
-                    style={{
-                      width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
-                    }}
+                  style={achievementBarStyle}
                />
              </div>
            </div>
          )}
-
-            <button
-              type="button"
-              className="library-game-card-large__action-button"
-              onClick={handleActionClick}
-            >
-              {(() => {
-                if (isGameDownloading) {
-                  return (
-                    <>
-                      <DownloadIcon
-                        size={16}
-                        className="library-game-card-large__action-icon--downloading"
-                      />
-                      {t("downloading")}
-                    </>
-                  );
-                }
-
-                if (isGameRunning) {
-                  return (
-                    <>
-                      <XIcon size={16} />
-                      {t("close")}
-                    </>
-                  );
-                }
-
-                if (game.executablePath) {
-                  return (
-                    <>
-                      <PlayIcon size={16} />
-                      {t("play")}
-                    </>
-                  );
-                }
-
-                return (
-                  <>
-                    <DownloadIcon size={16} />
-                    {t("download")}
-                  </>
-                );
-              })()}
-            </button>
        </div>
      </div>
    </button>
-      <GameContextMenu
-        game={game}
-        visible={contextMenu.visible}
-        position={contextMenu.position}
-        onClose={handleCloseContextMenu}
-      />
-    </>
  );
-}
+});
--- a/src/renderer/src/pages/library/library-game-card.scss
+++ b/src/renderer/src/pages/library/library-game-card.scss
@@ -54,7 +54,7 @@
    justify-content: space-between;
    height: 100%;
    width: 100%;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 5%, transparent 100%);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
    padding: 8px;
    z-index: 2;
  }
@@ -109,25 +109,26 @@
  &__achievements {
    display: flex;
    flex-direction: column;
-    gap: 4px;
-    padding: 6px 8px;
-    opacity: 0;
-    transform: translateY(8px);
+    opacity: 1;
+    transform: translateY(0);
    transition: all ease 0.2s;
-    pointer-events: none;
+    pointer-events: auto;
    width: 100%;
  }
-  &__achievements-gap {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }

  &__achievement-header {
    display: flex;
-    align-items: center;
-    gap: 6px;
    justify-content: space-between;
+    margin-bottom: 8px;
+    color: globals.$muted-color;
+    overflow: hidden;
+    height: 18px;
+  }
+
+  &__achievements-gap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
  }

  &__achievement-trophy {
@@ -136,16 +137,15 @@
  }

  &__achievement-progress {
-    margin-top: 8px;
    width: 100%;
    height: 4px;
    transition: all ease 0.2s;
-    background-color: rgba(255, 255, 255, 0.08);
+    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;

    &::-webkit-progress-bar {
-      background-color: transparent;
+      background-color: rgba(255, 255, 255, 0.15);
      border-radius: 4px;
    }

@@ -164,15 +164,10 @@
  }

  &__achievement-count {
-    font-size: 12px;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
  }

  &__achievement-percentage {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
  }

@@ -209,53 +204,12 @@
    }
  }

-  &__menu-button {
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    border: solid 1px rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all ease 0.2s;
-    color: rgba(255, 255, 255, 0.8);
-    padding: 0;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    opacity: 0;
-    transform: scale(0.9);
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.6);
-      border-color: rgba(255, 255, 255, 0.25);
-      transform: scale(1.05);
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-  }
-
-  &__wrapper:hover &__action-button,
-  &__wrapper:hover &__menu-button {
+  &__wrapper:hover &__action-button {
    opacity: 1;
    transform: scale(1);
  }

-  &__wrapper:hover &__achievements {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-  }

-  &__action-icon {
-    &--downloading {
-      animation: pulse 1.5s ease-in-out infinite;
-    }
-  }

  &__game-image {
    object-fit: cover;
@@ -281,9 +235,9 @@
  }
 }

-/* Force fixed size for compact grid cells so cards render at 220x320 */
+/* Responsive sizing for compact grid cells */
 .library__games-grid--compact .library-game-card__wrapper {
-  width: 215px;
-  height: 320px;
-  aspect-ratio: unset;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 215 / 320;
 }
--- a/src/renderer/src/pages/library/library-game-card.tsx
+++ b/src/renderer/src/pages/library/library-game-card.tsx
@@ -1,89 +1,36 @@
 import { LibraryGame } from "@types";
-import { useFormat } from "@renderer/hooks";
-import { useNavigate } from "react-router-dom";
-import { useCallback, useState } from "react";
-import { buildGameDetailsPath } from "@renderer/helpers";
+import { useGameCard } from "@renderer/hooks";
+import { memo } from "react";
 import {
  ClockIcon,
  AlertFillIcon,
-  ThreeBarsIcon,
  TrophyIcon,
 } from "@primer/octicons-react";
-import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
-import { Tooltip } from "react-tooltip";
-import { useTranslation } from "react-i18next";
-import { GameContextMenu } from "@renderer/components";
 import "./library-game-card.scss";

 interface LibraryGameCardProps {
  game: LibraryGame;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
+  onContextMenu: (
+    game: LibraryGame,
+    position: { x: number; y: number }
+  ) => void;
+  onShowTooltip?: (gameId: string) => void;
+  onHideTooltip?: () => void;
 }

-export function LibraryGameCard({
+export const LibraryGameCard = memo(function LibraryGameCard({
  game,
  onMouseEnter,
  onMouseLeave,
+  onContextMenu,
 }: Readonly<LibraryGameCardProps>) {
-  const { t } = useTranslation("library");
-  const { numberFormatter } = useFormat();
-  const navigate = useNavigate();
-  const [isTooltipHovered, setIsTooltipHovered] = useState(false);
-  const [contextMenu, setContextMenu] = useState<{
-    visible: boolean;
-    position: { x: number; y: number };
-  }>({ visible: false, position: { x: 0, y: 0 } });
-
-  const formatPlayTime = useCallback(
-    (playTimeInMilliseconds = 0, isShort = false) => {
-      const minutes = playTimeInMilliseconds / 60000;
-
-      if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
-        return t(isShort ? "amount_minutes_short" : "amount_minutes", {
-          amount: minutes.toFixed(0),
-        });
-      }
-
-      const hours = minutes / 60;
-      const hoursKey = isShort ? "amount_hours_short" : "amount_hours";
-      const hoursAmount = isShort
-        ? Math.floor(hours)
-        : numberFormatter.format(hours);
-
-      return t(hoursKey, { amount: hoursAmount });
-    },
-    [numberFormatter, t]
-  );
-
-  const handleCardClick = () => {
-    navigate(buildGameDetailsPath(game));
-  };
-
-  const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setContextMenu({
-      visible: true,
-      position: { x: e.clientX, y: e.clientY },
-    });
-  };
-
-  const handleMenuButtonClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setContextMenu({
-      visible: true,
-      position: {
-        x: e.currentTarget.getBoundingClientRect().right,
-        y: e.currentTarget.getBoundingClientRect().bottom,
-      },
-    });
-  };
-
-  const handleCloseContextMenu = () => {
-    setContextMenu({ visible: false, position: { x: 0, y: 0 } });
-  };
+  const {
+    formatPlayTime,
+    handleCardClick,
+    handleContextMenuClick,
+  } = useGameCard(game, onContextMenu);

  const coverImage =
    game.coverImageUrl ??
@@ -93,28 +40,18 @@ export function LibraryGameCard({
    undefined;

  return (
-    <>
    <button
      type="button"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      className="library-game-card__wrapper"
-        title={isTooltipHovered ? undefined : game.title}
+      title={game.title}
      onClick={handleCardClick}
-        onContextMenu={handleContextMenu}
+      onContextMenu={handleContextMenuClick}
    >
      <div className="library-game-card__overlay">
        <div className="library-game-card__top-section">
-            <div
-              className="library-game-card__playtime"
-              data-tooltip-place="top"
-              data-tooltip-content={
-                game.hasManuallyUpdatedPlaytime
-                  ? t("manual_playtime_tooltip")
-                  : undefined
-              }
-              data-tooltip-id={game.objectId}
-            >
+          <div className="library-game-card__playtime">
            {game.hasManuallyUpdatedPlaytime ? (
              <AlertFillIcon
                size={11}
@@ -130,24 +67,14 @@ export function LibraryGameCard({
              {formatPlayTime(game.playTimeInMilliseconds, true)}
            </span>
          </div>
-
-            <button
-              type="button"
-              className="library-game-card__menu-button"
-              onClick={handleMenuButtonClick}
-              title="More options"
-            >
-              <ThreeBarsIcon size={16} />
-            </button>
        </div>

-          {/* Achievements section - shown on hover */}
        {(game.achievementCount ?? 0) > 0 && (
          <div className="library-game-card__achievements">
            <div className="library-game-card__achievement-header">
              <div className="library-game-card__achievements-gap">
                <TrophyIcon
-                    size={14}
+                  size={13}
                  className="library-game-card__achievement-trophy"
                />
                <span className="library-game-card__achievement-count">
@@ -180,23 +107,8 @@ export function LibraryGameCard({
        src={coverImage ?? undefined}
        alt={game.title}
        className="library-game-card__game-image"
+        loading="lazy"
      />
    </button>
-      <Tooltip
-        id={game.objectId}
-        style={{
-          zIndex: 9999,
-        }}
-        openOnClick={false}
-        afterShow={() => setIsTooltipHovered(true)}
-        afterHide={() => setIsTooltipHovered(false)}
-      />
-      <GameContextMenu
-        game={game}
-        visible={contextMenu.visible}
-        position={contextMenu.position}
-        onClose={handleCloseContextMenu}
-      />
-    </>
  );
-}
+});
--- a/src/renderer/src/pages/library/library.scss
+++ b/src/renderer/src/pages/library/library.scss
@@ -2,7 +2,7 @@

 .library {
  &__content {
-    padding: calc(globals.$spacing-unit * 3);
+    padding: calc(globals.$spacing-unit * 2);
    height: 100%;
    width: 100%;
    overflow-y: auto;
@@ -38,13 +38,17 @@
    align-items: center;
    justify-content: space-between;
    width: 100%;
-    gap: calc(globals.$spacing-unit * 2);
+    position: relative;
  }

  &__controls-left {
    display: flex;
    align-items: center;
    gap: calc(globals.$spacing-unit);
+    flex: 1;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    position: relative;
+    margin-right: calc(globals.$spacing-unit * 2);
  }

  &__controls-right {
@@ -159,31 +163,28 @@
      }
    }

-    // Compact view - smaller cards
+    // Compact view - smaller cards with responsive design
    &--compact {
-      grid-template-columns: repeat(auto-fill, 215px);
-      grid-auto-rows: 320px;
-      justify-content: start;
+      grid-template-columns: repeat(3, 1fr);

      @container #{globals.$app-container} (min-width: 900px) {
-        grid-template-columns: repeat(auto-fill, 215px);
+        grid-template-columns: repeat(5, 1fr);
      }

      @container #{globals.$app-container} (min-width: 1300px) {
-        grid-template-columns: repeat(auto-fill, 215px);
+        grid-template-columns: repeat(7, 1fr);
      }

-      /* keep same pattern for very large screens */
      @container #{globals.$app-container} (min-width: 2000px) {
-        grid-template-columns: repeat(auto-fill, 215px);
+        grid-template-columns: repeat(9, 1fr);
      }

      @container #{globals.$app-container} (min-width: 2600px) {
-        grid-template-columns: repeat(auto-fill, 215px);
+        grid-template-columns: repeat(12, 1fr);
      }

      @container #{globals.$app-container} (min-width: 3000px) {
-        grid-template-columns: repeat(auto-fill, 210px);
+        grid-template-columns: repeat(14, 1fr);
      }
    }
  }
--- a/src/renderer/src/pages/library/library.tsx
+++ b/src/renderer/src/pages/library/library.tsx
@@ -1,14 +1,15 @@
-import { useEffect, useMemo, useState } from "react";
-import { useLibrary, useAppDispatch } from "@renderer/hooks";
+import { useEffect, useMemo, useState, useCallback } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+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 { LibraryGameCard } from "./library-game-card";
-// detailed view removed — keep file if needed later
 import { LibraryGameCardLarge } from "./library-game-card-large";
 import { ViewOptions, ViewMode } from "./view-options";
 import { FilterOptions, FilterOption } from "./filter-options";
-import { SearchBar } from "./search-bar";
 import "./library.scss";

 export default function Library() {
@@ -20,7 +21,13 @@ export default function Library() {

  const [viewMode, setViewMode] = useState<ViewMode>("compact");
  const [filterBy, setFilterBy] = useState<FilterOption>("all");
-  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [contextMenu, setContextMenu] = useState<{
+    game: LibraryGame | null;
+    visible: boolean;
+    position: { x: number; y: number };
+  }>({ game: null, visible: false, position: { x: 0, y: 0 } });
+
+  const searchQuery = useAppSelector((state) => state.library.searchQuery);
  const dispatch = useAppDispatch();
  const { t } = useTranslation("library");

@@ -48,35 +55,35 @@ export default function Library() {
    };
  }, [dispatch, t, updateLibrary]);

-  const handleOnMouseEnterGameCard = () => {
+  const handleOnMouseEnterGameCard = useCallback(() => {
    // Optional: pause animations if needed
-  };
+  }, []);

-  const handleOnMouseLeaveGameCard = () => {
+  const handleOnMouseLeaveGameCard = useCallback(() => {
    // Optional: resume animations if needed
-  };
+  }, []);
+
+  const handleOpenContextMenu = useCallback(
+    (game: LibraryGame, position: { x: number; y: number }) => {
+      setContextMenu({ game, visible: true, position });
+    },
+    []
+  );
+
+  const handleCloseContextMenu = useCallback(() => {
+    setContextMenu({ game: null, visible: false, position: { x: 0, y: 0 } });
+  }, []);

  const filteredLibrary = useMemo(() => {
    let filtered;

    switch (filterBy) {
-      case "favourited":
+      case "recently_played":
+        filtered = library.filter((game) => game.lastTimePlayed !== null);
+        break;
+      case "favorites":
        filtered = library.filter((game) => game.favorite);
        break;
-      case "new":
-        filtered = library.filter(
-          (game) => (game.playTimeInMilliseconds || 0) === 0
-        );
-        break;
-      case "top10":
-        filtered = library
-          .slice()
-          .sort(
-            (a, b) =>
-              (b.playTimeInMilliseconds || 0) - (a.playTimeInMilliseconds || 0)
-          )
-          .slice(0, 10);
-        break;
      case "all":
      default:
        filtered = library;
@@ -103,16 +110,24 @@ export default function Library() {
    });
  }, [library, filterBy, searchQuery]);

-  // No sorting for now — rely on filteredLibrary
  const sortedLibrary = filteredLibrary;

-  // Calculate counts for filters
+  const filterCounts = useMemo(() => {
    const allGamesCount = library.length;
-  const favouritedCount = library.filter((game) => game.favorite).length;
-  const newGamesCount = library.filter(
-    (game) => (game.playTimeInMilliseconds || 0) === 0
-  ).length;
-  const top10Count = Math.min(10, library.length);
+    let recentlyPlayedCount = 0;
+    let favoritesCount = 0;
+
+    for (const game of library) {
+      if (game.lastTimePlayed !== null) recentlyPlayedCount++;
+      if (game.favorite) favoritesCount++;
+    }
+
+    return {
+      allGamesCount,
+      recentlyPlayedCount,
+      favoritesCount,
+    };
+  }, [library]);

  const hasGames = library.length > 0;

@@ -125,15 +140,13 @@ export default function Library() {
              <FilterOptions
                filterBy={filterBy}
                onFilterChange={setFilterBy}
-                allGamesCount={allGamesCount}
-                favouritedCount={favouritedCount}
-                newGamesCount={newGamesCount}
-                top10Count={top10Count}
+                allGamesCount={filterCounts.allGamesCount}
+                recentlyPlayedCount={filterCounts.recentlyPlayedCount}
+                favoritesCount={filterCounts.favoritesCount}
              />
            </div>

            <div className="library__controls-right">
-              <SearchBar value={searchQuery} onChange={setSearchQuery} />
              <ViewOptions viewMode={viewMode} onViewModeChange={setViewMode} />
            </div>
          </div>
@@ -150,19 +163,36 @@ export default function Library() {
        </div>
      )}

-      {hasGames && viewMode === "large" && (
-        <div className="library__games-list library__games-list--large">
+      {hasGames && (
+        <AnimatePresence mode="wait">
+          {viewMode === "large" && (
+            <motion.div
+              key={`${filterBy}-large`}
+              className="library__games-list library__games-list--large"
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 10 }}
+              transition={{ duration: 0.2 }}
+            >
              {sortedLibrary.map((game) => (
                <LibraryGameCardLarge
                  key={`${game.shop}-${game.objectId}`}
                  game={game}
+                  onContextMenu={handleOpenContextMenu}
                />
              ))}
-        </div>
+            </motion.div>
          )}

-      {hasGames && viewMode !== "large" && (
-        <ul className={`library__games-grid library__games-grid--${viewMode}`}>
+          {viewMode !== "large" && (
+            <motion.ul
+              key={`${filterBy}-${viewMode}`}
+              className={`library__games-grid library__games-grid--${viewMode}`}
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 10 }}
+              transition={{ duration: 0.2 }}
+            >
              {sortedLibrary.map((game) => (
                <li
                  key={`${game.shop}-${game.objectId}`}
@@ -172,10 +202,22 @@ export default function Library() {
                    game={game}
                    onMouseEnter={handleOnMouseEnterGameCard}
                    onMouseLeave={handleOnMouseLeaveGameCard}
+                    onContextMenu={handleOpenContextMenu}
                  />
                </li>
              ))}
-        </ul>
+            </motion.ul>
+          )}
+        </AnimatePresence>
+      )}
+
+      {contextMenu.game && (
+        <GameContextMenu
+          game={contextMenu.game}
+          visible={contextMenu.visible}
+          position={contextMenu.position}
+          onClose={handleCloseContextMenu}
+        />
      )}
    </section>
  );
--- a/src/renderer/src/pages/library/search-bar.scss
+++ b/src/renderer/src/pages/library/search-bar.scss
@@ -1,75 +0,0 @@
-.search-bar {
-  display: flex;
-  align-items: center;
-
-  &__container {
-    height: 32px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 12px;
-    background-color: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
-    transition: all 0.2s ease;
-    width: 250px;
-
-    &:focus-within {
-      width: 300px;
-      background: rgba(255, 255, 255, 0.02);
-      border-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-
-  &__icon {
-    color: rgba(255, 255, 255, 0.75);
-    flex-shrink: 0;
-    transition: color 0.2s ease;
-  }
-
-  &__input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 14px;
-    font-family: inherit;
-    min-width: 0;
-
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    &:focus ~ .search-bar__icon {
-      color: rgba(255, 255, 255, 0.7);
-    }
-  }
-
-  &__clear {
-    flex-shrink: 0;
-    background: transparent;
-    border: none;
-    color: rgba(255, 255, 255, 0.65);
-    font-size: 18px;
-    font-weight: bold;
-    cursor: pointer;
-    padding: 0;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 3px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    &:active {
-      background: rgba(255, 255, 255, 0.15);
-    }
-  }
-}
--- a/src/renderer/src/pages/library/search-bar.tsx
+++ b/src/renderer/src/pages/library/search-bar.tsx
@@ -1,44 +0,0 @@
-import { SearchIcon } from "@primer/octicons-react";
-import { FC, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import "./search-bar.scss";
-
-interface SearchBarProps {
-  value: string;
-  onChange: (value: string) => void;
-}
-
-export const SearchBar: FC<SearchBarProps> = ({ value, onChange }) => {
-  const { t } = useTranslation();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleClear = () => {
-    onChange("");
-    inputRef.current?.focus();
-  };
-
-  return (
-    <div className="search-bar">
-      <div className="search-bar__container">
-        <SearchIcon size={16} className="search-bar__icon" />
-        <input
-          ref={inputRef}
-          type="text"
-          className="search-bar__input"
-          placeholder={t("Search library", { defaultValue: "Search library" })}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-        />
-        {value && (
-          <button
-            className="search-bar__clear"
-            onClick={handleClear}
-            aria-label="Clear search"
-          >
-            ×
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
--- a/src/renderer/src/pages/library/view-options.scss
+++ b/src/renderer/src/pages/library/view-options.scss
@@ -26,7 +26,7 @@
    display: flex;
    align-items: center;
    gap: calc(globals.$spacing-unit);
-    padding: 8px 10px;
+    padding: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
@@ -38,8 +38,8 @@
    white-space: nowrap;

    &:hover {
-      color: rgba(255, 255, 255, 0.95);
-      background: rgba(255, 255, 255, 0.06);
+      color: rgba(255, 255, 255, 0.9);
+      background: rgba(255, 255, 255, 0.08);
    }

    &.active {