feat: add achievements tracking to game library

- Updated `get-library.ts` to include unlocked and total achievement counts for each game. - Removed `library-game-card-detailed.tsx` and its associated styles as part of the refactor. - Enhanced `library-game-card-large.tsx` to display achievements with progress bars. - Modified `library-game-card.scss` and `library-game-card-large.scss` to style the achievements section. - Introduced a new `search-bar` component for filtering the game library. - Implemented fuzzy search functionality in the library view. - Updated `view-options` to improve UI consistency. - Added achievement-related properties to the `LibraryGame` type in `index.ts`. - Created a new `copilot-instructions.md` for project guidelines.
2026-01-11 22:06:17 +00:00 · 2025-10-22 14:24:04 +05:30
parent d168e20385
commit 33e0d50966
13 changed files with 405 additions and 491 deletions
--- a/src/main/events/library/get-library.ts
+++ b/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,10 +19,26 @@ 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,
+              achievementCount,
              // Spread gameAssets last to ensure all image URLs are properly set
              ...gameAssets,
              // Preserve custom image URLs from game if they exist
--- a/src/renderer/src/pages/library/library-game-card-detailed.scss
+++ b/src/renderer/src/pages/library/library-game-card-detailed.scss
@@ -1,217 +0,0 @@
-@use "../../scss/globals.scss";
-
-.library-game-card-detailed {
-  width: 100%;
-  height: 350px;
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  transition: all ease 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  text-align: left;
-
-  &:before {
-    content: "";
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 172%;
-    position: absolute;
-    background: linear-gradient(
-      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.1) 100%
-    );
-    transition: all ease 0.3s;
-    transform: translateY(-36%);
-    opacity: 0.5;
-    z-index: 1;
-  }
-
-  &:hover::before {
-    opacity: 1;
-    transform: translateY(-20%);
-  }
-
-  &:hover {
-    transform: scale(1.05);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  &__background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-size: cover;
-    background-position: top;
-    background-repeat: no-repeat;
-    z-index: 0;
-  }
-
-  &__gradient {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.1) 0%,
-      rgba(0, 0, 0, 0.3) 50%,
-      rgba(0, 0, 0, 0.5) 100%
-    );
-    z-index: 1;
-  }
-
-  &__overlay {
-    position: relative;
-    z-index: 2;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: calc(globals.$spacing-unit * 3);
-  }
-
-  &__menu-button {
-    align-self: flex-end;
-    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.8);
-    padding: 0;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-
-    &: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;
-    display: flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  &__logo {
-    max-height: 140px;
-    max-width: 450px;
-    width: auto;
-    height: auto;
-    object-fit: contain;
-    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
-  }
-
-  &__title {
-    font-size: 32px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.95);
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
-  }
-
-  &__info-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: calc(globals.$spacing-unit * 2);
-  }
-
-  &__playtime {
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    color: rgba(255, 255, 255, 0.8);
-    border: solid 1px rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    font-size: 14px;
-  }
-
-  &__playtime-text {
-    font-weight: 500;
-  }
-
-  &__manual-playtime {
-    color: globals.$warning-color;
-  }
-
-  &__action-button {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
-    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: rgba(255, 255, 255, 0.9);
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    transition: all ease 0.2s;
-    flex-shrink: 0;
-
-    &: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);
-    }
-  }
-
-  &__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-detailed.tsx
+++ b/src/renderer/src/pages/library/library-game-card-detailed.tsx
@@ -1,209 +0,0 @@
-import { LibraryGame } from "@types";
-import { useDownload, useFormat } from "@renderer/hooks";
-import { useNavigate } from "react-router-dom";
-import { buildGameDetailsPath } from "@renderer/helpers";
-import {
-  PlayIcon,
-  DownloadIcon,
-  ClockIcon,
-  AlertFillIcon,
-  ThreeBarsIcon,
-} from "@primer/octicons-react";
-import { useTranslation } from "react-i18next";
-import { useCallback, useState } from "react";
-import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
-import { GameContextMenu } from "@renderer/components";
-import "./library-game-card-detailed.scss";
-
-interface LibraryGameCardDetailedProps {
-  game: LibraryGame;
-}
-
-const getImageWithCustomPriority = (
-  customUrl: string | null | undefined,
-  originalUrl: string | null | undefined,
-  fallbackUrl?: string | null | undefined
-) => {
-  return customUrl || originalUrl || fallbackUrl || "";
-};
-
-export function LibraryGameCardDetailed({
-  game,
-}: LibraryGameCardDetailedProps) {
-  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 handleActionClick = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-
-    if (game.executablePath) {
-      window.electron.openGame(
-        game.shop,
-        game.objectId,
-        game.executablePath,
-        game.launchOptions
-      );
-    } else {
-      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 } });
-  };
-
-  // Use libraryHeroImageUrl as background, fallback to libraryImageUrl
-  const backgroundImage = getImageWithCustomPriority(
-    game.libraryHeroImageUrl,
-    game.libraryImageUrl,
-    game.iconUrl
-  );
-
-  // For logo, check if logoImageUrl exists (similar to game details page)
-  const logoImage = game.logoImageUrl;
-
-  return (
-    <>
-      <button
-        type="button"
-        className="library-game-card-detailed"
-        onClick={handleCardClick}
-        onContextMenu={handleContextMenu}
-      >
-        <div
-          className="library-game-card-detailed__background"
-          style={{ backgroundImage: `url(${backgroundImage})` }}
-        />
-        <div className="library-game-card-detailed__gradient" />
-
-        <div className="library-game-card-detailed__overlay">
-          <button
-            type="button"
-            className="library-game-card-detailed__menu-button"
-            onClick={handleMenuButtonClick}
-            title="More options"
-          >
-            <ThreeBarsIcon size={16} />
-          </button>
-
-          <div className="library-game-card-detailed__logo-container">
-            {logoImage ? (
-              <img
-                src={logoImage}
-                alt={game.title}
-                className="library-game-card-detailed__logo"
-              />
-            ) : (
-              <h3 className="library-game-card-detailed__title">
-                {game.title}
-              </h3>
-            )}
-          </div>
-
-          <div className="library-game-card-detailed__info-bar">
-            <div className="library-game-card-detailed__playtime">
-              {game.hasManuallyUpdatedPlaytime ? (
-                <AlertFillIcon
-                  size={11}
-                  className="library-game-card-detailed__manual-playtime"
-                />
-              ) : (
-                <ClockIcon size={11} />
-              )}
-              <span className="library-game-card-detailed__playtime-text">
-                {formatPlayTime(game.playTimeInMilliseconds)}
-              </span>
-            </div>
-
-            <button
-              type="button"
-              className="library-game-card-detailed__action-button"
-              onClick={handleActionClick}
-            >
-              {isGameDownloading ? (
-                <>
-                  <DownloadIcon
-                    size={16}
-                    className="library-game-card-detailed__action-icon--downloading"
-                  />
-                  {t("downloading")}
-                </>
-              ) : game.executablePath ? (
-                <>
-                  <PlayIcon size={16} />
-                  {t("play")}
-                </>
-              ) : (
-                <>
-                  <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-large.scss
+++ b/src/renderer/src/pages/library/library-game-card-large.scss
@@ -65,9 +65,9 @@
    right: 0;
    bottom: 0;
    background: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.1) 0%,
-      rgba(0, 0, 0, 0.3) 50%,
+      0deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.5) 100%
    );
    z-index: 1;
@@ -81,11 +81,18 @@
    display: flex;
    flex-direction: column;
    justify-content: space-between;
-    padding: calc(globals.$spacing-unit * 2.5);
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__top-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: calc(globals.$spacing-unit);
  }

  &__menu-button {
-    align-self: flex-end;
+    align-self: flex-start;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -175,6 +182,59 @@
    color: globals.$warning-color;
  }

+  &__achievements {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 6px 12px;
+    width: 100%;
+  }
+
+  &__achievement-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+  }
+  &__achievements-gap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__achievement-trophy {
+    color: #ffd700;
+    flex-shrink: 0;
+  }
+
+  &__achievement-progress {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__achievement-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #ffd700, #ffed4e);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  &__achievement-count {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
+    white-space: nowrap;
+  }
+
+  &__achievement-percentage {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    white-space: nowrap;
+  }
+
  &__action-button {
    display: flex;
    align-items: center;
@@ -191,8 +251,6 @@
    font-weight: 600;
    transition: all ease 0.2s;
    flex-shrink: 0;
-    opacity: 0;
-    transform: translateY(10px);

    &:hover {
      background: rgba(255, 255, 255, 0.15);
@@ -205,8 +263,7 @@
    }
  }

-  &:hover &__menu-button,
-  &:hover &__action-button {
+  &:hover &__menu-button {
    opacity: 1;
    transform: scale(1);
  }
--- a/src/renderer/src/pages/library/library-game-card-large.tsx
+++ b/src/renderer/src/pages/library/library-game-card-large.tsx
@@ -8,6 +8,7 @@ import {
  ClockIcon,
  AlertFillIcon,
  ThreeBarsIcon,
+  TrophyIcon,
 } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import { useCallback, useState } from "react";
@@ -130,14 +131,29 @@ export function LibraryGameCardLarge({ game }: LibraryGameCardLargeProps) {
        <div className="library-game-card-large__gradient" />

        <div className="library-game-card-large__overlay">
-          <button
-            type="button"
-            className="library-game-card-large__menu-button"
-            onClick={handleMenuButtonClick}
-            title="More options"
-          >
-            <ThreeBarsIcon size={16} />
-          </button>
+          <div className="library-game-card-large__top-section">
+            <div className="library-game-card-large__playtime">
+              {game.hasManuallyUpdatedPlaytime ? (
+                <AlertFillIcon
+                  size={11}
+                  className="library-game-card-large__manual-playtime"
+                />
+              ) : (
+                <ClockIcon size={11} />
+              )}
+              <span className="library-game-card-large__playtime-text">
+                {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">
            {logoImage ? (
@@ -152,19 +168,39 @@ export function LibraryGameCardLarge({ game }: LibraryGameCardLargeProps) {
          </div>

          <div className="library-game-card-large__info-bar">
-            <div className="library-game-card-large__playtime">
-              {game.hasManuallyUpdatedPlaytime ? (
-                <AlertFillIcon
-                  size={11}
-                  className="library-game-card-large__manual-playtime"
-                />
-              ) : (
-                <ClockIcon size={11} />
-              )}
-              <span className="library-game-card-large__playtime-text">
-                {formatPlayTime(game.playTimeInMilliseconds)}
-              </span>
-            </div>
+            {/* Achievements section */}
+            {(game.achievementCount ?? 0) > 0 && (
+              <div className="library-game-card-large__achievements">
+                <div className="library-game-card-large__achievement-header">
+                  <div className="library-game-card-large__achievements-gap">
+                    <TrophyIcon
+                      size={14}
+                      className="library-game-card-large__achievement-trophy"
+                    />
+                    <span className="library-game-card-large__achievement-count">
+                      {game.unlockedAchievementCount ?? 0} /{" "}
+                      {game.achievementCount ?? 0}
+                    </span>
+                  </div>
+                  <span className="library-game-card-large__achievement-percentage">
+                    {Math.round(
+                      ((game.unlockedAchievementCount ?? 0) /
+                        (game.achievementCount ?? 1)) *
+                        100
+                    )}
+                    %
+                  </span>
+                </div>
+                <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}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            )}

            <button
              type="button"
--- 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.2) 20%, transparent 100%);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 5%, transparent 100%);
    padding: 8px;
    z-index: 2;
  }
@@ -106,6 +106,63 @@
    color: globals.$warning-color;
  }

+  &__achievements {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px 8px;
+    opacity: 0;
+    transform: translateY(8px);
+    transition: all ease 0.2s;
+    pointer-events: none;
+    width: 100%;
+  }
+  &__achievements-gap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__achievement-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: space-between;
+  }
+
+  &__achievement-trophy {
+    color: #ffd700;
+    flex-shrink: 0;
+  }
+
+  &__achievement-progress {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  &__achievement-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #ffd700, #ffed4e);
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &__achievement-count {
+    font-size: 12px;
+    font-weight: 600;
+    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;
+  }
+
  &__action-button {
    position: absolute;
    bottom: 8px;
@@ -114,7 +171,7 @@
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: solid 1px rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
+    border-radius: 4px;
    width: 40px;
    height: 40px;
    display: flex;
@@ -175,6 +232,12 @@
    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;
--- a/src/renderer/src/pages/library/library-game-card.tsx
+++ b/src/renderer/src/pages/library/library-game-card.tsx
@@ -5,10 +5,11 @@ import { useCallback, useState } from "react";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import {
  ClockIcon,
-  PlayIcon,
-  DownloadIcon,
  AlertFillIcon,
  ThreeBarsIcon,
+  TrophyIcon,
+  PlayIcon,
+  DownloadIcon,
 } from "@primer/octicons-react";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { Tooltip } from "react-tooltip";
@@ -163,27 +164,39 @@ export function LibraryGameCard({
            </button>
          </div>

-          {/* Action button - Play or Download */}
-          <button
-            type="button"
-            className="library-game-card__action-button"
-            onClick={handleActionClick}
-            title={game.executablePath ? t("play") : t("download")}
-          >
-            {isGameDownloading ? (
-              <DownloadIcon
-                size={16}
-                className="library-game-card__action-icon library-game-card__action-icon--downloading"
-              />
-            ) : game.executablePath ? (
-              <PlayIcon size={16} className="library-game-card__action-icon" />
-            ) : (
-              <DownloadIcon
-                size={16}
-                className="library-game-card__action-icon"
-              />
-            )}
-          </button>
+          {/* 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}
+                    className="library-game-card__achievement-trophy"
+                  />
+                  <span className="library-game-card__achievement-count">
+                    {game.unlockedAchievementCount ?? 0} /{" "}
+                    {game.achievementCount ?? 0}
+                  </span>
+                </div>
+                <span className="library-game-card__achievement-percentage">
+                  {Math.round(
+                    ((game.unlockedAchievementCount ?? 0) /
+                      (game.achievementCount ?? 1)) *
+                      100
+                  )}
+                  %
+                </span>
+              </div>
+              <div className="library-game-card__achievement-progress">
+                <div
+                  className="library-game-card__achievement-bar"
+                  style={{
+                    width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
+                  }}
+                />
+              </div>
+            </div>
+          )}
        </div>

        <img
--- a/src/renderer/src/pages/library/library.tsx
+++ b/src/renderer/src/pages/library/library.tsx
@@ -8,6 +8,7 @@ import { LibraryGameCard } from "./library-game-card";
 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() {
@@ -15,6 +16,7 @@ export default function Library() {

  const [viewMode, setViewMode] = useState<ViewMode>("grid");
  const [filterBy, setFilterBy] = useState<FilterOption>("all");
+  const [searchQuery, setSearchQuery] = useState<string>("");
  const dispatch = useAppDispatch();
  const { t } = useTranslation("library");
  const { userDetails, fetchUserDetails } = useUserDetails();
@@ -53,27 +55,60 @@ export default function Library() {
    // Optional: resume animations if needed
  };

+  // Simple fuzzy search function
+  const fuzzySearch = (query: string, items: typeof library) => {
+    if (!query.trim()) return items;
+
+    const queryLower = query.toLowerCase();
+    return items.filter((game) => {
+      const titleLower = game.title.toLowerCase();
+      let matches = 0;
+      let queryIndex = 0;
+
+      for (
+        let i = 0;
+        i < titleLower.length && queryIndex < queryLower.length;
+        i++
+      ) {
+        if (titleLower[i] === queryLower[queryIndex]) {
+          matches++;
+          queryIndex++;
+        }
+      }
+
+      return queryIndex === queryLower.length;
+    });
+  };
+
  const filteredLibrary = useMemo(() => {
+    let filtered;
+
    switch (filterBy) {
      case "favourited":
-        return library.filter((game) => game.favorite);
+        filtered = library.filter((game) => game.favorite);
+        break;
      case "new":
-        return library.filter(
+        filtered = library.filter(
          (game) => (game.playTimeInMilliseconds || 0) === 0
        );
+        break;
      case "top10":
-        return library
+        filtered = library
          .slice()
          .sort(
            (a, b) =>
              (b.playTimeInMilliseconds || 0) - (a.playTimeInMilliseconds || 0)
          )
          .slice(0, 10);
+        break;
      case "all":
      default:
-        return library;
+        filtered = library;
    }
-  }, [library, filterBy]);
+
+    // Apply search filter
+    return fuzzySearch(searchQuery, filtered);
+  }, [library, filterBy, searchQuery]);

  // No sorting for now — rely on filteredLibrary
  const sortedLibrary = filteredLibrary;
@@ -112,6 +147,7 @@ export default function Library() {
              </div>

              <div className="library__controls-right">
+                <SearchBar value={searchQuery} onChange={setSearchQuery} />
                <ViewOptions
                  viewMode={viewMode}
                  onViewModeChange={setViewMode}
--- a/src/renderer/src/pages/library/search-bar.scss
+++ b/src/renderer/src/pages/library/search-bar.scss
@@ -0,0 +1,75 @@
+.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.5);
+    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.4);
+    }
+
+    &: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.5);
+    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
@@ -0,0 +1,44 @@
+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,13 +26,13 @@
    display: flex;
    align-items: center;
    gap: calc(globals.$spacing-unit);
-    padding: 8px 16px;
+    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
-    font-size: 13px;
+    font-size: 14px;
    font-weight: 500;
    transition: all ease 0.2s;
    white-space: nowrap;
--- a/src/renderer/src/pages/library/view-options.tsx
+++ b/src/renderer/src/pages/library/view-options.tsx
@@ -21,7 +21,6 @@ export function ViewOptions({ viewMode, onViewModeChange }: ViewOptionsProps) {
          title={t("grid_view")}
        >
          <AppsIcon size={16} />
-          <span>{t("Grid View")}</span>
        </button>
        <button
          className={`library-view-options__option ${viewMode === "compact" ? "active" : ""}`}
@@ -29,7 +28,6 @@ export function ViewOptions({ viewMode, onViewModeChange }: ViewOptionsProps) {
          title={t("compact_view")}
        >
          <SquareIcon size={16} />
-          <span>{t("Compact")}</span>
        </button>
        <button
          className={`library-view-options__option ${viewMode === "large" ? "active" : ""}`}
@@ -37,7 +35,6 @@ export function ViewOptions({ viewMode, onViewModeChange }: ViewOptionsProps) {
          title={t("large_view")}
        >
          <RowsIcon size={16} />
-          <span>{t("Large")}</span>
        </button>
      </div>
    </div>
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -372,6 +372,8 @@ export type LibraryGame = Game &
  Partial<ShopAssets> & {
    id: string;
    download: Download | null;
+    unlockedAchievementCount?: number;
+    achievementCount?: number;
  };

 export type UserGameDetails = ShopAssets & {