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

feat: adding slider to achievement sound
2026-01-11 13:56:16 +00:00 · 2025-11-10 22:57:59 +00:00 · 2025-11-10 22:57:35 +00:00 · 2025-11-10 22:55:49 +00:00 · 2025-11-10 22:55:17 +00:00 · 2025-11-10 22:55:02 +00:00
43 changed files with 1623 additions and 921 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",
@@ -557,6 +558,15 @@
    "platinum": "Platinum",
    "hidden": "Hidden",
    "test_notification": "Test notification",
+    "achievement_sound_volume": "Achievement sound volume",
+    "select_achievement_sound": "Select achievement sound",
+    "change_achievement_sound": "Change achievement sound",
+    "remove_achievement_sound": "Remove achievement sound",
+    "preview_sound": "Preview sound",
+    "select": "Select",
+    "preview": "Preview",
+    "remove": "Remove",
+    "no_sound_file_selected": "No sound file selected",
    "notification_preview": "Achievement Notification Preview",
    "enable_friend_start_game_notifications": "When a friend starts playing a game",
    "autoplay_trailers_on_game_page": "Automatically start playing trailers on game page",
@@ -718,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",
@@ -542,6 +543,12 @@
    "platinum": "Platino",
    "hidden": "Oculto",
    "test_notification": "Probar notificación",
+    "achievement_sound_volume": "Volumen del sonido de logro",
+    "select_achievement_sound": "Seleccionar sonido de logro",
+    "select": "Seleccionar",
+    "preview": "Vista previa",
+    "remove": "Remover",
+    "no_sound_file_selected": "No se seleccionó ningún archivo de sonido",
    "notification_preview": "Probar notificación de logro",
    "debrid": "Debrid",
    "debrid_description": "Los servicios Debrid son descargadores premium sin restricciones que te dejan descargar más rápido archivos alojados en servicios de alojamiento siendo que la única limitación es tu velocidad de internet.",
@@ -716,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",
@@ -541,6 +542,12 @@
    "platinum": "Platina",
    "hidden": "Oculta",
    "test_notification": "Testar notificação",
+    "achievement_sound_volume": "Volume do som de conquista",
+    "select_achievement_sound": "Selecionar som de conquista",
+    "select": "Selecionar",
+    "preview": "Reproduzir",
+    "remove": "Remover",
+    "no_sound_file_selected": "Nenhum arquivo de som selecionado",
    "notification_preview": "Prévia da Notificação de Conquistas",
    "enable_friend_start_game_notifications": "Quando um amigo iniciar um jogo",
    "autoplay_trailers_on_game_page": "Reproduzir trailers automaticamente na página do jogo",
@@ -731,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": "Библиотека",
@@ -555,6 +556,12 @@
    "platinum": "Платиновый",
    "hidden": "Скрытый",
    "test_notification": "Тестовое уведомление",
+    "achievement_sound_volume": "Громкость звука достижения",
+    "select_achievement_sound": "Выбрать звук достижения",
+    "select": "Выбрать",
+    "preview": "Предпросмотр",
+    "remove": "Удалить",
+    "no_sound_file_selected": "Файл звука не выбран",
    "notification_preview": "Предварительный просмотр уведомления о достижении",
    "enable_friend_start_game_notifications": "Когда друг начинает играть в игру",
    "autoplay_trailers_on_game_page": "Автоматически начинать воспроизведение трейлеров на странице игры",
@@ -727,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/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -27,7 +27,68 @@
    "friends": "好友",
    "favorites": "收藏",
    "need_help": "需要帮助？",
-    "playable_button_title": "仅显示现在可以游玩的游戏"
+    "playable_button_title": "仅显示现在可以游玩的游戏",
+    "add_custom_game_tooltip": "添加自定义游戏",
+    "cancel": "取消",
+    "confirm": "确认",
+    "custom_game_modal": "添加自定义游戏",
+    "custom_game_modal_add": "添加游戏",
+    "custom_game_modal_adding": "正在添加游戏...",
+    "custom_game_modal_browse": "浏览",
+    "custom_game_modal_cancel": "取消",
+    "custom_game_modal_description": "通过选择可执行文件将自定义游戏添加到您的库中",
+    "custom_game_modal_enter_title": "输入标题",
+    "custom_game_modal_executable": "可执行文件",
+    "custom_game_modal_executable_path": "可执行文件路径",
+    "custom_game_modal_failed": "添加自定义游戏失败",
+    "custom_game_modal_select_executable": "选择可执行文件",
+    "custom_game_modal_success": "自定义游戏添加成功",
+    "custom_game_modal_title": "标题",
+    "decky_plugin_installation_error": "安装 Decky 插件出错: {{error}}",
+    "decky_plugin_installation_failed": "Decky 插件安装失败: {{error}}",
+    "decky_plugin_installed": "Decky 插件 v{{version}} 安装成功",
+    "decky_plugin_installed_version": "Decky 插件 (v{{version}})",
+    "edit_game_modal": "自定义资源",
+    "edit_game_modal_assets": "资源",
+    "edit_game_modal_browse": "浏览",
+    "edit_game_modal_cancel": "取消",
+    "edit_game_modal_description": "自定义游戏资源和详情",
+    "edit_game_modal_drop_hero_image_here": "拖放主图像到此处",
+    "edit_game_modal_drop_icon_image_here": "拖放图标到此处",
+    "edit_game_modal_drop_logo_image_here": "拖放Logo到此处",
+    "edit_game_modal_drop_to_replace_hero": "拖放以替换主图像",
+    "edit_game_modal_drop_to_replace_icon": "拖放以替换图标",
+    "edit_game_modal_drop_to_replace_logo": "拖放以替换Logo",
+    "edit_game_modal_enter_title": "输入标题",
+    "edit_game_modal_failed": "资源更新失败",
+    "edit_game_modal_fill_required": "请填写所有必填项",
+    "edit_game_modal_hero": "库主图",
+    "edit_game_modal_hero_preview": "库主图预览",
+    "edit_game_modal_hero_resolution": "推荐分辨率: 1920x620px",
+    "edit_game_modal_icon": "图标",
+    "edit_game_modal_icon_preview": "图标预览",
+    "edit_game_modal_icon_resolution": "推荐分辨率: 256x256px",
+    "edit_game_modal_image": "图片",
+    "edit_game_modal_image_filter": "图片",
+    "edit_game_modal_image_preview": "图片预览",
+    "edit_game_modal_logo": "Logo",
+    "edit_game_modal_logo_preview": "Logo预览",
+    "edit_game_modal_logo_resolution": "推荐分辨率: 640x360px",
+    "edit_game_modal_select_hero": "选择库主图",
+    "edit_game_modal_select_icon": "选择图标",
+    "edit_game_modal_select_image": "选择图片",
+    "edit_game_modal_select_logo": "选择Logo",
+    "edit_game_modal_success": "资源更新成功",
+    "edit_game_modal_title": "标题",
+    "edit_game_modal_update": "更新",
+    "edit_game_modal_updating": "正在更新...",
+    "install_decky_plugin": "安装 Decky 插件",
+    "install_decky_plugin_message": "这将下载并安装 Hydra 的 Decky Loader 插件。可能需要提升权限。继续吗？",
+    "install_decky_plugin_title": "安装 Hydra Decky 插件",
+    "show_playable_only_tooltip": "仅显示可游玩",
+    "update_decky_plugin": "更新 Decky 插件",
+    "update_decky_plugin_message": "有新版本的 Hydra Decky 插件可用。现在要更新吗？",
+    "update_decky_plugin_title": "更新 Hydra Decky 插件"
  },
  "header": {
    "search": "搜索游戏",
@@ -218,7 +279,93 @@
    "reset_achievements_title": "您确定吗？",
    "save_changes": "保存更改",
    "unfreeze_backup": "取消固定",
-    "you_might_need_to_restart_steam": "您可能需要重启Steam才能看到更改"
+    "you_might_need_to_restart_steam": "您可能需要重启Steam才能看到更改",
+    "add_to_favorites": "添加到收藏",
+    "already_in_library": "已在游戏库中",
+    "audio": "音频",
+    "backup_failed": "备份失败",
+    "be_first_to_review": "成为第一个分享游戏感受的人！",
+    "caption": "标题",
+    "create_shortcut_simple": "创建快捷方式",
+    "currency_country": "zh",
+    "currency_symbol": "¥",
+    "delete_review": "删除评价",
+    "delete_review_modal_cancel_button": "取消",
+    "delete_review_modal_delete_button": "删除",
+    "delete_review_modal_description": "此操作无法撤销。",
+    "delete_review_modal_title": "确定要删除您的评价吗？",
+    "edit_game_modal_button": "自定义游戏资源",
+    "failed_remove_files": "文件删除失败",
+    "failed_remove_from_library": "移出游戏库失败",
+    "failed_update_favorites": "收藏更新失败",
+    "files_removed_success": "文件已成功删除",
+    "filter_by_source": "按来源筛选",
+    "game_added_to_pinned": "游戏已添加到置顶",
+    "game_details": "游戏详情",
+    "game_removed_from_library": "游戏已从库中移除",
+    "game_removed_from_pinned": "游戏已从置顶移除",
+    "hide": "隐藏",
+    "hide_original": "隐藏原文",
+    "historical_keyshop": "历史密钥商店",
+    "historical_retail": "历史零售",
+    "keyshop_price": "密钥商店价格",
+    "language": "语言",
+    "leave_a_review": "留下评价",
+    "load_more_reviews": "加载更多评价",
+    "loading_more_reviews": "正在加载更多评价...",
+    "loading_reviews": "正在加载评价...",
+    "manual_playtime_tooltip": "该游戏时长已手动更新",
+    "manual_playtime_warning": "您的游戏时长将被标记为手动更新，且无法撤销。",
+    "maybe_later": "以后再说",
+    "no_prices_found": "未找到价格信息",
+    "no_repacks_found": "未找到该游戏的下载来源",
+    "no_reviews_yet": "暂无评价",
+    "prices": "价格",
+    "properties": "属性",
+    "rating": "评分",
+    "rating_count": "评分数",
+    "rating_negative": "差评",
+    "rating_neutral": "中性",
+    "rating_positive": "好评",
+    "rating_stats": "评分统计",
+    "rating_very_negative": "极差",
+    "rating_very_positive": "极好",
+    "remove_from_favorites": "移出收藏",
+    "remove_review": "移除评价",
+    "retail_price": "零售价格",
+    "review_cannot_be_empty": "评价内容不能为空。",
+    "review_deleted_successfully": "评价已成功删除。",
+    "review_deletion_failed": "评价删除失败，请重试。",
+    "review_from_blocked_user": "来自被屏蔽用户的评价",
+    "review_played_for": "已游玩",
+    "review_submission_failed": "评价提交失败，请重试。",
+    "review_submitted_successfully": "评价提交成功！",
+    "reviews": "评价",
+    "show": "显示",
+    "show_less": "收起",
+    "show_more": "展开",
+    "show_original": "显示原文",
+    "show_original_translated_from": "显示原文（由{{language}}翻译）",
+    "show_translation": "显示翻译",
+    "sort_highest_score": "最高分",
+    "sort_lowest_score": "最低分",
+    "sort_most_voted": "最多投票",
+    "sort_newest": "最新",
+    "sort_oldest": "最旧",
+    "submit_review": "提交",
+    "submitting": "正在提交...",
+    "update_game_playtime": "更新游戏时长",
+    "update_playtime": "更新时长",
+    "update_playtime_description": "手动更新 {{game}} 的游玩时长",
+    "update_playtime_error": "游戏时长更新失败",
+    "update_playtime_success": "游戏时长已成功更新",
+    "update_playtime_title": "更新游戏时长",
+    "view_all_prices": "点击查看所有价格",
+    "vote_failed": "投票失败，请重试。",
+    "would_you_recommend_this_game": "您想为此游戏留下评价吗？",
+    "write_review_placeholder": "分享您对本游戏的看法...",
+    "yes": "是",
+    "you_seemed_to_enjoy_this_game": "您似乎很喜欢这款游戏"
  },
  "activation": {
    "title": "激活 Hydra",
@@ -394,7 +541,24 @@
    "update_email": "更新邮箱",
    "update_password": "更新密码",
    "variation": "变体",
-    "web_store": "网络商店"
+    "web_store": "网络商店",
+    "adding": "添加中…",
+    "autoplay_trailers_on_game_page": "在游戏页面自动播放预告片",
+    "debrid": "Debrid下载服务",
+    "debrid_description": "Debrid服务是一种高级不限速下载器，可让您以最快的网速下载托管在各类网盘上的文件，仅受您的网络速度限制。",
+    "download_source_already_exists": "该下载源URL已存在。",
+    "download_source_failed": "出错",
+    "download_source_matched": "已更新",
+    "download_source_matching": "正在更新",
+    "download_source_no_information": "暂无信息",
+    "download_source_pending_matching": "即将更新",
+    "download_sources_synced_successfully": "所有下载源已同步",
+    "enable_steam_achievements": "启用Steam成就搜索",
+    "failed_add_download_source": "添加下载源失败，请重试。",
+    "hide_to_tray_on_game_start": "启动游戏时隐藏到托盘",
+    "hydra_cloud": "Hydra Cloud",
+    "importing": "导入中…",
+    "removed_all_download_sources": "已移除所有下载源"
  },
  "notifications": {
    "download_complete": "下载完成",
@@ -421,7 +585,8 @@
  "game_card": {
    "no_downloads": "无可用下载选项",
    "available_one": "可用",
-    "available_other": "可用"
+    "available_other": "可用",
+    "calculating": "正在计算"
  },
  "binary_not_found_modal": {
    "title": "程序未安装",
@@ -515,7 +680,23 @@
    "show_achievements_on_profile": "在您的个人资料上显示成就",
    "show_points_on_profile": "在您的个人资料上显示获得的积分",
    "stats": "统计",
-    "top_percentile": "前 {{percentile}}%"
+    "top_percentile": "前 {{percentile}}%",
+    "achievements_earned": "已获得成就",
+    "amount_hours_short": "{{amount}}小时",
+    "amount_minutes_short": "{{amount}}分钟",
+    "delete_review": "删除评价",
+    "game_added_to_pinned": "游戏已添加到置顶",
+    "game_removed_from_pinned": "游戏已从置顶移除",
+    "karma": "业力",
+    "karma_count": "业力值",
+    "karma_description": "通过评论获得的点赞",
+    "loading_reviews": "正在加载评价...",
+    "manual_playtime_tooltip": "该游戏时长已手动更新",
+    "pinned": "已置顶",
+    "played_recently": "最近游玩",
+    "playtime": "游戏时长",
+    "sort_by": "排序方式：",
+    "user_reviews": "用户评价"
  },
  "achievement": {
    "achievement_unlocked": "成就已解锁",
--- a/src/main/constants.ts
+++ b/src/main/constants.ts
@@ -41,8 +41,12 @@ export const appVersion = app.getVersion() + (isStaging ? "-staging" : "");

 export const ASSETS_PATH = path.join(SystemPath.getPath("userData"), "Assets");

+export const THEMES_PATH = path.join(SystemPath.getPath("userData"), "themes");
+
 export const MAIN_LOOP_INTERVAL = 2000;

+export const DEFAULT_ACHIEVEMENT_SOUND_VOLUME = 0.15;
+
 export const DECKY_PLUGINS_LOCATION = path.join(
  SystemPath.getPath("home"),
  "homebrew",
--- a/src/main/events/index.ts
+++ b/src/main/events/index.ts
@@ -92,6 +92,11 @@ import "./themes/get-custom-theme-by-id";
 import "./themes/get-active-custom-theme";
 import "./themes/close-editor-window";
 import "./themes/toggle-custom-theme";
+import "./themes/copy-theme-achievement-sound";
+import "./themes/remove-theme-achievement-sound";
+import "./themes/get-theme-sound-path";
+import "./themes/get-theme-sound-data-url";
+import "./themes/import-theme-sound-from-store";
 import "./download-sources/remove-download-source";
 import "./download-sources/get-download-sources";
 import { isPortableVersion } from "@main/helpers";
--- a/src/main/events/themes/copy-theme-achievement-sound.ts
+++ b/src/main/events/themes/copy-theme-achievement-sound.ts
@@ -0,0 +1,40 @@
+import { registerEvent } from "../register-event";
+import fs from "node:fs";
+import path from "node:path";
+import { getThemePath } from "@main/helpers";
+import { themesSublevel } from "@main/level";
+
+const copyThemeAchievementSound = async (
+  _event: Electron.IpcMainInvokeEvent,
+  themeId: string,
+  sourcePath: string
+): Promise<void> => {
+  if (!sourcePath || !fs.existsSync(sourcePath)) {
+    throw new Error("Source file does not exist");
+  }
+
+  const theme = await themesSublevel.get(themeId);
+  if (!theme) {
+    throw new Error("Theme not found");
+  }
+
+  const themeDir = getThemePath(themeId, theme.name);
+
+  if (!fs.existsSync(themeDir)) {
+    fs.mkdirSync(themeDir, { recursive: true });
+  }
+
+  const fileExtension = path.extname(sourcePath);
+  const destinationPath = path.join(themeDir, `achievement${fileExtension}`);
+
+  await fs.promises.copyFile(sourcePath, destinationPath);
+
+  await themesSublevel.put(themeId, {
+    ...theme,
+    hasCustomSound: true,
+    originalSoundPath: sourcePath,
+    updatedAt: new Date(),
+  });
+};
+
+registerEvent("copyThemeAchievementSound", copyThemeAchievementSound);
--- a/src/main/events/themes/get-theme-sound-data-url.ts
+++ b/src/main/events/themes/get-theme-sound-data-url.ts
@@ -0,0 +1,40 @@
+import { registerEvent } from "../register-event";
+import { getThemeSoundPath } from "@main/helpers";
+import { themesSublevel } from "@main/level";
+import fs from "node:fs";
+import path from "node:path";
+import { logger } from "@main/services";
+
+const getThemeSoundDataUrl = async (
+  _event: Electron.IpcMainInvokeEvent,
+  themeId: string
+): Promise<string | null> => {
+  try {
+    const theme = await themesSublevel.get(themeId);
+    const soundPath = getThemeSoundPath(themeId, theme?.name);
+
+    if (!soundPath || !fs.existsSync(soundPath)) {
+      return null;
+    }
+
+    const buffer = await fs.promises.readFile(soundPath);
+    const ext = path.extname(soundPath).toLowerCase().slice(1);
+
+    const mimeTypes: Record<string, string> = {
+      mp3: "audio/mpeg",
+      wav: "audio/wav",
+      ogg: "audio/ogg",
+      m4a: "audio/mp4",
+    };
+
+    const mimeType = mimeTypes[ext] || "audio/mpeg";
+    const base64 = buffer.toString("base64");
+
+    return `data:${mimeType};base64,${base64}`;
+  } catch (error) {
+    logger.error("Failed to get theme sound data URL", error);
+    return null;
+  }
+};
+
+registerEvent("getThemeSoundDataUrl", getThemeSoundDataUrl);
--- a/src/main/events/themes/get-theme-sound-path.ts
+++ b/src/main/events/themes/get-theme-sound-path.ts
@@ -0,0 +1,13 @@
+import { registerEvent } from "../register-event";
+import { getThemeSoundPath } from "@main/helpers";
+import { themesSublevel } from "@main/level";
+
+const getThemeSoundPathEvent = async (
+  _event: Electron.IpcMainInvokeEvent,
+  themeId: string
+): Promise<string | null> => {
+  const theme = await themesSublevel.get(themeId);
+  return getThemeSoundPath(themeId, theme?.name);
+};
+
+registerEvent("getThemeSoundPath", getThemeSoundPathEvent);
--- a/src/main/events/themes/import-theme-sound-from-store.ts
+++ b/src/main/events/themes/import-theme-sound-from-store.ts
@@ -0,0 +1,60 @@
+import { registerEvent } from "../register-event";
+import fs from "node:fs";
+import path from "node:path";
+import axios from "axios";
+import { getThemePath } from "@main/helpers";
+import { themesSublevel } from "@main/level";
+import { logger } from "@main/services";
+
+const importThemeSoundFromStore = async (
+  _event: Electron.IpcMainInvokeEvent,
+  themeId: string,
+  themeName: string,
+  storeUrl: string
+): Promise<void> => {
+  const theme = await themesSublevel.get(themeId);
+  if (!theme) {
+    throw new Error("Theme not found");
+  }
+
+  const formats = ["wav", "mp3", "ogg", "m4a"];
+
+  for (const format of formats) {
+    try {
+      const soundUrl = `${storeUrl}/themes/${themeName.toLowerCase()}/achievement.${format}`;
+
+      const response = await axios.get(soundUrl, {
+        responseType: "arraybuffer",
+        timeout: 10000,
+      });
+
+      const themeDir = getThemePath(themeId, theme.name);
+
+      if (!fs.existsSync(themeDir)) {
+        fs.mkdirSync(themeDir, { recursive: true });
+      }
+
+      const destinationPath = path.join(themeDir, `achievement.${format}`);
+      await fs.promises.writeFile(destinationPath, response.data);
+
+      await themesSublevel.put(themeId, {
+        ...theme,
+        hasCustomSound: true,
+        updatedAt: new Date(),
+      });
+
+      logger.log(`Successfully imported sound for theme ${themeName}`);
+      return;
+    } catch (error) {
+      logger.error(
+        `Failed to import ${format} sound for theme ${themeName}`,
+        error
+      );
+      continue;
+    }
+  }
+
+  logger.log(`No sound file found for theme ${themeName} in store`);
+};
+
+registerEvent("importThemeSoundFromStore", importThemeSoundFromStore);
--- a/src/main/events/themes/remove-theme-achievement-sound.ts
+++ b/src/main/events/themes/remove-theme-achievement-sound.ts
@@ -0,0 +1,48 @@
+import { registerEvent } from "../register-event";
+import fs from "node:fs";
+import { getThemePath } from "@main/helpers";
+import { themesSublevel } from "@main/level";
+import { THEMES_PATH } from "@main/constants";
+import path from "node:path";
+
+const removeThemeAchievementSound = async (
+  _event: Electron.IpcMainInvokeEvent,
+  themeId: string
+): Promise<void> => {
+  const theme = await themesSublevel.get(themeId);
+  if (!theme) {
+    throw new Error("Theme not found");
+  }
+
+  const themeDir = getThemePath(themeId, theme.name);
+  const legacyThemeDir = path.join(THEMES_PATH, themeId);
+
+  const removeFromDir = async (dir: string) => {
+    if (!fs.existsSync(dir)) {
+      return;
+    }
+
+    const formats = ["wav", "mp3", "ogg", "m4a"];
+
+    for (const format of formats) {
+      const soundPath = path.join(dir, `achievement.${format}`);
+      if (fs.existsSync(soundPath)) {
+        await fs.promises.unlink(soundPath);
+      }
+    }
+  };
+
+  await removeFromDir(themeDir);
+  if (themeDir !== legacyThemeDir) {
+    await removeFromDir(legacyThemeDir);
+  }
+
+  await themesSublevel.put(themeId, {
+    ...theme,
+    hasCustomSound: false,
+    originalSoundPath: undefined,
+    updatedAt: new Date(),
+  });
+};
+
+registerEvent("removeThemeAchievementSound", removeThemeAchievementSound);
--- a/src/main/helpers/index.ts
+++ b/src/main/helpers/index.ts
@@ -2,6 +2,8 @@ import axios from "axios";
 import { JSDOM } from "jsdom";
 import UserAgent from "user-agents";
 import path from "node:path";
+import fs from "node:fs";
+import { THEMES_PATH } from "@main/constants";

 export const getFileBuffer = async (url: string) =>
  fetch(url, { method: "GET" }).then((response) =>
@@ -31,9 +33,64 @@ export const isPortableVersion = () => {
 };

 export const normalizePath = (str: string) =>
-  path.posix.normalize(str).replace(/\\/g, "/");
+  path.posix.normalize(str).replaceAll("\\", "/");

 export const addTrailingSlash = (str: string) =>
  str.endsWith("/") ? str : `${str}/`;

+const sanitizeFolderName = (name: string): string => {
+  return name
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9-_\s]/g, "")
+    .replaceAll(/\s+/g, "-")
+    .replaceAll(/-+/g, "-")
+    .replaceAll(/(^-|-$)/g, "");
+};
+
+export const getThemePath = (themeId: string, themeName?: string): string => {
+  if (themeName) {
+    const sanitizedName = sanitizeFolderName(themeName);
+    if (sanitizedName) {
+      return path.join(THEMES_PATH, sanitizedName);
+    }
+  }
+  return path.join(THEMES_PATH, themeId);
+};
+
+export const getThemeSoundPath = (
+  themeId: string,
+  themeName?: string
+): string | null => {
+  const themeDir = getThemePath(themeId, themeName);
+  const legacyThemeDir = themeName ? path.join(THEMES_PATH, themeId) : null;
+
+  const checkDir = (dir: string): string | null => {
+    if (!fs.existsSync(dir)) {
+      return null;
+    }
+
+    const formats = ["wav", "mp3", "ogg", "m4a"];
+
+    for (const format of formats) {
+      const soundPath = path.join(dir, `achievement.${format}`);
+      if (fs.existsSync(soundPath)) {
+        return soundPath;
+      }
+    }
+
+    return null;
+  };
+
+  const soundPath = checkDir(themeDir);
+  if (soundPath) {
+    return soundPath;
+  }
+
+  if (legacyThemeDir) {
+    return checkDir(legacyThemeDir);
+  }
+
+  return null;
+};
+
 export * from "./reg-parser";
--- a/src/main/services/notifications/index.ts
+++ b/src/main/services/notifications/index.ts
@@ -11,9 +11,10 @@ import { NotificationOptions, toXmlString } from "./xml";
 import { logger } from "../logger";
 import { WindowManager } from "../window-manager";
 import type { Game, UserPreferences, UserProfile } from "@types";
-import { db, levelKeys } from "@main/level";
+import { db, levelKeys, themesSublevel } from "@main/level";
 import { restartAndInstallUpdate } from "@main/events/autoupdater/restart-and-install-update";
 import { SystemPath } from "../system-path";
+import { getThemeSoundPath } from "@main/helpers";

 async function downloadImage(url: string | null) {
  if (!url) return undefined;
@@ -40,6 +41,27 @@ async function downloadImage(url: string | null) {
  });
 }

+async function getAchievementSoundPath(): Promise<string> {
+  try {
+    const allThemes = await themesSublevel.values().all();
+    const activeTheme = allThemes.find((theme) => theme.isActive);
+
+    if (activeTheme?.hasCustomSound) {
+      const themeSoundPath = getThemeSoundPath(
+        activeTheme.id,
+        activeTheme.name
+      );
+      if (themeSoundPath) {
+        return themeSoundPath;
+      }
+    }
+  } catch (error) {
+    logger.error("Failed to get theme sound path", error);
+  }
+
+  return achievementSoundPath;
+}
+
 export const publishDownloadCompleteNotification = async (game: Game) => {
  const userPreferences = await db.get<string, UserPreferences>(
    levelKeys.userPreferences,
@@ -145,7 +167,8 @@ export const publishCombinedNewAchievementNotification = async (
  if (WindowManager.mainWindow) {
    WindowManager.mainWindow.webContents.send("on-achievement-unlocked");
  } else if (process.platform !== "linux") {
-    sound.play(achievementSoundPath);
+    const soundPath = await getAchievementSoundPath();
+    sound.play(soundPath);
  }
 };

@@ -205,6 +228,7 @@ export const publishNewAchievementNotification = async (info: {
  if (WindowManager.mainWindow) {
    WindowManager.mainWindow.webContents.send("on-achievement-unlocked");
  } else if (process.platform !== "linux") {
-    sound.play(achievementSoundPath);
+    const soundPath = await getAchievementSoundPath();
+    sound.play(soundPath);
  }
 };
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -571,6 +571,25 @@ contextBridge.exposeInMainWorld("electron", {
  getActiveCustomTheme: () => ipcRenderer.invoke("getActiveCustomTheme"),
  toggleCustomTheme: (themeId: string, isActive: boolean) =>
    ipcRenderer.invoke("toggleCustomTheme", themeId, isActive),
+  copyThemeAchievementSound: (themeId: string, sourcePath: string) =>
+    ipcRenderer.invoke("copyThemeAchievementSound", themeId, sourcePath),
+  removeThemeAchievementSound: (themeId: string) =>
+    ipcRenderer.invoke("removeThemeAchievementSound", themeId),
+  getThemeSoundPath: (themeId: string) =>
+    ipcRenderer.invoke("getThemeSoundPath", themeId),
+  getThemeSoundDataUrl: (themeId: string) =>
+    ipcRenderer.invoke("getThemeSoundDataUrl", themeId),
+  importThemeSoundFromStore: (
+    themeId: string,
+    themeName: string,
+    storeUrl: string
+  ) =>
+    ipcRenderer.invoke(
+      "importThemeSoundFromStore",
+      themeId,
+      themeName,
+      storeUrl
+    ),

  /* Editor */
  openEditorWindow: (themeId: string) =>
--- 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/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef } from "react";
-import achievementSound from "@renderer/assets/audio/achievement.wav";
 import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";

 import {
@@ -25,7 +24,12 @@ import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
 import { useSubscription } from "./hooks/use-subscription";
 import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";

-import { injectCustomCss, removeCustomCss } from "./helpers";
+import {
+  injectCustomCss,
+  removeCustomCss,
+  getAchievementSoundUrl,
+  getAchievementSoundVolume,
+} from "./helpers";
 import "./app.scss";

 export interface AppProps {
@@ -216,9 +220,11 @@ export function App() {
    return () => unsubscribe();
  }, [loadAndApplyTheme]);

-  const playAudio = useCallback(() => {
-    const audio = new Audio(achievementSound);
-    audio.volume = 0.2;
+  const playAudio = useCallback(async () => {
+    const soundUrl = await getAchievementSoundUrl();
+    const volume = await getAchievementSoundVolume();
+    const audio = new Audio(soundUrl);
+    audio.volume = volume;
    audio.play();
  }, []);

--- 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) => {
-    dispatch(setFilters({ title: value.slice(0, 255) }));
+    if (isOnLibraryPage) {
+      dispatch(setLibrarySearchQuery(value.slice(0, 255)));
+    } else {
+      dispatch(setFilters({ title: value.slice(0, 255) }));
+      if (!location.pathname.startsWith("/catalogue")) {
+        navigate("/catalogue");
+      }
+    }
+  };

-    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/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -410,6 +410,18 @@ declare global {
    getCustomThemeById: (themeId: string) => Promise<Theme | null>;
    getActiveCustomTheme: () => Promise<Theme | null>;
    toggleCustomTheme: (themeId: string, isActive: boolean) => Promise<void>;
+    copyThemeAchievementSound: (
+      themeId: string,
+      sourcePath: string
+    ) => Promise<void>;
+    removeThemeAchievementSound: (themeId: string) => Promise<void>;
+    getThemeSoundPath: (themeId: string) => Promise<string | null>;
+    getThemeSoundDataUrl: (themeId: string) => Promise<string | null>;
+    importThemeSoundFromStore: (
+      themeId: string,
+      themeName: string,
+      storeUrl: string
+    ) => Promise<void>;

    /* Editor */
    openEditorWindow: (themeId: string) => Promise<void>;
--- 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/helpers.ts
+++ b/src/renderer/src/helpers.ts
@@ -121,3 +121,35 @@ export const formatNumber = (num: number): string => {
 export const generateUUID = (): string => {
  return uuidv4();
 };
+
+export const getAchievementSoundUrl = async (): Promise<string> => {
+  const defaultSound = (await import("@renderer/assets/audio/achievement.wav"))
+    .default;
+
+  try {
+    const activeTheme = await window.electron.getActiveCustomTheme();
+
+    if (activeTheme?.hasCustomSound) {
+      const soundDataUrl = await window.electron.getThemeSoundDataUrl(
+        activeTheme.id
+      );
+      if (soundDataUrl) {
+        return soundDataUrl;
+      }
+    }
+  } catch (error) {
+    console.error("Failed to get theme sound", error);
+  }
+
+  return defaultSound;
+};
+
+export const getAchievementSoundVolume = async (): Promise<number> => {
+  try {
+    const prefs = await window.electron.getUserPreferences();
+    return prefs?.achievementSoundVolume ?? 0.15;
+  } catch (error) {
+    console.error("Failed to get sound volume", error);
+    return 0.15;
+  }
+};
--- 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/achievements/notification/achievement-notification.tsx
+++ b/src/renderer/src/pages/achievements/notification/achievement-notification.tsx
@@ -1,11 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import achievementSound from "@renderer/assets/audio/achievement.wav";
 import { useTranslation } from "react-i18next";
 import {
  AchievementCustomNotificationPosition,
  AchievementNotificationInfo,
 } from "@types";
-import { injectCustomCss, removeCustomCss } from "@renderer/helpers";
+import {
+  injectCustomCss,
+  removeCustomCss,
+  getAchievementSoundUrl,
+  getAchievementSoundVolume,
+} from "@renderer/helpers";
 import { AchievementNotificationItem } from "@renderer/components/achievements/notification/achievement-notification";
 import app from "../../../app.scss?inline";
 import styles from "../../../components/achievements/notification/achievement-notification.scss?inline";
@@ -33,9 +37,11 @@ export function AchievementNotification() {

  const [shadowRootRef, setShadowRootRef] = useState<HTMLElement | null>(null);

-  const playAudio = useCallback(() => {
-    const audio = new Audio(achievementSound);
-    audio.volume = 0.1;
+  const playAudio = useCallback(async () => {
+    const soundUrl = await getAchievementSoundUrl();
+    const volume = await getAchievementSoundVolume();
+    const audio = new Audio(soundUrl);
+    audio.volume = volume;
    audio.play();
  }, []);

--- 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">
-      <button
-        className={`library-filter-options__option ${filterBy === "all" ? "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")}
-        </span>
-        <span className="library-filter-options__count">{favouritedCount}</span>
-      </button>
-      <button
-        className={`library-filter-options__option ${filterBy === "new" ? "active" : ""}`}
-        onClick={() => onFilterChange("new")}
-      >
-        <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")}
-        </span>
-        <span className="library-filter-options__count">{top10Count}</span>
-      </button>
+    <div className="library-filter-options__tabs">
+      <div className="library-filter-options__tab-wrapper">
+        <button
+          type="button"
+          className={`library-filter-options__tab ${filterBy === "all" ? "library-filter-options__tab--active" : ""}`}
+          onClick={() => onFilterChange("all")}
+        >
+          {t("all_games")}
+          {allGamesCount > 0 && (
+            <span className="library-filter-options__tab-badge">
+              {allGamesCount}
+            </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
+          type="button"
+          className={`library-filter-options__tab ${filterBy === "recently_played" ? "library-filter-options__tab--active" : ""}`}
+          onClick={() => onFilterChange("recently_played")}
+        >
+          {t("recently_played")}
+          {recentlyPlayedCount > 0 && (
+            <span className="library-filter-options__tab-badge">
+              {recentlyPlayedCount}
+            </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,250 +24,116 @@ 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(
-    game.libraryHeroImageUrl,
-    game.libraryImageUrl,
-    game.iconUrl
+  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}
-      >
-        <div
-          className="library-game-card-large__background"
-          style={{ backgroundImage: `url(${backgroundImage})` }}
-        />
-        <div className="library-game-card-large__gradient" />
+    <button
+      type="button"
+      className="library-game-card-large"
+      onClick={handleCardClick}
+      onContextMenu={handleContextMenuClick}
+    >
+      <div
+        className="library-game-card-large__background"
+        style={backgroundStyle}
+      />
+      <div className="library-game-card-large__gradient" />

-        <div className="library-game-card-large__overlay">
-          <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 ? (
-              <img
-                src={logoImage}
-                alt={game.title}
-                className="library-game-card-large__logo"
+      <div className="library-game-card-large__overlay">
+        <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"
              />
            ) : (
-              <h3 className="library-game-card-large__title">{game.title}</h3>
+              <ClockIcon size={11} />
            )}
-          </div>
-
-          <div className="library-game-card-large__info-bar">
-            {/* 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"
-              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>
+            <span className="library-game-card-large__playtime-text">
+              {formatPlayTime(game.playTimeInMilliseconds)}
+            </span>
          </div>
        </div>
-      </button>
-      <GameContextMenu
-        game={game}
-        visible={contextMenu.visible}
-        position={contextMenu.position}
-        onClose={handleCloseContextMenu}
-      />
-    </>
+
+        <div className="library-game-card-large__logo-container">
+          {logoImage ? (
+            <img
+              src={logoImage}
+              alt={game.title}
+              className="library-game-card-large__logo"
+            />
+          ) : (
+            <h3 className="library-game-card-large__title">{game.title}</h3>
+          )}
+        </div>
+
+        <div className="library-game-card-large__info-bar">
+          {/* 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={achievementBarStyle}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </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.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,110 +40,75 @@ export function LibraryGameCard({
    undefined;

  return (
-    <>
-      <button
-        type="button"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        className="library-game-card__wrapper"
-        title={isTooltipHovered ? undefined : game.title}
-        onClick={handleCardClick}
-        onContextMenu={handleContextMenu}
-      >
-        <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}
-            >
-              {game.hasManuallyUpdatedPlaytime ? (
-                <AlertFillIcon
-                  size={11}
-                  className="library-game-card__manual-playtime"
-                />
-              ) : (
-                <ClockIcon size={11} />
-              )}
-              <span className="library-game-card__playtime-long">
-                {formatPlayTime(game.playTimeInMilliseconds)}
-              </span>
-              <span className="library-game-card__playtime-short">
-                {formatPlayTime(game.playTimeInMilliseconds, true)}
-              </span>
-            </div>
-
-            <button
-              type="button"
-              className="library-game-card__menu-button"
-              onClick={handleMenuButtonClick}
-              title="More options"
-            >
-              <ThreeBarsIcon size={16} />
-            </button>
+    <button
+      type="button"
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className="library-game-card__wrapper"
+      title={game.title}
+      onClick={handleCardClick}
+      onContextMenu={handleContextMenuClick}
+    >
+      <div className="library-game-card__overlay">
+        <div className="library-game-card__top-section">
+          <div className="library-game-card__playtime">
+            {game.hasManuallyUpdatedPlaytime ? (
+              <AlertFillIcon
+                size={11}
+                className="library-game-card__manual-playtime"
+              />
+            ) : (
+              <ClockIcon size={11} />
+            )}
+            <span className="library-game-card__playtime-long">
+              {formatPlayTime(game.playTimeInMilliseconds)}
+            </span>
+            <span className="library-game-card__playtime-short">
+              {formatPlayTime(game.playTimeInMilliseconds, true)}
+            </span>
          </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}
-                    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
-          src={coverImage ?? undefined}
-          alt={game.title}
-          className="library-game-card__game-image"
-        />
-      </button>
-      <Tooltip
-        id={game.objectId}
-        style={{
-          zIndex: 9999,
-        }}
-        openOnClick={false}
-        afterShow={() => setIsTooltipHovered(true)}
-        afterHide={() => setIsTooltipHovered(false)}
+        {(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={13}
+                  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
+        src={coverImage ?? undefined}
+        alt={game.title}
+        className="library-game-card__game-image"
+        loading="lazy"
      />
-      <GameContextMenu
-        game={game}
-        visible={contextMenu.visible}
-        position={contextMenu.position}
-        onClose={handleCloseContextMenu}
-      />
-    </>
+    </button>
  );
-}
+});
--- 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 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);
+  const filterCounts = useMemo(() => {
+    const allGamesCount = 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,32 +163,61 @@ export default function Library() {
        </div>
      )}

-      {hasGames && viewMode === "large" && (
-        <div className="library__games-list library__games-list--large">
-          {sortedLibrary.map((game) => (
-            <LibraryGameCardLarge
-              key={`${game.shop}-${game.objectId}`}
-              game={game}
-            />
-          ))}
-        </div>
+      {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}
+                />
+              ))}
+            </motion.div>
+          )}
+
+          {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}`}
+                  style={{ listStyle: "none" }}
+                >
+                  <LibraryGameCard
+                    game={game}
+                    onMouseEnter={handleOnMouseEnterGameCard}
+                    onMouseLeave={handleOnMouseLeaveGameCard}
+                    onContextMenu={handleOpenContextMenu}
+                  />
+                </li>
+              ))}
+            </motion.ul>
+          )}
+        </AnimatePresence>
      )}

-      {hasGames && viewMode !== "large" && (
-        <ul className={`library__games-grid library__games-grid--${viewMode}`}>
-          {sortedLibrary.map((game) => (
-            <li
-              key={`${game.shop}-${game.objectId}`}
-              style={{ listStyle: "none" }}
-            >
-              <LibraryGameCard
-                game={game}
-                onMouseEnter={handleOnMouseEnterGameCard}
-                onMouseLeave={handleOnMouseLeaveGameCard}
-              />
-            </li>
-          ))}
-        </ul>
+      {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 {
--- a/src/renderer/src/pages/settings/aparence/modals/import-theme-modal.tsx
+++ b/src/renderer/src/pages/settings/aparence/modals/import-theme-modal.tsx
@@ -51,6 +51,16 @@ export const ImportThemeModal = ({

      if (!currentTheme) return;

+      try {
+        await window.electron.importThemeSoundFromStore(
+          theme.id,
+          themeName,
+          THEME_WEB_STORE_URL
+        );
+      } catch (soundError) {
+        logger.error("Failed to import theme sound", soundError);
+      }
+
      const activeTheme = await window.electron.getActiveCustomTheme();

      if (activeTheme) {
--- a/src/renderer/src/pages/settings/settings-general.scss
+++ b/src/renderer/src/pages/settings/settings-general.scss
@@ -17,4 +17,159 @@
  &__test-achievement-notification-button {
    align-self: flex-start;
  }
+
+  &__volume-control {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    label {
+      font-size: 14px;
+      color: globals.$muted-color;
+    }
+  }
+
+  &__volume-slider-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 200px;
+    position: relative;
+    --volume-percent: 0%;
+  }
+
+  &__volume-icon {
+    color: globals.$muted-color;
+    flex-shrink: 0;
+  }
+
+  &__volume-value {
+    font-size: 14px;
+    color: globals.$body-color;
+    font-weight: 500;
+    min-width: 40px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  &__volume-slider {
+    flex: 1;
+    height: 6px;
+    border-radius: 3px;
+    background: globals.$dark-background-color;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: globals.$muted-color;
+      cursor: pointer;
+      border: 2px solid globals.$background-color;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      transition: all 0.2s;
+      margin-top: -6px;
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
+      }
+
+      &:active {
+        transform: scale(1.05);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: globals.$muted-color;
+      cursor: pointer;
+      border: 2px solid globals.$background-color;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      transition: all 0.2s;
+      margin-top: -6px;
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
+      }
+
+      &:active {
+        transform: scale(1.05);
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: linear-gradient(
+        to right,
+        globals.$muted-color 0%,
+        globals.$muted-color var(--volume-percent),
+        globals.$dark-background-color var(--volume-percent),
+        globals.$dark-background-color 100%
+      );
+    }
+
+    &::-moz-range-track {
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: globals.$dark-background-color;
+    }
+
+    &::-moz-range-progress {
+      height: 6px;
+      border-radius: 3px;
+      background: globals.$muted-color;
+    }
+
+    &:focus {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+      }
+
+      &::-moz-range-thumb {
+        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    &::-ms-thumb {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: globals.$muted-color;
+      cursor: pointer;
+      border: 2px solid globals.$background-color;
+    }
+
+    &::-ms-track {
+      width: 100%;
+      height: 6px;
+      background: transparent;
+      border-color: transparent;
+      color: transparent;
+    }
+
+    &::-ms-fill-lower {
+      background: globals.$muted-color;
+      border-radius: 3px;
+    }
+
+    &::-ms-fill-upper {
+      background: globals.$dark-background-color;
+      border-radius: 3px;
+    }
+  }
 }
--- a/src/renderer/src/pages/settings/settings-general.tsx
+++ b/src/renderer/src/pages/settings/settings-general.tsx
@@ -1,4 +1,11 @@
-import { useContext, useEffect, useMemo, useState } from "react";
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+} from "react";
 import {
  TextField,
  Button,
@@ -12,7 +19,7 @@ import languageResources from "@locales";
 import { orderBy } from "lodash-es";
 import { settingsContext } from "@renderer/context";
 import "./settings-general.scss";
-import { DesktopDownloadIcon } from "@primer/octicons-react";
+import { DesktopDownloadIcon, UnmuteIcon } from "@primer/octicons-react";
 import { logger } from "@renderer/logger";
 import { AchievementCustomNotificationPosition } from "@types";

@@ -43,6 +50,7 @@ export function SettingsGeneral() {
    achievementCustomNotificationsEnabled: true,
    achievementCustomNotificationPosition:
      "top-left" as AchievementCustomNotificationPosition,
+    achievementSoundVolume: 15,
    language: "",
    customStyles: window.localStorage.getItem("customStyles") || "",
  });
@@ -51,6 +59,8 @@ export function SettingsGeneral() {

  const [defaultDownloadsPath, setDefaultDownloadsPath] = useState("");

+  const volumeUpdateTimeoutRef = useRef<NodeJS.Timeout>();
+
  useEffect(() => {
    window.electron.getDefaultDownloadsPath().then((path) => {
      setDefaultDownloadsPath(path);
@@ -81,6 +91,9 @@ export function SettingsGeneral() {

    return () => {
      clearInterval(interval);
+      if (volumeUpdateTimeoutRef.current) {
+        clearTimeout(volumeUpdateTimeoutRef.current);
+      }
    };
  }, []);

@@ -110,6 +123,9 @@ export function SettingsGeneral() {
          userPreferences.achievementCustomNotificationsEnabled ?? true,
        achievementCustomNotificationPosition:
          userPreferences.achievementCustomNotificationPosition ?? "top-left",
+        achievementSoundVolume: Math.round(
+          (userPreferences.achievementSoundVolume ?? 0.15) * 100
+        ),
        friendRequestNotificationsEnabled:
          userPreferences.friendRequestNotificationsEnabled ?? false,
        friendStartGameNotificationsEnabled:
@@ -148,6 +164,21 @@ export function SettingsGeneral() {
    await updateUserPreferences(values);
  };

+  const handleVolumeChange = useCallback(
+    (newVolume: number) => {
+      setForm((prev) => ({ ...prev, achievementSoundVolume: newVolume }));
+
+      if (volumeUpdateTimeoutRef.current) {
+        clearTimeout(volumeUpdateTimeoutRef.current);
+      }
+
+      volumeUpdateTimeoutRef.current = setTimeout(() => {
+        updateUserPreferences({ achievementSoundVolume: newVolume / 100 });
+      }, 300);
+    },
+    [updateUserPreferences]
+  );
+
  const handleChangeAchievementCustomNotificationPosition = async (
    event: React.ChangeEvent<HTMLSelectElement>
  ) => {
@@ -309,6 +340,39 @@ export function SettingsGeneral() {
          </>
        )}

+      {form.achievementNotificationsEnabled && (
+        <div className="settings-general__volume-control">
+          <label htmlFor="achievement-volume">
+            {t("achievement_sound_volume")}
+          </label>
+          <div className="settings-general__volume-slider-wrapper">
+            <UnmuteIcon size={16} className="settings-general__volume-icon" />
+            <input
+              id="achievement-volume"
+              type="range"
+              min="0"
+              max="100"
+              value={form.achievementSoundVolume}
+              onChange={(e) => {
+                const volumePercent = parseInt(e.target.value, 10);
+                if (!isNaN(volumePercent)) {
+                  handleVolumeChange(volumePercent);
+                }
+              }}
+              className="settings-general__volume-slider"
+              style={
+                {
+                  "--volume-percent": `${form.achievementSoundVolume}%`,
+                } as React.CSSProperties
+              }
+            />
+            <span className="settings-general__volume-value">
+              {form.achievementSoundVolume}%
+            </span>
+          </div>
+        </div>
+      )}
+
      <h2 className="settings-general__section-title">{t("common_redist")}</h2>

      <p className="settings-general__common-redist-description">
--- a/src/renderer/src/pages/theme-editor/theme-editor.scss
+++ b/src/renderer/src/pages/theme-editor/theme-editor.scss
@@ -47,6 +47,8 @@
    position: relative;
    border: 1px solid globals.$muted-color;
    border-radius: 2px;
+    flex: 1;
+    min-width: 0;
  }

  &__footer {
@@ -80,7 +82,7 @@
  }

  &__info {
-    padding: 16px;
+    padding: 8px;

    p {
      font-size: 16px;
@@ -93,12 +95,39 @@
  &__notification-preview {
    padding-top: 12px;
    display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
    gap: 16px;

    &__select-variation {
      flex: inherit;
    }
  }
+
+  &__notification-preview-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex-shrink: 0;
+  }
+
+  &__notification-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__sound-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  }
+
+  &__sound-actions-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  }
 }
--- a/src/renderer/src/pages/theme-editor/theme-editor.tsx
+++ b/src/renderer/src/pages/theme-editor/theme-editor.tsx
@@ -3,11 +3,16 @@ import "./theme-editor.scss";
 import Editor from "@monaco-editor/react";
 import { AchievementCustomNotificationPosition, Theme } from "@types";
 import { useSearchParams } from "react-router-dom";
-import { Button, SelectField } from "@renderer/components";
-import { CheckIcon } from "@primer/octicons-react";
+import { Button, SelectField, TextField } from "@renderer/components";
+import {
+  CheckIcon,
+  UploadIcon,
+  TrashIcon,
+  PlayIcon,
+} from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { injectCustomCss } from "@renderer/helpers";
+import { injectCustomCss, getAchievementSoundVolume } from "@renderer/helpers";
 import { AchievementNotificationItem } from "@renderer/components/achievements/notification/achievement-notification";
 import { generateAchievementCustomNotificationTest } from "@shared";
 import { CollapsedMenu } from "@renderer/components/collapsed-menu/collapsed-menu";
@@ -27,6 +32,7 @@ export default function ThemeEditor() {
  const [theme, setTheme] = useState<Theme | null>(null);
  const [code, setCode] = useState("");
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [soundPath, setSoundPath] = useState<string>("");

  const [isClosingNotifications, setIsClosingNotifications] = useState(false);

@@ -62,6 +68,9 @@ export default function ThemeEditor() {
        if (loadedTheme) {
          setTheme(loadedTheme);
          setCode(loadedTheme.code);
+          if (loadedTheme.originalSoundPath) {
+            setSoundPath(loadedTheme.originalSoundPath);
+          }
          if (shadowRootRef) {
            injectCustomCss(loadedTheme.code, shadowRootRef);
          }
@@ -107,6 +116,73 @@ export default function ThemeEditor() {
    }
  };

+  const handleSelectSound = useCallback(async () => {
+    if (!theme) return;
+
+    const { filePaths } = await window.electron.showOpenDialog({
+      properties: ["openFile"],
+      filters: [
+        {
+          name: "Audio",
+          extensions: ["wav", "mp3", "ogg", "m4a"],
+        },
+      ],
+    });
+
+    if (filePaths && filePaths.length > 0) {
+      const originalPath = filePaths[0];
+      await window.electron.copyThemeAchievementSound(theme.id, originalPath);
+      const updatedTheme = await window.electron.getCustomThemeById(theme.id);
+      if (updatedTheme) {
+        setTheme(updatedTheme);
+        if (updatedTheme.originalSoundPath) {
+          setSoundPath(updatedTheme.originalSoundPath);
+        }
+      }
+    }
+  }, [theme]);
+
+  const handleRemoveSound = useCallback(async () => {
+    if (!theme) return;
+
+    await window.electron.removeThemeAchievementSound(theme.id);
+    const updatedTheme = await window.electron.getCustomThemeById(theme.id);
+    if (updatedTheme) {
+      setTheme(updatedTheme);
+    }
+    setSoundPath("");
+  }, [theme]);
+
+  const handlePreviewSound = useCallback(async () => {
+    if (!theme) return;
+
+    let soundUrl: string;
+
+    if (theme.hasCustomSound) {
+      const themeSoundUrl = await window.electron.getThemeSoundDataUrl(
+        theme.id
+      );
+      if (themeSoundUrl) {
+        soundUrl = themeSoundUrl;
+      } else {
+        const defaultSound = (
+          await import("@renderer/assets/audio/achievement.wav")
+        ).default;
+        soundUrl = defaultSound;
+      }
+    } else {
+      const defaultSound = (
+        await import("@renderer/assets/audio/achievement.wav")
+      ).default;
+      soundUrl = defaultSound;
+    }
+
+    const volume = await getAchievementSoundVolume();
+    const audio = new Audio(soundUrl);
+    audio.volume = volume;
+    audio.play();
+  }, [theme]);
+
  const achievementCustomNotificationPositionOptions = useMemo(() => {
    return [
      "top-left",
@@ -164,35 +240,66 @@ export default function ThemeEditor() {
      <div className="theme-editor__footer">
        <CollapsedMenu title={t("notification_preview")}>
          <div className="theme-editor__notification-preview">
-            <SelectField
-              className="theme-editor__notification-preview__select-variation"
-              label={t("variation")}
-              options={Object.values(notificationVariations).map(
-                (variation) => {
-                  return {
-                    key: variation,
-                    value: variation,
-                    label: t(variation),
-                  };
-                }
-              )}
-              onChange={(value) =>
-                setNotificationVariation(
-                  value.target.value as keyof typeof notificationVariations
-                )
+            <div className="theme-editor__notification-preview-controls">
+              <div className="theme-editor__notification-controls">
+                <SelectField
+                  className="theme-editor__notification-preview__select-variation"
+                  label={t("variation")}
+                  options={Object.values(notificationVariations).map(
+                    (variation) => {
+                      return {
+                        key: variation,
+                        value: variation,
+                        label: t(variation),
+                      };
+                    }
+                  )}
+                  onChange={(value) =>
+                    setNotificationVariation(
+                      value.target.value as keyof typeof notificationVariations
+                    )
+                  }
+                />
+
+                <SelectField
+                  label={t("alignment")}
+                  value={notificationAlignment}
+                  onChange={(e) =>
+                    setNotificationAlignment(
+                      e.target.value as AchievementCustomNotificationPosition
+                    )
+                  }
+                  options={achievementCustomNotificationPositionOptions}
+                />
+              </div>
+            </div>
+
+            <TextField
+              label={t("select_achievement_sound")}
+              value={soundPath || ""}
+              placeholder={soundPath ? undefined : t("no_sound_file_selected")}
+              readOnly
+              disabled
+              rightContent={
+                <Button theme="outline" onClick={handleSelectSound}>
+                  <UploadIcon />
+                  {t("select")}
+                </Button>
              }
            />

-            <SelectField
-              label={t("alignment")}
-              value={notificationAlignment}
-              onChange={(e) =>
-                setNotificationAlignment(
-                  e.target.value as AchievementCustomNotificationPosition
-                )
-              }
-              options={achievementCustomNotificationPositionOptions}
-            />
+            {theme?.hasCustomSound && (
+              <div className="theme-editor__sound-actions-row">
+                <Button theme="outline" onClick={handleRemoveSound}>
+                  <TrashIcon />
+                  {t("remove")}
+                </Button>
+                <Button theme="outline" onClick={handlePreviewSound}>
+                  <PlayIcon />
+                  {t("preview")}
+                </Button>
+              </div>
+            )}

            <div className="theme-editor__notification-preview-wrapper">
              <root.div>
--- a/src/types/level.types.ts
+++ b/src/types/level.types.ts
@@ -113,6 +113,7 @@ export interface UserPreferences {
  achievementNotificationsEnabled?: boolean;
  achievementCustomNotificationsEnabled?: boolean;
  achievementCustomNotificationPosition?: AchievementCustomNotificationPosition;
+  achievementSoundVolume?: number;
  friendRequestNotificationsEnabled?: boolean;
  friendStartGameNotificationsEnabled?: boolean;
  showDownloadSpeedInMegabytes?: boolean;
--- a/src/types/theme.types.ts
+++ b/src/types/theme.types.ts
@@ -5,6 +5,8 @@ export interface Theme {
  authorName?: string;
  isActive: boolean;
  code: string;
+  hasCustomSound?: boolean;
+  originalSoundPath?: string;
  createdAt: Date;
  updatedAt: Date;
 }
Author	SHA1	Message	Date
Chubby Granny Chaser	b8647a3300	Merge branch 'main' of https://github.com/hydralauncher/hydra into feat/custom-achievement-sound	2025-11-10 22:57:59 +00:00
Chubby Granny Chaser	95894484f1	feat: adding slider to achievement sound	2025-11-10 22:57:35 +00:00
Chubby Granny Chaser	6fc5a70722	feat: adding slider to achievement sound	2025-11-10 22:55:49 +00:00
Chubby Granny Chaser	399669a94c	feat: adding slider to achievement sound	2025-11-10 22:55:17 +00:00
Chubby Granny Chaser	77b2fc3946	Merge pull request #1848 from hydralauncher/fix/library-ui feat: library ui changes and searchbar removal	2025-11-10 22:55:02 +00:00
Chubby Granny Chaser	3472e90858	Merge branch 'main' into fix/library-ui	2025-11-10 22:53:52 +00:00
Chubby Granny Chaser	d80daa59d0	Merge branch 'main' into feat/custom-achievement-sound	2025-11-10 22:21:51 +00:00
Chubby Granny Chaser	46df34e8a5	feat: improving library	2025-11-10 22:20:44 +00:00
Chubby Granny Chaser	272b047ded	Merge pull request #1844 from expload233/main Add new translation for Chinese	2025-11-10 21:51:44 +00:00
Chubby Granny Chaser	dfba38aeed	Merge branch 'main' into main	2025-11-10 21:51:20 +00:00
Moyasee	d54ff9a949	fix: eslint issues	2025-11-09 15:34:24 +02:00
Moyasee	e272470a7b	feat: using theme name for folder instead themeid	2025-11-09 15:28:52 +02:00
Moyasee	53bc3551e1	Merge branch 'feat/custom-achievement-sound' of https://github.com/hydralauncher/hydra into feat/custom-achievement-sound	2025-11-09 04:20:48 +02:00
Moyasee	3daf28c882	fix: handling exception and ESLint issues	2025-11-09 04:19:52 +02:00
Moyase	e128dad4dd	Merge branch 'main' into feat/custom-achievement-sound	2025-11-09 04:14:31 +02:00
Moyasee	65e2bb38a0	ci: formatting	2025-11-08 19:26:13 +02:00
Moyasee	5f09321728	Merge branch 'fix/library-ui' of https://github.com/hydralauncher/hydra into fix/library-ui	2025-11-08 19:25:29 +02:00
Moyasee	011559b499	fix: removed VirtualList component from large view	2025-11-08 19:24:43 +02:00
Moyasee	482d9b2f96	fix: ensure consistent custom sound detection across main and renderer processes	2025-11-08 15:14:12 +02:00
Moyase	c890b0fd56	Merge branch 'main' into fix/library-ui	2025-11-08 14:52:35 +02:00
Moyasee	cf48627a8d	fix: extracter ternary operation	2025-11-08 14:51:10 +02:00
Moyasee	196413ee28	fix: duplicated lines	2025-11-08 14:48:42 +02:00
Moyasee	c3a4990a50	ci: performance optimizing in library	2025-11-08 14:28:54 +02:00
Chubby Granny Chaser	fa4c11e458	Merge pull request #1849 from hydralauncher/fix/surprise-me-button Fix: surprise me button functionality	2025-11-08 08:18:13 +00:00
Moyasee	b6bbf05da6	fix: theme editor layout positioning	2025-11-07 20:12:50 +02:00
Moyasee	154b6271a1	fix: removed unused function	2025-11-07 17:50:47 +02:00
Moyasee	a6cbaf6dc1	feat: custom achievement sound and volume changing)	2025-11-07 17:48:56 +02:00
Moyasee	3bef0c9269	feat: library ui changes and searchbar removal	2025-11-06 18:26:56 +02:00
expload233	5f56a3d517	add translation	2025-11-04 15:47:44 +08:00
expload	2359c4cc5e	Merge branch 'hydralauncher:main' into main	2025-11-04 15:31:03 +08:00
expload233	66bb5221c1	fix lint	2025-11-04 15:24:42 +08:00
expload233	088feaffc2	add missing translation for zh-CN	2025-11-03 19:02:11 +08:00
expload233	aa6b595b18	Fill in the missing entries	2025-11-03 18:53:02 +08:00