test

fix: custom assets not being showed in library page

.github/workflows/build.yml

@@ -2,6 +2,9 @@ name: Build
 
 on:
   pull_request:
+  push:
+    branches:
+      - main
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

src/locales/en/translation.json

@@ -13,6 +13,7 @@
   },
   "sidebar": {
     "catalogue": "Catalogue",
+    "library": "Library",
     "downloads": "Downloads",
     "settings": "Settings",
     "my_library": "My library",
@@ -92,8 +93,10 @@
   },
   "header": {
     "search": "Search games",
+    "search_library": "Search library",
     "home": "Home",
     "catalogue": "Catalogue",
+    "library": "Library",
     "downloads": "Downloads",
     "search_results": "Search results",
     "settings": "Settings",
@@ -194,6 +197,7 @@
     "download_in_progress": "Download in progress",
     "download_paused": "Download paused",
     "last_downloaded_option": "Last downloaded option",
+    "new_download_option": "New",
     "create_steam_shortcut": "Create Steam shortcut",
     "create_shortcut_success": "Shortcut created successfully",
     "you_might_need_to_restart_steam": "You might need to restart Steam to see the changes",
@@ -555,6 +559,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",
@@ -677,18 +690,6 @@
     "upload_banner": "Upload banner",
     "uploading_banner": "Uploading banner…",
     "background_image_updated": "Background image updated",
-    "crop_profile_image": "Crop Profile Image",
-    "crop_background_image": "Crop Background Image",
-    "crop": "Crop",
-    "cropping": "Cropping…",
-    "crop_area": "Crop area",
-    "resize_handle_nw": "Resize handle - northwest corner",
-    "resize_handle_ne": "Resize handle - northeast corner",
-    "resize_handle_sw": "Resize handle - southwest corner",
-    "resize_handle_se": "Resize handle - southeast corner",
-    "zoom_in": "Zoom In",
-    "zoom_out": "Zoom Out",
-    "image_crop_failure": "Failed to crop image. Please try again.",
     "stats": "Stats",
     "achievements": "achievements",
     "games": "Games",
@@ -710,6 +711,27 @@
     "delete_review": "Delete Review",
     "loading_reviews": "Loading reviews..."
   },
+  "library": {
+    "library": "Library",
+    "play": "Play",
+    "download": "Download",
+    "downloading": "Downloading",
+    "game": "game",
+    "games": "games",
+    "grid_view": "Grid view",
+    "compact_view": "Compact view",
+    "large_view": "Large view",
+    "no_games_title": "Your library is empty",
+    "no_games_description": "Add games from the catalogue or download them to get started",
+    "amount_hours": "{{amount}} hours",
+    "amount_minutes": "{{amount}} minutes",
+    "amount_hours_short": "{{amount}}h",
+    "amount_minutes_short": "{{amount}}m",
+    "manual_playtime_tooltip": "This playtime has been manually updated",
+    "all_games": "All Games",
+    "recently_played": "Recently Played",
+    "favorites": "Favorites"
+  },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",
     "user_achievements": "{{displayName}}'s Achievements",

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",
@@ -192,6 +193,7 @@
     "download_in_progress": "Descarga en progreso",
     "download_paused": "Descarga pausada",
     "last_downloaded_option": "Última opción de descarga",
+    "new_download_option": "Nuevo",
     "create_steam_shortcut": "Crear atajo de Steam",
     "create_shortcut_success": "Atajo creado con éxito",
     "you_might_need_to_restart_steam": "Probablemente necesités reiniciar Steam para ver cambios",
@@ -542,6 +544,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 +724,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"
   }
 }

src/locales/pt-BR/translation.json

@@ -13,6 +13,7 @@
   },
   "sidebar": {
     "catalogue": "Catálogo",
+    "library": "Biblioteca",
     "downloads": "Downloads",
     "settings": "Ajustes",
     "my_library": "Biblioteca",
@@ -182,6 +183,7 @@
     "download_in_progress": "Download em andamento",
     "download_paused": "Download pausado",
     "last_downloaded_option": "Última opção baixada",
+    "new_download_option": "Novo",
     "create_steam_shortcut": "Criar atalho na Steam",
     "create_shortcut_success": "Atalho criado com sucesso",
     "you_might_need_to_restart_steam": "Você pode precisar reiniciar a Steam para ver as alterações",
@@ -541,6 +543,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 +739,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"
   }
 }

src/locales/ru/translation.json

@@ -13,6 +13,7 @@
   },
   "sidebar": {
     "catalogue": "Каталог",
+    "library": "Библиотека",
     "downloads": "Загрузки",
     "settings": "Настройки",
     "my_library": "Библиотека",
@@ -194,6 +195,7 @@
     "download_in_progress": "Идёт загрузка",
     "download_paused": "Загрузка приостановлена",
     "last_downloaded_option": "Последний вариант загрузки",
+    "new_download_option": "Новый",
     "create_steam_shortcut": "Создать ярлык Steam",
     "create_shortcut_success": "Ярлык создан",
     "you_might_need_to_restart_steam": "Возможно, вам потребуется перезапустить Steam, чтобы увидеть изменения",
@@ -555,6 +557,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 +735,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": "Избранное"
   }
 }

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": "成就已解锁",

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",

src/main/events/download-sources/get-download-sources-check-baseline.ts

@@ -0,0 +1,13 @@
+import { getDownloadSourcesCheckBaseline } from "@main/level";
+import { registerEvent } from "../register-event";
+
+const getDownloadSourcesCheckBaselineHandler = async (
+  _event: Electron.IpcMainInvokeEvent
+) => {
+  return await getDownloadSourcesCheckBaseline();
+};
+
+registerEvent(
+  "getDownloadSourcesCheckBaseline",
+  getDownloadSourcesCheckBaselineHandler
+);

src/main/events/download-sources/get-download-sources-since-value.ts

@@ -0,0 +1,13 @@
+import { getDownloadSourcesSinceValue } from "@main/level";
+import { registerEvent } from "../register-event";
+
+const getDownloadSourcesSinceValueHandler = async (
+  _event: Electron.IpcMainInvokeEvent
+) => {
+  return await getDownloadSourcesSinceValue();
+};
+
+registerEvent(
+  "getDownloadSourcesSinceValue",
+  getDownloadSourcesSinceValueHandler
+);

src/main/events/index.ts

@@ -18,7 +18,9 @@ import "./library/close-game";
 import "./library/delete-game-folder";
 import "./library/get-game-by-object-id";
 import "./library/get-library";
+import "./library/refresh-library-assets";
 import "./library/extract-game-download";
+import "./library/clear-new-download-options";
 import "./library/open-game";
 import "./library/open-game-executable-path";
 import "./library/open-game-installer";
@@ -64,6 +66,8 @@ import "./user-preferences/authenticate-real-debrid";
 import "./user-preferences/authenticate-torbox";
 import "./download-sources/add-download-source";
 import "./download-sources/sync-download-sources";
+import "./download-sources/get-download-sources-check-baseline";
+import "./download-sources/get-download-sources-since-value";
 import "./auth/sign-out";
 import "./auth/open-auth-window";
 import "./auth/get-session-hash";
@@ -91,6 +95,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";

src/main/events/library/clear-new-download-options.ts

@@ -0,0 +1,27 @@
+import { registerEvent } from "../register-event";
+import { gamesSublevel, levelKeys } from "@main/level";
+import { logger } from "@main/services";
+import type { GameShop } from "@types";
+
+const clearNewDownloadOptions = async (
+  _event: Electron.IpcMainInvokeEvent,
+  shop: GameShop,
+  objectId: string
+) => {
+  const gameKey = levelKeys.game(shop, objectId);
+
+  const game = await gamesSublevel.get(gameKey);
+  if (!game) return;
+
+  try {
+    await gamesSublevel.put(gameKey, {
+      ...game,
+      newDownloadOptionsCount: undefined,
+    });
+    logger.info(`Cleared newDownloadOptionsCount for game ${gameKey}`);
+  } catch (error) {
+    logger.error(`Failed to clear newDownloadOptionsCount: ${error}`);
+  }
+};
+
+registerEvent("clearNewDownloadOptions", clearNewDownloadOptions);

src/main/events/library/get-library.ts

@@ -22,11 +22,15 @@ const getLibrary = async (): Promise<LibraryGame[]> => {
               id: key,
               ...game,
               download: download ?? null,
+              unlockedAchievementCount: game.unlockedAchievementCount ?? 0,
+              achievementCount: game.achievementCount ?? 0,
+              // Spread gameAssets last to ensure all image URLs are properly set
               ...gameAssets,
-              // Ensure compatibility with LibraryGame type
+              // Preserve custom image URLs from game if they exist
-              libraryHeroImageUrl:
+              customIconUrl: game.customIconUrl,
-                game.libraryHeroImageUrl ?? gameAssets?.libraryHeroImageUrl,
+              customLogoImageUrl: game.customLogoImageUrl,
-            } as LibraryGame;
+              customHeroImageUrl: game.customHeroImageUrl,
+            };
           })
       );
     });

src/main/events/library/refresh-library-assets.ts

@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { mergeWithRemoteGames } from "@main/services";
+
+const refreshLibraryAssets = async () => {
+  await mergeWithRemoteGames();
+};
+
+registerEvent("refreshLibraryAssets", refreshLibraryAssets);

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);

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);

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);

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);

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);

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";

src/main/level/sublevels/downloadSourcesCheckTimestamp.ts

@@ -0,0 +1,59 @@
+import { levelKeys } from "./keys";
+import { db } from "../level";
+import { logger } from "@main/services";
+
+// Gets when we last started the app (for next API call's 'since')
+export const getDownloadSourcesCheckBaseline = async (): Promise<
+  string | null
+> => {
+  try {
+    const timestamp = await db.get(levelKeys.downloadSourcesCheckBaseline);
+    return timestamp;
+  } catch (error) {
+    if (error instanceof Error && error.name === "NotFoundError") {
+      logger.debug("Download sources check baseline not found, returning null");
+    } else {
+      logger.error(
+        "Unexpected error while getting download sources check baseline",
+        error
+      );
+    }
+    return null;
+  }
+};
+
+// Updates to current time (when app starts)
+export const updateDownloadSourcesCheckBaseline = async (
+  timestamp: string
+): Promise<void> => {
+  const utcTimestamp = new Date(timestamp).toISOString();
+  await db.put(levelKeys.downloadSourcesCheckBaseline, utcTimestamp);
+};
+
+// Gets the 'since' value the API used in the last check (for modal comparison)
+export const getDownloadSourcesSinceValue = async (): Promise<
+  string | null
+> => {
+  try {
+    const timestamp = await db.get(levelKeys.downloadSourcesSinceValue);
+    return timestamp;
+  } catch (error) {
+    if (error instanceof Error && error.name === "NotFoundError") {
+      logger.debug("Download sources since value not found, returning null");
+    } else {
+      logger.error(
+        "Unexpected error while getting download sources since value",
+        error
+      );
+    }
+    return null;
+  }
+};
+
+// Saves the 'since' value we used in the API call (for modal to compare against)
+export const updateDownloadSourcesSinceValue = async (
+  timestamp: string
+): Promise<void> => {
+  const utcTimestamp = new Date(timestamp).toISOString();
+  await db.put(levelKeys.downloadSourcesSinceValue, utcTimestamp);
+};

src/main/level/sublevels/index.ts

@@ -7,3 +7,4 @@ export * from "./game-achievements";
 export * from "./keys";
 export * from "./themes";
 export * from "./download-sources";
+export * from "./downloadSourcesCheckTimestamp";

src/main/level/sublevels/keys.ts

@@ -18,4 +18,6 @@ export const levelKeys = {
   screenState: "screenState",
   rpcPassword: "rpcPassword",
   downloadSources: "downloadSources",
+  downloadSourcesCheckBaseline: "downloadSourcesCheckBaseline", // When we last started the app
+  downloadSourcesSinceValue: "downloadSourcesSinceValue", // The 'since' value API used (for modal comparison)
 };

src/main/main.ts

@@ -16,6 +16,7 @@ import {
   Ludusavi,
   Lock,
   DeckyPlugin,
+  DownloadSourcesChecker,
   WSClient,
 } from "@main/services";
 import { migrateDownloadSources } from "./helpers/migrate-download-sources";
@@ -57,6 +58,9 @@ export const loadState = async () => {
 
     const { syncDownloadSourcesFromApi } = await import("./services/user");
     void syncDownloadSourcesFromApi();
+
+    // Check for new download options on startup
+    DownloadSourcesChecker.checkForChanges();
     WSClient.connect();
   });
 

src/main/services/download-sources-checker.ts

@@ -0,0 +1,188 @@
+import { HydraApi } from "./hydra-api";
+import {
+  gamesSublevel,
+  getDownloadSourcesCheckBaseline,
+  updateDownloadSourcesCheckBaseline,
+  updateDownloadSourcesSinceValue,
+  downloadSourcesSublevel,
+} from "@main/level";
+import { logger } from "./logger";
+import { WindowManager } from "./window-manager";
+import type { Game } from "@types";
+
+interface DownloadSourcesChangeResponse {
+  shop: string;
+  objectId: string;
+  newDownloadOptionsCount: number;
+  downloadSourceIds: string[];
+}
+
+export class DownloadSourcesChecker {
+  private static async clearStaleBadges(
+    nonCustomGames: Game[]
+  ): Promise<{ gameId: string; count: number }[]> {
+    const previouslyFlaggedGames = nonCustomGames.filter(
+      (game: Game) =>
+        game.newDownloadOptionsCount && game.newDownloadOptionsCount > 0
+    );
+
+    const clearedPayload: { gameId: string; count: number }[] = [];
+    if (previouslyFlaggedGames.length > 0) {
+      logger.info(
+        `Clearing stale newDownloadOptionsCount for ${previouslyFlaggedGames.length} games`
+      );
+      for (const game of previouslyFlaggedGames) {
+        await gamesSublevel.put(`${game.shop}:${game.objectId}`, {
+          ...game,
+          newDownloadOptionsCount: undefined,
+        });
+        clearedPayload.push({
+          gameId: `${game.shop}:${game.objectId}`,
+          count: 0,
+        });
+      }
+    }
+
+    return clearedPayload;
+  }
+
+  private static async processApiResponse(
+    response: unknown,
+    nonCustomGames: Game[]
+  ): Promise<{ gameId: string; count: number }[]> {
+    if (!response || !Array.isArray(response)) {
+      return [];
+    }
+
+    const gamesWithNewOptions: { gameId: string; count: number }[] = [];
+
+    for (const gameUpdate of response as DownloadSourcesChangeResponse[]) {
+      if (gameUpdate.newDownloadOptionsCount > 0) {
+        const game = nonCustomGames.find(
+          (g) =>
+            g.shop === gameUpdate.shop && g.objectId === gameUpdate.objectId
+        );
+
+        if (game) {
+          await gamesSublevel.put(`${game.shop}:${game.objectId}`, {
+            ...game,
+            newDownloadOptionsCount: gameUpdate.newDownloadOptionsCount,
+          });
+
+          gamesWithNewOptions.push({
+            gameId: `${game.shop}:${game.objectId}`,
+            count: gameUpdate.newDownloadOptionsCount,
+          });
+        }
+      }
+    }
+
+    return gamesWithNewOptions;
+  }
+
+  private static sendNewDownloadOptionsEvent(
+    clearedPayload: { gameId: string; count: number }[],
+    gamesWithNewOptions: { gameId: string; count: number }[]
+  ): void {
+    const eventPayload = [...clearedPayload, ...gamesWithNewOptions];
+    if (eventPayload.length > 0 && WindowManager.mainWindow) {
+      WindowManager.mainWindow.webContents.send(
+        "on-new-download-options",
+        eventPayload
+      );
+    }
+
+    logger.info(
+      `Found new download options for ${gamesWithNewOptions.length} games`
+    );
+  }
+
+  static async checkForChanges(): Promise<void> {
+    logger.info("DownloadSourcesChecker.checkForChanges() called");
+
+    try {
+      // Get all installed games (excluding custom games)
+      const installedGames = await gamesSublevel.values().all();
+      const nonCustomGames = installedGames.filter(
+        (game: Game) => game.shop !== "custom"
+      );
+      logger.info(
+        `Found ${installedGames.length} total games, ${nonCustomGames.length} non-custom games`
+      );
+
+      if (nonCustomGames.length === 0) {
+        logger.info(
+          "No non-custom games found, skipping download sources check"
+        );
+        return;
+      }
+
+      const downloadSources = await downloadSourcesSublevel.values().all();
+      const downloadSourceIds = downloadSources.map((source) => source.id);
+      logger.info(
+        `Found ${downloadSourceIds.length} download sources: ${downloadSourceIds.join(", ")}`
+      );
+
+      if (downloadSourceIds.length === 0) {
+        logger.info(
+          "No download sources found, skipping download sources check"
+        );
+        return;
+      }
+
+      const previousBaseline = await getDownloadSourcesCheckBaseline();
+      const since =
+        previousBaseline ||
+        new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
+
+      logger.info(`Using since: ${since} (from last app start)`);
+
+      const clearedPayload = await this.clearStaleBadges(nonCustomGames);
+
+      const games = nonCustomGames.map((game: Game) => ({
+        shop: game.shop,
+        objectId: game.objectId,
+      }));
+
+      logger.info(
+        `Checking download sources changes for ${games.length} non-custom games since ${since}`
+      );
+      logger.info(
+        `Making API call to HydraApi.checkDownloadSourcesChanges with:`,
+        {
+          downloadSourceIds,
+          gamesCount: games.length,
+          since,
+        }
+      );
+
+      const response = await HydraApi.checkDownloadSourcesChanges(
+        downloadSourceIds,
+        games,
+        since
+      );
+
+      logger.info("API call completed, response:", response);
+
+      await updateDownloadSourcesSinceValue(since);
+      logger.info(`Saved 'since' value: ${since} (for modal comparison)`);
+
+      const now = new Date().toISOString();
+      await updateDownloadSourcesCheckBaseline(now);
+      logger.info(
+        `Updated baseline to: ${now} (will be 'since' on next app start)`
+      );
+
+      const gamesWithNewOptions = await this.processApiResponse(
+        response,
+        nonCustomGames
+      );
+
+      this.sendNewDownloadOptionsEvent(clearedPayload, gamesWithNewOptions);
+
+      logger.info("Download sources check completed successfully");
+    } catch (error) {
+      logger.error("Failed to check download sources changes:", error);
+    }
+  }
+}

src/main/services/hydra-api.ts

@@ -400,4 +400,45 @@ export class HydraApi {
       .then((response) => response.data)
       .catch(this.handleUnauthorizedError);
   }
+
+  static async checkDownloadSourcesChanges(
+    downloadSourceIds: string[],
+    games: Array<{ shop: string; objectId: string }>,
+    since: string
+  ) {
+    logger.info("HydraApi.checkDownloadSourcesChanges called with:", {
+      downloadSourceIds,
+      gamesCount: games.length,
+      since,
+      isLoggedIn: this.isLoggedIn(),
+    });
+
+    try {
+      const result = await this.post<
+        Array<{
+          shop: string;
+          objectId: string;
+          newDownloadOptionsCount: number;
+          downloadSourceIds: string[];
+        }>
+      >(
+        "/download-sources/changes",
+        {
+          downloadSourceIds,
+          games,
+          since,
+        },
+        { needsAuth: true }
+      );
+
+      logger.info(
+        "HydraApi.checkDownloadSourcesChanges completed successfully:",
+        result
+      );
+      return result;
+    } catch (error) {
+      logger.error("HydraApi.checkDownloadSourcesChanges failed:", error);
+      throw error;
+    }
+  }
 }

src/main/services/index.ts

@@ -19,3 +19,4 @@ export * from "./wine";
 export * from "./lock";
 export * from "./decky-plugin";
 export * from "./user";
+export * from "./download-sources-checker";

src/main/services/library-sync/merge-with-remote-games.ts

@@ -9,6 +9,8 @@ type ProfileGame = {
   hasManuallyUpdatedPlaytime: boolean;
   isFavorite?: boolean;
   isPinned?: boolean;
+  achievementCount: number;
+  unlockedAchievementCount: number;
 } & ShopAssets;
 
 export const mergeWithRemoteGames = async () => {
@@ -39,6 +41,8 @@ export const mergeWithRemoteGames = async () => {
             playTimeInMilliseconds: updatedPlayTime,
             favorite: game.isFavorite ?? localGame.favorite,
             isPinned: game.isPinned ?? localGame.isPinned,
+            achievementCount: game.achievementCount,
+            unlockedAchievementCount: game.unlockedAchievementCount,
           });
         } else {
           await gamesSublevel.put(gameKey, {
@@ -55,18 +59,27 @@ export const mergeWithRemoteGames = async () => {
             isDeleted: false,
             favorite: game.isFavorite ?? false,
             isPinned: game.isPinned ?? false,
+            achievementCount: game.achievementCount,
+            unlockedAchievementCount: game.unlockedAchievementCount,
           });
         }
 
         const localGameShopAsset = await gamesShopAssetsSublevel.get(gameKey);
 
+        // Construct coverImageUrl if not provided by backend (Steam games use predictable pattern)
+        const coverImageUrl =
+          game.coverImageUrl ||
+          (game.shop === "steam"
+            ? `https://shared.steamstatic.com/store_item_assets/steam/apps/${game.objectId}/library_600x900_2x.jpg`
+            : null);
+
         await gamesShopAssetsSublevel.put(gameKey, {
           updatedAt: Date.now(),
           ...localGameShopAsset,
           shop: game.shop,
           objectId: game.objectId,
           title: localGame?.title || game.title, // Preserve local title if it exists
-          coverImageUrl: game.coverImageUrl,
+          coverImageUrl,
           libraryHeroImageUrl: game.libraryHeroImageUrl,
           libraryImageUrl: game.libraryImageUrl,
           logoImageUrl: game.logoImageUrl,

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);
   }
 };

src/main/services/steam-250.ts

@@ -16,7 +16,7 @@ export const requestSteam250 = async (path: string) => {
           if (!steamGameUrl) return null;
 
           return {
-            title: $title.textContent,
+            title: $title.getAttribute("data-title") || "",
             objectId: steamGameUrl.split("/").pop(),
           } as Steam250Game;
         })

src/preload/index.ts

@@ -103,6 +103,10 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("removeDownloadSource", url, removeAll),
   getDownloadSources: () => ipcRenderer.invoke("getDownloadSources"),
   syncDownloadSources: () => ipcRenderer.invoke("syncDownloadSources"),
+  getDownloadSourcesCheckBaseline: () =>
+    ipcRenderer.invoke("getDownloadSourcesCheckBaseline"),
+  getDownloadSourcesSinceValue: () =>
+    ipcRenderer.invoke("getDownloadSourcesSinceValue"),
 
   /* Library */
   toggleAutomaticCloudSync: (
@@ -179,6 +183,8 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("addGameToFavorites", shop, objectId),
   removeGameFromFavorites: (shop: GameShop, objectId: string) =>
     ipcRenderer.invoke("removeGameFromFavorites", shop, objectId),
+  clearNewDownloadOptions: (shop: GameShop, objectId: string) =>
+    ipcRenderer.invoke("clearNewDownloadOptions", shop, objectId),
   toggleGamePin: (shop: GameShop, objectId: string, pinned: boolean) =>
     ipcRenderer.invoke("toggleGamePin", shop, objectId, pinned),
   updateLaunchOptions: (
@@ -196,6 +202,7 @@ contextBridge.exposeInMainWorld("electron", {
   verifyExecutablePathInUse: (executablePath: string) =>
     ipcRenderer.invoke("verifyExecutablePathInUse", executablePath),
   getLibrary: () => ipcRenderer.invoke("getLibrary"),
+  refreshLibraryAssets: () => ipcRenderer.invoke("refreshLibraryAssets"),
   openGameInstaller: (shop: GameShop, objectId: string) =>
     ipcRenderer.invoke("openGameInstaller", shop, objectId),
   openGameInstallerPath: (shop: GameShop, objectId: string) =>
@@ -570,6 +577,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) =>
@@ -580,6 +606,17 @@ contextBridge.exposeInMainWorld("electron", {
     return () =>
       ipcRenderer.removeListener("on-custom-theme-updated", listener);
   },
+  onNewDownloadOptions: (
+    cb: (gamesWithNewOptions: { gameId: string; count: number }[]) => void
+  ) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      gamesWithNewOptions: { gameId: string; count: number }[]
+    ) => cb(gamesWithNewOptions);
+    ipcRenderer.on("on-new-download-options", listener);
+    return () =>
+      ipcRenderer.removeListener("on-new-download-options", listener);
+  },
   closeEditorWindow: (themeId?: string) =>
     ipcRenderer.invoke("closeEditorWindow", themeId),
 });

src/renderer/src/app.scss

@@ -90,6 +90,7 @@ img {
 
 progress[value] {
   -webkit-appearance: none;
+  appearance: none;
 }
 
 .container {

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 {
@@ -10,6 +9,7 @@ import {
   useToast,
   useUserDetails,
 } from "@renderer/hooks";
+import { useDownloadOptionsListener } from "@renderer/hooks/use-download-options-listener";
 
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
@@ -25,7 +25,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 {
@@ -36,6 +41,9 @@ export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary, library } = useLibrary();
 
+  // Listen for new download options updates
+  useDownloadOptionsListener();
+
   const { t } = useTranslation("app");
 
   const { clearDownload, setLastPacket } = useDownload();
@@ -216,9 +224,11 @@ export function App() {
     return () => unsubscribe();
   }, [loadAndApplyTheme]);
 
-  const playAudio = useCallback(() => {
+  const playAudio = useCallback(async () => {
-    const audio = new Audio(achievementSound);
+    const soundUrl = await getAchievementSoundUrl();
-    audio.volume = 0.2;
+    const volume = await getAchievementSoundVolume();
+    const audio = new Audio(soundUrl);
+    audio.volume = volume;
     audio.play();
   }, []);
 

src/renderer/src/components/game-card/game-card.tsx

@@ -47,7 +47,7 @@ export function GameCard({ game, ...props }: GameCardProps) {
     >
       <div className="game-card__backdrop">
         <img
-          src={game.libraryImageUrl}
+          src={game.libraryImageUrl ?? undefined}
           alt={game.title}
           className="game-card__cover"
           loading="lazy"

src/renderer/src/components/game-context-menu/game-context-menu.tsx

@@ -70,8 +70,10 @@ export function GameContextMenu({
       onClick: () => {
         if (isGameRunning) {
           void handleCloseGame();
-        } else {
+        } else if (canPlay) {
           void handlePlayGame();
+        } else {
+          handleOpenDownloadOptions();
         }
       },
       disabled: isDeleting,

src/renderer/src/components/header/header.tsx

@@ -7,12 +7,13 @@ 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> = {
   "/": "home",
   "/catalogue": "catalogue",
+  "/library": "library",
   "/downloads": "downloads",
   "/settings": "settings",
 };
@@ -27,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);
@@ -41,6 +52,8 @@ export function Header() {
     if (location.pathname.startsWith("/game")) return headerTitle;
     if (location.pathname.startsWith("/achievements")) return headerTitle;
     if (location.pathname.startsWith("/profile")) return headerTitle;
+    if (location.pathname.startsWith("/library"))
+      return headerTitle || t("library");
     if (location.pathname.startsWith("/search")) return t("search_results");
 
     return t(pathTitle[location.pathname]);
@@ -60,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")) {
+  const handleClearSearch = () => {
-      navigate("/catalogue");
+    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 (
     <>
@@ -120,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)}
@@ -131,7 +155,7 @@ export function Header() {
             {searchValue && (
               <button
                 type="button"
-                onClick={() => dispatch(setFilters({ title: "" }))}
+                onClick={handleClearSearch}
                 className="header__action-button"
               >
                 <XIcon />

src/renderer/src/components/hero/hero.tsx

@@ -50,14 +50,14 @@ export function Hero() {
       >
         <div className="hero__backdrop">
           <img
-            src={game.libraryHeroImageUrl}
+            src={game.libraryHeroImageUrl ?? undefined}
             alt={game.description ?? ""}
             className="hero__media"
           />
 
           <div className="hero__content">
             <img
-              src={game.logoImageUrl}
+              src={game.logoImageUrl ?? undefined}
               width="250px"
               alt={game.description ?? ""}
               loading="eager"

src/renderer/src/components/image-cropper/image-cropper.scss

@@ -1,107 +0,0 @@
-@use "../../scss/globals.scss";
-
-.image-cropper {
-  display: flex;
-  flex-direction: column;
-  gap: calc(globals.$spacing-unit * 2);
-  min-height: 500px;
-  max-height: 600px;
-
-  &__container {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    background-color: transparent;
-    border-radius: 4px;
-    position: relative;
-    min-height: 400px;
-  }
-
-  &__image-wrapper {
-    position: relative;
-    display: inline-block;
-  }
-
-  &__image {
-    display: block;
-    user-select: none;
-    pointer-events: none;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-  }
-
-  &__crop-overlay {
-    position: absolute;
-    border: 2px solid globals.$brand-teal;
-    cursor: move;
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
-    background-color: transparent;
-
-    &--circular {
-      border-radius: 50%;
-    }
-  }
-
-  &__crop-handle {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    background-color: globals.$brand-teal;
-    border: 2px solid globals.$background-color;
-    border-radius: 2px;
-    cursor: nwse-resize;
-
-    &--nw {
-      top: -6px;
-      left: -6px;
-      cursor: nwse-resize;
-    }
-
-    &--ne {
-      top: -6px;
-      right: -6px;
-      cursor: nesw-resize;
-    }
-
-    &--sw {
-      bottom: -6px;
-      left: -6px;
-      cursor: nesw-resize;
-    }
-
-    &--se {
-      bottom: -6px;
-      right: -6px;
-      cursor: nwse-resize;
-    }
-  }
-
-  &__controls {
-    display: flex;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 2);
-  }
-
-  &__zoom-controls {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(globals.$spacing-unit * 2);
-  }
-
-  &__zoom-value {
-    min-width: 60px;
-    text-align: center;
-    color: globals.$body-color;
-  }
-
-  &__actions {
-    display: flex;
-    gap: calc(globals.$spacing-unit * 2);
-    justify-content: flex-end;
-  }
-}

src/renderer/src/components/image-cropper/image-cropper.tsx

@@ -1,730 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Button } from "../button/button";
-import { useTranslation } from "react-i18next";
-import { logger } from "@renderer/logger";
-import "./image-cropper.scss";
-
-export interface CropArea {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface ImageCropperProps {
-  imagePath: string;
-  onCrop: (cropArea: CropArea) => Promise<void>;
-  onCancel: () => void;
-  aspectRatio?: number;
-  circular?: boolean;
-  minCropSize?: number;
-}
-
-export function ImageCropper({
-  imagePath,
-  onCrop,
-  onCancel,
-  aspectRatio,
-  circular = false,
-  minCropSize = 50,
-}: Readonly<ImageCropperProps>) {
-  const { t } = useTranslation("user_profile");
-  const containerRef = useRef<HTMLDivElement>(null);
-  const imageRef = useRef<HTMLImageElement>(null);
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
-  const zoom = 0.5;
-  const [cropArea, setCropArea] = useState<CropArea>({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  });
-  const [isDragging, setIsDragging] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
-  const [resizeHandle, setResizeHandle] = useState<string | null>(null);
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-  const [cropStart, setCropStart] = useState<CropArea | null>(null);
-  const [isCropping, setIsCropping] = useState(false);
-
-  const getImageSrc = () => {
-    return imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
-  };
-
-  const calculateContainerBounds = useCallback(() => {
-    const container = containerRef.current;
-    if (!container) return null;
-
-    const containerRect = container.getBoundingClientRect();
-    if (containerRect.width === 0 || containerRect.height === 0) return null;
-
-    const computedStyle = globalThis.getComputedStyle(container);
-    const paddingLeft = Number.parseFloat(computedStyle.paddingLeft) || 0;
-    const paddingRight = Number.parseFloat(computedStyle.paddingRight) || 0;
-    const paddingTop = Number.parseFloat(computedStyle.paddingTop) || 0;
-    const paddingBottom = Number.parseFloat(computedStyle.paddingBottom) || 0;
-
-    return {
-      maxWidth: containerRect.width - paddingLeft - paddingRight,
-      maxHeight: containerRect.height - paddingTop - paddingBottom,
-    };
-  }, []);
-
-  const calculateDisplayDimensions = useCallback(
-    (bounds: { maxWidth: number; maxHeight: number } | null) => {
-      if (!imageLoaded) return { width: 0, height: 0 };
-
-      if (!bounds) {
-        return {
-          width: imageSize.width * zoom,
-          height: imageSize.height * zoom,
-        };
-      }
-
-      const imageAspect = imageSize.width / imageSize.height;
-      let displayWidth = imageSize.width * zoom;
-      let displayHeight = imageSize.height * zoom;
-
-      if (displayWidth > bounds.maxWidth) {
-        displayWidth = bounds.maxWidth;
-        displayHeight = displayWidth / imageAspect;
-      }
-      if (displayHeight > bounds.maxHeight) {
-        displayHeight = bounds.maxHeight;
-        displayWidth = displayHeight * imageAspect;
-      }
-
-      return { width: displayWidth, height: displayHeight };
-    },
-    [imageLoaded, imageSize]
-  );
-
-  const calculateInitialCropArea = useCallback(() => {
-    const bounds = calculateContainerBounds();
-    if (!bounds || bounds.maxWidth <= 0 || bounds.maxHeight <= 0) return;
-
-    const { width: displayWidth, height: displayHeight } =
-      calculateDisplayDimensions(bounds);
-
-    const effectiveAspectRatio = circular ? 1 : aspectRatio;
-    let cropWidth: number;
-    let cropHeight: number;
-
-    if (effectiveAspectRatio) {
-      const displayAspect = displayWidth / displayHeight;
-      if (displayAspect > effectiveAspectRatio) {
-        cropHeight = displayHeight * 0.8;
-        cropWidth = cropHeight * effectiveAspectRatio;
-      } else {
-        cropWidth = displayWidth * 0.8;
-        cropHeight = cropWidth / effectiveAspectRatio;
-      }
-    } else {
-      const cropSize = Math.min(displayWidth, displayHeight) * 0.8;
-      cropWidth = cropSize;
-      cropHeight = cropSize;
-    }
-
-    setCropArea({
-      x: (displayWidth - cropWidth) / 2,
-      y: (displayHeight - cropHeight) / 2,
-      width: cropWidth,
-      height: cropHeight,
-    });
-  }, [
-    calculateContainerBounds,
-    calculateDisplayDimensions,
-    aspectRatio,
-    circular,
-  ]);
-
-  const getDisplaySize = useCallback(() => {
-    const bounds = calculateContainerBounds();
-    return calculateDisplayDimensions(bounds);
-  }, [calculateContainerBounds, calculateDisplayDimensions]);
-
-  useEffect(() => {
-    const img = new Image();
-    const handleImageLoad = () => {
-      setImageSize({ width: img.width, height: img.height });
-      setImageLoaded(true);
-    };
-    const handleImageError = (error: Event | string) => {
-      logger.error("Failed to load image:", { src: getImageSrc(), error });
-    };
-    img.onload = handleImageLoad;
-    img.onerror = handleImageError;
-    img.src = getImageSrc();
-  }, [imagePath]);
-
-  useEffect(() => {
-    if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) return;
-
-    const performDoubleAnimationFrame = () => {
-      calculateInitialCropArea();
-    };
-
-    const handleAnimationFrame = () => {
-      requestAnimationFrame(performDoubleAnimationFrame);
-    };
-
-    const calculateWithDelay = () => {
-      const container = containerRef.current;
-      if (!container) return;
-
-      const containerRect = container.getBoundingClientRect();
-      if (containerRect.width === 0 || containerRect.height === 0) return;
-
-      requestAnimationFrame(handleAnimationFrame);
-    };
-
-    const handleResize = () => {
-      calculateWithDelay();
-    };
-
-    const timeoutId = setTimeout(calculateWithDelay, 200);
-
-    const resizeObserver = new ResizeObserver(handleResize);
-
-    const container = containerRef.current;
-    if (container) {
-      resizeObserver.observe(container);
-    }
-
-    return () => {
-      clearTimeout(timeoutId);
-      resizeObserver.disconnect();
-    };
-  }, [imageLoaded, imageSize, calculateInitialCropArea]);
-
-  const getRealCropArea = (): CropArea => {
-    if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) {
-      return cropArea;
-    }
-
-    const displaySize = getDisplaySize();
-    if (displaySize.width === 0 || displaySize.height === 0) {
-      return cropArea;
-    }
-
-    const scaleX = imageSize.width / displaySize.width;
-    const scaleY = imageSize.height / displaySize.height;
-
-    return {
-      x: cropArea.x * scaleX,
-      y: cropArea.y * scaleY,
-      width: cropArea.width * scaleX,
-      height: cropArea.height * scaleY,
-    };
-  };
-
-  const enforceAspectRatio = (
-    width: number,
-    height: number,
-    ratio: number
-  ): { width: number; height: number } => {
-    const currentRatio = width / height;
-    if (currentRatio > ratio) {
-      return { width, height: width / ratio };
-    }
-    return { width: height * ratio, height };
-  };
-
-  const calculateMinSize = useCallback(
-    (effectiveAspectRatio: number | undefined) => {
-      if (!effectiveAspectRatio) return minCropSize;
-      return effectiveAspectRatio > 1
-        ? minCropSize * effectiveAspectRatio
-        : minCropSize / effectiveAspectRatio;
-    },
-    [minCropSize]
-  );
-
-  const getImageWrapperBounds = useCallback(() => {
-    const imageWrapper = imageRef.current?.parentElement;
-    if (!imageWrapper) return { width: 0, height: 0 };
-
-    const rect = imageWrapper.getBoundingClientRect();
-    return { width: rect.width, height: rect.height };
-  }, []);
-
-  const constrainCropArea = useCallback(
-    (area: CropArea): CropArea => {
-      const displaySize = getDisplaySize();
-      const wrapperBounds = getImageWrapperBounds();
-      const actualBounds = {
-        width:
-          wrapperBounds.width > 0 ? wrapperBounds.width : displaySize.width,
-        height:
-          wrapperBounds.height > 0 ? wrapperBounds.height : displaySize.height,
-      };
-
-      let { x, y, width, height } = area;
-      const effectiveAspectRatio = circular ? 1 : aspectRatio;
-      const minSize = calculateMinSize(effectiveAspectRatio);
-
-      if (effectiveAspectRatio) {
-        ({ width, height } = enforceAspectRatio(
-          width,
-          height,
-          effectiveAspectRatio
-        ));
-
-        const maxWidth = Math.min(
-          actualBounds.width,
-          actualBounds.height * effectiveAspectRatio
-        );
-        const maxHeight = Math.min(
-          actualBounds.height,
-          actualBounds.width / effectiveAspectRatio
-        );
-
-        width = Math.max(minSize, Math.min(width, maxWidth));
-        height = Math.max(minSize, Math.min(height, maxHeight));
-
-        ({ width, height } = enforceAspectRatio(
-          width,
-          height,
-          effectiveAspectRatio
-        ));
-
-        width = Math.min(width, actualBounds.width);
-        height = Math.min(height, actualBounds.height);
-        ({ width, height } = enforceAspectRatio(
-          width,
-          height,
-          effectiveAspectRatio
-        ));
-      } else {
-        width = Math.max(minSize, Math.min(width, actualBounds.width));
-        height = Math.max(minSize, Math.min(height, actualBounds.height));
-      }
-
-      x = Math.max(0, Math.min(x, actualBounds.width - width));
-      y = Math.max(0, Math.min(y, actualBounds.height - height));
-
-      return { x, y, width, height };
-    },
-    [
-      getDisplaySize,
-      getImageWrapperBounds,
-      circular,
-      aspectRatio,
-      calculateMinSize,
-    ]
-  );
-
-  const getRelativeCoordinates = (
-    e: MouseEvent | React.MouseEvent
-  ): { x: number; y: number } | null => {
-    const imageWrapper = imageRef.current?.parentElement;
-    if (!imageWrapper) return null;
-
-    const rect = imageWrapper.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-
-    return { x, y };
-  };
-
-  const handleDrag = useCallback(
-    (coords: { x: number; y: number }) => {
-      const newX = coords.x - dragStart.x;
-      const newY = coords.y - dragStart.y;
-      setCropArea((prev) => constrainCropArea({ ...prev, x: newX, y: newY }));
-    },
-    [dragStart, constrainCropArea]
-  );
-
-  const calculateResizeDeltas = (
-    resizeHandle: string,
-    coords: { x: number; y: number },
-    cropStart: CropArea
-  ) => {
-    const handleMap: Record<
-      string,
-      (
-        coords: { x: number; y: number },
-        cropStart: CropArea
-      ) => {
-        deltaX: number;
-        deltaY: number;
-        newX: number;
-        newY: number;
-      }
-    > = {
-      "resize-se": (c, cs) => ({
-        deltaX: c.x - (cs.x + cs.width),
-        deltaY: c.y - (cs.y + cs.height),
-        newX: cs.x,
-        newY: cs.y,
-      }),
-      "resize-sw": (c, cs) => ({
-        deltaX: cs.x - c.x,
-        deltaY: c.y - (cs.y + cs.height),
-        newX: c.x,
-        newY: cs.y,
-      }),
-      "resize-ne": (c, cs) => ({
-        deltaX: c.x - (cs.x + cs.width),
-        deltaY: cs.y - c.y,
-        newX: cs.x,
-        newY: c.y,
-      }),
-      "resize-nw": (c, cs) => ({
-        deltaX: cs.x - c.x,
-        deltaY: cs.y - c.y,
-        newX: c.x,
-        newY: c.y,
-      }),
-    };
-
-    const handler = handleMap[resizeHandle];
-    if (handler) {
-      return handler(coords, cropStart);
-    }
-
-    return {
-      deltaX: 0,
-      deltaY: 0,
-      newX: cropStart.x,
-      newY: cropStart.y,
-    };
-  };
-
-  const adjustPositionForHandle = (
-    resizeHandle: string,
-    cropStart: CropArea,
-    adjustedWidth: number,
-    adjustedHeight: number
-  ) => {
-    let adjustedX = cropStart.x;
-    let adjustedY = cropStart.y;
-
-    if (resizeHandle === "resize-nw" || resizeHandle === "resize-sw") {
-      adjustedX = cropStart.x + cropStart.width - adjustedWidth;
-    }
-    if (resizeHandle === "resize-nw" || resizeHandle === "resize-ne") {
-      adjustedY = cropStart.y + cropStart.height - adjustedHeight;
-    }
-
-    return { x: adjustedX, y: adjustedY };
-  };
-
-  const applyCircularConstraint = (
-    newWidth: number,
-    newHeight: number,
-    cropStart: CropArea,
-    resizeHandle: string
-  ) => {
-    const size = Math.min(newWidth, newHeight);
-    const deltaSize = size - Math.min(cropStart.width, cropStart.height);
-    const adjustedWidth = cropStart.width + deltaSize;
-    const adjustedHeight = cropStart.height + deltaSize;
-
-    const { x, y } = adjustPositionForHandle(
-      resizeHandle,
-      cropStart,
-      adjustedWidth,
-      adjustedHeight
-    );
-
-    return { width: adjustedWidth, height: adjustedHeight, x, y };
-  };
-
-  const applyAspectRatioConstraint = (
-    newWidth: number,
-    newHeight: number,
-    cropStart: CropArea,
-    resizeHandle: string,
-    aspectRatio: number
-  ) => {
-    const deltaX = Math.abs(newWidth - cropStart.width);
-    const deltaY = Math.abs(newHeight - cropStart.height);
-
-    let adjustedWidth: number;
-    let adjustedHeight: number;
-
-    if (deltaX > deltaY) {
-      adjustedWidth = newWidth;
-      adjustedHeight = newWidth / aspectRatio;
-    } else {
-      adjustedHeight = newHeight;
-      adjustedWidth = newHeight * aspectRatio;
-    }
-
-    const wrapperBounds = getImageWrapperBounds();
-    const displaySize = getDisplaySize();
-    const actualBounds = {
-      width: wrapperBounds.width > 0 ? wrapperBounds.width : displaySize.width,
-      height:
-        wrapperBounds.height > 0 ? wrapperBounds.height : displaySize.height,
-    };
-
-    const maxWidth = Math.min(
-      actualBounds.width,
-      actualBounds.height * aspectRatio
-    );
-    const maxHeight = Math.min(
-      actualBounds.height,
-      actualBounds.width / aspectRatio
-    );
-
-    adjustedWidth = Math.min(adjustedWidth, maxWidth);
-    adjustedHeight = Math.min(adjustedHeight, maxHeight);
-
-    const finalRatio = adjustedWidth / adjustedHeight;
-    if (Math.abs(finalRatio - aspectRatio) > 0.001) {
-      if (finalRatio > aspectRatio) {
-        adjustedHeight = adjustedWidth / aspectRatio;
-      } else {
-        adjustedWidth = adjustedHeight * aspectRatio;
-      }
-    }
-
-    const { x, y } = adjustPositionForHandle(
-      resizeHandle,
-      cropStart,
-      adjustedWidth,
-      adjustedHeight
-    );
-
-    return { width: adjustedWidth, height: adjustedHeight, x, y };
-  };
-
-  const handleResize = useCallback(
-    (coords: { x: number; y: number }) => {
-      if (!cropStart || !resizeHandle) return;
-
-      const { deltaX, deltaY, newX, newY } = calculateResizeDeltas(
-        resizeHandle,
-        coords,
-        cropStart
-      );
-
-      let adjustedWidth = cropStart.width + deltaX;
-      let adjustedHeight = cropStart.height + deltaY;
-      let adjustedX = newX;
-      let adjustedY = newY;
-
-      if (circular) {
-        const constrained = applyCircularConstraint(
-          adjustedWidth,
-          adjustedHeight,
-          cropStart,
-          resizeHandle
-        );
-        adjustedWidth = constrained.width;
-        adjustedHeight = constrained.height;
-        adjustedX = constrained.x;
-        adjustedY = constrained.y;
-      } else if (aspectRatio) {
-        const constrained = applyAspectRatioConstraint(
-          adjustedWidth,
-          adjustedHeight,
-          cropStart,
-          resizeHandle,
-          aspectRatio
-        );
-        adjustedWidth = constrained.width;
-        adjustedHeight = constrained.height;
-        adjustedX = constrained.x;
-        adjustedY = constrained.y;
-      }
-
-      const newCropArea = constrainCropArea({
-        x: adjustedX,
-        y: adjustedY,
-        width: adjustedWidth,
-        height: adjustedHeight,
-      });
-      setCropArea(newCropArea);
-    },
-    [cropStart, resizeHandle, circular, aspectRatio, constrainCropArea]
-  );
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (!imageLoaded) return;
-      e.preventDefault();
-      e.stopPropagation();
-
-      const coords = getRelativeCoordinates(e);
-      if (!coords) return;
-
-      const handle = (e.target as HTMLElement)?.dataset?.handle;
-      if (handle?.startsWith("resize-")) {
-        setIsResizing(true);
-        setResizeHandle(handle);
-        setCropStart(cropArea);
-      } else if (
-        coords.x >= cropArea.x &&
-        coords.x <= cropArea.x + cropArea.width &&
-        coords.y >= cropArea.y &&
-        coords.y <= cropArea.y + cropArea.height
-      ) {
-        setIsDragging(true);
-        setDragStart({ x: coords.x - cropArea.x, y: coords.y - cropArea.y });
-      }
-    },
-    [imageLoaded, cropArea]
-  );
-
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      if (!imageLoaded) return;
-
-      const coords = getRelativeCoordinates(e);
-      if (!coords) return;
-
-      if (isDragging && cropStart === null) {
-        handleDrag(coords);
-      } else if (isResizing && cropStart && resizeHandle) {
-        handleResize(coords);
-      }
-    },
-    [
-      imageLoaded,
-      isDragging,
-      isResizing,
-      cropStart,
-      resizeHandle,
-      handleDrag,
-      handleResize,
-    ]
-  );
-
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-    setResizeHandle(null);
-    setCropStart(null);
-  }, []);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-    }
-  }, []);
-
-  const handleOverlayKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      const step = e.shiftKey ? 10 : 1;
-      const keyMap: Record<
-        string,
-        (area: CropArea) => { x: number; y: number }
-      > = {
-        ArrowLeft: (area) => ({ x: area.x - step, y: area.y }),
-        ArrowRight: (area) => ({ x: area.x + step, y: area.y }),
-        ArrowUp: (area) => ({ x: area.x, y: area.y - step }),
-        ArrowDown: (area) => ({ x: area.x, y: area.y + step }),
-      };
-
-      const handler = keyMap[e.key];
-      if (!handler) return;
-
-      e.preventDefault();
-      const { x: newX, y: newY } = handler(cropArea);
-      setCropArea((prev) => constrainCropArea({ ...prev, x: newX, y: newY }));
-    },
-    [cropArea, constrainCropArea]
-  );
-
-  useEffect(() => {
-    if (!isDragging && !isResizing) return;
-
-    const cleanup = () => {
-      globalThis.removeEventListener("mousemove", handleMouseMove);
-      globalThis.removeEventListener("mouseup", handleMouseUp);
-    };
-
-    globalThis.addEventListener("mousemove", handleMouseMove);
-    globalThis.addEventListener("mouseup", handleMouseUp);
-    return cleanup;
-  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
-
-  const handleCrop = async () => {
-    setIsCropping(true);
-    try {
-      const realCropArea = getRealCropArea();
-      await onCrop(realCropArea);
-    } finally {
-      setIsCropping(false);
-    }
-  };
-
-  const displaySize = getDisplaySize();
-
-  return (
-    <div className="image-cropper">
-      <div className="image-cropper__container" ref={containerRef}>
-        <div
-          className="image-cropper__image-wrapper"
-          style={{
-            width: `${displaySize.width}px`,
-            height: `${displaySize.height}px`,
-            maxWidth: "100%",
-            maxHeight: "100%",
-          }}
-        >
-          {imageLoaded && (
-            <img
-              ref={imageRef}
-              src={getImageSrc()}
-              alt="Crop"
-              className="image-cropper__image"
-              style={{
-                width: `${displaySize.width}px`,
-                height: `${displaySize.height}px`,
-                maxWidth: "100%",
-                maxHeight: "100%",
-              }}
-            />
-          )}
-          {imageLoaded && cropArea.width > 0 && cropArea.height > 0 && (
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-            <section
-              className={`image-cropper__crop-overlay ${circular ? "image-cropper__crop-overlay--circular" : ""}`}
-              style={{
-                left: `${cropArea.x}px`,
-                top: `${cropArea.y}px`,
-                width: `${cropArea.width}px`,
-                height: `${cropArea.height}px`,
-              }}
-              aria-label={t("crop_area")}
-              onMouseDown={handleMouseDown}
-              onKeyDown={handleOverlayKeyDown}
-            >
-              {(["nw", "ne", "sw", "se"] as const).map((position) => (
-                <button
-                  key={position}
-                  type="button"
-                  className={`image-cropper__crop-handle image-cropper__crop-handle--${position}`}
-                  data-handle={`resize-${position}`}
-                  aria-label={t(`resize_handle_${position}`)}
-                  onMouseDown={handleMouseDown}
-                  onKeyDown={handleKeyDown}
-                />
-              ))}
-            </section>
-          )}
-        </div>
-      </div>
-
-      <div className="image-cropper__controls">
-        <div className="image-cropper__actions">
-          <Button theme="outline" onClick={onCancel} disabled={isCropping}>
-            {t("cancel")}
-          </Button>
-          <Button
-            theme="primary"
-            onClick={handleCrop}
-            disabled={isCropping || !imageLoaded}
-          >
-            {isCropping ? t("cropping") : t("crop")}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/renderer/src/components/index.ts

@@ -19,4 +19,3 @@ export * from "./context-menu/context-menu";
 export * from "./game-context-menu/game-context-menu";
 export * from "./game-context-menu/use-game-actions";
 export * from "./star-rating/star-rating";
-export * from "./image-cropper/image-cropper";

src/renderer/src/components/sidebar/routes.tsx

@@ -3,6 +3,7 @@ import {
   DownloadIcon,
   GearIcon,
   HomeIcon,
+  BookIcon,
 } from "@primer/octicons-react";
 
 export const routes = [
@@ -16,6 +17,11 @@ export const routes = [
     nameKey: "catalogue",
     render: () => <AppsIcon />,
   },
+  {
+    path: "/library",
+    nameKey: "library",
+    render: () => <BookIcon />,
+  },
   {
     path: "/downloads",
     nameKey: "downloads",

src/renderer/src/components/sidebar/sidebar-game-item.tsx

@@ -80,6 +80,12 @@ export function SidebarGameItem({
           <span className="sidebar__menu-item-button-label">
             {getGameTitle(game)}
           </span>
+
+          {(game.newDownloadOptionsCount ?? 0) > 0 && (
+            <span className="sidebar__game-badge">
+              +{game.newDownloadOptionsCount}
+            </span>
+          )}
         </button>
       </li>
 

src/renderer/src/components/sidebar/sidebar.scss

@@ -115,6 +115,19 @@
     background-size: cover;
   }
 
+  &__game-badge {
+    background-color: rgba(34, 197, 94, 0.15);
+    color: rgb(187, 247, 208);
+    font-size: 10px;
+    font-weight: 600;
+    padding: 4px 6px;
+    border-radius: 6px;
+    display: flex;
+    margin-left: auto;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(34, 197, 94, 0.5);
+  }
+
   &__section-header {
     display: flex;
     justify-content: space-between;

src/renderer/src/declaration.d.ts

@@ -142,6 +142,10 @@ declare global {
       shop: GameShop,
       objectId: string
     ) => Promise<void>;
+    clearNewDownloadOptions: (
+      shop: GameShop,
+      objectId: string
+    ) => Promise<void>;
     toggleGamePin: (
       shop: GameShop,
       objectId: string,
@@ -159,6 +163,7 @@ declare global {
     ) => Promise<void>;
     verifyExecutablePathInUse: (executablePath: string) => Promise<Game>;
     getLibrary: () => Promise<LibraryGame[]>;
+    refreshLibraryAssets: () => Promise<void>;
     openGameInstaller: (shop: GameShop, objectId: string) => Promise<boolean>;
     openGameInstallerPath: (shop: GameShop, objectId: string) => Promise<void>;
     openGameExecutablePath: (shop: GameShop, objectId: string) => Promise<void>;
@@ -214,6 +219,8 @@ declare global {
     ) => Promise<void>;
     getDownloadSources: () => Promise<DownloadSource[]>;
     syncDownloadSources: () => Promise<void>;
+    getDownloadSourcesCheckBaseline: () => Promise<string | null>;
+    getDownloadSourcesSinceValue: () => Promise<string | null>;
 
     /* Hardware */
     getDiskFreeSpace: (path: string) => Promise<DiskUsage>;
@@ -409,11 +416,28 @@ 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>;
     onCustomThemeUpdated: (cb: () => void) => () => Electron.IpcRenderer;
     closeEditorWindow: (themeId?: string) => Promise<void>;
+
+    /* Download Options */
+    onNewDownloadOptions: (
+      cb: (gamesWithNewOptions: { gameId: string; count: number }[]) => void
+    ) => () => Electron.IpcRenderer;
   }
 
   interface Window {

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,34 @@ export const librarySlice = createSlice({
     setLibrary: (state, action: PayloadAction<LibraryState["value"]>) => {
       state.value = action.payload;
     },
+
+    updateGameNewDownloadOptions: (
+      state,
+      action: PayloadAction<{ gameId: string; count: number }>
+    ) => {
+      const game = state.value.find((g) => g.id === action.payload.gameId);
+      if (game) {
+        game.newDownloadOptionsCount = action.payload.count;
+      }
+    },
+    clearNewDownloadOptions: (
+      state,
+      action: PayloadAction<{ gameId: string }>
+    ) => {
+      const game = state.value.find((g) => g.id === action.payload.gameId);
+      if (game) {
+        game.newDownloadOptionsCount = undefined;
+      }
+    },
+    setLibrarySearchQuery: (state, action: PayloadAction<string>) => {
+      state.searchQuery = action.payload;
+    },
   },
 });
 
-export const { setLibrary } = librarySlice.actions;
+export const {
+  setLibrary,
+  updateGameNewDownloadOptions,
+  clearNewDownloadOptions,
+  setLibrarySearchQuery,
+} = librarySlice.actions;

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;
+  }
+};

src/renderer/src/helpers/image-cropper.ts

@@ -1,158 +0,0 @@
-import type { CropArea } from "@renderer/components";
-
-type DrawImageCallback = (
-  ctx: CanvasRenderingContext2D,
-  img: HTMLImageElement,
-  cropArea: CropArea
-) => void;
-
-const loadImageAndProcess = async (
-  imagePath: string,
-  cropArea: CropArea,
-  outputFormat: string,
-  drawCallback: DrawImageCallback
-): Promise<Uint8Array> => {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-
-    img.onload = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-
-      if (!ctx) {
-        reject(new Error("Failed to get canvas context"));
-        return;
-      }
-
-      drawCallback(ctx, img, cropArea);
-
-      const convertBlobToUint8Array = async (
-        blob: Blob
-      ): Promise<Uint8Array> => {
-        const buffer = await blob.arrayBuffer();
-        return new Uint8Array(buffer);
-      };
-
-      const handleBlob = (blob: Blob | null) => {
-        if (!blob) {
-          reject(new Error("Failed to create blob from canvas"));
-          return;
-        }
-
-        convertBlobToUint8Array(blob).then(resolve).catch(reject);
-      };
-
-      canvas.toBlob(handleBlob, outputFormat, 0.95);
-    };
-
-    img.onerror = () => {
-      reject(new Error("Failed to load image"));
-    };
-
-    img.src = imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
-  });
-};
-
-const setCanvasDimensions = (
-  canvas: HTMLCanvasElement,
-  width: number,
-  height: number
-): void => {
-  canvas.width = width;
-  canvas.height = height;
-};
-
-type DrawImageParams = {
-  sourceX: number;
-  sourceY: number;
-  sourceWidth: number;
-  sourceHeight: number;
-  destWidth: number;
-  destHeight: number;
-};
-
-const drawCroppedImage = (
-  ctx: CanvasRenderingContext2D,
-  img: HTMLImageElement,
-  params: DrawImageParams
-): void => {
-  ctx.drawImage(
-    img,
-    params.sourceX,
-    params.sourceY,
-    params.sourceWidth,
-    params.sourceHeight,
-    0,
-    0,
-    params.destWidth,
-    params.destHeight
-  );
-};
-
-/**
- * Crops an image using HTML5 Canvas API
- * @param imagePath - Path to the image file
- * @param cropArea - Crop area coordinates and dimensions
- * @param outputFormat - Output image format (default: 'image/png')
- * @returns Promise resolving to cropped image as Uint8Array
- */
-export async function cropImage(
-  imagePath: string,
-  cropArea: CropArea,
-  outputFormat: string = "image/png"
-): Promise<Uint8Array> {
-  return loadImageAndProcess(
-    imagePath,
-    cropArea,
-    outputFormat,
-    (ctx, img, area) => {
-      const canvas = ctx.canvas;
-      setCanvasDimensions(canvas, area.width, area.height);
-      drawCroppedImage(ctx, img, {
-        sourceX: area.x,
-        sourceY: area.y,
-        sourceWidth: area.width,
-        sourceHeight: area.height,
-        destWidth: area.width,
-        destHeight: area.height,
-      });
-    }
-  );
-}
-
-/**
- * Crops an image to a circular shape
- * @param imagePath - Path to the image file
- * @param cropArea - Crop area coordinates and dimensions (should be square for circle)
- * @param outputFormat - Output image format (default: 'image/png')
- * @returns Promise resolving to cropped circular image as Uint8Array
- */
-export async function cropImageToCircle(
-  imagePath: string,
-  cropArea: CropArea,
-  outputFormat: string = "image/png"
-): Promise<Uint8Array> {
-  return loadImageAndProcess(
-    imagePath,
-    cropArea,
-    outputFormat,
-    (ctx, img, area) => {
-      const size = Math.min(area.width, area.height);
-      const canvas = ctx.canvas;
-      setCanvasDimensions(canvas, size, size);
-
-      ctx.beginPath();
-      ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
-      ctx.clip();
-
-      drawCroppedImage(ctx, img, {
-        sourceX: area.x,
-        sourceY: area.y,
-        sourceWidth: size,
-        sourceHeight: size,
-        destWidth: size,
-        destHeight: size,
-      });
-    }
-  );
-}

src/renderer/src/hooks/index.ts

@@ -6,3 +6,5 @@ export * from "./redux";
 export * from "./use-user-details";
 export * from "./use-format";
 export * from "./use-feature";
+export * from "./use-download-options-listener";
+export * from "./use-game-card";

src/renderer/src/hooks/use-download-options-listener.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useAppDispatch } from "./redux";
+import { updateGameNewDownloadOptions } from "@renderer/features";
+
+export function useDownloadOptionsListener() {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onNewDownloadOptions(
+      (gamesWithNewOptions) => {
+        for (const { gameId, count } of gamesWithNewOptions) {
+          dispatch(updateGameNewDownloadOptions({ gameId, count }));
+        }
+      }
+    );
+
+    return unsubscribe;
+  }, [dispatch]);
+}

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,
+  };
+}

src/renderer/src/hooks/use-library.ts

@@ -7,9 +7,25 @@ export function useLibrary() {
   const library = useAppSelector((state) => state.library.value);
 
   const updateLibrary = useCallback(async () => {
-    return window.electron
+    return window.electron.getLibrary().then(async (updatedLibrary) => {
-      .getLibrary()
+      const libraryWithAchievements = await Promise.all(
-      .then((updatedLibrary) => dispatch(setLibrary(updatedLibrary)));
+        updatedLibrary.map(async (game) => {
+          const unlockedAchievements =
+            await window.electron.getUnlockedAchievements(
+              game.objectId,
+              game.shop
+            );
+
+          return {
+            ...game,
+            unlockedAchievementCount:
+              game.unlockedAchievementCount || unlockedAchievements.length,
+          };
+        })
+      );
+
+      dispatch(setLibrary(libraryWithAchievements));
+    });
   }, [dispatch]);
 
   return { library, updateLibrary };

src/renderer/src/main.tsx

@@ -29,6 +29,7 @@ import Settings from "./pages/settings/settings";
 import Profile from "./pages/profile/profile";
 import Achievements from "./pages/achievements/achievements";
 import ThemeEditor from "./pages/theme-editor/theme-editor";
+import Library from "./pages/library/library";
 import { AchievementNotification } from "./pages/achievements/notification/achievement-notification";
 
 console.log = logger.log;
@@ -64,6 +65,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Route element={<App />}>
             <Route path="/" element={<Home />} />
             <Route path="/catalogue" element={<Catalogue />} />
+            <Route path="/library" element={<Library />} />
             <Route path="/downloads" element={<Downloads />} />
             <Route path="/game/:shop/:objectId" element={<GameDetails />} />
             <Route path="/settings" element={<Settings />} />

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

src/renderer/src/pages/game-details/hero.scss

@@ -231,44 +231,50 @@ $hero-height: 350px;
   }
 
   &__randomizer-button {
-    padding: calc(globals.$spacing-unit * 1.5);
+    position: fixed;
-    background-color: rgba(0, 0, 0, 0.6);
+    bottom: calc(globals.$spacing-unit * 5);
+    right: calc(globals.$spacing-unit * 2);
+    z-index: 100;
+    padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2);
+    background-color: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(20px);
     border-radius: 8px;
     transition: all ease 0.2s;
     cursor: pointer;
     min-height: 40px;
-    min-width: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: globals.$spacing-unit;
     color: globals.$muted-color;
     border: solid 1px globals.$border-color;
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
+    box-shadow:
+      0px 0px 10px 0px rgba(0, 0, 0, 0.8),
+      0px 2px 8px 0px rgba(255, 255, 255, 0.1);
     animation: slide-in 0.3s cubic-bezier(0.33, 1, 0.68, 1);
+    overflow: visible;
 
-    &:active {
+    &:disabled {
-      opacity: 0.9;
+      opacity: globals.$disabled-opacity;
+      cursor: not-allowed;
     }
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgba(255, 255, 255, 0.12);
       color: globals.$body-color;
     }
   }
 
   &__stars-icon-container {
-    width: 20px;
+    width: 16px;
     height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: relative;
   }
 
   &__stars-icon {
-    width: 26px;
+    width: 70px;
     position: absolute;
-    top: -3px;
+    top: -28px;
+    left: -27px;
   }
 }

src/renderer/src/pages/game-details/modals/repacks-modal.scss

@@ -45,12 +45,26 @@
   &__repack-title {
     color: globals.$muted-color;
     word-break: break-word;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1);
   }
 
   &__repack-info {
     font-size: globals.$small-font-size;
   }
 
+  &__new-badge {
+    background-color: rgba(34, 197, 94, 0.15);
+    color: rgb(187, 247, 208);
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-size: 9px;
+    text-align: center;
+    flex-shrink: 0;
+    border: 1px solid rgba(34, 197, 94, 0.5);
+  }
+
   &__no-results {
     width: 100%;
     padding: calc(globals.$spacing-unit * 4) 0;

src/renderer/src/pages/game-details/modals/repacks-modal.tsx

@@ -15,14 +15,14 @@ import {
   TextField,
   CheckboxField,
 } from "@renderer/components";
-import type { DownloadSource } from "@types";
+import type { DownloadSource, GameRepack } from "@types";
-import type { GameRepack } from "@types";
 
 import { DownloadSettingsModal } from "./download-settings-modal";
 import { gameDetailsContext } from "@renderer/context";
 import { Downloader } from "@shared";
 import { orderBy } from "lodash-es";
-import { useDate, useFeature } from "@renderer/hooks";
+import { useDate, useFeature, useAppDispatch } from "@renderer/hooks";
+import { clearNewDownloadOptions } from "@renderer/features";
 import "./repacks-modal.scss";
 
 export interface RepacksModalProps {
@@ -53,6 +53,13 @@ export function RepacksModal({
   const [hashesInDebrid, setHashesInDebrid] = useState<Record<string, boolean>>(
     {}
   );
+  const [lastCheckTimestamp, setLastCheckTimestamp] = useState<string | null>(
+    null
+  );
+  const [isLoadingTimestamp, setIsLoadingTimestamp] = useState(true);
+  const [viewedRepackIds, setViewedRepackIds] = useState<Set<string>>(
+    new Set()
+  );
 
   const { game, repacks } = useContext(gameDetailsContext);
 
@@ -60,6 +67,7 @@ export function RepacksModal({
 
   const { formatDate } = useDate();
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
 
   const getHashFromMagnet = (magnet: string) => {
     if (!magnet || typeof magnet !== "string") {
@@ -97,6 +105,34 @@ export function RepacksModal({
     fetchDownloadSources();
   }, []);
 
+  useEffect(() => {
+    const fetchLastCheckTimestamp = async () => {
+      setIsLoadingTimestamp(true);
+
+      const timestamp = await window.electron.getDownloadSourcesSinceValue();
+
+      setLastCheckTimestamp(timestamp);
+      setIsLoadingTimestamp(false);
+    };
+
+    if (visible) {
+      fetchLastCheckTimestamp();
+    }
+  }, [visible, repacks]);
+
+  useEffect(() => {
+    if (
+      visible &&
+      game?.newDownloadOptionsCount &&
+      game.newDownloadOptionsCount > 0
+    ) {
+      globalThis.electron.clearNewDownloadOptions(game.shop, game.objectId);
+
+      const gameId = `${game.shop}:${game.objectId}`;
+      dispatch(clearNewDownloadOptions({ gameId }));
+    }
+  }, [visible, game, dispatch]);
+
   const sortedRepacks = useMemo(() => {
     return orderBy(
       repacks,
@@ -139,6 +175,7 @@ export function RepacksModal({
   const handleRepackClick = (repack: GameRepack) => {
     setRepack(repack);
     setShowSelectFolderModal(true);
+    setViewedRepackIds((prev) => new Set(prev).add(repack.id));
   };
 
   const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -158,6 +195,20 @@ export function RepacksModal({
     return repack.uris.some((uri) => uri.includes(game.download!.uri));
   };
 
+  const isNewRepack = (repack: GameRepack): boolean => {
+    if (isLoadingTimestamp) return false;
+
+    if (viewedRepackIds.has(repack.id)) return false;
+
+    if (!lastCheckTimestamp || !repack.createdAt) {
+      return false;
+    }
+
+    const lastCheckUtc = new Date(lastCheckTimestamp).toISOString();
+
+    return repack.createdAt > lastCheckUtc;
+  };
+
   const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
 
   useEffect(() => {
@@ -273,7 +324,14 @@ export function RepacksModal({
                   onClick={() => handleRepackClick(repack)}
                   className="repacks-modal__repack-button"
                 >
-                  <p className="repacks-modal__repack-title">{repack.title}</p>
+                  <p className="repacks-modal__repack-title">
+                    {repack.title}
+                    {isNewRepack(repack) && (
+                      <span className="repacks-modal__new-badge">
+                        {t("new_download_option")}
+                      </span>
+                    )}
+                  </p>
 
                   {isLastDownloadedOption && (
                     <Badge>{t("last_downloaded_option")}</Badge>

src/renderer/src/pages/library/filter-options.scss

@@ -0,0 +1,55 @@
+@use "../../scss/globals.scss";
+
+.library-filter-options {
+  &__tabs {
+    display: flex;
+    gap: calc(globals.$spacing-unit);
+    position: relative;
+  }
+
+  &__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: 14px;
+    font-weight: 500;
+    transition: color ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 0.5);
+
+    &--active {
+      color: white;
+    }
+  }
+
+  &__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;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1;
+  }
+
+  &__tab-underline {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: white;
+  }
+}

src/renderer/src/pages/library/filter-options.tsx

@@ -0,0 +1,103 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import "./filter-options.scss";
+
+export type FilterOption = "all" | "recently_played" | "favorites";
+
+interface FilterOptionsProps {
+  filterBy: FilterOption;
+  onFilterChange: (filterBy: FilterOption) => void;
+  allGamesCount: number;
+  recentlyPlayedCount: number;
+  favoritesCount: number;
+}
+
+export function FilterOptions({
+  filterBy,
+  onFilterChange,
+  allGamesCount,
+  recentlyPlayedCount,
+  favoritesCount,
+}: Readonly<FilterOptionsProps>) {
+  const { t } = useTranslation("library");
+
+  return (
+    <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>
+  );
+}

src/renderer/src/pages/library/library-game-card-large.scss

@@ -0,0 +1,209 @@
+@use "../../scss/globals.scss";
+
+.library-game-card-large {
+  width: 100%;
+  height: 300px;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  transition: all ease 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-align: left;
+
+  &:before {
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 172%;
+    position: absolute;
+    background: linear-gradient(
+      35deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0.07) 51.5%,
+      rgba(255, 255, 255, 0.15) 64%,
+      rgba(255, 255, 255, 0.1) 100%
+    );
+    transition: all ease 0.3s;
+    transform: translateY(-36%);
+    opacity: 0.5;
+    z-index: 1;
+  }
+
+  &:hover::before {
+    opacity: 1;
+    transform: translateY(-20%);
+  }
+
+  &:hover {
+    transform: scale(1.01);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 0;
+  }
+
+  &__gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
+    z-index: 1;
+  }
+
+  &__overlay {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: calc(globals.$spacing-unit * 1.5);
+  }
+
+  &__top-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__logo-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__logo {
+    max-height: 120px;
+    max-width: 400px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.95);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
+  }
+
+  &__info-bar {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    justify-content: flex-end;
+  }
+
+  &__playtime {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: rgba(255, 255, 255, 0.95);
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    font-size: 12px;
+  }
+
+  &__playtime-text {
+    font-weight: 500;
+  }
+
+  &__manual-playtime {
+    color: globals.$warning-color;
+  }
+
+  &__achievements {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__achievement-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__achievements-gap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__achievement-trophy {
+    color: #fff;
+    flex-shrink: 0;
+  }
+
+  &__achievement-progress {
+    width: 100%;
+    height: 4px;
+    transition: all ease 0.2s;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+      border-radius: 4px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: globals.$muted-color;
+      border-radius: 4px;
+    }
+  }
+
+  &__achievement-bar {
+    height: 100%;
+    background-color: globals.$muted-color;
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  &__achievement-count {
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    white-space: nowrap;
+  }
+
+  &__achievement-percentage {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.85);
+    white-space: nowrap;
+  }
+}

src/renderer/src/pages/library/library-game-card-large.tsx

@@ -0,0 +1,144 @@
+import { LibraryGame } from "@types";
+import { useGameCard } from "@renderer/hooks";
+import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react";
+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 normalizePathForCss = (url: string | null | undefined): string => {
+  if (!url) return "";
+  return url.replaceAll("\\", "/");
+};
+
+const getImageWithCustomPriority = (
+  customUrl: string | null | undefined,
+  originalUrl: string | null | undefined,
+  fallbackUrl?: string | null | undefined
+) => {
+  const selectedUrl = customUrl || originalUrl || fallbackUrl || "";
+  return normalizePathForCss(selectedUrl);
+};
+
+export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
+  game,
+  onContextMenu,
+}: Readonly<LibraryGameCardLargeProps>) {
+  const { formatPlayTime, handleCardClick, handleContextMenuClick } =
+    useGameCard(game, onContextMenu);
+
+  const backgroundImage = useMemo(
+    () =>
+      getImageWithCustomPriority(
+        game.customHeroImageUrl,
+        game.libraryHeroImageUrl,
+        game.libraryImageUrl ?? game.iconUrl
+      ),
+    [
+      game.customHeroImageUrl,
+      game.libraryHeroImageUrl,
+      game.libraryImageUrl,
+      game.iconUrl,
+    ]
+  );
+
+  const backgroundStyle = useMemo(
+    () =>
+      backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {},
+    [backgroundImage]
+  );
+
+  const achievementBarStyle = useMemo(
+    () => ({
+      width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
+    }),
+    [game.unlockedAchievementCount, game.achievementCount]
+  );
+
+  const logoImage = game.customLogoImageUrl ?? game.logoImageUrl;
+
+  return (
+    <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>
+        </div>
+
+        <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>
+  );
+});

src/renderer/src/pages/library/library-game-card.scss

@@ -0,0 +1,241 @@
+@use "../../scss/globals.scss";
+
+.library-game-card {
+  &__wrapper {
+    cursor: pointer;
+    transition: all ease 0.2s;
+    box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    aspect-ratio: 3 / 4;
+    position: relative;
+    border: none;
+    background: none;
+    padding: 0;
+    border-radius: 4px;
+    overflow: hidden;
+    display: block;
+    container-type: inline-size;
+
+    &:before {
+      content: "";
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 172%;
+      position: absolute;
+      background: linear-gradient(
+        35deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.07) 51.5%,
+        rgba(255, 255, 255, 0.15) 64%,
+        rgba(255, 255, 255, 0.1) 100%
+      );
+      transition: all ease 0.3s;
+      transform: translateY(-36%);
+      opacity: 0.5;
+      z-index: 1;
+    }
+
+    &:hover {
+      transform: scale(1.02);
+    }
+
+    &:hover::before {
+      opacity: 1;
+      transform: translateY(-20%);
+    }
+  }
+
+  &__overlay {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
+    padding: 8px;
+    z-index: 2;
+  }
+
+  &__top-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &__playtime {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: rgba(255, 255, 255, 0.8);
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: all ease 0.2s;
+
+    &-long {
+      display: inline;
+      font-size: 12px;
+    }
+
+    &-short {
+      display: none;
+      font-size: 12px;
+    }
+
+    // When the card is narrow (less than 140px), show short format
+    @container (max-width: 140px) {
+      &-long {
+        display: none;
+      }
+
+      &-short {
+        display: inline;
+      }
+    }
+  }
+
+  &__manual-playtime {
+    color: globals.$warning-color;
+  }
+
+  &__achievements {
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+    transform: translateY(0);
+    transition: all ease 0.2s;
+    pointer-events: auto;
+    width: 100%;
+  }
+
+  &__achievement-header {
+    display: flex;
+    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 {
+    color: #fff;
+    flex-shrink: 0;
+  }
+
+  &__achievement-progress {
+    width: 100%;
+    height: 4px;
+    transition: all ease 0.2s;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    overflow: hidden;
+
+    &::-webkit-progress-bar {
+      background-color: rgba(255, 255, 255, 0.15);
+      border-radius: 4px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: globals.$muted-color;
+      border-radius: 4px;
+    }
+  }
+
+  &__achievement-bar {
+    height: 100%;
+    background-color: globals.$muted-color;
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    position: relative;
+  }
+
+  &__achievement-count {
+    white-space: nowrap;
+  }
+
+  &__achievement-percentage {
+    white-space: nowrap;
+  }
+
+  &__action-button {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: solid 1px rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    transform: scale(0.9);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.4);
+      transform: scale(1.1);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  &__wrapper:hover &__action-button {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &__game-image {
+    object-fit: cover;
+    border-radius: 4px;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: 0;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Responsive sizing for compact grid cells */
+.library__games-grid--compact .library-game-card__wrapper {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 215 / 320;
+}

src/renderer/src/pages/library/library-game-card.tsx

@@ -0,0 +1,109 @@
+import { LibraryGame } from "@types";
+import { useGameCard } from "@renderer/hooks";
+import { memo } from "react";
+import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react";
+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 const LibraryGameCard = memo(function LibraryGameCard({
+  game,
+  onMouseEnter,
+  onMouseLeave,
+  onContextMenu,
+}: Readonly<LibraryGameCardProps>) {
+  const { formatPlayTime, handleCardClick, handleContextMenuClick } =
+    useGameCard(game, onContextMenu);
+
+  const coverImage = (
+    game.customIconUrl ??
+    game.coverImageUrl ??
+    game.libraryImageUrl ??
+    game.libraryHeroImageUrl ??
+    game.iconUrl ??
+    ""
+  ).replaceAll("\\", "/");
+
+  return (
+    <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>
+        </div>
+
+        {(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"
+      />
+    </button>
+  );
+});

src/renderer/src/pages/library/library.scss

@@ -0,0 +1,208 @@
+@use "../../scss/globals.scss";
+
+.library {
+  &__content {
+    padding: calc(globals.$spacing-unit * 2);
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 3);
+    align-items: flex-start;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__page-header {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 1.5);
+    width: 100%;
+  }
+
+  &__page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.95);
+  }
+
+  &__controls-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    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 {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__header-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: calc(globals.$spacing-unit * 1);
+    &__left {
+      display: flex;
+      flex-direction: column;
+      gap: calc(globals.$spacing-unit * 1);
+    }
+  }
+  &__header-title {
+    font-size: 20px;
+    font-weight: 700;
+  }
+  &__filter-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    white-space: nowrap;
+  }
+
+  &__separator {
+    width: 100%;
+    height: 1px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    margin: 0;
+  }
+
+  &__count {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 8px 16px;
+  }
+
+  &__count-label {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  &__count-number {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  &__no-games {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    padding: calc(globals.$spacing-unit * 4);
+  }
+
+  &__telescope-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__games-grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: calc(globals.$spacing-unit * 2);
+    width: 100%;
+
+    // Grid view - larger cards
+    &--grid {
+      grid-template-columns: repeat(2, 1fr);
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 1300px) {
+        grid-template-columns: repeat(5, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 2000px) {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 2600px) {
+        grid-template-columns: repeat(8, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 3000px) {
+        grid-template-columns: repeat(12, 1fr);
+      }
+    }
+
+    // Compact view - smaller cards with responsive design
+    &--compact {
+      grid-template-columns: repeat(3, 1fr);
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        grid-template-columns: repeat(5, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 1300px) {
+        grid-template-columns: repeat(7, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 2000px) {
+        grid-template-columns: repeat(9, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 2600px) {
+        grid-template-columns: repeat(12, 1fr);
+      }
+
+      @container #{globals.$app-container} (min-width: 3000px) {
+        grid-template-columns: repeat(14, 1fr);
+      }
+    }
+  }
+
+  &__games-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    width: 100%;
+
+    // Large view - 2 columns grid
+    &--large {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}

src/renderer/src/pages/library/library.tsx

@@ -0,0 +1,235 @@
+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";
+import { LibraryGameCardLarge } from "./library-game-card-large";
+import { ViewOptions, ViewMode } from "./view-options";
+import { FilterOptions, FilterOption } from "./filter-options";
+import "./library.scss";
+
+export default function Library() {
+  const { library, updateLibrary } = useLibrary();
+  type ElectronAPI = {
+    refreshLibraryAssets?: () => Promise<unknown>;
+    onLibraryBatchComplete?: (cb: () => void) => () => void;
+  };
+
+  const [viewMode, setViewMode] = useState<ViewMode>(() => {
+    const savedViewMode = localStorage.getItem("library-view-mode");
+    return (savedViewMode as ViewMode) || "compact";
+  });
+  const [filterBy, setFilterBy] = useState<FilterOption>("all");
+  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");
+
+  const handleViewModeChange = useCallback((mode: ViewMode) => {
+    setViewMode(mode);
+    localStorage.setItem("library-view-mode", mode);
+  }, []);
+
+  useEffect(() => {
+    dispatch(setHeaderTitle(t("library")));
+    const electron = (globalThis as unknown as { electron?: ElectronAPI })
+      .electron;
+    let unsubscribe: () => void = () => undefined;
+    if (electron?.refreshLibraryAssets) {
+      electron
+        .refreshLibraryAssets()
+        .then(() => updateLibrary())
+        .catch(() => updateLibrary());
+      if (electron.onLibraryBatchComplete) {
+        unsubscribe = electron.onLibraryBatchComplete(() => {
+          updateLibrary();
+        });
+      }
+    } else {
+      updateLibrary();
+    }
+
+    return () => {
+      unsubscribe();
+    };
+  }, [dispatch, t, updateLibrary]);
+
+  const handleOnMouseEnterGameCard = useCallback(() => {
+    // Optional: pause animations if needed
+  }, []);
+
+  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((prev) => ({ ...prev, visible: false }));
+  }, []);
+
+  const filteredLibrary = useMemo(() => {
+    let filtered;
+
+    switch (filterBy) {
+      case "recently_played":
+        filtered = library.filter((game) => game.lastTimePlayed !== null);
+        break;
+      case "favorites":
+        filtered = library.filter((game) => game.favorite);
+        break;
+      case "all":
+      default:
+        filtered = library;
+    }
+
+    if (!searchQuery.trim()) return filtered;
+
+    const queryLower = searchQuery.toLowerCase();
+    return filtered.filter((game) => {
+      const titleLower = game.title.toLowerCase();
+      let queryIndex = 0;
+
+      for (
+        let i = 0;
+        i < titleLower.length && queryIndex < queryLower.length;
+        i++
+      ) {
+        if (titleLower[i] === queryLower[queryIndex]) {
+          queryIndex++;
+        }
+      }
+
+      return queryIndex === queryLower.length;
+    });
+  }, [library, filterBy, searchQuery]);
+
+  const sortedLibrary = filteredLibrary;
+
+  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;
+
+  return (
+    <section className="library__content">
+      {hasGames && (
+        <div className="library__page-header">
+          <div className="library__controls-row">
+            <div className="library__controls-left">
+              <FilterOptions
+                filterBy={filterBy}
+                onFilterChange={setFilterBy}
+                allGamesCount={filterCounts.allGamesCount}
+                recentlyPlayedCount={filterCounts.recentlyPlayedCount}
+                favoritesCount={filterCounts.favoritesCount}
+              />
+            </div>
+
+            <div className="library__controls-right">
+              <ViewOptions
+                viewMode={viewMode}
+                onViewModeChange={handleViewModeChange}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!hasGames && (
+        <div className="library__no-games">
+          <div className="library__telescope-icon">
+            <TelescopeIcon size={24} />
+          </div>
+          <h2>{t("no_games_title")}</h2>
+          <p>{t("no_games_description")}</p>
+        </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>
+      )}
+
+      {contextMenu.game && (
+        <GameContextMenu
+          game={contextMenu.game}
+          visible={contextMenu.visible}
+          position={contextMenu.position}
+          onClose={handleCloseContextMenu}
+        />
+      )}
+    </section>
+  );
+}

src/renderer/src/pages/library/view-options.scss

@@ -0,0 +1,55 @@
+@use "../../scss/globals.scss";
+
+.library-view-options {
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.95);
+    white-space: nowrap;
+  }
+
+  &__options {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    flex-wrap: wrap;
+    white-space: nowrap;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    padding: 10px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.04);
+    border: none;
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all ease 0.2s;
+    white-space: nowrap;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    &.active {
+      color: rgba(0, 0, 0, 0.9);
+      background: #fff;
+      svg,
+      svg * {
+        fill: currentColor;
+        color: currentColor;
+      }
+    }
+  }
+}

src/renderer/src/pages/library/view-options.tsx

@@ -0,0 +1,45 @@
+import { AppsIcon, RowsIcon, SquareIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import "./view-options.scss";
+
+export type ViewMode = "grid" | "compact" | "large";
+
+interface ViewOptionsProps {
+  viewMode: ViewMode;
+  onViewModeChange: (viewMode: ViewMode) => void;
+}
+
+export function ViewOptions({
+  viewMode,
+  onViewModeChange,
+}: Readonly<ViewOptionsProps>) {
+  const { t } = useTranslation("library");
+
+  return (
+    <div className="library-view-options__container">
+      <div className="library-view-options__options">
+        <button
+          className={`library-view-options__option ${viewMode === "compact" ? "active" : ""}`}
+          onClick={() => onViewModeChange("compact")}
+          title={t("compact_view")}
+        >
+          <SquareIcon size={16} />
+        </button>
+        <button
+          className={`library-view-options__option ${viewMode === "grid" ? "active" : ""}`}
+          onClick={() => onViewModeChange("grid")}
+          title={t("grid_view")}
+        >
+          <AppsIcon size={16} />
+        </button>
+        <button
+          className={`library-view-options__option ${viewMode === "large" ? "active" : ""}`}
+          onClick={() => onViewModeChange("large")}
+          title={t("large_view")}
+        >
+          <RowsIcon size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}

src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 
@@ -10,12 +10,8 @@ import {
   Modal,
   ModalProps,
   TextField,
-  ImageCropper,
-  CropArea,
 } from "@renderer/components";
 import { useToast, useUserDetails } from "@renderer/hooks";
-import { cropImage } from "@renderer/helpers/image-cropper";
-import { logger } from "@renderer/logger";
 
 import { yupResolver } from "@hookform/resolvers/yup";
 
@@ -67,66 +63,6 @@ export function EditProfileModal(
 
   const { showSuccessToast, showErrorToast } = useToast();
 
-  const [showCropper, setShowCropper] = useState(false);
-  const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
-    null
-  );
-  const [onImageChange, setOnImageChange] = useState<
-    ((value: string) => void) | null
-  >(null);
-
-  const handleCrop = async (cropArea: CropArea) => {
-    if (!selectedImagePath || !onImageChange) return;
-
-    try {
-      const imagePathForCrop = selectedImagePath.startsWith("local:")
-        ? selectedImagePath.slice(6)
-        : selectedImagePath;
-      const imageData = await cropImage(
-        imagePathForCrop,
-        cropArea,
-        "image/png"
-      );
-
-      const tempFileName = `cropped-profile-${Date.now()}.png`;
-      const croppedPath = await window.electron.saveTempFile(
-        tempFileName,
-        imageData
-      );
-
-      if (!hasActiveSubscription) {
-        const { imagePath } = await window.electron
-          .processProfileImage(croppedPath)
-          .catch(() => {
-            showErrorToast(t("image_process_failure"));
-            return { imagePath: null };
-          });
-
-        if (imagePath) {
-          onImageChange(imagePath);
-        }
-      } else {
-        onImageChange(croppedPath);
-      }
-
-      setShowCropper(false);
-      setSelectedImagePath(null);
-      setOnImageChange(null);
-    } catch (error) {
-      logger.error("Failed to crop profile image:", error);
-      showErrorToast(t("image_crop_failure"));
-      setShowCropper(false);
-      setSelectedImagePath(null);
-      setOnImageChange(null);
-    }
-  };
-
-  const handleCancelCrop = () => {
-    setShowCropper(false);
-    setSelectedImagePath(null);
-    setOnImageChange(null);
-  };
-
   const onSubmit = async (values: FormValues) => {
     return patchUser(values)
       .then(async () => {
@@ -163,9 +99,19 @@ export function EditProfileModal(
 
                 if (filePaths && filePaths.length > 0) {
                   const path = filePaths[0];
-                  setSelectedImagePath(path);
+
-                  setOnImageChange(() => onChange);
+                  if (!hasActiveSubscription) {
-                  setShowCropper(true);
+                    const { imagePath } = await window.electron
+                      .processProfileImage(path)
+                      .catch(() => {
+                        showErrorToast(t("image_process_failure"));
+                        return { imagePath: null };
+                      });
+
+                    onChange(imagePath);
+                  } else {
+                    onChange(path);
+                  }
                 }
               };
 
@@ -209,22 +155,6 @@ export function EditProfileModal(
           />
         </div>
 
-        {showCropper && selectedImagePath && (
-          <Modal
-            visible={showCropper}
-            title={t("crop_profile_image")}
-            onClose={handleCancelCrop}
-            large
-          >
-            <ImageCropper
-              imagePath={selectedImagePath}
-              onCrop={handleCrop}
-              onCancel={handleCancelCrop}
-              aspectRatio={1}
-            />
-          </Modal>
-        )}
-
         <small className="edit-profile-modal__hint">
           <Trans i18nKey="privacy_hint" ns="user_profile">
             <Link to="/settings" />

src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.tsx

@@ -1,20 +1,14 @@
 import { UploadIcon } from "@primer/octicons-react";
-import { Button, Modal, ImageCropper, CropArea } from "@renderer/components";
+import { Button } from "@renderer/components";
 import { useContext, useState } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
-import { cropImage } from "@renderer/helpers/image-cropper";
-import { logger } from "@renderer/logger";
 import "./upload-background-image-button.scss";
 
 export function UploadBackgroundImageButton() {
   const [isUploadingBackgroundImage, setIsUploadingBackgorundImage] =
     useState(false);
-  const [showCropper, setShowCropper] = useState(false);
-  const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
-    null
-  );
   const { hasActiveSubscription } = useUserDetails();
 
   const { t } = useTranslation("user_profile");
@@ -22,100 +16,47 @@ export function UploadBackgroundImageButton() {
   const { isMe, setSelectedBackgroundImage } = useContext(userProfileContext);
   const { patchUser, fetchUserDetails } = useUserDetails();
 
-  const { showSuccessToast, showErrorToast } = useToast();
+  const { showSuccessToast } = useToast();
 
   const handleChangeCoverClick = async () => {
-    const { filePaths } = await window.electron.showOpenDialog({
-      properties: ["openFile"],
-      filters: [
-        {
-          name: "Image",
-          extensions: ["jpg", "jpeg", "png", "gif", "webp"],
-        },
-      ],
-    });
-
-    if (filePaths && filePaths.length > 0) {
-      const path = filePaths[0];
-      setSelectedImagePath(path);
-      setShowCropper(true);
-    }
-  };
-
-  const handleCrop = async (cropArea: CropArea) => {
-    if (!selectedImagePath) return;
-
     try {
-      setIsUploadingBackgorundImage(true);
+      const { filePaths } = await window.electron.showOpenDialog({
-      setShowCropper(false);
+        properties: ["openFile"],
+        filters: [
+          {
+            name: "Image",
+            extensions: ["jpg", "jpeg", "png", "gif", "webp"],
+          },
+        ],
+      });
 
-      const imagePathForCrop = selectedImagePath.startsWith("local:")
+      if (filePaths && filePaths.length > 0) {
-        ? selectedImagePath.slice(6)
+        const path = filePaths[0];
-        : selectedImagePath;
-      const imageData = await cropImage(
-        imagePathForCrop,
-        cropArea,
-        "image/png"
-      );
 
-      const tempFileName = `cropped-background-${Date.now()}.png`;
+        setSelectedBackgroundImage(path);
-      const croppedPath = await window.electron.saveTempFile(
+        setIsUploadingBackgorundImage(true);
-        tempFileName,
-        imageData
-      );
 
-      setSelectedBackgroundImage(croppedPath);
+        await patchUser({ backgroundImageUrl: path });
-      await patchUser({ backgroundImageUrl: croppedPath });
 
-      showSuccessToast(t("background_image_updated"));
+        showSuccessToast(t("background_image_updated"));
-      await fetchUserDetails();
+        await fetchUserDetails();
-
+      }
-      setSelectedImagePath(null);
-    } catch (error) {
-      logger.error("Failed to crop background image:", error);
-      showErrorToast(t("image_crop_failure"));
-      setSelectedImagePath(null);
     } finally {
       setIsUploadingBackgorundImage(false);
     }
   };
 
-  const handleCancelCrop = () => {
-    setShowCropper(false);
-    setSelectedImagePath(null);
-  };
-
   if (!isMe || !hasActiveSubscription) return null;
 
   return (
-    <>
+    <Button
-      <Button
+      theme="outline"
-        theme="outline"
+      className="upload-background-image-button"
-        className="upload-background-image-button"
+      onClick={handleChangeCoverClick}
-        onClick={handleChangeCoverClick}
+      disabled={isUploadingBackgroundImage}
-        disabled={isUploadingBackgroundImage}
+    >
-      >
+      <UploadIcon />
-        <UploadIcon />
+      {isUploadingBackgroundImage ? t("uploading_banner") : t("upload_banner")}
-        {isUploadingBackgroundImage
+    </Button>
-          ? t("uploading_banner")
-          : t("upload_banner")}
-      </Button>
-
-      {showCropper && selectedImagePath && (
-        <Modal
-          visible={showCropper}
-          title={t("crop_background_image")}
-          onClose={handleCancelCrop}
-          large
-        >
-          <ImageCropper
-            imagePath={selectedImagePath}
-            onCrop={handleCrop}
-            onCancel={handleCancelCrop}
-            aspectRatio={21 / 9}
-          />
-        </Modal>
-      )}
-    </>
   );
 }

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) {

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;
+    }
+  }
 }

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">

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;
+    flex-direction: column;
-    align-items: center;
     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;
+  }
 }

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 { Button, SelectField, TextField } from "@renderer/components";
-import { CheckIcon } from "@primer/octicons-react";
+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
+            <div className="theme-editor__notification-preview-controls">
-              className="theme-editor__notification-preview__select-variation"
+              <div className="theme-editor__notification-controls">
-              label={t("variation")}
+                <SelectField
-              options={Object.values(notificationVariations).map(
+                  className="theme-editor__notification-preview__select-variation"
-                (variation) => {
+                  label={t("variation")}
-                  return {
+                  options={Object.values(notificationVariations).map(
-                    key: variation,
+                    (variation) => {
-                    value: variation,
+                      return {
-                    label: t(variation),
+                        key: variation,
-                  };
+                        value: variation,
-                }
+                        label: t(variation),
-              )}
+                      };
-              onChange={(value) =>
+                    }
-                setNotificationVariation(
+                  )}
-                  value.target.value as keyof typeof notificationVariations
+                  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
+            {theme?.hasCustomSound && (
-              label={t("alignment")}
+              <div className="theme-editor__sound-actions-row">
-              value={notificationAlignment}
+                <Button theme="outline" onClick={handleRemoveSound}>
-              onChange={(e) =>
+                  <TrashIcon />
-                setNotificationAlignment(
+                  {t("remove")}
-                  e.target.value as AchievementCustomNotificationPosition
+                </Button>
-                )
+                <Button theme="outline" onClick={handlePreviewSound}>
-              }
+                  <PlayIcon />
-              options={achievementCustomNotificationPositionOptions}
+                  {t("preview")}
-            />
+                </Button>
+              </div>
+            )}
 
             <div className="theme-editor__notification-preview-wrapper">
               <root.div>

src/types/index.ts

@@ -23,6 +23,7 @@ export interface GameRepack {
   uploadDate: string | null;
   downloadSourceId: string;
   downloadSourceName: string;
+  createdAt: string;
 }
 
 export interface DownloadSource {
@@ -41,9 +42,9 @@ export interface ShopAssets {
   shop: GameShop;
   title: string;
   iconUrl: string | null;
-  libraryHeroImageUrl: string;
+  libraryHeroImageUrl: string | null;
-  libraryImageUrl: string;
+  libraryImageUrl: string | null;
-  logoImageUrl: string;
+  logoImageUrl: string | null;
   logoPosition: string | null;
   coverImageUrl: string | null;
   downloadSources: string[];
@@ -362,6 +363,8 @@ export type LibraryGame = Game &
   Partial<ShopAssets> & {
     id: string;
     download: Download | null;
+    unlockedAchievementCount?: number;
+    achievementCount?: number;
   };
 
 export type UserGameDetails = ShopAssets & {

src/types/level.types.ts

@@ -56,9 +56,12 @@ export interface Game {
   launchOptions?: string | null;
   favorite?: boolean;
   isPinned?: boolean;
+  achievementCount?: number;
+  unlockedAchievementCount?: number;
   pinnedDate?: Date | null;
   automaticCloudSync?: boolean;
   hasManuallyUpdatedPlaytime?: boolean;
+  newDownloadOptionsCount?: number;
 }
 
 export interface Download {
@@ -113,6 +116,7 @@ export interface UserPreferences {
   achievementNotificationsEnabled?: boolean;
   achievementCustomNotificationsEnabled?: boolean;
   achievementCustomNotificationPosition?: AchievementCustomNotificationPosition;
+  achievementSoundVolume?: number;
   friendRequestNotificationsEnabled?: boolean;
   friendStartGameNotificationsEnabled?: boolean;
   showDownloadSpeedInMegabytes?: boolean;

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;
 }