refactor: improve code formatting and consistency in DownloadManager

Buzzheavier fix

README.md

@@ -10,6 +10,7 @@
 
 [![build](https://img.shields.io/github/actions/workflow/status/hydralauncher/hydra/build.yml)](https://github.com/hydralauncher/hydra/actions)
 [![release](https://img.shields.io/github/package-json/v/hydralauncher/hydra)](https://github.com/hydralauncher/hydra/releases)
+[![chocolatey](https://img.shields.io/chocolatey/v/hydralauncher.svg)](https://community.chocolatey.org/packages/hydralauncher)
 
 ![Hydra Launcher Home Page](./docs/screenshot.png)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "3.7.4",
+  "version": "3.7.6",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",
@@ -70,6 +70,7 @@
     "jsonwebtoken": "^9.0.2",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.544.0",
+    "node-7z": "^3.0.0",
     "parse-torrent": "^11.0.18",
     "rc-virtual-list": "^3.18.3",
     "react-dnd": "^16.0.1",

src/locales/en/translation.json

@@ -26,6 +26,7 @@
     "game_has_no_executable": "Game has no executable selected",
     "sign_in": "Sign in",
     "friends": "Friends",
+    "notifications": "Notifications",
     "need_help": "Need help?",
     "favorites": "Favorites",
     "playable_button_title": "Show only games you can play now",
@@ -115,6 +116,7 @@
     "downloading": "Downloading {{title}}… ({{percentage}} complete) - Completion {{eta}} - {{speed}}",
     "calculating_eta": "Downloading {{title}}… ({{percentage}} complete) - Calculating remaining time…",
     "checking_files": "Checking {{title}} files… ({{percentage}} complete)",
+    "extracting": "Extracting {{title}}… ({{percentage}} complete)",
     "installing_common_redist": "{{log}}…",
     "installation_complete": "Installation complete",
     "installation_complete_message": "Common redistributables installed successfully"
@@ -202,6 +204,7 @@
     "danger_zone_section_description": "Remove this game from your library or the files downloaded by Hydra",
     "download_in_progress": "Download in progress",
     "download_paused": "Download paused",
+    "extracting": "Extracting",
     "last_downloaded_option": "Last downloaded option",
     "new_download_option": "New",
     "create_steam_shortcut": "Create Steam shortcut",
@@ -414,7 +417,13 @@
     "resume_seeding": "Resume seeding",
     "options": "Manage",
     "extract": "Extract files",
-    "extracting": "Extracting files…"
+    "extracting": "Extracting files…",
+    "delete_archive_title": "Would you like to delete {{fileName}}?",
+    "delete_archive_description": "The file has been successfully extracted and it's no longer needed.",
+    "yes": "Yes",
+    "no": "No",
+    "network": "NETWORK",
+    "peak": "PEAK"
   },
   "settings": {
     "downloads_path": "Downloads path",
@@ -550,6 +559,7 @@
     "show_download_speed_in_megabytes": "Show download speed in megabytes per second",
     "extract_files_by_default": "Extract files by default after download",
     "enable_steam_achievements": "Enable search for Steam achievements",
+    "enable_new_download_options_badges": "Show new download options badges",
     "achievement_custom_notification_position": "Achievement custom notification position",
     "top-left": "Top left",
     "top-center": "Top center",
@@ -654,6 +664,7 @@
     "sending": "Sending",
     "friend_request_sent": "Friend request sent",
     "friends": "Friends",
+    "badges": "Badges",
     "friends_list": "Friends list",
     "user_not_found": "User not found",
     "block_user": "Block user",
@@ -664,12 +675,16 @@
     "ignore_request": "Ignore request",
     "cancel_request": "Cancel request",
     "undo_friendship": "Undo friendship",
+    "friendship_removed": "Friend removed",
     "request_accepted": "Request accepted",
     "user_blocked_successfully": "User blocked successfully",
     "user_block_modal_text": "This will block {{displayName}}",
     "blocked_users": "Blocked users",
     "unblock": "Unblock",
     "no_friends_added": "You have no added friends",
+    "view_all": "View all",
+    "load_more": "Load more",
+    "loading": "Loading",
     "pending": "Pending",
     "no_pending_invites": "You have no pending invites",
     "no_blocked_users": "You have no blocked users",
@@ -693,6 +708,7 @@
     "report_reason_other": "Other",
     "profile_reported": "Profile reported",
     "your_friend_code": "Your friend code:",
+    "copy_friend_code": "Copy friend code",
     "upload_banner": "Upload banner",
     "uploading_banner": "Uploading banner…",
     "background_image_updated": "Background image updated",
@@ -715,7 +731,10 @@
     "karma_description": "Earned from positive likes on reviews",
     "user_reviews": "Reviews",
     "delete_review": "Delete Review",
-    "loading_reviews": "Loading reviews..."
+    "loading_reviews": "Loading reviews...",
+    "wrapped_2025": "Wrapped 2025",
+    "view_my_wrapped_button": "View My Wrapped 2025",
+    "view_wrapped_button": "View {{displayName}}'s Wrapped 2025"
   },
   "library": {
     "library": "Library",
@@ -766,5 +785,40 @@
     "hydra_cloud_feature_found": "You've just discovered a Hydra Cloud feature!",
     "learn_more": "Learn More",
     "debrid_description": "Download up to 4x faster with Nimbus"
+  },
+  "notifications_page": {
+    "title": "Notifications",
+    "mark_all_as_read": "Mark all as read",
+    "clear_all": "Clear All",
+    "loading": "Loading...",
+    "empty_title": "No notifications",
+    "empty_description": "You're all caught up! Check back later for new updates.",
+    "empty_filter_description": "No notifications match this filter.",
+    "filter_all": "All",
+    "filter_friends": "Friends",
+    "filter_badges": "Badges",
+    "filter_upvotes": "Upvotes",
+    "filter_local": "Local",
+    "load_more": "Load more",
+    "dismiss": "Dismiss",
+    "accept": "Accept",
+    "refuse": "Refuse",
+    "notification": "Notification",
+    "friend_request_received_title": "New friend request!",
+    "friend_request_received_description": "{{displayName}} wants to be your friend",
+    "friend_request_accepted_title": "Friend request accepted!",
+    "friend_request_accepted_description": "{{displayName}} accepted your friend request",
+    "badge_received_title": "You got a new badge!",
+    "badge_received_description": "{{badgeName}}",
+    "review_upvote_title": "Your review for {{gameTitle}} got upvotes!",
+    "review_upvote_description": "Your review received {{count}} new upvotes",
+    "marked_all_as_read": "All notifications marked as read",
+    "failed_to_mark_as_read": "Failed to mark notifications as read",
+    "cleared_all": "All notifications cleared",
+    "failed_to_clear": "Failed to clear notifications",
+    "failed_to_load": "Failed to load notifications",
+    "failed_to_dismiss": "Failed to dismiss notification",
+    "friend_request_accepted": "Friend request accepted",
+    "friend_request_refused": "Friend request refused"
   }
 }

src/locales/es/translation.json

@@ -458,6 +458,7 @@
     "description_confirmation_delete_all_sources": "Vas a eliminar todas las fuentes de descargas",
     "button_delete_all_sources": "Eliminar todo",
     "added_download_source": "Añadir fuente de descarga",
+    "adding": "Añadiendo…",
     "download_sources_synced": "Todas las fuentes de descarga están sincronizadas",
     "insert_valid_json_url": "Introducí una URL de json válida",
     "found_download_option_zero": "Sin opciones de descargas encontrada",
@@ -563,6 +564,19 @@
     "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.",
     "enable_friend_start_game_notifications": "Cuando un amigo está jugando un juego",
     "autoplay_trailers_on_game_page": "Reproducir trailers automáticamente en la página del juego",
+    "change_achievement_sound": "Cambiar sonido de logro",
+    "download_source_already_exists": "Esta fuente de descarga URL ya existe.",
+    "download_source_failed": "Error",
+    "download_source_matched": "Actualizado",
+    "download_source_matching": "Actualizando",
+    "download_source_no_information": "Sin información disponible",
+    "download_source_pending_matching": "Actualizando pronto",
+    "download_sources_synced_successfully": "Todas las fuentes de descarga están sincronizadas",
+    "failed_add_download_source": "Error al añadir la fuente de descarga. Por favor intentá de nuevo.",
+    "hydra_cloud": "Hydra Cloud",
+    "preview_sound": "Vista previa de sonido",
+    "remove_achievement_sound": "Eliminar sonido de logros",
+    "removed_all_download_sources": "Todas las fuentes de descarga eliminadas",
     "hide_to_tray_on_game_start": "Ocultar Hydra en la bandeja al iniciar un juego"
   },
   "notifications": {

src/locales/fr/translation.json

@@ -27,7 +27,69 @@
     "friends": "Amis",
     "need_help": "Besoin d'aide ?",
     "favorites": "Favoris",
-    "playable_button_title": "Afficher uniquement les jeux que vous pouvez jouer maintenant"
+    "playable_button_title": "Afficher uniquement les jeux que vous pouvez jouer maintenant",
+    "library": "Bibliothèque",
+    "add_custom_game_tooltip": "Ajouter un jeu personnalisé",
+    "show_playable_only_tooltip": "Afficher uniquement les jeux jouables",
+    "custom_game_modal": "Ajouter un jeu personnalisé",
+    "custom_game_modal_description": "Ajoutez un jeu personnalisé à votre bibliothèque en sélectionnant un fichier exécutable",
+    "custom_game_modal_executable_path": "Chemin de l'exécutable",
+    "custom_game_modal_select_executable": "Sélectionner un fichier exécutable",
+    "custom_game_modal_title": "Titre",
+    "custom_game_modal_enter_title": "Entrer le titre",
+    "custom_game_modal_browse": "Parcourir",
+    "custom_game_modal_cancel": "Annuler",
+    "custom_game_modal_add": "Ajouter le jeu",
+    "custom_game_modal_adding": "Ajout du jeu…",
+    "custom_game_modal_success": "Jeu personnalisé ajouté avec succès",
+    "custom_game_modal_failed": "Échec de l’ajout du jeu personnalisé",
+    "custom_game_modal_executable": "Exécutable",
+    "edit_game_modal": "Personnaliser les ressources",
+    "edit_game_modal_description": "Personnalisez les ressources et les détails du jeu",
+    "edit_game_modal_title": "Titre",
+    "edit_game_modal_enter_title": "Entrer le titre",
+    "edit_game_modal_image": "Image",
+    "edit_game_modal_select_image": "Sélectionner une image",
+    "edit_game_modal_browse": "Parcourir",
+    "edit_game_modal_image_preview": "Aperçu de l’image",
+    "edit_game_modal_icon": "Icône",
+    "edit_game_modal_select_icon": "Sélectionner une icône",
+    "edit_game_modal_icon_preview": "Aperçu de l’icône",
+    "edit_game_modal_logo": "Logo",
+    "edit_game_modal_select_logo": "Sélectionner un logo",
+    "edit_game_modal_logo_preview": "Aperçu du logo",
+    "edit_game_modal_hero": "Bannière de la bibliothèque",
+    "edit_game_modal_select_hero": "Sélectionner l’image de bannière",
+    "edit_game_modal_hero_preview": "Aperçu de la bannière",
+    "edit_game_modal_cancel": "Annuler",
+    "edit_game_modal_update": "Mettre à jour",
+    "edit_game_modal_updating": "Mise à jour…",
+    "edit_game_modal_fill_required": "Veuillez remplir tous les champs requis",
+    "edit_game_modal_success": "Ressources mises à jour avec succès",
+    "edit_game_modal_failed": "Échec de la mise à jour des ressources",
+    "edit_game_modal_image_filter": "Image",
+    "edit_game_modal_icon_resolution": "Résolution recommandée : 256x256px",
+    "edit_game_modal_logo_resolution": "Résolution recommandée : 640x360px",
+    "edit_game_modal_hero_resolution": "Résolution recommandée : 1920x620px",
+    "edit_game_modal_assets": "Ressources",
+    "edit_game_modal_drop_icon_image_here": "Déposez l’image de l’icône ici",
+    "edit_game_modal_drop_logo_image_here": "Déposez l’image du logo ici",
+    "edit_game_modal_drop_hero_image_here": "Déposez l’image de la bannière ici",
+    "edit_game_modal_drop_to_replace_icon": "Déposez pour remplacer l’icône",
+    "edit_game_modal_drop_to_replace_logo": "Déposez pour remplacer le logo",
+    "edit_game_modal_drop_to_replace_hero": "Déposez pour remplacer la bannière",
+    "install_decky_plugin": "Installer le plugin Decky",
+    "update_decky_plugin": "Mettre à jour le plugin Decky",
+    "decky_plugin_installed_version": "Plugin Decky (v{{version}})",
+    "install_decky_plugin_title": "Installer le plugin Decky Hydra",
+    "install_decky_plugin_message": "Cela téléchargera et installera le plugin Hydra pour Decky Loader. Des permissions élevées peuvent être requises. Continuer ?",
+    "update_decky_plugin_title": "Mettre à jour le plugin Decky Hydra",
+    "update_decky_plugin_message": "Une nouvelle version du plugin Decky Hydra est disponible. Souhaitez-vous la mettre à jour maintenant ?",
+    "decky_plugin_installed": "Plugin Decky v{{version}} installé avec succès",
+    "decky_plugin_installation_failed": "Échec de l’installation du plugin Decky : {{error}}",
+    "decky_plugin_installation_error": "Erreur lors de l’installation du plugin Decky : {{error}}",
+    "confirm": "Confirmer",
+    "cancel": "Annuler"
   },
   "header": {
     "search": "Rechercher",
@@ -37,7 +99,15 @@
     "search_results": "Résultats de la recherche",
     "settings": "Paramètres",
     "version_available_install": "Version {{version}} disponible. Cliquez ici pour redémarrer et installer.",
-    "version_available_download": "Version {{version}} disponible. Cliquez ici pour télécharger."
+    "version_available_download": "Version {{version}} disponible. Cliquez ici pour télécharger.",
+    "search_library": "Rechercher dans la bibliothèque",
+    "recent_searches": "Recherches récentes",
+    "suggestions": "Suggestions",
+    "clear_history": "Effacer",
+    "remove_from_history": "Supprimer de l'historique",
+    "loading": "Chargement…",
+    "no_results": "Aucun résultat",
+    "library": "Bibliothèque"
   },
   "bottom_panel": {
     "no_downloads_in_progress": "Aucun téléchargement en cours",
@@ -47,7 +117,8 @@
     "checking_files": "Vérification des fichiers de {{title}}… ({{percentage}} terminé)",
     "installing_common_redist": "{{log}}…",
     "installation_complete": "Installation terminée",
-    "installation_complete_message": "Redistribuables communs installés avec succès"
+    "installation_complete_message": "Redistribuables communs installés avec succès",
+    "extracting": "Extraction de {{title}}… ({{percentage}} terminé)"
   },
   "catalogue": {
     "search": "Filtrer…",
@@ -198,7 +269,113 @@
     "download_error_not_cached_on_hydra": "Ce téléchargement n'est pas disponible sur Nimbus.",
     "game_removed_from_favorites": "Jeu retiré des favoris",
     "game_added_to_favorites": "Jeu ajouté aux favoris",
-    "automatically_extract_downloaded_files": "Extraire automatiquement les fichiers téléchargés"
+    "automatically_extract_downloaded_files": "Extraire automatiquement les fichiers téléchargés",
+    "already_in_library": "Déjà dans la bibliothèque",
+    "create_shortcut_simple": "Créer un raccourci",
+    "properties": "Propriétés",
+    "extracting": "Extraction en cours",
+    "new_download_option": "Nouveau",
+    "create_steam_shortcut": "Créer un raccourci Steam",
+    "you_might_need_to_restart_steam": "Vous devrez peut-être redémarrer Steam pour voir les changements",
+    "add_to_favorites": "Ajouter aux favoris",
+    "remove_from_favorites": "Retirer des favoris",
+    "failed_update_favorites": "Échec de la mise à jour des favoris",
+    "game_removed_from_library": "Jeu retiré de la bibliothèque",
+    "failed_remove_from_library": "Échec de la suppression du jeu de la bibliothèque",
+    "files_removed_success": "Fichiers supprimés avec succès",
+    "failed_remove_files": "Échec de la suppression des fichiers",
+    "rating_count": "Évaluations",
+    "show_more": "Afficher plus",
+    "show_less": "Afficher moins",
+    "reviews": "Avis",
+    "review_played_for": "Temps de jeu",
+    "leave_a_review": "Laisser un avis",
+    "write_review_placeholder": "Partagez votre avis sur ce jeu…",
+    "sort_newest": "Les plus récents",
+    "sort_oldest": "Les plus anciens",
+    "sort_highest_score": "Meilleure note",
+    "sort_lowest_score": "Note la plus basse",
+    "sort_most_voted": "Les plus votés",
+    "no_reviews_yet": "Aucun avis pour le moment",
+    "be_first_to_review": "Soyez le premier à donner votre avis !",
+    "rating": "Note",
+    "rating_stats": "Évaluation",
+    "rating_very_negative": "Très négatif",
+    "rating_negative": "Négatif",
+    "rating_neutral": "Neutre",
+    "rating_positive": "Positif",
+    "rating_very_positive": "Très positif",
+    "submit_review": "Envoyer",
+    "submitting": "Envoi…",
+    "review_submitted_successfully": "Avis envoyé avec succès !",
+    "review_submission_failed": "Échec de l’envoi de l’avis. Veuillez réessayer.",
+    "review_cannot_be_empty": "Le champ de l’avis ne peut pas être vide.",
+    "review_deleted_successfully": "Avis supprimé avec succès.",
+    "review_deletion_failed": "Échec de la suppression de l’avis.",
+    "loading_reviews": "Chargement des avis…",
+    "loading_more_reviews": "Chargement de plus d’avis…",
+    "load_more_reviews": "Charger plus d’avis",
+    "you_seemed_to_enjoy_this_game": "Vous semblez avoir apprécié ce jeu",
+    "would_you_recommend_this_game": "Souhaitez-vous laisser un avis sur ce jeu ?",
+    "yes": "Oui",
+    "maybe_later": "Peut-être plus tard",
+    "backup_failed": "Échec de la sauvegarde",
+    "update_playtime_title": "Mettre à jour le temps de jeu",
+    "update_playtime_description": "Mettre à jour manuellement le temps de jeu pour {{game}}",
+    "update_playtime": "Mettre à jour le temps de jeu",
+    "update_playtime_success": "Temps de jeu mis à jour avec succès",
+    "update_playtime_error": "Échec de la mise à jour du temps de jeu",
+    "update_game_playtime": "Mettre à jour le temps de jeu",
+    "manual_playtime_warning": "Vos heures seront marquées comme modifiées manuellement et cela ne peut pas être annulé.",
+    "manual_playtime_tooltip": "Ce temps de jeu a été modifié manuellement",
+    "game_removed_from_pinned": "Jeu retiré des épinglés",
+    "game_added_to_pinned": "Jeu ajouté aux épinglés",
+    "create_start_menu_shortcut": "Créer un raccourci dans le menu Démarrer",
+    "invalid_wine_prefix_path": "Chemin du préfixe Wine invalide",
+    "invalid_wine_prefix_path_description": "Le chemin du préfixe Wine est invalide. Veuillez vérifier et réessayer.",
+    "missing_wine_prefix": "Un préfixe Wine est requis pour créer une sauvegarde sous Linux",
+    "artifact_renamed": "Sauvegarde renommée avec succès",
+    "rename_artifact": "Renommer la sauvegarde",
+    "rename_artifact_description": "Renommez la sauvegarde avec un nom plus descriptif",
+    "artifact_name_label": "Nom de la sauvegarde",
+    "artifact_name_placeholder": "Entrez un nom pour la sauvegarde",
+    "save_changes": "Enregistrer les modifications",
+    "required_field": "Ce champ est requis",
+    "max_length_field": "Ce champ doit contenir moins de {{length}} caractères",
+    "freeze_backup": "Épingler pour éviter l’écrasement automatique",
+    "unfreeze_backup": "Désépingler",
+    "backup_frozen": "Sauvegarde épinglée",
+    "backup_unfrozen": "Sauvegarde désépinglée",
+    "backup_freeze_failed": "Échec de l’épinglage de la sauvegarde",
+    "backup_freeze_failed_description": "Vous devez laisser au moins un emplacement libre pour les sauvegardes automatiques",
+    "edit_game_modal_button": "Personnaliser les ressources du jeu",
+    "game_details": "Détails du jeu",
+    "prices": "Prix",
+    "no_prices_found": "Aucun prix trouvé",
+    "view_all_prices": "Cliquer pour voir tous les prix",
+    "retail_price": "Prix officiel",
+    "keyshop_price": "Prix Keyshop",
+    "historical_retail": "Historique officiel",
+    "historical_keyshop": "Historique Keyshop",
+    "language": "Langue",
+    "caption": "Sous-titres",
+    "audio": "Audio",
+    "filter_by_source": "Filtrer par source",
+    "no_repacks_found": "Aucune source trouvée pour ce jeu",
+    "delete_review": "Supprimer l’avis",
+    "remove_review": "Retirer l’avis",
+    "delete_review_modal_title": "Voulez-vous vraiment supprimer votre avis ?",
+    "delete_review_modal_description": "Cette action est irréversible.",
+    "delete_review_modal_delete_button": "Supprimer",
+    "delete_review_modal_cancel_button": "Annuler",
+    "vote_failed": "Échec de l’enregistrement de votre vote. Veuillez réessayer.",
+    "show_original": "Afficher l’original",
+    "show_translation": "Afficher la traduction",
+    "show_original_translated_from": "Afficher l’original (traduit depuis {{language}})",
+    "hide_original": "Masquer l’original",
+    "review_from_blocked_user": "Avis d’un utilisateur bloqué",
+    "show": "Afficher",
+    "hide": "Masquer"
   },
   "activation": {
     "title": "Activer Hydra",
@@ -237,7 +414,11 @@
     "resume_seeding": "Reprendre le partage",
     "options": "Gérer",
     "extract": "Extraire les fichiers",
-    "extracting": "Extraction des fichiers…"
+    "extracting": "Extraction des fichiers…",
+    "delete_archive_title": "Voulez-vous supprimer {{fileName}} ?",
+    "delete_archive_description": "Le fichier a été extrait avec succès et n’est plus nécessaire.",
+    "yes": "Oui",
+    "no": "Non"
   },
   "settings": {
     "downloads_path": "Chemin des téléchargements",
@@ -366,7 +547,40 @@
     "bottom-left": "En bas à gauche",
     "bottom-center": "En bas au centre",
     "bottom-right": "En bas à droite",
-    "enable_friend_start_game_notifications": "Quand un ami commence à jouer à un jeu"
+    "enable_friend_start_game_notifications": "Quand un ami commence à jouer à un jeu",
+    "adding": "Ajout…",
+    "failed_add_download_source": "Échec de l’ajout de la source de téléchargement. Veuillez réessayer.",
+    "download_source_already_exists": "Cette URL de source existe déjà",
+    "download_source_pending_matching": "Mise à jour imminente",
+    "download_source_matched": "À jour",
+    "download_source_matching": "Mise à jour",
+    "download_source_failed": "Erreur",
+    "download_source_no_information": "Aucune information disponible",
+    "removed_all_download_sources": "Toutes les sources de téléchargement supprimées",
+    "download_sources_synced_successfully": "Toutes les sources de téléchargement ont été synchronisées",
+    "importing": "Importation…",
+    "hydra_cloud": "Hydra Cloud",
+    "debrid": "Debrid",
+    "enable_steam_achievements": "Activer la recherche de succès Steam",
+    "alignment": "Alignement",
+    "variation": "Variation",
+    "default": "Par défaut",
+    "rare": "Rare",
+    "platinum": "Platine",
+    "hidden": "Caché",
+    "test_notification": "Notification de test",
+    "achievement_sound_volume": "Volume du son de succès",
+    "select_achievement_sound": "Sélectionner un son de succès",
+    "change_achievement_sound": "Changer le son de succès",
+    "remove_achievement_sound": "Supprimer le son de succès",
+    "preview_sound": "Prévisualiser le son",
+    "select": "Sélectionner",
+    "preview": "Aperçu",
+    "remove": "Supprimer",
+    "no_sound_file_selected": "Aucun fichier sonore sélectionné",
+    "notification_preview": "Aperçu de la notification de succès",
+    "autoplay_trailers_on_game_page": "Lire automatiquement les bandes-annonces sur la page du jeu",
+    "hide_to_tray_on_game_start": "Réduire Hydra dans la barre système au lancement d’un jeu"
   },
   "notifications": {
     "download_complete": "Téléchargement terminé",

src/locales/hu/translation.json

@@ -22,7 +22,7 @@
     "downloading": "{{title}} ({{percentage}} - Letöltés…)",
     "filter": "Könyvtár szűrése",
     "home": "Főoldal",
-    "queued": "A(z) {{title}} (Várakozósorban van)",
+    "queued": "{{title}} (Várakozásban)",
     "game_has_no_executable": "A játékhoz nincs tallózva futtatható fájl",
     "sign_in": "Bejelentkezés",
     "friends": "Barátok",
@@ -94,6 +94,12 @@
   "header": {
     "search": "Keresés",
     "search_library": "Könyvtár böngészése",
+    "recent_searches": "Korábbi Keresések",
+    "suggestions": "Találatok",
+    "clear_history": "Törlés",
+    "remove_from_history": "Törlés az előzményekből",
+    "loading": "Töltés...",
+    "no_results": "Nincs találat",
     "home": "Főoldal",
     "catalogue": "Katalógus",
     "library": "Könyvtár",
@@ -109,6 +115,7 @@
     "downloading": "{{title}} letöltése… ({{percentage}} kész) - Befejezés {{eta}} - {{speed}}",
     "calculating_eta": "{{title}} letöltése… ({{percentage}} kész) - Hátralévő idő…",
     "checking_files": "A(z) {{title}} fájljaiból… ({{percentage}} kész)",
+    "extracting": "{{title}} kicsomagolása… ({{percentage}} kicsomagolva)",
     "installing_common_redist": "{{log}}…",
     "installation_complete": "Telepítés befejezve",
     "installation_complete_message": "A(z) Alapvető segédprogramok sikeresen telepítve"
@@ -165,7 +172,7 @@
     "playing_now": "Játékban: ",
     "change": "Változtatás",
     "repacks_modal_description": "Válaszd ki a repacket amit leszeretnél tölteni",
-    "select_folder_hint": "A letöltési mappát a <0>Beállítások</0> menüjében változtathatod meg",
+    "select_folder_hint": "A letöltési mappát a <0>Beállításokban</0> változtathatod meg",
     "download_now": "Letöltés",
     "no_shop_details": "A bolt adatai nem érhetőek el.",
     "download_options": "Letöltési opciók",
@@ -196,6 +203,7 @@
     "danger_zone_section_description": "Itt eltávolítható a játék a könyvtáradból, vagy a fájlok amelyek a Hydra által lettek letöltve",
     "download_in_progress": "Letöltés folyamatban",
     "download_paused": "Letöltés szüneteltetve",
+    "extracting": "Kicsomagolás",
     "last_downloaded_option": "Utoljára letöltött",
     "new_download_option": "Új",
     "create_steam_shortcut": "Steam parancsikon létrehozása",
@@ -397,7 +405,7 @@
     "delete_modal_description": "Ez eltávolítja a telepítési fájlokat a számítógépedről",
     "install": "Telepít",
     "download_in_progress": "Folyamatban lévő",
-    "queued_downloads": "Várakozósoron lévő letöltések",
+    "queued_downloads": "Várakozásban lévő letöltések",
     "downloads_completed": "Befejezett",
     "queued": "Várakozásban",
     "no_downloads_title": "Oly üres..",
@@ -408,7 +416,11 @@
     "resume_seeding": "Seedelés folytatása",
     "options": "Kezelés",
     "extract": "Fájlok kibontása",
-    "extracting": "Fájlok kibontása…"
+    "extracting": "Fájlok kibontása…",
+    "delete_archive_title": "Szeretnéd törölni ezt a fájlt? {{fileName}}",
+    "delete_archive_description": "A tömörített fájl ki lett csomagolva, s többé nincs rá szükség. ",
+    "yes": "Igen",
+    "no": "Nem"
   },
   "settings": {
     "downloads_path": "Letöltési útvonalak",
@@ -669,7 +681,7 @@
     "no_blocked_users": "Nincs letiltott felhasználó",
     "friend_code_copied": "Barát kód kimásolva",
     "undo_friendship_modal_text": "Ezáltal megszünteted a barátságod vele: {{displayName}}",
-    "privacy_hint": "Hogy beállítsd ki láthassa ezt, menj a <0>Beállítások</0> menüjébe",
+    "privacy_hint": "Hogy beállítsd ki láthassa ezt, menj a <0>Beállításokba</0>",
     "locked_profile": "Ez a profil privát",
     "image_process_failure": "Hiba a kép feldolgozása közben",
     "required_field": "Ez a mező kötelező",

src/locales/pt-BR/translation.json

@@ -115,6 +115,7 @@
     "downloading": "Baixando {{title}}… ({{percentage}} concluído) - Conclusão {{eta}} - {{speed}}",
     "calculating_eta": "Baixando {{title}}… ({{percentage}} concluído) - Calculando tempo restante…",
     "checking_files": "Verificando arquivos de {{title}}…",
+    "extracting": "Extraindo {{title}}… ({{percentage}} concluído)",
     "installing_common_redist": "{{log}}…",
     "installation_complete": "Instalação concluída",
     "installation_complete_message": "Componentes recomendados instalados com sucesso"
@@ -190,6 +191,7 @@
     "danger_zone_section_description": "Remova o jogo da sua biblioteca ou os arquivos que foram baixados pelo Hydra",
     "download_in_progress": "Download em andamento",
     "download_paused": "Download pausado",
+    "extracting": "Extraindo",
     "last_downloaded_option": "Última opção baixada",
     "new_download_option": "Novo",
     "create_steam_shortcut": "Criar atalho na Steam",
@@ -402,7 +404,13 @@
     "resume_seeding": "Semear",
     "options": "Gerenciar",
     "extract": "Extrair arquivos",
-    "extracting": "Extraindo arquivos…"
+    "extracting": "Extraindo arquivos…",
+    "delete_archive_title": "Deseja deletar {{fileName}}?",
+    "delete_archive_description": "O arquivo foi extraído com sucesso e não é mais necessário.",
+    "yes": "Sim",
+    "no": "Não",
+    "network": "REDE",
+    "peak": "PICO"
   },
   "settings": {
     "downloads_path": "Diretório dos downloads",

src/main/events/library/delete-archive.ts

@@ -0,0 +1,23 @@
+import fs from "node:fs";
+
+import { registerEvent } from "../register-event";
+import { logger } from "@main/services";
+
+const deleteArchive = async (
+  _event: Electron.IpcMainInvokeEvent,
+  filePath: string
+) => {
+  try {
+    if (fs.existsSync(filePath)) {
+      await fs.promises.unlink(filePath);
+      logger.info(`Deleted archive: ${filePath}`);
+      return true;
+    }
+    return true;
+  } catch (err) {
+    logger.error(`Failed to delete archive: ${filePath}`, err);
+    return false;
+  }
+};
+
+registerEvent("deleteArchive", deleteArchive);

src/main/events/library/extract-game-download.ts

@@ -22,6 +22,7 @@ const extractGameDownload = async (
   await downloadsSublevel.put(gameKey, {
     ...download,
     extracting: true,
+    extractionProgress: 0,
   });
 
   const gameFilesManager = new GameFilesManager(shop, objectId);

src/main/events/library/index.ts

@@ -8,6 +8,7 @@ import "./close-game";
 import "./copy-custom-game-asset";
 import "./create-game-shortcut";
 import "./create-steam-shortcut";
+import "./delete-archive";
 import "./delete-game-folder";
 import "./extract-game-download";
 import "./get-default-wine-prefix-selection-path";

src/main/events/notifications/clear-all-local-notifications.ts

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

src/main/events/notifications/delete-local-notification.ts

@@ -0,0 +1,11 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const deleteLocalNotification = async (
+  _event: Electron.IpcMainInvokeEvent,
+  id: string
+) => {
+  await LocalNotificationManager.deleteNotification(id);
+};
+
+registerEvent("deleteLocalNotification", deleteLocalNotification);

src/main/events/notifications/get-local-notifications-count.ts

@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const getLocalNotificationsCount = async () => {
+  return LocalNotificationManager.getUnreadCount();
+};
+
+registerEvent("getLocalNotificationsCount", getLocalNotificationsCount);

src/main/events/notifications/get-local-notifications.ts

@@ -0,0 +1,8 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const getLocalNotifications = async () => {
+  return LocalNotificationManager.getNotifications();
+};
+
+registerEvent("getLocalNotifications", getLocalNotifications);

src/main/events/notifications/index.ts

@@ -1,3 +1,9 @@
 import "./publish-new-repacks-notification";
 import "./show-achievement-test-notification";
 import "./update-achievement-notification-window";
+import "./get-local-notifications";
+import "./get-local-notifications-count";
+import "./mark-local-notification-read";
+import "./mark-all-local-notifications-read";
+import "./delete-local-notification";
+import "./clear-all-local-notifications";

src/main/events/notifications/mark-all-local-notifications-read.ts

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

src/main/events/notifications/mark-local-notification-read.ts

@@ -0,0 +1,11 @@
+import { registerEvent } from "../register-event";
+import { LocalNotificationManager } from "@main/services";
+
+const markLocalNotificationRead = async (
+  _event: Electron.IpcMainInvokeEvent,
+  id: string
+) => {
+  await LocalNotificationManager.markAsRead(id);
+};
+
+registerEvent("markLocalNotificationRead", markLocalNotificationRead);

src/main/events/profile/index.ts

@@ -1,4 +1,3 @@
 import "./get-me";
 import "./process-profile-image";
-import "./sync-friend-requests";
 import "./update-profile";

src/main/events/profile/sync-friend-requests.ts

@@ -1,24 +0,0 @@
-import { registerEvent } from "../register-event";
-import { HydraApi, WindowManager } from "@main/services";
-import { UserNotLoggedInError } from "@shared";
-import type { FriendRequestSync } from "@types";
-
-export const syncFriendRequests = async () => {
-  return HydraApi.get<FriendRequestSync>(`/profile/friend-requests/sync`)
-    .then((res) => {
-      WindowManager.mainWindow?.webContents.send(
-        "on-sync-friend-requests",
-        res
-      );
-
-      return res;
-    })
-    .catch((err) => {
-      if (err instanceof UserNotLoggedInError) {
-        return { friendRequestCount: 0 } as FriendRequestSync;
-      }
-      throw err;
-    });
-};
-
-registerEvent("syncFriendRequests", syncFriendRequests);

src/main/events/torrenting/resume-game-download.ts

@@ -13,7 +13,11 @@ const resumeGameDownload = async (
 
   const download = await downloadsSublevel.get(gameKey);
 
-  if (download?.status === "paused") {
+  if (
+    download &&
+    (download.status === "paused" || download.status === "active") &&
+    download.progress !== 1
+  ) {
     await DownloadManager.pauseDownload();
 
     for await (const [key, value] of downloadsSublevel.iterator()) {

src/main/events/torrenting/start-game-download.ts

@@ -41,7 +41,6 @@ const startGameDownload = async (
   const game = await gamesSublevel.get(gameKey);
   const gameAssets = await gamesShopAssetsSublevel.get(gameKey);
 
-  /* Delete any previous download */
   await downloadsSublevel.del(gameKey);
 
   if (game) {
@@ -82,6 +81,7 @@ const startGameDownload = async (
     queued: true,
     extracting: false,
     automaticallyExtract,
+    extractionProgress: 0,
   };
 
   try {
@@ -123,6 +123,42 @@ const startGameDownload = async (
     }
 
     if (err instanceof Error) {
+      if (downloader === Downloader.Buzzheavier) {
+        if (err.message.includes("Rate limit")) {
+          return {
+            ok: false,
+            error: "Buzzheavier: Rate limit exceeded",
+          };
+        }
+        if (
+          err.message.includes("not found") ||
+          err.message.includes("deleted")
+        ) {
+          return {
+            ok: false,
+            error: "Buzzheavier: File not found",
+          };
+        }
+      }
+
+      if (downloader === Downloader.FuckingFast) {
+        if (err.message.includes("Rate limit")) {
+          return {
+            ok: false,
+            error: "FuckingFast: Rate limit exceeded",
+          };
+        }
+        if (
+          err.message.includes("not found") ||
+          err.message.includes("deleted")
+        ) {
+          return {
+            ok: false,
+            error: "FuckingFast: File not found",
+          };
+        }
+      }
+
       return { ok: false, error: err.message };
     }
 

src/main/generated/envelope.ts

@@ -1,4 +1,4 @@
-// @generated by protobuf-ts 2.10.0
+// @generated by protobuf-ts 2.11.1
 // @generated from protobuf file "envelope.proto" (syntax proto3)
 // tslint:disable
 import type { BinaryWriteOptions } from "@protobuf-ts/runtime";
@@ -15,11 +15,11 @@ import { MessageType } from "@protobuf-ts/runtime";
  */
 export interface FriendRequest {
   /**
-   * @generated from protobuf field: int32 friend_request_count = 1;
+   * @generated from protobuf field: int32 friend_request_count = 1
    */
   friendRequestCount: number;
   /**
-   * @generated from protobuf field: optional string sender_id = 2;
+   * @generated from protobuf field: optional string sender_id = 2
    */
   senderId?: string;
 }
@@ -28,18 +28,27 @@ export interface FriendRequest {
  */
 export interface FriendGameSession {
   /**
-   * @generated from protobuf field: string object_id = 1;
+   * @generated from protobuf field: string object_id = 1
    */
   objectId: string;
   /**
-   * @generated from protobuf field: string shop = 2;
+   * @generated from protobuf field: string shop = 2
    */
   shop: string;
   /**
-   * @generated from protobuf field: string friend_id = 3;
+   * @generated from protobuf field: string friend_id = 3
    */
   friendId: string;
 }
+/**
+ * @generated from protobuf message Notification
+ */
+export interface Notification {
+  /**
+   * @generated from protobuf field: int32 notification_count = 1
+   */
+  notificationCount: number;
+}
 /**
  * @generated from protobuf message Envelope
  */
@@ -51,17 +60,24 @@ export interface Envelope {
     | {
         oneofKind: "friendRequest";
         /**
-         * @generated from protobuf field: FriendRequest friend_request = 1;
+         * @generated from protobuf field: FriendRequest friend_request = 1
          */
         friendRequest: FriendRequest;
       }
     | {
         oneofKind: "friendGameSession";
         /**
-         * @generated from protobuf field: FriendGameSession friend_game_session = 2;
+         * @generated from protobuf field: FriendGameSession friend_game_session = 2
          */
         friendGameSession: FriendGameSession;
       }
+    | {
+        oneofKind: "notification";
+        /**
+         * @generated from protobuf field: Notification notification = 3
+         */
+        notification: Notification;
+      }
     | {
         oneofKind: undefined;
       };
@@ -239,6 +255,80 @@ class FriendGameSession$Type extends MessageType<FriendGameSession> {
  */
 export const FriendGameSession = new FriendGameSession$Type();
 // @generated message type with reflection information, may provide speed optimized methods
+class Notification$Type extends MessageType<Notification> {
+  constructor() {
+    super("Notification", [
+      {
+        no: 1,
+        name: "notification_count",
+        kind: "scalar",
+        T: 5 /*ScalarType.INT32*/,
+      },
+    ]);
+  }
+  create(value?: PartialMessage<Notification>): Notification {
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.notificationCount = 0;
+    if (value !== undefined)
+      reflectionMergePartial<Notification>(this, message, value);
+    return message;
+  }
+  internalBinaryRead(
+    reader: IBinaryReader,
+    length: number,
+    options: BinaryReadOptions,
+    target?: Notification
+  ): Notification {
+    let message = target ?? this.create(),
+      end = reader.pos + length;
+    while (reader.pos < end) {
+      let [fieldNo, wireType] = reader.tag();
+      switch (fieldNo) {
+        case /* int32 notification_count */ 1:
+          message.notificationCount = reader.int32();
+          break;
+        default:
+          let u = options.readUnknownField;
+          if (u === "throw")
+            throw new globalThis.Error(
+              `Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`
+            );
+          let d = reader.skip(wireType);
+          if (u !== false)
+            (u === true ? UnknownFieldHandler.onRead : u)(
+              this.typeName,
+              message,
+              fieldNo,
+              wireType,
+              d
+            );
+      }
+    }
+    return message;
+  }
+  internalBinaryWrite(
+    message: Notification,
+    writer: IBinaryWriter,
+    options: BinaryWriteOptions
+  ): IBinaryWriter {
+    /* int32 notification_count = 1; */
+    if (message.notificationCount !== 0)
+      writer.tag(1, WireType.Varint).int32(message.notificationCount);
+    let u = options.writeUnknownFields;
+    if (u !== false)
+      (u == true ? UnknownFieldHandler.onWrite : u)(
+        this.typeName,
+        message,
+        writer
+      );
+    return writer;
+  }
+}
+/**
+ * @generated MessageType for protobuf message Notification
+ */
+export const Notification = new Notification$Type();
+// @generated message type with reflection information, may provide speed optimized methods
 class Envelope$Type extends MessageType<Envelope> {
   constructor() {
     super("Envelope", [
@@ -256,6 +346,13 @@ class Envelope$Type extends MessageType<Envelope> {
         oneof: "payload",
         T: () => FriendGameSession,
       },
+      {
+        no: 3,
+        name: "notification",
+        kind: "message",
+        oneof: "payload",
+        T: () => Notification,
+      },
     ]);
   }
   create(value?: PartialMessage<Envelope>): Envelope {
@@ -298,6 +395,17 @@ class Envelope$Type extends MessageType<Envelope> {
             ),
           };
           break;
+        case /* Notification notification */ 3:
+          message.payload = {
+            oneofKind: "notification",
+            notification: Notification.internalBinaryRead(
+              reader,
+              reader.uint32(),
+              options,
+              (message.payload as any).notification
+            ),
+          };
+          break;
         default:
           let u = options.readUnknownField;
           if (u === "throw")
@@ -336,6 +444,13 @@ class Envelope$Type extends MessageType<Envelope> {
         writer.tag(2, WireType.LengthDelimited).fork(),
         options
       ).join();
+    /* Notification notification = 3; */
+    if (message.payload.oneofKind === "notification")
+      Notification.internalBinaryWrite(
+        message.payload.notification,
+        writer.tag(3, WireType.LengthDelimited).fork(),
+        options
+      ).join();
     let u = options.writeUnknownFields;
     if (u !== false)
       (u == true ? UnknownFieldHandler.onWrite : u)(

src/main/level/sublevels/index.ts

@@ -8,3 +8,4 @@ export * from "./keys";
 export * from "./themes";
 export * from "./download-sources";
 export * from "./downloadSourcesCheckTimestamp";
+export * from "./local-notifications";

src/main/level/sublevels/keys.ts

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

src/main/level/sublevels/local-notifications.ts

@@ -0,0 +1,11 @@
+import type { LocalNotification } from "@types";
+
+import { db } from "../level";
+import { levelKeys } from "./keys";
+
+export const localNotificationsSublevel = db.sublevel<
+  string,
+  LocalNotification
+>(levelKeys.localNotifications, {
+  valueEncoding: "json",
+});

src/main/main.ts

@@ -1,5 +1,5 @@
 import { downloadsSublevel } from "./level/sublevels/downloads";
-import { sortBy } from "lodash-es";
+import { orderBy } from "lodash-es";
 import { Downloader } from "@shared";
 import { levelKeys, db } from "./level";
 import type { UserPreferences } from "@types";
@@ -33,9 +33,7 @@ export const loadState = async () => {
 
   await import("./events");
 
-  if (process.platform !== "darwin") {
-    Aria2.spawn();
-  }
+  Aria2.spawn();
 
   if (userPreferences?.realDebridApiToken) {
     RealDebridClient.authorize(userPreferences.realDebridApiToken);
@@ -59,8 +57,10 @@ export const loadState = async () => {
     const { syncDownloadSourcesFromApi } = await import("./services/user");
     void syncDownloadSourcesFromApi();
 
-    // Check for new download options on startup
-    DownloadSourcesChecker.checkForChanges();
+    // Check for new download options on startup (if enabled)
+    (async () => {
+      await DownloadSourcesChecker.checkForChanges();
+    })();
     WSClient.connect();
   });
 
@@ -68,7 +68,7 @@ export const loadState = async () => {
     .values()
     .all()
     .then((games) => {
-      return sortBy(games, "timestamp", "DESC");
+      return orderBy(games, "timestamp", "desc");
     });
 
   downloads.forEach((download) => {

src/main/services/7zip.ts

@@ -1,5 +1,5 @@
 import { app } from "electron";
-import cp from "node:child_process";
+import Seven, { CommandLineSwitches } from "node-7z";
 import path from "node:path";
 import { logger } from "./logger";
 
@@ -9,6 +9,17 @@ export const binaryName = {
   win32: "7z.exe",
 };
 
+export interface ExtractionProgress {
+  percent: number;
+  fileCount: number;
+  file: string;
+}
+
+export interface ExtractionResult {
+  success: boolean;
+  extractedFiles: string[];
+}
+
 export class SevenZip {
   private static readonly binaryPath = app.isPackaged
     ? path.join(process.resourcesPath, binaryName[process.platform])
@@ -32,43 +43,109 @@ export class SevenZip {
       cwd?: string;
       passwords?: string[];
     },
-    successCb: () => void,
-    errorCb: () => void
-  ) {
-    const tryPassword = (index = -1) => {
-      const password = passwords[index] ?? "";
-      logger.info(`Trying password ${password} on ${filePath}`);
+    onProgress?: (progress: ExtractionProgress) => void
+  ): Promise<ExtractionResult> {
+    return new Promise((resolve, reject) => {
+      const tryPassword = (index = -1) => {
+        const password = passwords[index] ?? "";
+        logger.info(
+          `Trying password "${password || "(empty)"}" on ${filePath}`
+        );
 
-      const args = ["x", filePath, "-y", "-p" + password];
+        const extractedFiles: string[] = [];
+        let fileCount = 0;
 
-      if (outputPath) {
-        args.push("-o" + outputPath);
-      }
+        const options: CommandLineSwitches = {
+          $bin: this.binaryPath,
+          $progress: true,
+          yes: true,
+          password: password || undefined,
+        };
 
-      const child = cp.execFile(this.binaryPath, args, {
-        cwd,
-      });
-
-      child.once("exit", (code) => {
-        if (code === 0) {
-          successCb();
-          return;
+        if (outputPath) {
+          options.outputDir = outputPath;
         }
 
-        if (index < passwords.length - 1) {
+        const stream = Seven.extractFull(filePath, outputPath || cwd || ".", {
+          ...options,
+          $spawnOptions: cwd ? { cwd } : undefined,
+        });
+
+        stream.on("progress", (progress) => {
+          if (onProgress) {
+            onProgress({
+              percent: progress.percent,
+              fileCount: fileCount,
+              file: progress.fileCount?.toString() || "",
+            });
+          }
+        });
+
+        stream.on("data", (data) => {
+          if (data.file) {
+            extractedFiles.push(data.file);
+            fileCount++;
+          }
+        });
+
+        stream.on("end", () => {
           logger.info(
-            `Failed to extract file: ${filePath} with password: ${password}. Trying next password...`
+            `Successfully extracted ${filePath} (${extractedFiles.length} files)`
           );
+          resolve({
+            success: true,
+            extractedFiles,
+          });
+        });
 
-          tryPassword(index + 1);
-        } else {
-          logger.info(`Failed to extract file: ${filePath}`);
+        stream.on("error", (err) => {
+          logger.error(`Extraction error for ${filePath}:`, err);
 
-          errorCb();
+          if (index < passwords.length - 1) {
+            logger.info(
+              `Failed to extract file: ${filePath} with password: "${password}". Trying next password...`
+            );
+            tryPassword(index + 1);
+          } else {
+            logger.error(
+              `Failed to extract file: ${filePath} after trying all passwords`
+            );
+            reject(new Error(`Failed to extract file: ${filePath}`));
+          }
+        });
+      };
+
+      tryPassword();
+    });
+  }
+
+  public static listFiles(
+    filePath: string,
+    password?: string
+  ): Promise<string[]> {
+    return new Promise((resolve, reject) => {
+      const files: string[] = [];
+
+      const options: CommandLineSwitches = {
+        $bin: this.binaryPath,
+        password: password || undefined,
+      };
+
+      const stream = Seven.list(filePath, options);
+
+      stream.on("data", (data) => {
+        if (data.file) {
+          files.push(data.file);
         }
       });
-    };
 
-    tryPassword();
+      stream.on("end", () => {
+        resolve(files);
+      });
+
+      stream.on("error", (err) => {
+        reject(err);
+      });
+    });
   }
 }

src/main/services/aria2.ts

@@ -7,9 +7,12 @@ export class Aria2 {
   private static process: cp.ChildProcess | null = null;
 
   public static spawn() {
-    const binaryPath = app.isPackaged
-      ? path.join(process.resourcesPath, "aria2c")
-      : path.join(__dirname, "..", "..", "binaries", "aria2c");
+    const binaryPath =
+      process.platform === "darwin"
+        ? "aria2c"
+        : app.isPackaged
+          ? path.join(process.resourcesPath, "aria2c")
+          : path.join(__dirname, "..", "..", "binaries", "aria2c");
 
     this.process = cp.spawn(
       binaryPath,

src/main/services/decky-plugin.ts

@@ -74,21 +74,16 @@ export class DeckyPlugin {
 
     await fs.promises.mkdir(extractPath, { recursive: true });
 
-    return new Promise((resolve, reject) => {
-      SevenZip.extractFile(
-        {
-          filePath: zipPath,
-          outputPath: extractPath,
-        },
-        () => {
-          logger.log(`Plugin extracted to: ${extractPath}`);
-          resolve(extractPath);
-        },
-        () => {
-          reject(new Error("Failed to extract plugin"));
-        }
-      );
-    });
+    try {
+      await SevenZip.extractFile({
+        filePath: zipPath,
+        outputPath: extractPath,
+      });
+      logger.log(`Plugin extracted to: ${extractPath}`);
+      return extractPath;
+    } catch {
+      throw new Error("Failed to extract plugin");
+    }
   }
 
   private static needsSudo(): boolean {

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

@@ -5,10 +5,12 @@ import {
   updateDownloadSourcesCheckBaseline,
   updateDownloadSourcesSinceValue,
   downloadSourcesSublevel,
+  db,
+  levelKeys,
 } from "@main/level";
 import { logger } from "./logger";
 import { WindowManager } from "./window-manager";
-import type { Game } from "@types";
+import type { Game, UserPreferences } from "@types";
 
 interface DownloadSourcesChangeResponse {
   shop: string;
@@ -101,6 +103,20 @@ export class DownloadSourcesChecker {
     logger.info("DownloadSourcesChecker.checkForChanges() called");
 
     try {
+      const userPreferences = await db.get<string, UserPreferences | null>(
+        levelKeys.userPreferences,
+        {
+          valueEncoding: "json",
+        }
+      );
+
+      if (userPreferences?.enableNewDownloadOptionsBadges === false) {
+        logger.info(
+          "New download options badges are disabled, skipping download sources check"
+        );
+        return;
+      }
+
       // Get all installed games (excluding custom games)
       const installedGames = await gamesSublevel.values().all();
       const nonCustomGames = installedGames.filter(

src/main/services/download/download-manager.ts

@@ -24,10 +24,80 @@ import { sortBy } from "lodash-es";
 import { TorBoxClient } from "./torbox";
 import { GameFilesManager } from "../game-files-manager";
 import { HydraDebridClient } from "./hydra-debrid";
+import { BuzzheavierApi, FuckingFastApi } from "@main/services/hosters";
 
 export class DownloadManager {
   private static downloadingGameId: string | null = null;
 
+  private static extractFilename(
+    url: string,
+    originalUrl?: string
+  ): string | undefined {
+    if (originalUrl?.includes("#")) {
+      const hashPart = originalUrl.split("#")[1];
+      if (hashPart && !hashPart.startsWith("http") && hashPart.includes(".")) {
+        return hashPart;
+      }
+    }
+
+    if (url.includes("#")) {
+      const hashPart = url.split("#")[1];
+      if (hashPart && !hashPart.startsWith("http") && hashPart.includes(".")) {
+        return hashPart;
+      }
+    }
+
+    try {
+      const urlObj = new URL(url);
+      const pathname = urlObj.pathname;
+      const pathParts = pathname.split("/");
+      const filename = pathParts[pathParts.length - 1];
+
+      if (filename?.includes(".") && filename.length > 0) {
+        return decodeURIComponent(filename);
+      }
+    } catch {
+      // Invalid URL
+    }
+
+    return undefined;
+  }
+
+  private static sanitizeFilename(filename: string): string {
+    return filename.replaceAll(/[<>:"/\\|?*]/g, "_");
+  }
+
+  private static createDownloadPayload(
+    directUrl: string,
+    originalUrl: string,
+    downloadId: string,
+    savePath: string
+  ) {
+    const filename =
+      this.extractFilename(originalUrl, directUrl) ||
+      this.extractFilename(directUrl);
+    const sanitizedFilename = filename
+      ? this.sanitizeFilename(filename)
+      : undefined;
+
+    if (sanitizedFilename) {
+      logger.log(`[DownloadManager] Using filename: ${sanitizedFilename}`);
+    } else {
+      logger.log(
+        `[DownloadManager] No filename extracted, aria2 will use default`
+      );
+    }
+
+    return {
+      action: "start" as const,
+      game_id: downloadId,
+      url: directUrl,
+      save_path: savePath,
+      out: sanitizedFilename,
+      allow_multiple_connections: true,
+    };
+  }
+
   public static async startRPC(
     download?: Download,
     downloadsToSeed?: Download[]
@@ -121,21 +191,14 @@ export class DownloadManager {
 
       const userPreferences = await db.get<string, UserPreferences | null>(
         levelKeys.userPreferences,
-        {
-          valueEncoding: "json",
-        }
+        { valueEncoding: "json" }
       );
 
       if (WindowManager.mainWindow && download) {
         WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
         WindowManager.mainWindow.webContents.send(
           "on-download-progress",
-          JSON.parse(
-            JSON.stringify({
-              ...status,
-              game,
-            })
-          )
+          JSON.parse(JSON.stringify({ ...status, game }))
         );
       }
 
@@ -179,27 +242,25 @@ export class DownloadManager {
             )
           ) {
             gameFilesManager.extractDownloadedFile();
-          } else {
+          } else if (download.folderName) {
             gameFilesManager
               .extractFilesInDirectory(
-                path.join(download.downloadPath, download.folderName!)
+                path.join(download.downloadPath, download.folderName)
               )
-              .then(() => {
-                gameFilesManager.setExtractionComplete();
-              });
+              .then(() => gameFilesManager.setExtractionComplete());
           }
         }
 
         const downloads = await downloadsSublevel
           .values()
           .all()
-          .then((games) => {
-            return sortBy(
+          .then((games) =>
+            sortBy(
               games.filter((game) => game.status === "paused" && game.queued),
               "timestamp",
               "DESC"
-            );
-          });
+            )
+          );
 
         const [nextItemOnQueue] = downloads;
 
@@ -267,13 +328,8 @@ export class DownloadManager {
 
   static async cancelDownload(downloadKey = this.downloadingGameId) {
     await PythonRPC.rpc
-      .post("/action", {
-        action: "cancel",
-        game_id: downloadKey,
-      })
-      .catch((err) => {
-        logger.error("Failed to cancel game download", err);
-      });
+      .post("/action", { action: "cancel", game_id: downloadKey })
+      .catch((err) => logger.error("Failed to cancel game download", err));
 
     if (downloadKey === this.downloadingGameId) {
       WindowManager.mainWindow?.setProgressBar(-1);
@@ -306,7 +362,6 @@ export class DownloadManager {
         const id = download.uri.split("/").pop();
         const token = await GofileApi.authorize();
         const downloadLink = await GofileApi.getDownloadLink(id!);
-
         await GofileApi.checkDownloadUrl(downloadLink);
 
         return {
@@ -348,9 +403,50 @@ export class DownloadManager {
           save_path: download.downloadPath,
         };
       }
+      case Downloader.Buzzheavier: {
+        logger.log(
+          `[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`
+        );
+        try {
+          const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
+          logger.log(`[DownloadManager] Buzzheavier direct URL obtained`);
+          return this.createDownloadPayload(
+            directUrl,
+            download.uri,
+            downloadId,
+            download.downloadPath
+          );
+        } catch (error) {
+          logger.error(
+            `[DownloadManager] Error processing Buzzheavier download:`,
+            error
+          );
+          throw error;
+        }
+      }
+      case Downloader.FuckingFast: {
+        logger.log(
+          `[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`
+        );
+        try {
+          const directUrl = await FuckingFastApi.getDirectLink(download.uri);
+          logger.log(`[DownloadManager] FuckingFast direct URL obtained`);
+          return this.createDownloadPayload(
+            directUrl,
+            download.uri,
+            downloadId,
+            download.downloadPath
+          );
+        } catch (error) {
+          logger.error(
+            `[DownloadManager] Error processing FuckingFast download:`,
+            error
+          );
+          throw error;
+        }
+      }
       case Downloader.Mediafire: {
         const downloadUrl = await MediafireApi.getDownloadUrl(download.uri);
-
         return {
           action: "start",
           game_id: downloadId,
@@ -367,7 +463,6 @@ export class DownloadManager {
         };
       case Downloader.RealDebrid: {
         const downloadUrl = await RealDebridClient.getDownloadUrl(download.uri);
-
         if (!downloadUrl) throw new Error(DownloadError.NotCachedOnRealDebrid);
 
         return {
@@ -380,7 +475,6 @@ export class DownloadManager {
       }
       case Downloader.TorBox: {
         const { name, url } = await TorBoxClient.getDownloadInfo(download.uri);
-
         if (!url) return;
         return {
           action: "start",
@@ -395,7 +489,6 @@ export class DownloadManager {
         const downloadUrl = await HydraDebridClient.getDownloadUrl(
           download.uri
         );
-
         if (!downloadUrl) throw new Error(DownloadError.NotCachedOnHydra);
 
         return {

src/main/services/game-files-manager.ts

@@ -3,24 +3,58 @@ import fs from "node:fs";
 import type { GameShop } from "@types";
 import { downloadsSublevel, gamesSublevel, levelKeys } from "@main/level";
 import { FILE_EXTENSIONS_TO_EXTRACT } from "@shared";
-import { SevenZip } from "./7zip";
+import { SevenZip, ExtractionProgress } from "./7zip";
 import { WindowManager } from "./window-manager";
 import { publishExtractionCompleteNotification } from "./notifications";
 import { logger } from "./logger";
 
+const PROGRESS_THROTTLE_MS = 1000;
+
 export class GameFilesManager {
+  private lastProgressUpdate = 0;
+
   constructor(
     private readonly shop: GameShop,
     private readonly objectId: string
   ) {}
 
-  private async clearExtractionState() {
-    const gameKey = levelKeys.game(this.shop, this.objectId);
-    const download = await downloadsSublevel.get(gameKey);
+  private get gameKey() {
+    return levelKeys.game(this.shop, this.objectId);
+  }
 
-    await downloadsSublevel.put(gameKey, {
-      ...download!,
+  private async updateExtractionProgress(progress: number, force = false) {
+    const now = Date.now();
+
+    if (!force && now - this.lastProgressUpdate < PROGRESS_THROTTLE_MS) {
+      return;
+    }
+
+    this.lastProgressUpdate = now;
+
+    const download = await downloadsSublevel.get(this.gameKey);
+    if (!download) return;
+
+    await downloadsSublevel.put(this.gameKey, {
+      ...download,
+      extractionProgress: progress,
+    });
+
+    WindowManager.mainWindow?.webContents.send(
+      "on-extraction-progress",
+      this.shop,
+      this.objectId,
+      progress
+    );
+  }
+
+  private async clearExtractionState() {
+    const download = await downloadsSublevel.get(this.gameKey);
+    if (!download) return;
+
+    await downloadsSublevel.put(this.gameKey, {
+      ...download,
       extracting: false,
+      extractionProgress: 0,
     });
 
     WindowManager.mainWindow?.webContents.send(
@@ -30,6 +64,10 @@ export class GameFilesManager {
     );
   }
 
+  private readonly handleProgress = (progress: ExtractionProgress) => {
+    this.updateExtractionProgress(progress.percent / 100);
+  };
+
   async extractFilesInDirectory(directoryPath: string) {
     if (!fs.existsSync(directoryPath)) return;
     const files = await fs.promises.readdir(directoryPath);
@@ -42,53 +80,66 @@ export class GameFilesManager {
       (file) => /part1\.rar$/i.test(file) || !/part\d+\.rar$/i.test(file)
     );
 
-    await Promise.all(
-      filesToExtract.map((file) => {
-        return new Promise((resolve, reject) => {
-          SevenZip.extractFile(
-            {
-              filePath: path.join(directoryPath, file),
-              cwd: directoryPath,
-              passwords: ["online-fix.me", "steamrip.com"],
-            },
-            () => {
-              resolve(true);
-            },
-            () => {
-              reject(new Error(`Failed to extract file: ${file}`));
-              this.clearExtractionState();
-            }
-          );
-        });
-      })
-    );
+    if (filesToExtract.length === 0) return;
 
-    compressedFiles.forEach((file) => {
-      const extractionPath = path.join(directoryPath, file);
+    await this.updateExtractionProgress(0, true);
 
-      if (fs.existsSync(extractionPath)) {
-        fs.unlink(extractionPath, (err) => {
-          if (err) {
-            logger.error(`Failed to delete file: ${file}`, err);
+    const totalFiles = filesToExtract.length;
+    let completedFiles = 0;
 
-            this.clearExtractionState();
+    for (const file of filesToExtract) {
+      try {
+        const result = await SevenZip.extractFile(
+          {
+            filePath: path.join(directoryPath, file),
+            cwd: directoryPath,
+            passwords: ["online-fix.me", "steamrip.com"],
+          },
+          (progress) => {
+            const overallProgress =
+              (completedFiles + progress.percent / 100) / totalFiles;
+            this.updateExtractionProgress(overallProgress);
           }
-        });
+        );
+
+        if (result.success) {
+          completedFiles++;
+          await this.updateExtractionProgress(
+            completedFiles / totalFiles,
+            true
+          );
+        }
+      } catch (err) {
+        logger.error(`Failed to extract file: ${file}`, err);
+        await this.clearExtractionState();
+        return;
       }
-    });
+    }
+
+    const archivePaths = compressedFiles
+      .map((file) => path.join(directoryPath, file))
+      .filter((archivePath) => fs.existsSync(archivePath));
+
+    if (archivePaths.length > 0) {
+      WindowManager.mainWindow?.webContents.send(
+        "on-archive-deletion-prompt",
+        archivePaths
+      );
+    }
   }
 
   async setExtractionComplete(publishNotification = true) {
-    const gameKey = levelKeys.game(this.shop, this.objectId);
-
     const [download, game] = await Promise.all([
-      downloadsSublevel.get(gameKey),
-      gamesSublevel.get(gameKey),
+      downloadsSublevel.get(this.gameKey),
+      gamesSublevel.get(this.gameKey),
     ]);
 
-    await downloadsSublevel.put(gameKey, {
-      ...download!,
+    if (!download) return;
+
+    await downloadsSublevel.put(this.gameKey, {
+      ...download,
       extracting: false,
+      extractionProgress: 0,
     });
 
     WindowManager.mainWindow?.webContents.send(
@@ -97,17 +148,15 @@ export class GameFilesManager {
       this.objectId
     );
 
-    if (publishNotification) {
-      publishExtractionCompleteNotification(game!);
+    if (publishNotification && game) {
+      publishExtractionCompleteNotification(game);
     }
   }
 
   async extractDownloadedFile() {
-    const gameKey = levelKeys.game(this.shop, this.objectId);
-
     const [download, game] = await Promise.all([
-      downloadsSublevel.get(gameKey),
-      gamesSublevel.get(gameKey),
+      downloadsSublevel.get(this.gameKey),
+      gamesSublevel.get(this.gameKey),
     ]);
 
     if (!download || !game) return false;
@@ -119,39 +168,39 @@ export class GameFilesManager {
       path.parse(download.folderName!).name
     );
 
-    SevenZip.extractFile(
-      {
-        filePath,
-        outputPath: extractionPath,
-        passwords: ["online-fix.me", "steamrip.com"],
-      },
-      async () => {
+    await this.updateExtractionProgress(0, true);
+
+    try {
+      const result = await SevenZip.extractFile(
+        {
+          filePath,
+          outputPath: extractionPath,
+          passwords: ["online-fix.me", "steamrip.com"],
+        },
+        this.handleProgress
+      );
+
+      if (result.success) {
         await this.extractFilesInDirectory(extractionPath);
 
         if (fs.existsSync(extractionPath) && fs.existsSync(filePath)) {
-          fs.unlink(filePath, (err) => {
-            if (err) {
-              logger.error(
-                `Failed to delete file: ${download.folderName}`,
-                err
-              );
-
-              this.clearExtractionState();
-            }
-          });
+          WindowManager.mainWindow?.webContents.send(
+            "on-archive-deletion-prompt",
+            [filePath]
+          );
         }
 
-        await downloadsSublevel.put(gameKey, {
-          ...download!,
+        await downloadsSublevel.put(this.gameKey, {
+          ...download,
           folderName: path.parse(download.folderName!).name,
         });
 
-        this.setExtractionComplete();
-      },
-      () => {
-        this.clearExtractionState();
+        await this.setExtractionComplete();
       }
-    );
+    } catch (err) {
+      logger.error(`Failed to extract downloaded file: ${filePath}`, err);
+      await this.clearExtractionState();
+    }
 
     return true;
   }

src/main/services/hosters/buzzheavier.ts

@@ -0,0 +1,86 @@
+import axios from "axios";
+import {
+  HOSTER_USER_AGENT,
+  extractHosterFilename,
+  handleHosterError,
+} from "./fuckingfast";
+import { logger } from "@main/services";
+
+export class BuzzheavierApi {
+  private static readonly BUZZHEAVIER_DOMAINS = [
+    "buzzheavier.com",
+    "bzzhr.co",
+    "fuckingfast.net",
+  ];
+
+  private static isSupportedDomain(url: string): boolean {
+    const lowerUrl = url.toLowerCase();
+    return this.BUZZHEAVIER_DOMAINS.some((domain) => lowerUrl.includes(domain));
+  }
+
+  private static async getBuzzheavierDirectLink(url: string): Promise<string> {
+    try {
+      const baseUrl = url.split("#")[0];
+      logger.log(
+        `[Buzzheavier] Starting download link extraction for: ${baseUrl}`
+      );
+
+      await axios.get(baseUrl, {
+        headers: { "User-Agent": HOSTER_USER_AGENT },
+        timeout: 30000,
+      });
+
+      const downloadUrl = `${baseUrl}/download`;
+      logger.log(`[Buzzheavier] Making HEAD request to: ${downloadUrl}`);
+      const headResponse = await axios.head(downloadUrl, {
+        headers: {
+          "hx-current-url": baseUrl,
+          "hx-request": "true",
+          referer: baseUrl,
+          "User-Agent": HOSTER_USER_AGENT,
+        },
+        maxRedirects: 0,
+        validateStatus: (status) =>
+          status === 200 || status === 204 || status === 301 || status === 302,
+        timeout: 30000,
+      });
+
+      const hxRedirect = headResponse.headers["hx-redirect"];
+      logger.log(`[Buzzheavier] Received hx-redirect header: ${hxRedirect}`);
+      if (!hxRedirect) {
+        logger.error(
+          `[Buzzheavier] No hx-redirect header found. Status: ${headResponse.status}`
+        );
+        throw new Error(
+          "Could not extract download link. File may be deleted or is a directory."
+        );
+      }
+
+      const domain = new URL(baseUrl).hostname;
+      const directLink = hxRedirect.startsWith("/dl/")
+        ? `https://${domain}${hxRedirect}`
+        : hxRedirect;
+      logger.log(`[Buzzheavier] Extracted direct link`);
+      return directLink;
+    } catch (error) {
+      logger.error(`[Buzzheavier] Error in getBuzzheavierDirectLink:`, error);
+      handleHosterError(error);
+    }
+  }
+
+  public static async getDirectLink(url: string): Promise<string> {
+    if (!this.isSupportedDomain(url)) {
+      throw new Error(
+        `Unsupported domain. Supported domains: ${this.BUZZHEAVIER_DOMAINS.join(", ")}`
+      );
+    }
+    return this.getBuzzheavierDirectLink(url);
+  }
+
+  public static async getFilename(
+    url: string,
+    directUrl?: string
+  ): Promise<string> {
+    return extractHosterFilename(url, directUrl);
+  }
+}

src/main/services/hosters/fuckingfast.ts

@@ -0,0 +1,129 @@
+import axios from "axios";
+import { logger } from "@main/services";
+
+export const HOSTER_USER_AGENT =
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0";
+
+export async function extractHosterFilename(
+  url: string,
+  directUrl?: string
+): Promise<string> {
+  if (url.includes("#")) {
+    const fragment = url.split("#")[1];
+    if (fragment && !fragment.startsWith("http")) {
+      return fragment;
+    }
+  }
+
+  if (directUrl) {
+    try {
+      const response = await axios.head(directUrl, {
+        timeout: 10000,
+        headers: { "User-Agent": HOSTER_USER_AGENT },
+      });
+
+      const contentDisposition = response.headers["content-disposition"];
+      if (contentDisposition) {
+        const filenameMatch = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(
+          contentDisposition
+        );
+        if (filenameMatch && filenameMatch[1]) {
+          return filenameMatch[1].replace(/['"]/g, "");
+        }
+      }
+    } catch {
+      // Ignore errors
+    }
+
+    const urlPath = new URL(directUrl).pathname;
+    const filename = urlPath.split("/").pop()?.split("?")[0];
+    if (filename) {
+      return filename;
+    }
+  }
+
+  return "downloaded_file";
+}
+
+export function handleHosterError(error: unknown): never {
+  if (axios.isAxiosError(error)) {
+    if (error.response?.status === 404) {
+      throw new Error("File not found");
+    }
+    if (error.response?.status === 429) {
+      throw new Error("Rate limit exceeded. Please try again later.");
+    }
+    if (error.response?.status === 403) {
+      throw new Error("Access denied. File may be private or deleted.");
+    }
+    throw new Error(`Network error: ${error.response?.status || "Unknown"}`);
+  }
+  throw error;
+}
+
+// ============================================
+// FuckingFast API Class
+// ============================================
+export class FuckingFastApi {
+  private static readonly FUCKINGFAST_DOMAINS = ["fuckingfast.co"];
+
+  private static readonly FUCKINGFAST_REGEX =
+    /window\.open\("(https:\/\/fuckingfast\.co\/dl\/[^"]*)"\)/;
+
+  private static isSupportedDomain(url: string): boolean {
+    const lowerUrl = url.toLowerCase();
+    return this.FUCKINGFAST_DOMAINS.some((domain) => lowerUrl.includes(domain));
+  }
+
+  private static async getFuckingFastDirectLink(url: string): Promise<string> {
+    try {
+      logger.log(`[FuckingFast] Starting download link extraction for: ${url}`);
+      const response = await axios.get(url, {
+        headers: { "User-Agent": HOSTER_USER_AGENT },
+        timeout: 30000,
+      });
+
+      const html = response.data;
+
+      if (html.toLowerCase().includes("rate limit")) {
+        logger.error(`[FuckingFast] Rate limit detected`);
+        throw new Error(
+          "Rate limit exceeded. Please wait a few minutes and try again."
+        );
+      }
+
+      if (html.includes("File Not Found Or Deleted")) {
+        logger.error(`[FuckingFast] File not found or deleted`);
+        throw new Error("File not found or deleted");
+      }
+
+      const match = this.FUCKINGFAST_REGEX.exec(html);
+      if (!match || !match[1]) {
+        logger.error(`[FuckingFast] Could not extract download link`);
+        throw new Error("Could not extract download link from page");
+      }
+
+      logger.log(`[FuckingFast] Successfully extracted direct link`);
+      return match[1];
+    } catch (error) {
+      logger.error(`[FuckingFast] Error:`, error);
+      handleHosterError(error);
+    }
+  }
+
+  public static async getDirectLink(url: string): Promise<string> {
+    if (!this.isSupportedDomain(url)) {
+      throw new Error(
+        `Unsupported domain. Supported domains: ${this.FUCKINGFAST_DOMAINS.join(", ")}`
+      );
+    }
+    return this.getFuckingFastDirectLink(url);
+  }
+
+  public static async getFilename(
+    url: string,
+    directUrl?: string
+  ): Promise<string> {
+    return extractHosterFilename(url, directUrl);
+  }
+}

src/main/services/hosters/gofile.ts

@@ -36,16 +36,13 @@ export class GofileApi {
   }
 
   public static async getDownloadLink(id: string) {
-    const searchParams = new URLSearchParams({
-      wt: WT,
-    });
-
     const response = await axios.get<{
       status: string;
       data: GofileContentsResponse;
-    }>(`https://api.gofile.io/contents/${id}?${searchParams.toString()}`, {
+    }>(`https://api.gofile.io/contents/${id}`, {
       headers: {
         Authorization: `Bearer ${this.token}`,
+        "X-Website-Token": WT,
       },
     });
 

src/main/services/hosters/index.ts

@@ -3,3 +3,5 @@ export * from "./qiwi";
 export * from "./datanodes";
 export * from "./mediafire";
 export * from "./pixeldrain";
+export * from "./buzzheavier";
+export * from "./fuckingfast";

src/main/services/hydra-api.ts

@@ -30,7 +30,7 @@ export class HydraApi {
   private static instance: AxiosInstance;
 
   private static readonly EXPIRATION_OFFSET_IN_MS = 1000 * 60 * 5; // 5 minutes
-  private static readonly ADD_LOG_INTERCEPTOR = false;
+  private static readonly ADD_LOG_INTERCEPTOR = true;
 
   private static secondsToMilliseconds(seconds: number) {
     return seconds * 1000;
@@ -58,7 +58,13 @@ export class HydraApi {
     const decodedBase64 = atob(payload as string);
     const jsonData = JSON.parse(decodedBase64);
 
-    const { accessToken, expiresIn, refreshToken } = jsonData;
+    const {
+      accessToken,
+      expiresIn,
+      refreshToken,
+      featurebaseJwt,
+      workwondersJwt,
+    } = jsonData;
 
     const now = new Date();
 
@@ -85,6 +91,8 @@ export class HydraApi {
         accessToken,
         refreshToken,
         tokenExpirationTimestamp,
+        featurebaseJwt,
+        workwondersJwt,
       },
       { valueEncoding: "json" }
     );

src/main/services/index.ts

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

src/main/services/node-7z.d.ts

@@ -0,0 +1,87 @@
+declare module "node-7z" {
+  import { ChildProcess } from "node:child_process";
+  import { EventEmitter } from "node:events";
+
+  export interface CommandLineSwitches {
+    $bin?: string;
+    $progress?: boolean;
+    $spawnOptions?: {
+      cwd?: string;
+    };
+    outputDir?: string;
+    yes?: boolean;
+    password?: string;
+    [key: string]: unknown;
+  }
+
+  export interface ProgressInfo {
+    percent: number;
+    fileCount?: number;
+  }
+
+  export interface FileInfo {
+    file?: string;
+    [key: string]: unknown;
+  }
+
+  export interface ZipStream extends EventEmitter {
+    on(event: "progress", listener: (progress: ProgressInfo) => void): this;
+    on(event: "data", listener: (data: FileInfo) => void): this;
+    on(event: "end", listener: () => void): this;
+    on(event: "error", listener: (err: Error) => void): this;
+    info: Map<string, unknown>;
+    _childProcess?: ChildProcess;
+  }
+
+  export function extractFull(
+    archive: string,
+    output: string,
+    options?: CommandLineSwitches
+  ): ZipStream;
+
+  export function extract(
+    archive: string,
+    output: string,
+    options?: CommandLineSwitches
+  ): ZipStream;
+
+  export function list(
+    archive: string,
+    options?: CommandLineSwitches
+  ): ZipStream;
+
+  export function add(
+    archive: string,
+    files: string | string[],
+    options?: CommandLineSwitches
+  ): ZipStream;
+
+  export function update(
+    archive: string,
+    files: string | string[],
+    options?: CommandLineSwitches
+  ): ZipStream;
+
+  export function deleteFiles(
+    archive: string,
+    files: string | string[],
+    options?: CommandLineSwitches
+  ): ZipStream;
+
+  export function test(
+    archive: string,
+    options?: CommandLineSwitches
+  ): ZipStream;
+
+  const Seven: {
+    extractFull: typeof extractFull;
+    extract: typeof extract;
+    list: typeof list;
+    add: typeof add;
+    update: typeof update;
+    delete: typeof deleteFiles;
+    test: typeof test;
+  };
+
+  export default Seven;
+}

src/main/services/notifications/index.ts

@@ -16,6 +16,7 @@ import { restartAndInstallUpdate } from "@main/events/autoupdater/restart-and-in
 import { SystemPath } from "../system-path";
 import { getThemeSoundPath } from "@main/helpers";
 import { processProfileImage } from "@main/events/profile/process-profile-image";
+import { LocalNotificationManager } from "./local-notifications";
 
 const getStaticImage = async (path: string) => {
   return processProfileImage(path, "jpg")
@@ -78,37 +79,59 @@ export const publishDownloadCompleteNotification = async (game: Game) => {
     }
   );
 
+  const title = t("download_complete", { ns: "notifications" });
+  const body = t("game_ready_to_install", {
+    ns: "notifications",
+    title: game.title,
+  });
+
   if (userPreferences?.downloadNotificationsEnabled) {
     new Notification({
-      title: t("download_complete", {
-        ns: "notifications",
-      }),
-      body: t("game_ready_to_install", {
-        ns: "notifications",
-        title: game.title,
-      }),
+      title,
+      body,
       icon: await downloadImage(game.iconUrl),
     }).show();
   }
+
+  // Create local notification
+  await LocalNotificationManager.createNotification(
+    "DOWNLOAD_COMPLETE",
+    title,
+    body,
+    {
+      pictureUrl: game.iconUrl,
+      url: `/game/${game.shop}/${game.objectId}`,
+    }
+  );
 };
 
 export const publishNotificationUpdateReadyToInstall = async (
   version: string
 ) => {
+  const title = t("new_update_available", {
+    ns: "notifications",
+    version,
+  });
+  const body = t("restart_to_install_update", {
+    ns: "notifications",
+  });
+
   new Notification({
-    title: t("new_update_available", {
-      ns: "notifications",
-      version,
-    }),
-    body: t("restart_to_install_update", {
-      ns: "notifications",
-    }),
+    title,
+    body,
     icon: trayIcon,
   })
     .on("click", () => {
       restartAndInstallUpdate();
     })
     .show();
+
+  // Create local notification
+  await LocalNotificationManager.createNotification(
+    "UPDATE_AVAILABLE",
+    title,
+    body
+  );
 };
 
 export const publishNewFriendRequestNotification = async (
@@ -181,14 +204,27 @@ export const publishCombinedNewAchievementNotification = async (
 };
 
 export const publishExtractionCompleteNotification = async (game: Game) => {
+  const title = t("extraction_complete", { ns: "notifications" });
+  const body = t("game_extracted", {
+    ns: "notifications",
+    title: game.title,
+  });
+
   new Notification({
-    title: t("extraction_complete", { ns: "notifications" }),
-    body: t("game_extracted", {
-      ns: "notifications",
-      title: game.title,
-    }),
+    title,
+    body,
     icon: trayIcon,
   }).show();
+
+  // Create local notification
+  await LocalNotificationManager.createNotification(
+    "EXTRACTION_COMPLETE",
+    title,
+    body,
+    {
+      url: `/game/${game.shop}/${game.objectId}`,
+    }
+  );
 };
 
 export const publishNewAchievementNotification = async (info: {

src/main/services/notifications/local-notifications.ts

@@ -0,0 +1,99 @@
+import { localNotificationsSublevel } from "@main/level";
+import { WindowManager } from "../window-manager";
+import type { LocalNotification, LocalNotificationType } from "@types";
+import crypto from "node:crypto";
+
+export class LocalNotificationManager {
+  private static generateId(): string {
+    return crypto.randomBytes(8).toString("hex");
+  }
+
+  static async createNotification(
+    type: LocalNotificationType,
+    title: string,
+    description: string,
+    options?: {
+      pictureUrl?: string | null;
+      url?: string | null;
+    }
+  ): Promise<LocalNotification> {
+    const id = this.generateId();
+    const notification: LocalNotification = {
+      id,
+      type,
+      title,
+      description,
+      pictureUrl: options?.pictureUrl ?? null,
+      url: options?.url ?? null,
+      isRead: false,
+      createdAt: new Date().toISOString(),
+    };
+
+    await localNotificationsSublevel.put(id, notification);
+
+    // Notify renderer about new notification
+    if (WindowManager.mainWindow) {
+      WindowManager.mainWindow.webContents.send(
+        "on-local-notification-created",
+        notification
+      );
+    }
+
+    return notification;
+  }
+
+  static async getNotifications(): Promise<LocalNotification[]> {
+    const notifications: LocalNotification[] = [];
+
+    for await (const [, value] of localNotificationsSublevel.iterator()) {
+      notifications.push(value);
+    }
+
+    // Sort by createdAt descending
+    return notifications.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  }
+
+  static async getUnreadCount(): Promise<number> {
+    let count = 0;
+
+    for await (const [, value] of localNotificationsSublevel.iterator()) {
+      if (!value.isRead) {
+        count++;
+      }
+    }
+
+    return count;
+  }
+
+  static async markAsRead(id: string): Promise<void> {
+    const notification = await localNotificationsSublevel.get(id);
+    if (notification) {
+      notification.isRead = true;
+      await localNotificationsSublevel.put(id, notification);
+    }
+  }
+
+  static async markAllAsRead(): Promise<void> {
+    const batch = localNotificationsSublevel.batch();
+
+    for await (const [key, value] of localNotificationsSublevel.iterator()) {
+      if (!value.isRead) {
+        value.isRead = true;
+        batch.put(key, value);
+      }
+    }
+
+    await batch.write();
+  }
+
+  static async deleteNotification(id: string): Promise<void> {
+    await localNotificationsSublevel.del(id);
+  }
+
+  static async clearAll(): Promise<void> {
+    await localNotificationsSublevel.clear();
+  }
+}

src/main/services/window-manager.ts

@@ -36,9 +36,9 @@ export class WindowManager {
   private static initialConfigInitializationMainWindow: Electron.BrowserWindowConstructorOptions =
     {
       width: 1200,
-      height: 720,
+      height: 860,
       minWidth: 1024,
-      minHeight: 540,
+      minHeight: 860,
       backgroundColor: "#1c1c1c",
       titleBarStyle: process.platform === "linux" ? "default" : "hidden",
       icon,
@@ -106,7 +106,7 @@ export class WindowManager {
         valueEncoding: "json",
       }
     );
-    return data ?? { isMaximized: false, height: 720, width: 1200 };
+    return data ?? { isMaximized: false, height: 860, width: 1200 };
   }
 
   private static updateInitialConfig(
@@ -138,7 +138,8 @@ export class WindowManager {
       (details, callback) => {
         if (
           details.webContentsId !== this.mainWindow?.webContents.id ||
-          details.url.includes("chatwoot")
+          details.url.includes("chatwoot") ||
+          details.url.includes("workwonders")
         ) {
           return callback(details);
         }
@@ -159,7 +160,8 @@ export class WindowManager {
         if (
           details.webContentsId !== this.mainWindow?.webContents.id ||
           details.url.includes("featurebase") ||
-          details.url.includes("chatwoot")
+          details.url.includes("chatwoot") ||
+          details.url.includes("workwonders")
         ) {
           return callback(details);
         }
@@ -222,7 +224,7 @@ export class WindowManager {
           ? {
               x: undefined,
               y: undefined,
-              height: this.initialConfigInitializationMainWindow.height ?? 720,
+              height: this.initialConfigInitializationMainWindow.height ?? 860,
               width: this.initialConfigInitializationMainWindow.width ?? 1200,
               isMaximized: true,
             }

src/main/services/ws/events/notification.ts

@@ -0,0 +1,8 @@
+import type { Notification } from "@main/generated/envelope";
+import { WindowManager } from "@main/services/window-manager";
+
+export const notificationEvent = (payload: Notification) => {
+  WindowManager.mainWindow?.webContents.send("on-sync-notification-count", {
+    notificationCount: payload.notificationCount,
+  });
+};

src/main/services/ws/ws-client.ts

@@ -4,6 +4,7 @@ import { Envelope } from "@main/generated/envelope";
 import { logger } from "../logger";
 import { friendRequestEvent } from "./events/friend-request";
 import { friendGameSessionEvent } from "./events/friend-game-session";
+import { notificationEvent } from "./events/notification";
 
 export class WSClient {
   private static ws: WebSocket | null = null;
@@ -51,6 +52,10 @@ export class WSClient {
         if (envelope.payload.oneofKind === "friendGameSession") {
           friendGameSessionEvent(envelope.payload.friendGameSession);
         }
+
+        if (envelope.payload.oneofKind === "notification") {
+          notificationEvent(envelope.payload.notification);
+        }
       });
 
       this.ws.on("close", () => this.handleDisconnect("close"));

src/preload/index.ts

@@ -15,6 +15,7 @@ import type {
   GameAchievement,
   Theme,
   FriendRequestSync,
+  NotificationSync,
   ShortcutLocation,
   AchievementCustomNotificationPosition,
   AchievementNotificationInfo,
@@ -267,6 +268,29 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.on("on-extraction-complete", listener);
     return () => ipcRenderer.removeListener("on-extraction-complete", listener);
   },
+  onExtractionProgress: (
+    cb: (shop: GameShop, objectId: string, progress: number) => void
+  ) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      shop: GameShop,
+      objectId: string,
+      progress: number
+    ) => cb(shop, objectId, progress);
+    ipcRenderer.on("on-extraction-progress", listener);
+    return () => ipcRenderer.removeListener("on-extraction-progress", listener);
+  },
+  onArchiveDeletionPrompt: (cb: (archivePaths: string[]) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      archivePaths: string[]
+    ) => cb(archivePaths);
+    ipcRenderer.on("on-archive-deletion-prompt", listener);
+    return () =>
+      ipcRenderer.removeListener("on-archive-deletion-prompt", listener);
+  },
+  deleteArchive: (filePath: string) =>
+    ipcRenderer.invoke("deleteArchive", filePath),
 
   /* Hardware */
   getDiskFreeSpace: (path: string) =>
@@ -474,7 +498,6 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("updateProfile", updateProfile),
   processProfileImage: (imagePath: string) =>
     ipcRenderer.invoke("processProfileImage", imagePath),
-  syncFriendRequests: () => ipcRenderer.invoke("syncFriendRequests"),
   onSyncFriendRequests: (cb: (friendRequests: FriendRequestSync) => void) => {
     const listener = (
       _event: Electron.IpcRendererEvent,
@@ -484,6 +507,15 @@ contextBridge.exposeInMainWorld("electron", {
     return () =>
       ipcRenderer.removeListener("on-sync-friend-requests", listener);
   },
+  onSyncNotificationCount: (cb: (notification: NotificationSync) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      notification: NotificationSync
+    ) => cb(notification);
+    ipcRenderer.on("on-sync-notification-count", listener);
+    return () =>
+      ipcRenderer.removeListener("on-sync-notification-count", listener);
+  },
   updateFriendRequest: (userId: string, action: FriendRequestAction) =>
     ipcRenderer.invoke("updateFriendRequest", userId, action),
 
@@ -527,6 +559,26 @@ contextBridge.exposeInMainWorld("electron", {
   /* Notifications */
   publishNewRepacksNotification: (newRepacksCount: number) =>
     ipcRenderer.invoke("publishNewRepacksNotification", newRepacksCount),
+  getLocalNotifications: () => ipcRenderer.invoke("getLocalNotifications"),
+  getLocalNotificationsCount: () =>
+    ipcRenderer.invoke("getLocalNotificationsCount"),
+  markLocalNotificationRead: (id: string) =>
+    ipcRenderer.invoke("markLocalNotificationRead", id),
+  markAllLocalNotificationsRead: () =>
+    ipcRenderer.invoke("markAllLocalNotificationsRead"),
+  deleteLocalNotification: (id: string) =>
+    ipcRenderer.invoke("deleteLocalNotification", id),
+  clearAllLocalNotifications: () =>
+    ipcRenderer.invoke("clearAllLocalNotifications"),
+  onLocalNotificationCreated: (cb: (notification: unknown) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      notification: unknown
+    ) => cb(notification);
+    ipcRenderer.on("on-local-notification-created", listener);
+    return () =>
+      ipcRenderer.removeListener("on-local-notification-created", listener);
+  },
   onAchievementUnlocked: (
     cb: (
       position?: AchievementCustomNotificationPosition,

src/renderer/src/app.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";
 
 import {
@@ -19,11 +19,13 @@ import {
   setUserDetails,
   setProfileBackground,
   setGameRunning,
+  setExtractionProgress,
+  clearExtraction,
 } from "@renderer/features";
 import { useTranslation } from "react-i18next";
-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 { ArchiveDeletionModal } from "./pages/downloads/archive-deletion-error-modal";
 
 import {
   injectCustomCss,
@@ -51,12 +53,7 @@ export function App() {
   const { clearDownload, setLastPacket } = useDownload();
 
   const {
-    userDetails,
     hasActiveSubscription,
-    isFriendsModalVisible,
-    friendRequetsModalTab,
-    friendModalUserId,
-    hideFriendsModal,
     fetchUserDetails,
     updateUserDetails,
     clearUserDetails,
@@ -78,6 +75,10 @@ export function App() {
 
   const { showSuccessToast } = useToast();
 
+  const [showArchiveDeletionModal, setShowArchiveDeletionModal] =
+    useState(false);
+  const [archivePaths, setArchivePaths] = useState<string[]>([]);
+
   useEffect(() => {
     Promise.all([
       levelDBService.get("userPreferences", null, "json"),
@@ -128,7 +129,6 @@ export function App() {
       .then((response) => {
         if (response) {
           updateUserDetails(response);
-          window.electron.syncFriendRequests();
         }
       })
       .finally(() => {
@@ -145,7 +145,6 @@ export function App() {
     fetchUserDetails().then((response) => {
       if (response) {
         updateUserDetails(response);
-        window.electron.syncFriendRequests();
         showSuccessToast(t("successfully_signed_in"));
       }
     });
@@ -184,12 +183,23 @@ export function App() {
         updateLibrary();
       }),
       window.electron.onSignOut(() => clearUserDetails()),
+      window.electron.onExtractionProgress((shop, objectId, progress) => {
+        dispatch(setExtractionProgress({ shop, objectId, progress }));
+      }),
+      window.electron.onExtractionComplete(() => {
+        dispatch(clearExtraction());
+        updateLibrary();
+      }),
+      window.electron.onArchiveDeletionPrompt((paths) => {
+        setArchivePaths(paths);
+        setShowArchiveDeletionModal(true);
+      }),
     ];
 
     return () => {
       listeners.forEach((unsubscribe) => unsubscribe());
     };
-  }, [onSignIn, updateLibrary, clearUserDetails]);
+  }, [onSignIn, updateLibrary, clearUserDetails, dispatch]);
 
   useEffect(() => {
     if (contentRef.current) contentRef.current.scrollTop = 0;
@@ -281,14 +291,11 @@ export function App() {
         feature={hydraCloudFeature}
       />
 
-      {userDetails && (
-        <UserFriendModal
-          visible={isFriendsModalVisible}
-          initialTab={friendRequetsModalTab}
-          onClose={hideFriendsModal}
-          userId={friendModalUserId}
-        />
-      )}
+      <ArchiveDeletionModal
+        visible={showArchiveDeletionModal}
+        archivePaths={archivePaths}
+        onClose={() => setShowArchiveDeletionModal(false)}
+      />
 
       <main>
         <Sidebar />

src/renderer/src/components/bottom-panel/bottom-panel.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import {
+  useAppSelector,
   useDownload,
   useLibrary,
   useToast,
@@ -26,6 +27,8 @@ export function BottomPanel() {
 
   const { lastPacket, progress, downloadSpeed, eta } = useDownload();
 
+  const extraction = useAppSelector((state) => state.download.extraction);
+
   const [version, setVersion] = useState("");
   const [sessionHash, setSessionHash] = useState<null | string>("");
   const [commonRedistStatus, setCommonRedistStatus] = useState<string | null>(
@@ -68,6 +71,20 @@ export function BottomPanel() {
       return t("installing_common_redist", { log: commonRedistStatus });
     }
 
+    if (extraction) {
+      const extractingGame = library.find(
+        (game) => game.id === extraction.visibleId
+      );
+
+      if (extractingGame) {
+        const extractionPercentage = Math.round(extraction.progress * 100);
+        return t("extracting", {
+          title: extractingGame.title,
+          percentage: `${extractionPercentage}%`,
+        });
+      }
+    }
+
     const game = lastPacket
       ? library.find((game) => game.id === lastPacket?.gameId)
       : undefined;
@@ -109,6 +126,7 @@ export function BottomPanel() {
     eta,
     downloadSpeed,
     commonRedistStatus,
+    extraction,
   ]);
 
   return (
@@ -122,10 +140,10 @@ export function BottomPanel() {
       </button>
 
       <button
-        data-featurebase-changelog
+        data-open-workwonders-changelog-mini
         className="bottom-panel__version-button"
       >
-        <small data-featurebase-changelog>
+        <small>
           {sessionHash ? `${sessionHash} -` : ""} v{version} &quot;
           {VERSION_CODENAME}&quot;
         </small>

src/renderer/src/components/dropdown-menu/dropdown-menu.tsx

@@ -18,6 +18,7 @@ interface DropdownMenuProps {
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
   alignOffset?: number;
+  collisionPadding?: number;
 }
 
 export function DropdownMenu({
@@ -29,6 +30,7 @@ export function DropdownMenu({
   loop = true,
   align = "center",
   alignOffset = 0,
+  collisionPadding = 16,
 }: Readonly<DropdownMenuProps>) {
   return (
     <DropdownMenuPrimitive.Root>
@@ -43,6 +45,7 @@ export function DropdownMenu({
           loop={loop}
           align={align}
           alignOffset={alignOffset}
+          collisionPadding={collisionPadding}
           className="dropdown-menu__content"
         >
           {title && (

src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss

@@ -0,0 +1,82 @@
+@use "../../scss/globals.scss";
+
+.fullscreen-media-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(2px);
+  z-index: globals.$backdrop-z-index;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.fullscreen-media-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  max-width: none;
+  max-height: none;
+
+  &__close-button {
+    position: absolute;
+    top: calc(globals.$spacing-unit * 5);
+    right: calc(globals.$spacing-unit * 4);
+    cursor: pointer;
+    color: globals.$body-color;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    border: 1px solid globals.$border-color;
+    padding: globals.$spacing-unit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease 0.2s;
+    z-index: 10;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+      transform: scale(1.1);
+    }
+  }
+
+  &__image-container {
+    max-width: 90%;
+    max-height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__image {
+    max-width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    animation: image-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  }
+}
+
+@keyframes image-appear {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { XIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+
+import "./fullscreen-media-modal.scss";
+
+export interface FullscreenMediaModalProps {
+  visible: boolean;
+  onClose: () => void;
+  src: string | null | undefined;
+  alt?: string;
+}
+
+export function FullscreenMediaModal({
+  visible,
+  onClose,
+  src,
+  alt,
+}: FullscreenMediaModalProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation("modal");
+
+  useEffect(() => {
+    if (visible) {
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          onClose();
+        }
+      };
+
+      window.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        window.removeEventListener("keydown", onKeyDown);
+      };
+    }
+
+    return () => {};
+  }, [onClose, visible]);
+
+  useEffect(() => {
+    const onMouseDown = (e: MouseEvent) => {
+      if (containerRef.current) {
+        const clickedOnImage = containerRef.current.contains(e.target as Node);
+
+        if (!clickedOnImage) {
+          onClose();
+        }
+      }
+    };
+
+    if (visible) {
+      window.addEventListener("mousedown", onMouseDown);
+    }
+
+    return () => {
+      window.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [onClose, visible]);
+
+  if (!visible || !src) return null;
+
+  return createPortal(
+    <div className="fullscreen-media-modal__overlay">
+      <dialog className="fullscreen-media-modal" open aria-label={alt}>
+        <button
+          type="button"
+          onClick={onClose}
+          className="fullscreen-media-modal__close-button"
+          aria-label={t("close")}
+        >
+          <XIcon size={24} />
+        </button>
+
+        <div
+          ref={containerRef}
+          className="fullscreen-media-modal__image-container"
+        >
+          <img src={src} alt={alt} className="fullscreen-media-modal__image" />
+        </div>
+      </dialog>
+    </div>,
+    document.body
+  );
+}

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

@@ -82,6 +82,7 @@ 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("/notifications")) return headerTitle;
     if (location.pathname.startsWith("/library"))
       return headerTitle || t("library");
     if (location.pathname.startsWith("/search")) return t("search_results");
@@ -323,7 +324,8 @@ export function Header() {
       <SearchDropdown
         visible={
           isDropdownVisible &&
-          (historyItems.length > 0 ||
+          (searchValue.trim().length > 0 ||
+            historyItems.length > 0 ||
             suggestions.length > 0 ||
             isLoadingSuggestions)
         }

src/renderer/src/components/index.ts

@@ -20,3 +20,4 @@ export * from "./game-context-menu/game-context-menu";
 export * from "./game-context-menu/use-game-actions";
 export * from "./star-rating/star-rating";
 export * from "./search-dropdown/search-dropdown";
+export * from "./fullscreen-media-modal/fullscreen-media-modal";

src/renderer/src/components/modal/modal.tsx

@@ -10,7 +10,7 @@ import cn from "classnames";
 
 export interface ModalProps {
   visible: boolean;
-  title: string;
+  title: React.ReactNode;
   description?: string;
   onClose: () => void;
   large?: boolean;
@@ -115,7 +115,6 @@ export function Modal({
           "modal--large": large,
         })}
         role="dialog"
-        aria-labelledby={title}
         aria-describedby={description}
         ref={modalContentRef}
         data-hydra-dialog

src/renderer/src/components/search-dropdown/search-dropdown.scss

@@ -5,7 +5,7 @@
   background-color: globals.$dark-background-color;
   border: 1px solid globals.$border-color;
   border-radius: 8px;
-  max-height: 300px;
+  max-height: 350px;
   overflow-y: auto;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 1000;

src/renderer/src/components/search-dropdown/search-dropdown.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ClockIcon, SearchIcon, XIcon } from "@primer/octicons-react";
 import cn from "classnames";
@@ -92,23 +92,8 @@ export function SearchDropdown({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [visible, onClose, searchContainerRef]);
 
-  const handleItemClick = useCallback(
-    (
-      type: "history" | "suggestion",
-      item: SearchHistoryEntry | SearchSuggestion
-    ) => {
-      if (type === "history") {
-        onSelectHistory((item as SearchHistoryEntry).query);
-      } else {
-        onSelectSuggestion(item as SearchSuggestion);
-      }
-    },
-    [onSelectHistory, onSelectSuggestion]
-  );
-
   if (!visible) return null;
 
-  const totalItems = historyItems.length + suggestions.length;
   const hasHistory = historyItems.length > 0;
   const hasSuggestions = suggestions.length > 0;
 
@@ -158,7 +143,7 @@ export function SearchDropdown({
                       activeIndex === getItemIndex("history", index),
                   })}
                   onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => handleItemClick("history", item)}
+                  onClick={() => onSelectHistory(item.query)}
                 >
                   <ClockIcon size={16} className="search-dropdown__item-icon" />
                   <span className="search-dropdown__item-text">
@@ -200,7 +185,7 @@ export function SearchDropdown({
                       activeIndex === getItemIndex("suggestion", index),
                   })}
                   onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => handleItemClick("suggestion", item)}
+                  onClick={() => onSelectSuggestion(item)}
                 >
                   {item.iconUrl ? (
                     <img
@@ -227,13 +212,6 @@ export function SearchDropdown({
       {isLoadingSuggestions && !hasSuggestions && !hasHistory && (
         <div className="search-dropdown__loading">{t("loading")}</div>
       )}
-
-      {!isLoadingSuggestions &&
-        !hasHistory &&
-        !hasSuggestions &&
-        totalItems === 0 && (
-          <div className="search-dropdown__empty">{t("no_results")}</div>
-        )}
     </div>
   );
 

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

@@ -5,6 +5,7 @@ import cn from "classnames";
 import { useLocation } from "react-router-dom";
 import { useState } from "react";
 import { GameContextMenu } from "..";
+import { useAppSelector } from "@renderer/hooks";
 
 interface SidebarGameItemProps {
   game: LibraryGame;
@@ -18,6 +19,9 @@ export function SidebarGameItem({
   getGameTitle,
 }: Readonly<SidebarGameItemProps>) {
   const location = useLocation();
+  const userPreferences = useAppSelector(
+    (state) => state.userPreferences.value
+  );
   const [contextMenu, setContextMenu] = useState<{
     visible: boolean;
     position: { x: number; y: number };
@@ -81,11 +85,12 @@ export function SidebarGameItem({
             {getGameTitle(game)}
           </span>
 
-          {(game.newDownloadOptionsCount ?? 0) > 0 && (
-            <span className="sidebar__game-badge">
-              +{game.newDownloadOptionsCount}
-            </span>
-          )}
+          {userPreferences?.enableNewDownloadOptionsBadges !== false &&
+            (game.newDownloadOptionsCount ?? 0) > 0 && (
+              <span className="sidebar__game-badge">
+                +{game.newDownloadOptionsCount}
+              </span>
+            )}
         </button>
       </li>
 

src/renderer/src/components/sidebar/sidebar-profile.scss

@@ -46,7 +46,7 @@
     white-space: nowrap;
   }
 
-  &__friends-button {
+  &__notification-button {
     color: globals.$muted-color;
     cursor: pointer;
     border-radius: 50%;
@@ -62,7 +62,7 @@
     }
   }
 
-  &__friends-button-badge {
+  &__notification-button-badge {
     background-color: globals.$success-color;
     display: flex;
     justify-content: center;
@@ -73,6 +73,8 @@
     position: absolute;
     top: -5px;
     right: -5px;
+    font-size: 10px;
+    font-weight: bold;
   }
 
   &__game-running-icon {

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -1,12 +1,13 @@
 import { useNavigate } from "react-router-dom";
-import { PeopleIcon } from "@primer/octicons-react";
+import { BellIcon } from "@primer/octicons-react";
 import { useAppSelector, useUserDetails } from "@renderer/hooks";
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar } from "../avatar/avatar";
 import { AuthPage } from "@shared";
+import { logger } from "@renderer/logger";
+import type { NotificationCountResponse } from "@types";
 import "./sidebar-profile.scss";
 
 export function SidebarProfile() {
@@ -14,11 +15,75 @@ export function SidebarProfile() {
 
   const { t } = useTranslation("sidebar");
 
-  const { userDetails, friendRequestCount, showFriendsModal } =
-    useUserDetails();
+  const { userDetails } = useUserDetails();
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
+  const [notificationCount, setNotificationCount] = useState(0);
+
+  const fetchNotificationCount = useCallback(async () => {
+    try {
+      // Always fetch local notification count
+      const localCount = await window.electron.getLocalNotificationsCount();
+
+      // Fetch API notification count only if logged in
+      let apiCount = 0;
+      if (userDetails) {
+        try {
+          const response =
+            await window.electron.hydraApi.get<NotificationCountResponse>(
+              "/profile/notifications/count",
+              { needsAuth: true }
+            );
+          apiCount = response.count;
+        } catch {
+          // Ignore API errors
+        }
+      }
+
+      setNotificationCount(localCount + apiCount);
+    } catch (error) {
+      logger.error("Failed to fetch notification count", error);
+    }
+  }, [userDetails]);
+
+  useEffect(() => {
+    fetchNotificationCount();
+
+    const interval = setInterval(fetchNotificationCount, 60000);
+    return () => clearInterval(interval);
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onLocalNotificationCreated(() => {
+      fetchNotificationCount();
+    });
+
+    return () => unsubscribe();
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const handleNotificationsChange = () => {
+      fetchNotificationCount();
+    };
+
+    window.addEventListener("notificationsChanged", handleNotificationsChange);
+    return () => {
+      window.removeEventListener(
+        "notificationsChanged",
+        handleNotificationsChange
+      );
+    };
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onSyncNotificationCount(() => {
+      fetchNotificationCount();
+    });
+
+    return () => unsubscribe();
+  }, [fetchNotificationCount]);
+
   const handleProfileClick = () => {
     if (userDetails === null) {
       window.electron.openAuthWindow(AuthPage.SignIn);
@@ -28,28 +93,24 @@ export function SidebarProfile() {
     navigate(`/profile/${userDetails.id}`);
   };
 
-  const friendsButton = useMemo(() => {
-    if (!userDetails) return null;
-
+  const notificationsButton = useMemo(() => {
     return (
       <button
         type="button"
-        className="sidebar-profile__friends-button"
-        onClick={() =>
-          showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
-        }
-        title={t("friends")}
+        className="sidebar-profile__notification-button"
+        onClick={() => navigate("/notifications")}
+        title={t("notifications")}
       >
-        {friendRequestCount > 0 && (
-          <small className="sidebar-profile__friends-button-badge">
-            {friendRequestCount > 99 ? "99+" : friendRequestCount}
+        {notificationCount > 0 && (
+          <small className="sidebar-profile__notification-button-badge">
+            {notificationCount > 99 ? "99+" : notificationCount}
           </small>
         )}
 
-        <PeopleIcon size={16} />
+        <BellIcon size={16} />
       </button>
     );
-  }, [userDetails, t, friendRequestCount, showFriendsModal]);
+  }, [t, notificationCount, navigate]);
 
   const gameRunningDetails = () => {
     if (!userDetails || !gameRunning) return null;
@@ -98,7 +159,7 @@ export function SidebarProfile() {
         </div>
       </button>
 
-      {friendsButton}
+      {notificationsButton}
     </div>
   );
 }

src/renderer/src/constants.ts

@@ -10,6 +10,8 @@ export const DOWNLOADER_NAME = {
   [Downloader.Qiwi]: "Qiwi",
   [Downloader.Datanodes]: "Datanodes",
   [Downloader.Mediafire]: "Mediafire",
+  [Downloader.Buzzheavier]: "Buzzheavier",
+  [Downloader.FuckingFast]: "FuckingFast",
   [Downloader.TorBox]: "TorBox",
   [Downloader.Hydra]: "Nimbus",
 };

src/renderer/src/declaration.d.ts

@@ -14,6 +14,7 @@ import type {
   GameStats,
   UserDetails,
   FriendRequestSync,
+  NotificationSync,
   GameArtifact,
   LudusaviBackup,
   UserAchievement,
@@ -31,6 +32,7 @@ import type {
   Game,
   DiskUsage,
   DownloadSource,
+  LocalNotification,
 } from "@types";
 import type { AxiosProgressEvent } from "axios";
 
@@ -208,6 +210,13 @@ declare global {
     onExtractionComplete: (
       cb: (shop: GameShop, objectId: string) => void
     ) => () => Electron.IpcRenderer;
+    onExtractionProgress: (
+      cb: (shop: GameShop, objectId: string, progress: number) => void
+    ) => () => Electron.IpcRenderer;
+    onArchiveDeletionPrompt: (
+      cb: (archivePaths: string[]) => void
+    ) => () => Electron.IpcRenderer;
+    deleteArchive: (filePath: string) => Promise<boolean>;
     getDefaultWinePrefixSelectionPath: () => Promise<string | null>;
     createSteamShortcut: (shop: GameShop, objectId: string) => Promise<void>;
 
@@ -380,10 +389,12 @@ declare global {
     processProfileImage: (
       path: string
     ) => Promise<{ imagePath: string; mimeType: string }>;
-    syncFriendRequests: () => Promise<void>;
     onSyncFriendRequests: (
       cb: (friendRequests: FriendRequestSync) => void
     ) => () => Electron.IpcRenderer;
+    onSyncNotificationCount: (
+      cb: (notification: NotificationSync) => void
+    ) => () => Electron.IpcRenderer;
     updateFriendRequest: (
       userId: string,
       action: FriendRequestAction
@@ -391,6 +402,15 @@ declare global {
 
     /* Notifications */
     publishNewRepacksNotification: (newRepacksCount: number) => Promise<void>;
+    getLocalNotifications: () => Promise<LocalNotification[]>;
+    getLocalNotificationsCount: () => Promise<number>;
+    markLocalNotificationRead: (id: string) => Promise<void>;
+    markAllLocalNotificationsRead: () => Promise<void>;
+    deleteLocalNotification: (id: string) => Promise<void>;
+    clearAllLocalNotifications: () => Promise<void>;
+    onLocalNotificationCreated: (
+      cb: (notification: LocalNotification) => void
+    ) => () => Electron.IpcRenderer;
     onAchievementUnlocked: (
       cb: (
         position?: AchievementCustomNotificationPosition,

src/renderer/src/features/download-slice.ts

@@ -1,17 +1,28 @@
 import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
-import type { DownloadProgress } from "@types";
+import type { DownloadProgress, GameShop } from "@types";
+
+export interface ExtractionInfo {
+  visibleId: string;
+  progress: number;
+}
 
 export interface DownloadState {
   lastPacket: DownloadProgress | null;
   gameId: string | null;
   gamesWithDeletionInProgress: string[];
+  extraction: ExtractionInfo | null;
+  peakSpeeds: Record<string, number>;
+  speedHistory: Record<string, number[]>;
 }
 
 const initialState: DownloadState = {
   lastPacket: null,
   gameId: null,
   gamesWithDeletionInProgress: [],
+  extraction: null,
+  peakSpeeds: {},
+  speedHistory: {},
 };
 
 export const downloadSlice = createSlice({
@@ -21,6 +32,27 @@ export const downloadSlice = createSlice({
     setLastPacket: (state, action: PayloadAction<DownloadProgress | null>) => {
       state.lastPacket = action.payload;
       if (!state.gameId && action.payload) state.gameId = action.payload.gameId;
+
+      // Track peak speed and speed history atomically when packet arrives
+      if (action.payload?.gameId && action.payload.downloadSpeed != null) {
+        const { gameId, downloadSpeed } = action.payload;
+
+        // Update peak speed if this is higher
+        const currentPeak = state.peakSpeeds[gameId] || 0;
+        if (downloadSpeed > currentPeak) {
+          state.peakSpeeds[gameId] = downloadSpeed;
+        }
+
+        // Update speed history for chart
+        if (!state.speedHistory[gameId]) {
+          state.speedHistory[gameId] = [];
+        }
+        state.speedHistory[gameId].push(downloadSpeed);
+        // Keep only last 120 entries
+        if (state.speedHistory[gameId].length > 120) {
+          state.speedHistory[gameId].shift();
+        }
+      }
     },
     clearDownload: (state) => {
       state.lastPacket = null;
@@ -38,6 +70,37 @@ export const downloadSlice = createSlice({
       const index = state.gamesWithDeletionInProgress.indexOf(action.payload);
       if (index >= 0) state.gamesWithDeletionInProgress.splice(index, 1);
     },
+    setExtractionProgress: (
+      state,
+      action: PayloadAction<{
+        shop: GameShop;
+        objectId: string;
+        progress: number;
+      }>
+    ) => {
+      const { shop, objectId, progress } = action.payload;
+      state.extraction = {
+        visibleId: `${shop}:${objectId}`,
+        progress,
+      };
+    },
+    clearExtraction: (state) => {
+      state.extraction = null;
+    },
+    updatePeakSpeed: (
+      state,
+      action: PayloadAction<{ gameId: string; speed: number }>
+    ) => {
+      const { gameId, speed } = action.payload;
+      const currentPeak = state.peakSpeeds[gameId] || 0;
+      if (speed > currentPeak) {
+        state.peakSpeeds[gameId] = speed;
+      }
+    },
+    clearPeakSpeed: (state, action: PayloadAction<string>) => {
+      state.peakSpeeds[action.payload] = 0;
+      state.speedHistory[action.payload] = [];
+    },
   },
 });
 
@@ -46,4 +109,8 @@ export const {
   clearDownload,
   setGameDeleting,
   removeGameFromDeleting,
+  setExtractionProgress,
+  clearExtraction,
+  updatePeakSpeed,
+  clearPeakSpeed,
 } = downloadSlice.actions;

src/renderer/src/features/user-details-slice.ts

@@ -1,5 +1,4 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import type { FriendRequest, UserDetails } from "@types";
 
 export interface UserDetailsState {
@@ -7,9 +6,6 @@ export interface UserDetailsState {
   profileBackground: null | string;
   friendRequests: FriendRequest[];
   friendRequestCount: number;
-  isFriendsModalVisible: boolean;
-  friendRequetsModalTab: UserFriendModalTab | null;
-  friendModalUserId: string;
 }
 
 const initialState: UserDetailsState = {
@@ -17,9 +13,6 @@ const initialState: UserDetailsState = {
   profileBackground: null,
   friendRequests: [],
   friendRequestCount: 0,
-  isFriendsModalVisible: false,
-  friendRequetsModalTab: null,
-  friendModalUserId: "",
 };
 
 export const userDetailsSlice = createSlice({
@@ -38,18 +31,6 @@ export const userDetailsSlice = createSlice({
     setFriendRequestCount: (state, action: PayloadAction<number>) => {
       state.friendRequestCount = action.payload;
     },
-    setFriendsModalVisible: (
-      state,
-      action: PayloadAction<{ initialTab: UserFriendModalTab; userId: string }>
-    ) => {
-      state.isFriendsModalVisible = true;
-      state.friendRequetsModalTab = action.payload.initialTab;
-      state.friendModalUserId = action.payload.userId;
-    },
-    setFriendsModalHidden: (state) => {
-      state.isFriendsModalVisible = false;
-      state.friendRequetsModalTab = null;
-    },
   },
 });
 
@@ -58,6 +39,4 @@ export const {
   setProfileBackground,
   setFriendRequests,
   setFriendRequestCount,
-  setFriendsModalVisible,
-  setFriendsModalHidden,
 } = userDetailsSlice.actions;

src/renderer/src/hooks/use-user-details.ts

@@ -4,8 +4,6 @@ import {
   setProfileBackground,
   setUserDetails,
   setFriendRequests,
-  setFriendsModalVisible,
-  setFriendsModalHidden,
 } from "@renderer/features";
 import type {
   FriendRequestAction,
@@ -13,20 +11,12 @@ import type {
   UserDetails,
   FriendRequest,
 } from "@types";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 
 export function useUserDetails() {
   const dispatch = useAppDispatch();
 
-  const {
-    userDetails,
-    profileBackground,
-    friendRequests,
-    friendRequestCount,
-    isFriendsModalVisible,
-    friendModalUserId,
-    friendRequetsModalTab,
-  } = useAppSelector((state) => state.userDetails);
+  const { userDetails, profileBackground, friendRequests, friendRequestCount } =
+    useAppSelector((state) => state.userDetails);
 
   const clearUserDetails = useCallback(async () => {
     dispatch(setUserDetails(null));
@@ -85,24 +75,11 @@ export function useUserDetails() {
     return window.electron.hydraApi
       .get<FriendRequest[]>("/profile/friend-requests")
       .then((friendRequests) => {
-        window.electron.syncFriendRequests();
         dispatch(setFriendRequests(friendRequests));
       })
       .catch(() => {});
   }, [dispatch]);
 
-  const showFriendsModal = useCallback(
-    (initialTab: UserFriendModalTab, userId: string) => {
-      dispatch(setFriendsModalVisible({ initialTab, userId }));
-      fetchFriendRequests();
-    },
-    [dispatch, fetchFriendRequests]
-  );
-
-  const hideFriendsModal = useCallback(() => {
-    dispatch(setFriendsModalHidden());
-  }, [dispatch]);
-
   const sendFriendRequest = useCallback(
     async (userId: string) => {
       return window.electron.hydraApi
@@ -152,12 +129,7 @@ export function useUserDetails() {
     profileBackground,
     friendRequests,
     friendRequestCount,
-    friendRequetsModalTab,
-    isFriendsModalVisible,
-    friendModalUserId,
     hasActiveSubscription,
-    showFriendsModal,
-    hideFriendsModal,
     fetchUserDetails,
     signOut,
     clearUserDetails,

src/renderer/src/main.tsx

@@ -31,6 +31,7 @@ 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 Notifications from "./pages/notifications/notifications";
 import { AchievementNotification } from "./pages/achievements/notification/achievement-notification";
 
 console.log = logger.log;
@@ -76,6 +77,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/settings" element={<Settings />} />
             <Route path="/profile/:userId" element={<Profile />} />
             <Route path="/achievements" element={<Achievements />} />
+            <Route path="/notifications" element={<Notifications />} />
           </Route>
 
           <Route path="/theme-editor" element={<ThemeEditor />} />

src/renderer/src/pages/downloads/archive-deletion-error-modal.tsx

@@ -0,0 +1,44 @@
+import { useTranslation } from "react-i18next";
+import { ConfirmationModal } from "@renderer/components";
+
+interface ArchiveDeletionModalProps {
+  visible: boolean;
+  archivePaths: string[];
+  onClose: () => void;
+}
+
+export function ArchiveDeletionModal({
+  visible,
+  archivePaths,
+  onClose,
+}: Readonly<ArchiveDeletionModalProps>) {
+  const { t } = useTranslation("downloads");
+
+  const fullFileName =
+    archivePaths.length > 0 ? (archivePaths[0].split(/[/\\]/).pop() ?? "") : "";
+
+  const maxLength = 40;
+  const fileName =
+    fullFileName.length > maxLength
+      ? `${fullFileName.slice(0, maxLength)}…`
+      : fullFileName;
+
+  const handleConfirm = async () => {
+    for (const archivePath of archivePaths) {
+      await window.electron.deleteArchive(archivePath);
+    }
+    onClose();
+  };
+
+  return (
+    <ConfirmationModal
+      visible={visible}
+      title={t("delete_archive_title", { fileName })}
+      descriptionText={t("delete_archive_description")}
+      confirmButtonLabel={t("yes")}
+      cancelButtonLabel={t("no")}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+    />
+  );
+}

src/renderer/src/pages/downloads/download-group.scss

@@ -18,17 +18,32 @@
   &__header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: calc(globals.$spacing-unit * 2);
+    gap: calc(globals.$spacing-unit);
 
-    &-divider {
+    &-title-group {
+      display: flex;
+      align-items: center;
+      gap: calc(globals.$spacing-unit);
       flex: 1;
-      background-color: globals.$border-color;
-      height: 1px;
+
+      h2 {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 700;
+        color: rgba(255, 255, 255, 0.95);
+      }
     }
 
     &-count {
-      font-weight: 400;
+      background-color: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.7);
+      padding: 4px 8px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 600;
+      min-width: 24px;
+      text-align: center;
+      flex-shrink: 0;
     }
   }
   &--hero {
@@ -37,7 +52,7 @@
     overflow: hidden;
     margin: 0;
     padding: 0;
-    padding-bottom: calc(globals.$spacing-unit * 3);
+    padding-bottom: globals.$spacing-unit;
   }
 
   &__hero-background {
@@ -80,65 +95,161 @@
     gap: calc(globals.$spacing-unit * 2);
   }
 
-  &__hero-header {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__hero-logo {
     flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    &-button {
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      transition: scale 0.2s ease;
+      outline: none;
+
+      &:hover {
+        scale: 1.05;
+      }
+    }
 
     img {
-      max-width: 600px;
-      max-height: 200px;
+      max-width: 180px;
+      max-height: 60px;
       object-fit: contain;
+      cursor: pointer;
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:focus {
+        outline: 2px solid rgba(255, 255, 255, 0.5);
+        outline-offset: 4px;
+        border-radius: 4px;
+      }
+
+      @container #{globals.$app-container} (min-width: 700px) {
+        max-width: 220px;
+        max-height: 75px;
+      }
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        max-width: 280px;
+        max-height: 95px;
+      }
+
+      @container #{globals.$app-container} (min-width: 1200px) {
+        max-width: 340px;
+        max-height: 115px;
+      }
+
+      @container #{globals.$app-container} (min-width: 1500px) {
+        max-width: 400px;
+        max-height: 130px;
+      }
     }
 
     h1 {
-      font-size: 64px;
+      font-size: 20px;
       font-weight: 700;
       color: #ffffff;
       text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9);
       margin: 0;
-    }
-  }
+      cursor: pointer;
+      transition: opacity 0.2s ease;
 
-  &__hero-actions {
-    display: flex;
-    gap: calc(globals.$spacing-unit);
-    align-items: center;
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:focus {
+        outline: 2px solid rgba(255, 255, 255, 0.5);
+        outline-offset: 4px;
+        border-radius: 4px;
+      }
+
+      @container #{globals.$app-container} (min-width: 700px) {
+        font-size: 26px;
+      }
+
+      @container #{globals.$app-container} (min-width: 900px) {
+        font-size: 32px;
+      }
+
+      @container #{globals.$app-container} (min-width: 1200px) {
+        font-size: 38px;
+      }
+
+      @container #{globals.$app-container} (min-width: 1500px) {
+        font-size: 44px;
+      }
+    }
   }
 
   &__hero-action-row {
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: flex-start;
     gap: calc(globals.$spacing-unit * 3);
-    margin-bottom: calc(globals.$spacing-unit * 3);
+    margin-top: calc(globals.$spacing-unit * 4);
+    margin-bottom: calc(globals.$spacing-unit * 2);
   }
 
-  &__hero-menu-btn {
-    background-color: rgba(0, 0, 0, 0.4);
-    padding: calc(globals.$spacing-unit * 1);
-    min-height: unset;
+  &__hero-buttons {
+    display: flex;
+    gap: calc(globals.$spacing-unit);
+    align-items: center;
+    flex-shrink: 0;
   }
-  &__hero-menu-btn:hover {
-    background-color: rgba(0, 0, 0, 0.8);
+
+  &__glass-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
   }
 
   &__hero-progress {
     display: flex;
     flex-direction: column;
-    gap: calc(globals.$spacing-unit);
-    margin-bottom: calc(globals.$spacing-unit * 3);
   }
 
-  &__progress-header {
+  &__progress-info-row {
+    flex: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: calc(globals.$spacing-unit / 2);
+  }
+
+  &__progress-row {
+    display: flex;
+    align-items: flex-end;
+    gap: calc(globals.$spacing-unit * 2);
+
+    &--bar {
+      margin-top: calc(globals.$spacing-unit);
+    }
   }
 
   &__progress-status {
@@ -153,22 +264,36 @@
     font-size: 14px;
     font-weight: 700;
     color: #ffffff;
-  }
+    align-self: flex-end;
+    display: inline-block;
+    overflow: hidden;
+    line-height: 1.2;
 
-  &__progress-details {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.9);
-    margin-top: calc(globals.$spacing-unit / 2);
+    span {
+      display: inline-block;
+    }
   }
 
   &__progress-size {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    font-size: 13px;
     font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  &__progress-status {
+    font-size: 13px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
   }
 
   &__progress-time {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    font-size: 13px;
     color: globals.$muted-color;
   }
 
@@ -190,6 +315,7 @@
     min-width: 200px;
     padding-right: calc(globals.$spacing-unit * 2);
     border-right: 1px solid rgba(255, 255, 255, 0.1);
+    align-self: flex-start;
   }
 
   &__speed-chart {
@@ -202,7 +328,7 @@
 
   &__speed-chart-canvas {
     width: 100%;
-    height: 100px;
+    height: 80px;
     image-rendering: crisp-edges;
   }
 
@@ -219,7 +345,9 @@
 
   &__stat-content {
     display: flex;
-    gap: 2px;
+    justify-content: space-between;
+    gap: calc(globals.$spacing-unit / 2);
+    width: 100%;
   }
 
   &__stat-label {
@@ -251,14 +379,7 @@
     display: flex;
     align-items: center;
     gap: calc(globals.$spacing-unit * 2);
-    padding: calc(globals.$spacing-unit * 2);
     border-radius: 8px;
-    transition: all ease 0.2s;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.02);
-      border-color: rgba(255, 255, 255, 0.1);
-    }
   }
 
   &__simple-thumbnail {
@@ -268,6 +389,22 @@
     overflow: hidden;
     flex-shrink: 0;
     background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid globals.$border-color;
+    padding: 0;
+    cursor: pointer;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: 2px solid rgba(255, 255, 255, 0.5);
+      outline-offset: 2px;
+    }
 
     img {
       width: 100%;
@@ -281,7 +418,22 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: calc(globals.$spacing-unit / 2);
+    gap: calc(globals.$spacing-unit / 1);
+  }
+
+  &__simple-title-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    transition: opacity 0.2s ease;
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   &__simple-title {
@@ -295,6 +447,12 @@
   }
 
   &__simple-meta {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 1.5);
+  }
+
+  &__simple-meta-row {
     display: flex;
     align-items: center;
     gap: calc(globals.$spacing-unit * 2);
@@ -303,9 +461,20 @@
   }
 
   &__simple-size {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
     font-weight: 500;
   }
 
+  &__simple-extracting {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+    font-weight: 500;
+    color: globals.$muted-color;
+  }
+
   &__simple-seeding {
     color: #4ade80;
     font-weight: 600;
@@ -342,13 +511,20 @@
     min-height: unset;
   }
 
+  &__progress-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+  }
+
   &__progress-bar {
     width: 100%;
     height: 8px;
     background-color: rgba(255, 255, 255, 0.08);
     border-radius: 4px;
     overflow: hidden;
-    position: relative;
+    margin-top: calc(globals.$spacing-unit / 2);
 
     &--small {
       height: 6px;
@@ -357,10 +533,12 @@
 
   &__progress-fill {
     height: 100%;
-    background-color: globals.$muted-color;
-    transition:
-      width 0.3s ease,
-      background 0.35s ease;
+    background-color: #fff;
+    transition: width 0.3s ease;
     border-radius: 4px;
+
+    &--extraction {
+      background-color: #fff;
+    }
   }
 }

src/renderer/src/pages/downloads/download-group.tsx

@@ -1,21 +1,32 @@
 import type { GameShop, LibraryGame, SeedingStatus } from "@types";
 
 import { Badge, Button } from "@renderer/components";
-import { formatDownloadProgress } from "@renderer/helpers";
+import {
+  formatDownloadProgress,
+  buildGameDetailsPath,
+} from "@renderer/helpers";
 
 import { Downloader, formatBytes, formatBytesToMbps } from "@shared";
-import { formatDistance, addMilliseconds } from "date-fns";
+import { addMilliseconds } from "date-fns";
 import { DOWNLOADER_NAME } from "@renderer/constants";
-import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks";
+import {
+  useAppSelector,
+  useDownload,
+  useLibrary,
+  useDate,
+} from "@renderer/hooks";
 
 import "./download-group.scss";
 import { useTranslation } from "react-i18next";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { AnimatePresence, motion } from "framer-motion";
 import {
   DropdownMenu,
   DropdownMenuItem,
 } from "@renderer/components/dropdown-menu/dropdown-menu";
 import {
+  ClockIcon,
   ColumnsIcon,
   DownloadIcon,
   FileDirectoryIcon,
@@ -29,22 +40,46 @@ import {
 } from "@primer/octicons-react";
 import { average } from "color.js";
 
-const getProgressGradient = (
-  colorHex: string,
-  isPaused = false
-): string | undefined => {
-  const hex = isPaused ? "#ffffff" : colorHex || "#08ea79";
-  if (!hex.startsWith("#")) return undefined;
+interface AnimatedPercentageProps {
+  value: number;
+}
 
-  try {
-    const r = Number.parseInt(hex.slice(1, 3), 16);
-    const g = Number.parseInt(hex.slice(3, 5), 16);
-    const b = Number.parseInt(hex.slice(5, 7), 16);
-    return `linear-gradient(90deg, rgba(${r},${g},${b},0.95) 0%, rgba(${r},${g},${b},0.65) 100%)`;
-  } catch {
-    return undefined;
-  }
-};
+function AnimatedPercentage({ value }: Readonly<AnimatedPercentageProps>) {
+  const percentageText = formatDownloadProgress(value);
+  const prevTextRef = useRef<string>(percentageText);
+  const chars = percentageText.split("");
+  const prevChars = prevTextRef.current.split("");
+
+  useEffect(() => {
+    prevTextRef.current = percentageText;
+  }, [percentageText]);
+
+  return (
+    <>
+      {chars.map((char, index) => {
+        const prevChar = prevChars[index];
+        const charChanged = prevChar !== char;
+
+        return (
+          <AnimatePresence key={`${index}`} mode="wait" initial={false}>
+            <motion.span
+              key={`${char}-${value}-${index}`}
+              initial={
+                charChanged ? { y: 10, opacity: 0 } : { y: 0, opacity: 1 }
+              }
+              animate={{ y: 0, opacity: 1 }}
+              exit={charChanged ? { y: -10, opacity: 0 } : undefined}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              style={{ display: "inline-block" }}
+            >
+              {char}
+            </motion.span>
+          </AnimatePresence>
+        );
+      })}
+    </>
+  );
+}
 
 interface SpeedChartProps {
   speeds: number[];
@@ -67,6 +102,7 @@ function SpeedChart({
     if (!ctx) return;
 
     let animationFrameId: number;
+    let resizeObserver: ResizeObserver | null = null;
 
     const draw = () => {
       const clientWidth = canvas.clientWidth;
@@ -78,10 +114,12 @@ function SpeedChart({
 
       const width = clientWidth;
       const height = 100;
-      const totalBars = 120;
       const barWidth = 4;
       const barGap = 10;
       const barSpacing = barWidth + barGap;
+
+      // Calculate how many bars can fit in the available width
+      const totalBars = Math.max(1, Math.floor((width + barGap) / barSpacing));
       const maxHeight = peakSpeed || Math.max(...speeds, 1);
 
       ctx.clearRect(0, 0, width, height);
@@ -90,16 +128,20 @@ function SpeedChart({
         g = 255,
         b = 255;
       if (color.startsWith("#")) {
-        const hex = color.replace("#", "");
-        r = Number.parseInt(hex.substring(0, 2), 16);
-        g = Number.parseInt(hex.substring(2, 4), 16);
-        b = Number.parseInt(hex.substring(4, 6), 16);
+        let hex = color.replace("#", "");
+        // Handle shorthand hex colors (e.g., "#fff" -> "#ffffff")
+        if (hex.length === 3) {
+          hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        r = Number.parseInt(hex.substring(0, 2), 16) || 255;
+        g = Number.parseInt(hex.substring(2, 4), 16) || 255;
+        b = Number.parseInt(hex.substring(4, 6), 16) || 255;
       } else if (color.startsWith("rgb")) {
         const matches = color.match(/\d+/g);
         if (matches && matches.length >= 3) {
-          r = Number.parseInt(matches[0]);
-          g = Number.parseInt(matches[1]);
-          b = Number.parseInt(matches[2]);
+          r = Number.parseInt(matches[0]) || 255;
+          g = Number.parseInt(matches[1]) || 255;
+          b = Number.parseInt(matches[2]) || 255;
         }
       }
       const displaySpeeds = speeds.slice(-totalBars);
@@ -138,8 +180,22 @@ function SpeedChart({
 
     animationFrameId = requestAnimationFrame(draw);
 
+    // Handle resize - trigger redraw when canvas size changes
+    resizeObserver = new ResizeObserver(() => {
+      // Cancel any pending animation frame to force immediate redraw
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      // Trigger a redraw that will recalculate bars based on new width
+      draw();
+    });
+    resizeObserver.observe(canvas);
+
     return () => {
       cancelAnimationFrame(animationFrameId);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
   }, [speeds, peakSpeed, color]);
 
@@ -151,6 +207,7 @@ function SpeedChart({
 interface HeroDownloadViewProps {
   game: LibraryGame;
   isGameDownloading: boolean;
+  isGameExtracting?: boolean;
   downloadSpeed: number;
   finalDownloadSize: string;
   peakSpeed: number;
@@ -158,18 +215,18 @@ interface HeroDownloadViewProps {
   dominantColor: string;
   lastPacket: ReturnType<typeof useDownload>["lastPacket"];
   speedHistory: number[];
-  getGameActions: (game: LibraryGame) => DropdownMenuItem[];
-  getStatusText: (game: LibraryGame) => string;
   formatSpeed: (speed: number) => string;
   calculateETA: () => string;
   pauseDownload: (shop: GameShop, objectId: string) => void;
   resumeDownload: (shop: GameShop, objectId: string) => void;
+  cancelDownload: (shop: GameShop, objectId: string) => void;
   t: (key: string) => string;
 }
 
 function HeroDownloadView({
   game,
   isGameDownloading,
+  isGameExtracting = false,
   downloadSpeed,
   finalDownloadSize,
   peakSpeed,
@@ -177,14 +234,19 @@ function HeroDownloadView({
   dominantColor,
   lastPacket,
   speedHistory,
-  getGameActions,
-  getStatusText,
   formatSpeed,
   calculateETA,
   pauseDownload,
   resumeDownload,
+  cancelDownload,
   t,
 }: Readonly<HeroDownloadViewProps>) {
+  const navigate = useNavigate();
+
+  const handleLogoClick = useCallback(() => {
+    navigate(buildGameDetailsPath(game));
+  }, [navigate, game]);
+
   return (
     <div className="download-group download-group--hero">
       <div className="download-group__hero-background">
@@ -196,88 +258,109 @@ function HeroDownloadView({
       </div>
 
       <div className="download-group__hero-content">
-        <div className="download-group__hero-header">
-          <div className="download-group__hero-actions">
-            <DropdownMenu align="end" items={getGameActions(game)}>
-              <Button className="download-group__hero-menu-btn" theme="outline">
-                <ThreeBarsIcon />
-              </Button>
-            </DropdownMenu>
-          </div>
-        </div>
-
         <div className="download-group__hero-action-row">
           <div className="download-group__hero-logo">
             {game.logoImageUrl ? (
-              <img src={game.logoImageUrl} alt={game.title} />
+              <button
+                type="button"
+                onClick={handleLogoClick}
+                className="download-group__hero-logo-button"
+              >
+                <img src={game.logoImageUrl} alt={game.title} />
+              </button>
             ) : (
-              <h1>{game.title}</h1>
+              <button
+                type="button"
+                onClick={handleLogoClick}
+                className="download-group__hero-logo-button"
+              >
+                <h1>{game.title}</h1>
+              </button>
             )}
           </div>
-
-          {isGameDownloading ? (
-            <Button
-              theme="primary"
-              onClick={() => pauseDownload(game.shop, game.objectId)}
-              className="download-group__hero-action-btn"
-              style={{
-                backgroundColor: dominantColor,
-                borderColor: dominantColor,
-              }}
-            >
-              <ColumnsIcon size={16} />
-              {t("pause")}
-            </Button>
-          ) : (
-            <Button
-              theme="primary"
-              onClick={() => resumeDownload(game.shop, game.objectId)}
-              className="download-group__hero-action-btn"
-              style={{
-                backgroundColor: dominantColor,
-                borderColor: dominantColor,
-              }}
-            >
-              <PlayIcon size={16} />
-              {t("resume")}
-            </Button>
-          )}
         </div>
 
         <div className="download-group__hero-progress">
-          <div className="download-group__progress-header">
-            <span className="download-group__progress-status">
-              {getStatusText(game)}
-            </span>
-            <span className="download-group__progress-percentage">
-              {formatDownloadProgress(currentProgress)}
-            </span>
-          </div>
-          <div className="download-group__progress-bar">
-            <div
-              className="download-group__progress-fill"
-              style={{
-                width: `${currentProgress * 100}%`,
-                background: getProgressGradient(
-                  dominantColor,
-                  game.download?.status === "paused"
-                ),
-              }}
-            />
-          </div>
-          <div className="download-group__progress-details">
-            <span className="download-group__progress-size">
-              {isGameDownloading && lastPacket
-                ? `${formatBytes(lastPacket.download.bytesDownloaded)} / ${finalDownloadSize}`
-                : `0 B / ${finalDownloadSize}`}
-            </span>
-            <span className="download-group__progress-time">
-              {isGameDownloading &&
-              lastPacket?.timeRemaining &&
-              lastPacket.timeRemaining > 0
-                ? calculateETA()
-                : ""}
-            </span>
+          <div className="download-group__progress-row download-group__progress-row--bar">
+            <div className="download-group__progress-wrapper">
+              <div className="download-group__progress-info-row">
+                {isGameExtracting && (
+                  <span className="download-group__progress-status">
+                    {t("extracting")}
+                  </span>
+                )}
+                {!isGameExtracting && lastPacket?.isCheckingFiles && (
+                  <span className="download-group__progress-status">
+                    {t("checking_files")}
+                  </span>
+                )}
+                {!isGameExtracting && !lastPacket?.isCheckingFiles && (
+                  <span className="download-group__progress-size">
+                    <DownloadIcon size={14} />
+                    {isGameDownloading && lastPacket
+                      ? `${formatBytes(lastPacket.download.bytesDownloaded)} / ${finalDownloadSize}`
+                      : `0 B / ${finalDownloadSize}`}
+                  </span>
+                )}
+                <span></span>
+              </div>
+              <div className="download-group__progress-info-row">
+                {!lastPacket?.isCheckingFiles && !isGameExtracting && (
+                  <span className="download-group__progress-time">
+                    {isGameDownloading &&
+                      lastPacket?.timeRemaining &&
+                      lastPacket.timeRemaining > 0 && (
+                        <>
+                          <ClockIcon size={14} />
+                          {calculateETA()}
+                        </>
+                      )}
+                  </span>
+                )}
+                <span className="download-group__progress-percentage">
+                  <AnimatedPercentage value={currentProgress} />
+                </span>
+              </div>
+              <div className="download-group__progress-bar">
+                <div
+                  className={`download-group__progress-fill ${isGameExtracting ? "download-group__progress-fill--extraction" : ""}`}
+                  style={{
+                    width: `${currentProgress * 100}%`,
+                  }}
+                />
+              </div>
+            </div>
+            {!isGameExtracting && (
+              <div className="download-group__hero-buttons">
+                {isGameDownloading ? (
+                  <button
+                    type="button"
+                    onClick={() => pauseDownload(game.shop, game.objectId)}
+                    className="download-group__glass-btn"
+                  >
+                    <ColumnsIcon size={14} />
+                    {t("pause")}
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => resumeDownload(game.shop, game.objectId)}
+                    className="download-group__glass-btn"
+                  >
+                    <PlayIcon size={14} />
+                    {t("resume")}
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={() => cancelDownload(game.shop, game.objectId)}
+                  className="download-group__glass-btn"
+                >
+                  <XCircleIcon size={14} />
+                  {t("cancel")}
+                </button>
+              </div>
+            )}
           </div>
         </div>
 
@@ -328,6 +411,16 @@ function HeroDownloadView({
                   </div>
                 </div>
               )}
+
+            {game.download?.downloader !== undefined && (
+              <div className="download-group__stat-item">
+                <div className="download-group__stat-content">
+                  <Badge>
+                    {DOWNLOADER_NAME[Number(game.download.downloader)]}
+                  </Badge>
+                </div>
+              </div>
+            )}
           </div>
 
           <div className="download-group__speed-chart">
@@ -359,28 +452,77 @@ export function DownloadGroup({
   seedingStatus,
 }: Readonly<DownloadGroupProps>) {
   const { t } = useTranslation("downloads");
+  const navigate = useNavigate();
 
   const userPreferences = useAppSelector(
     (state) => state.userPreferences.value
   );
 
+  const extraction = useAppSelector((state) => state.download.extraction);
+
   const { updateLibrary } = useLibrary();
 
   const {
     lastPacket,
-    pauseDownload,
-    resumeDownload,
+    pauseDownload: pauseDownloadOriginal,
+    resumeDownload: resumeDownloadOriginal,
     cancelDownload,
     isGameDeleting,
     pauseSeeding,
     resumeSeeding,
   } = useDownload();
 
-  const peakSpeedsRef = useRef<Record<string, number>>({});
-  const speedHistoryRef = useRef<Record<string, number[]>>({});
+  // Wrap resumeDownload with optimistic update
+  const resumeDownload = useCallback(
+    async (shop: GameShop, objectId: string) => {
+      const gameId = `${shop}:${objectId}`;
+
+      // Optimistically mark as downloading
+      setOptimisticallyResumed((prev) => ({ ...prev, [gameId]: true }));
+
+      try {
+        await resumeDownloadOriginal(shop, objectId);
+      } catch (error) {
+        // If resume fails, remove optimistic state
+        setOptimisticallyResumed((prev) => {
+          const next = { ...prev };
+          delete next[gameId];
+          return next;
+        });
+        throw error;
+      }
+    },
+    [resumeDownloadOriginal]
+  );
+
+  // Wrap pauseDownload to clear optimistic state
+  const pauseDownload = useCallback(
+    async (shop: GameShop, objectId: string) => {
+      const gameId = `${shop}:${objectId}`;
+
+      // Clear optimistic state when pausing
+      setOptimisticallyResumed((prev) => {
+        const next = { ...prev };
+        delete next[gameId];
+        return next;
+      });
+
+      await pauseDownloadOriginal(shop, objectId);
+    },
+    [pauseDownloadOriginal]
+  );
+
+  const { formatDistance } = useDate();
+
+  // Get speed history and peak speeds from Redux (centralized state)
+  const speedHistory = useAppSelector((state) => state.download.speedHistory);
+  const peakSpeeds = useAppSelector((state) => state.download.peakSpeeds);
   const [dominantColors, setDominantColors] = useState<Record<string, string>>(
     {}
   );
+  const [optimisticallyResumed, setOptimisticallyResumed] = useState<
+    Record<string, boolean>
+  >({});
 
   const extractDominantColor = useCallback(
     async (imageUrl: string, gameId: string) => {
@@ -398,65 +540,47 @@ export function DownloadGroup({
     [dominantColors]
   );
 
+  // Clear optimistic state when actual download starts or library updates
   useEffect(() => {
-    if (lastPacket?.gameId && lastPacket.downloadSpeed !== undefined) {
+    if (lastPacket?.gameId) {
       const gameId = lastPacket.gameId;
 
-      const currentPeak = peakSpeedsRef.current[gameId] || 0;
-      if (lastPacket.downloadSpeed > currentPeak) {
-        peakSpeedsRef.current[gameId] = lastPacket.downloadSpeed;
-      }
-
-      if (!speedHistoryRef.current[gameId]) {
-        speedHistoryRef.current[gameId] = [];
-      }
-
-      speedHistoryRef.current[gameId].push(lastPacket.downloadSpeed);
-
-      if (speedHistoryRef.current[gameId].length > 120) {
-        speedHistoryRef.current[gameId].shift();
-      }
+      // Clear optimistic state when actual download starts
+      setOptimisticallyResumed((prev) => {
+        const next = { ...prev };
+        delete next[gameId];
+        return next;
+      });
     }
-  }, [lastPacket?.gameId, lastPacket?.downloadSpeed]);
+  }, [lastPacket?.gameId]);
 
+  // Clear optimistic state for games that are no longer active after library update
   useEffect(() => {
-    for (const game of library) {
-      if (
-        game.download &&
-        game.download.progress < 0.01 &&
-        game.download.status !== "paused"
-      ) {
-        // Fresh download - clear any old data
-        if (speedHistoryRef.current[game.id]?.length > 0) {
-          speedHistoryRef.current[game.id] = [];
-          peakSpeedsRef.current[game.id] = 0;
+    setOptimisticallyResumed((prev) => {
+      const next = { ...prev };
+      let changed = false;
+
+      for (const gameId in next) {
+        if (next[gameId]) {
+          const game = library.find((g) => g.id === gameId);
+          // Clear if game doesn't exist or download status is not active
+          if (
+            !game ||
+            game.download?.status !== "active" ||
+            lastPacket?.gameId === gameId
+          ) {
+            delete next[gameId];
+            changed = true;
+          }
         }
       }
-    }
-  }, [library]);
 
-  useEffect(() => {
-    const timeouts: NodeJS.Timeout[] = [];
+      return changed ? next : prev;
+    });
+  }, [library, lastPacket?.gameId]);
 
-    for (const game of library) {
-      if (
-        game.download?.progress === 1 &&
-        speedHistoryRef.current[game.id]?.length > 0
-      ) {
-        const timeout = setTimeout(() => {
-          speedHistoryRef.current[game.id] = [];
-          peakSpeedsRef.current[game.id] = 0;
-        }, 10_000);
-        timeouts.push(timeout);
-      }
-    }
-
-    return () => {
-      for (const timeout of timeouts) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [library]);
+  // Speed history and peak speeds are now tracked in Redux (in setLastPacket reducer)
+  // No local effect needed - data is updated atomically when packets arrive
 
   useEffect(() => {
     if (library.length > 0 && title === t("download_in_progress")) {
@@ -478,10 +602,12 @@ export function DownloadGroup({
   const isGameDownloadingMap = useMemo(() => {
     const map: Record<string, boolean> = {};
     for (const game of library) {
-      map[game.id] = lastPacket?.gameId === game.id;
+      map[game.id] =
+        lastPacket?.gameId === game.id ||
+        optimisticallyResumed[game.id] === true;
     }
     return map;
-  }, [library, lastPacket?.gameId]);
+  }, [library, lastPacket?.gameId, optimisticallyResumed]);
 
   const getFinalDownloadSize = (game: LibraryGame) => {
     const download = game.download!;
@@ -517,53 +643,6 @@ export function DownloadGroup({
     );
   };
 
-  const getCompletedStatusText = (game: LibraryGame) => {
-    const isTorrent = game.download?.downloader === Downloader.Torrent;
-    if (isTorrent) {
-      return isGameSeeding(game)
-        ? `${t("completed")} (${t("seeding")})`
-        : `${t("completed")} (${t("paused")})`;
-    }
-    return t("completed");
-  };
-
-  const getStatusText = (game: LibraryGame) => {
-    const isGameDownloading = isGameDownloadingMap[game.id];
-    const status = game.download?.status;
-
-    if (game.download?.extracting) {
-      return t("extracting");
-    }
-
-    if (isGameDeleting(game.id)) {
-      return t("deleting");
-    }
-
-    if (game.download?.progress === 1) {
-      return getCompletedStatusText(game);
-    }
-
-    if (isGameDownloading && lastPacket) {
-      if (lastPacket.isDownloadingMetadata) {
-        return t("downloading_metadata");
-      }
-      if (lastPacket.isCheckingFiles) {
-        return t("checking_files");
-      }
-      return t("download_in_progress");
-    }
-
-    switch (status) {
-      case "paused":
-      case "error":
-        return t("paused");
-      case "waiting":
-        return t("calculating_eta");
-      default:
-        return t("paused");
-    }
-  };
-
   const extractGameDownload = useCallback(
     async (shop: GameShop, objectId: string) => {
       await window.electron.extractGameDownload(shop, objectId);
@@ -682,7 +761,13 @@ export function DownloadGroup({
         progress: game.download?.progress || 0,
         isSeeding: isGameSeeding(game),
       })),
-    [library, lastPacket?.gameId]
+    [
+      library,
+      lastPacket?.gameId,
+      lastPacket?.download.fileSize,
+      isGameDownloadingMap,
+      seedingStatus,
+    ]
   );
 
   if (!library.length) return null;
@@ -693,16 +778,28 @@ export function DownloadGroup({
 
   if (isDownloadingGroup && library.length > 0) {
     const game = library[0];
-    const isGameDownloading = isGameDownloadingMap[game.id];
+    const isGameExtracting = extraction?.visibleId === game.id;
+    const isGameDownloading =
+      isGameDownloadingMap[game.id] && !isGameExtracting;
     const downloadSpeed = isGameDownloading
       ? (lastPacket?.downloadSpeed ?? 0)
       : 0;
     const finalDownloadSize = getFinalDownloadSize(game);
-    const peakSpeed = peakSpeedsRef.current[game.id] || 0;
-    const currentProgress =
-      isGameDownloading && lastPacket
-        ? lastPacket.progress
-        : game.download?.progress || 0;
+    // Use lastPacket.gameId for lookup since that's the key used to store the data
+    // Fall back to game.id if lastPacket is not available
+    const dataKey = lastPacket?.gameId ?? game.id;
+    const gameSpeedHistory = speedHistory[dataKey] ?? [];
+    const storedPeak = peakSpeeds[dataKey];
+    // Use stored peak if available and > 0, otherwise use current speed as initial value
+    const peakSpeed =
+      storedPeak !== undefined && storedPeak > 0 ? storedPeak : downloadSpeed;
+
+    let currentProgress = game.download?.progress || 0;
+    if (isGameExtracting) {
+      currentProgress = extraction.progress;
+    } else if (isGameDownloading && lastPacket) {
+      currentProgress = lastPacket.progress;
+    }
 
     const dominantColor = dominantColors[game.id] || "#fff";
 
@@ -710,19 +807,19 @@ export function DownloadGroup({
       <HeroDownloadView
         game={game}
         isGameDownloading={isGameDownloading}
+        isGameExtracting={isGameExtracting}
         downloadSpeed={downloadSpeed}
         finalDownloadSize={finalDownloadSize}
         peakSpeed={peakSpeed}
         currentProgress={currentProgress}
         dominantColor={dominantColor}
         lastPacket={lastPacket}
-        speedHistory={speedHistoryRef.current[game.id] || []}
-        getGameActions={getGameActions}
-        getStatusText={getStatusText}
+        speedHistory={gameSpeedHistory}
         formatSpeed={formatSpeed}
         calculateETA={calculateETA}
         pauseDownload={pauseDownload}
         resumeDownload={resumeDownload}
+        cancelDownload={cancelDownload}
         t={t}
       />
     );
@@ -733,29 +830,56 @@ export function DownloadGroup({
       className={`download-group ${isQueuedGroup ? "download-group--queued" : ""} ${isCompletedGroup ? "download-group--completed" : ""}`}
     >
       <div className="download-group__header">
-        <h2>{title}</h2>
-        <div className="download-group__header-divider" />
-        <h3 className="download-group__header-count">{library.length}</h3>
+        <div className="download-group__header-title-group">
+          <h2>{title}</h2>
+          <h3 className="download-group__header-count">{library.length}</h3>
+        </div>
       </div>
 
       <ul className="download-group__simple-list">
         {downloadInfo.map(({ game, size, progress, isSeeding: seeding }) => {
           return (
             <li key={game.id} className="download-group__simple-card">
-              <div className="download-group__simple-thumbnail">
+              <button
+                type="button"
+                onClick={() => navigate(buildGameDetailsPath(game))}
+                className="download-group__simple-thumbnail"
+              >
                 <img src={game.libraryImageUrl || ""} alt={game.title} />
-              </div>
+              </button>
 
               <div className="download-group__simple-info">
-                <h3 className="download-group__simple-title">{game.title}</h3>
+                <button
+                  type="button"
+                  onClick={() => navigate(buildGameDetailsPath(game))}
+                  className="download-group__simple-title-button"
+                >
+                  <h3 className="download-group__simple-title">{game.title}</h3>
+                </button>
                 <div className="download-group__simple-meta">
-                  <Badge>{DOWNLOADER_NAME[game.download!.downloader]}</Badge>
-                  <span className="download-group__simple-size">{size}</span>
-                  {game.download?.progress === 1 && seeding && (
-                    <span className="download-group__simple-seeding">
-                      {t("seeding")}
-                    </span>
-                  )}
+                  <div className="download-group__simple-meta-row">
+                    <Badge>
+                      {DOWNLOADER_NAME[Number(game.download!.downloader)]}
+                    </Badge>
+                  </div>
+                  <div className="download-group__simple-meta-row">
+                    {extraction?.visibleId === game.id ? (
+                      <span className="download-group__simple-extracting">
+                        {t("extracting")} (
+                        {Math.round(extraction.progress * 100)}%)
+                      </span>
+                    ) : (
+                      <span className="download-group__simple-size">
+                        <DownloadIcon size={14} />
+                        {size}
+                      </span>
+                    )}
+                    {game.download?.progress === 1 && seeding && (
+                      <span className="download-group__simple-seeding">
+                        {t("seeding")}
+                      </span>
+                    )}
+                  </div>
                 </div>
               </div>
 
@@ -784,7 +908,7 @@ export function DownloadGroup({
                     disabled={isGameDeleting(game.id)}
                     className="download-group__simple-menu-btn"
                   >
-                    <DownloadIcon size={16} />
+                    <PlayIcon size={16} />
                   </Button>
                 )}
                 {isQueuedGroup && game.download?.progress !== 1 && (
@@ -792,8 +916,9 @@ export function DownloadGroup({
                     theme="primary"
                     onClick={() => resumeDownload(game.shop, game.objectId)}
                     className="download-group__simple-menu-btn"
+                    tooltip={t("resume")}
                   >
-                    <PlayIcon size={16} />
+                    <DownloadIcon size={16} />
                   </Button>
                 )}
                 <DropdownMenu align="end" items={getGameActions(game)}>

src/renderer/src/pages/downloads/downloads.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 
-import { useDownload, useLibrary } from "@renderer/hooks";
+import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks";
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
@@ -13,6 +13,7 @@ import { ArrowDownIcon } from "@primer/octicons-react";
 
 export default function Downloads() {
   const { library, updateLibrary } = useLibrary();
+  const extraction = useAppSelector((state) => state.download.extraction);
 
   const { t } = useTranslation("downloads");
 
@@ -39,11 +40,13 @@ export default function Downloads() {
   useEffect(() => {
     window.electron.onSeedingStatus((value) => setSeedingStatus(value));
 
-    const unsubscribe = window.electron.onExtractionComplete(() => {
+    const unsubscribeExtraction = window.electron.onExtractionComplete(() => {
       updateLibrary();
     });
 
-    return () => unsubscribe();
+    return () => {
+      unsubscribeExtraction();
+    };
   }, [updateLibrary]);
 
   const handleOpenGameInstaller = (shop: GameShop, objectId: string) =>
@@ -72,8 +75,10 @@ export default function Downloads() {
       /* Game has been manually added to the library */
       if (!next.download) return prev;
 
-      /* Is downloading */
-      if (lastPacket?.gameId === next.id || next.download.extracting)
+      /* Is downloading or extracting */
+      const isExtracting =
+        next.download.extracting || extraction?.visibleId === next.id;
+      if (lastPacket?.gameId === next.id || isExtracting)
         return { ...prev, downloading: [...prev.downloading, next] };
 
       /* Is either queued or paused */
@@ -96,7 +101,7 @@ export default function Downloads() {
       queued,
       complete,
     };
-  }, [library, lastPacket?.gameId]);
+  }, [library, lastPacket?.gameId, extraction?.visibleId]);
 
   const downloadGroups = [
     {

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -1,6 +1,7 @@
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { PencilIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 
 import { HeroPanel } from "./hero";
 import { DescriptionHeader } from "./description-header/description-header";
@@ -55,6 +56,8 @@ const getImageWithCustomPriority = (
 
 export function GameDetailsContent() {
   const { t } = useTranslation("game_details");
+  const [searchParams] = useSearchParams();
+  const reviewsRef = useRef<HTMLDivElement>(null);
 
   const {
     objectId,
@@ -137,6 +140,16 @@ export function GameDetailsContent() {
     getGameArtifacts();
   }, [getGameArtifacts]);
 
+  // Scroll to reviews section if reviews=true in URL
+  useEffect(() => {
+    const shouldScrollToReviews = searchParams.get("reviews") === "true";
+    if (shouldScrollToReviews && reviewsRef.current) {
+      setTimeout(() => {
+        reviewsRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 500);
+    }
+  }, [searchParams, objectId]);
+
   const isCustomGame = game?.shop === "custom";
 
   const heroImage = isCustomGame
@@ -229,15 +242,17 @@ export function GameDetailsContent() {
             )}
 
             {shop !== "custom" && shop && objectId && (
-              <GameReviews
-                shop={shop}
-                objectId={objectId}
-                game={game}
-                userDetailsId={userDetails?.id}
-                isGameInLibrary={isGameInLibrary}
-                hasUserReviewed={hasUserReviewed}
-                onUserReviewedChange={setHasUserReviewed}
-              />
+              <div ref={reviewsRef}>
+                <GameReviews
+                  shop={shop}
+                  objectId={objectId}
+                  game={game}
+                  userDetailsId={userDetails?.id}
+                  isGameInLibrary={isGameInLibrary}
+                  hasUserReviewed={hasUserReviewed}
+                  onUserReviewedChange={setHasUserReviewed}
+                />
+              </div>
             )}
           </div>
 

src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx

@@ -1,7 +1,12 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { formatDownloadProgress } from "@renderer/helpers";
-import { useDate, useDownload, useFormat } from "@renderer/hooks";
+import {
+  useAppSelector,
+  useDate,
+  useDownload,
+  useFormat,
+} from "@renderer/hooks";
 import { Link } from "@renderer/components";
 import { gameDetailsContext } from "@renderer/context";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
@@ -17,6 +22,9 @@ export function HeroPanelPlaytime() {
   const { numberFormatter } = useFormat();
   const { progress, lastPacket } = useDownload();
   const { formatDistance } = useDate();
+  const extraction = useAppSelector((state) => state.download.extraction);
+
+  const isExtracting = extraction?.visibleId === game?.id;
 
   useEffect(() => {
     if (game?.lastTimePlayed) {
@@ -52,6 +60,16 @@ export function HeroPanelPlaytime() {
   const isGameDownloading =
     game.download?.status === "active" && lastPacket?.gameId === game.id;
 
+  const extractionInProgressInfo = (
+    <div className="hero-panel-playtime__download-details">
+      <Link to="/downloads" className="hero-panel-playtime__downloads-link">
+        {t("extracting")}
+      </Link>
+
+      <small>{formatDownloadProgress(extraction?.progress ?? 0)}</small>
+    </div>
+  );
+
   const downloadInProgressInfo = (
     <div className="hero-panel-playtime__download-details">
       <Link to="/downloads" className="hero-panel-playtime__downloads-link">
@@ -72,7 +90,8 @@ export function HeroPanelPlaytime() {
     return (
       <>
         <p>{t("not_played_yet", { title: game?.title })}</p>
-        {hasDownload && downloadInProgressInfo}
+        {isExtracting && extractionInProgressInfo}
+        {!isExtracting && hasDownload && downloadInProgressInfo}
       </>
     );
   }
@@ -81,7 +100,8 @@ export function HeroPanelPlaytime() {
     return (
       <>
         <p>{t("playing_now")}</p>
-        {hasDownload && downloadInProgressInfo}
+        {isExtracting && extractionInProgressInfo}
+        {!isExtracting && hasDownload && downloadInProgressInfo}
       </>
     );
   }
@@ -113,9 +133,9 @@ export function HeroPanelPlaytime() {
         })}
       </p>
 
-      {hasDownload ? (
-        downloadInProgressInfo
-      ) : (
+      {isExtracting && extractionInProgressInfo}
+      {!isExtracting && hasDownload && downloadInProgressInfo}
+      {!isExtracting && !hasDownload && (
         <p>
           {t("last_time_played", {
             period: lastTimePlayed,

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

@@ -80,5 +80,11 @@
     &--disabled {
       opacity: globals.$disabled-opacity;
     }
+
+    &--extraction {
+      &::-webkit-progress-value {
+        background-color: #fff;
+      }
+    }
   }
 }

src/renderer/src/pages/game-details/hero/hero-panel.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useDate, useDownload } from "@renderer/hooks";
+import { useAppSelector, useDate, useDownload } from "@renderer/hooks";
 
 import { HeroPanelActions } from "./hero-panel-actions";
 import { HeroPanelPlaytime } from "./hero-panel-playtime";
@@ -18,9 +18,13 @@ export function HeroPanel() {
 
   const { lastPacket } = useDownload();
 
+  const extraction = useAppSelector((state) => state.download.extraction);
+
   const isGameDownloading =
     game?.download?.status === "active" && lastPacket?.gameId === game?.id;
 
+  const isExtracting = extraction?.visibleId === game?.id;
+
   const getInfo = () => {
     if (!game) {
       const [latestRepack] = repacks;
@@ -49,6 +53,8 @@ export function HeroPanel() {
     (game?.download?.status === "active" && game?.download?.progress < 1) ||
     game?.download?.status === "paused";
 
+  const showExtractionProgressBar = isExtracting;
+
   return (
     <div className="hero-panel__container">
       <div className="hero-panel">
@@ -72,6 +78,14 @@ export function HeroPanel() {
             }`}
           />
         )}
+
+        {showExtractionProgressBar && (
+          <progress
+            max={1}
+            value={extraction?.progress ?? 0}
+            className="hero-panel__progress-bar hero-panel__progress-bar--extraction"
+          />
+        )}
       </div>
     </div>
   );

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

@@ -21,7 +21,12 @@ import { DownloadSettingsModal } from "./download-settings-modal";
 import { gameDetailsContext } from "@renderer/context";
 import { Downloader } from "@shared";
 import { orderBy } from "lodash-es";
-import { useDate, useFeature, useAppDispatch } from "@renderer/hooks";
+import {
+  useDate,
+  useFeature,
+  useAppDispatch,
+  useAppSelector,
+} from "@renderer/hooks";
 import { clearNewDownloadOptions } from "@renderer/features";
 import { levelDBService } from "@renderer/services/leveldb.service";
 import { getGameKey } from "@renderer/helpers";
@@ -70,6 +75,9 @@ export function RepacksModal({
   const { formatDate } = useDate();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
+  const userPreferences = useAppSelector(
+    (state) => state.userPreferences.value
+  );
 
   const getHashFromMagnet = (magnet: string) => {
     if (!magnet || typeof magnet !== "string") {
@@ -129,10 +137,12 @@ export function RepacksModal({
       }
     };
 
-    if (visible) {
+    if (visible && userPreferences?.enableNewDownloadOptionsBadges !== false) {
       fetchLastCheckTimestamp();
+    } else {
+      setIsLoadingTimestamp(false);
     }
-  }, [visible, repacks]);
+  }, [visible, repacks, userPreferences?.enableNewDownloadOptionsBadges]);
 
   useEffect(() => {
     if (
@@ -231,9 +241,19 @@ export function RepacksModal({
       return false;
     }
 
-    const lastCheckUtc = new Date(lastCheckTimestamp).toISOString();
+    try {
+      const lastCheckDate = new Date(lastCheckTimestamp);
 
-    return repack.createdAt > lastCheckUtc;
+      if (isNaN(lastCheckDate.getTime())) {
+        return false;
+      }
+
+      const lastCheckUtc = lastCheckDate.toISOString();
+
+      return repack.createdAt > lastCheckUtc;
+    } catch {
+      return false;
+    }
   };
 
   const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
@@ -353,11 +373,13 @@ export function RepacksModal({
                 >
                   <p className="repacks-modal__repack-title">
                     {repack.title}
-                    {isNewRepack(repack) && (
-                      <span className="repacks-modal__new-badge">
-                        {t("new_download_option")}
-                      </span>
-                    )}
+                    {userPreferences?.enableNewDownloadOptionsBadges !==
+                      false &&
+                      isNewRepack(repack) && (
+                        <span className="repacks-modal__new-badge">
+                          {t("new_download_option")}
+                        </span>
+                      )}
                   </p>
 
                   {isLastDownloadedOption && (

src/renderer/src/pages/notifications/local-notification-item.tsx

@@ -0,0 +1,103 @@
+import { useCallback } from "react";
+import {
+  XIcon,
+  DownloadIcon,
+  PackageIcon,
+  SyncIcon,
+  TrophyIcon,
+  ClockIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useDate } from "@renderer/hooks";
+import cn from "classnames";
+
+import type { LocalNotification } from "@types";
+import "./notification-item.scss";
+
+interface LocalNotificationItemProps {
+  notification: LocalNotification;
+  onDismiss: (id: string) => void;
+  onMarkAsRead: (id: string) => void;
+}
+
+export function LocalNotificationItem({
+  notification,
+  onDismiss,
+  onMarkAsRead,
+}: Readonly<LocalNotificationItemProps>) {
+  const { t } = useTranslation("notifications_page");
+  const { formatDistance } = useDate();
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => {
+    if (!notification.isRead) {
+      onMarkAsRead(notification.id);
+    }
+
+    if (notification.url) {
+      navigate(notification.url);
+    }
+  }, [notification, onMarkAsRead, navigate]);
+
+  const handleDismiss = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onDismiss(notification.id);
+    },
+    [notification.id, onDismiss]
+  );
+
+  const getIcon = () => {
+    switch (notification.type) {
+      case "DOWNLOAD_COMPLETE":
+        return <DownloadIcon size={24} />;
+      case "EXTRACTION_COMPLETE":
+        return <PackageIcon size={24} />;
+      case "UPDATE_AVAILABLE":
+        return <SyncIcon size={24} />;
+      case "ACHIEVEMENT_UNLOCKED":
+        return <TrophyIcon size={24} />;
+      default:
+        return <DownloadIcon size={24} />;
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn("notification-item", {
+        "notification-item--unread": !notification.isRead,
+      })}
+      onClick={handleClick}
+    >
+      <div className="notification-item__picture">
+        {notification.pictureUrl ? (
+          <img src={notification.pictureUrl} alt="" />
+        ) : (
+          getIcon()
+        )}
+      </div>
+
+      <div className="notification-item__content">
+        <span className="notification-item__title">{notification.title}</span>
+        <span className="notification-item__description">
+          {notification.description}
+        </span>
+        <span className="notification-item__time">
+          <ClockIcon size={12} />
+          {formatDistance(new Date(notification.createdAt), new Date())}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        className="notification-item__dismiss"
+        onClick={handleDismiss}
+        title={t("dismiss")}
+      >
+        <XIcon size={16} />
+      </button>
+    </button>
+  );
+}

src/renderer/src/pages/notifications/notification-item.scss

@@ -0,0 +1,127 @@
+@use "../../scss/globals.scss";
+
+.notification-item {
+  display: flex;
+  align-items: center;
+  gap: calc(globals.$spacing-unit * 2);
+  padding: calc(globals.$spacing-unit * 2);
+  background-color: globals.$dark-background-color;
+  border: 1px solid globals.$border-color;
+  border-radius: 8px;
+  transition: all ease 0.2s;
+  position: relative;
+  opacity: 0.4;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+    opacity: 0.6;
+  }
+
+  &--unread {
+    border-left: 3px solid globals.$brand-teal;
+    opacity: 1;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .notification-item__title {
+      color: #fff;
+    }
+  }
+
+  &__picture {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+    color: #fff;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  &__badge-picture {
+    border-radius: 8px;
+    background-color: globals.$background-color;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__review-picture {
+    color: #f5a623;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+  }
+
+  &__title {
+    font-size: globals.$body-font-size;
+    font-weight: 600;
+    color: globals.$muted-color;
+  }
+
+  &__description {
+    font-size: globals.$small-font-size;
+    color: globals.$body-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__time {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+    font-size: globals.$small-font-size;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+    flex-shrink: 0;
+  }
+
+  &__dismiss {
+    position: absolute;
+    top: calc(globals.$spacing-unit / 2);
+    right: calc(globals.$spacing-unit / 2);
+    background: transparent;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 50%;
+    transition: all ease 0.2s;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}

src/renderer/src/pages/notifications/notification-item.tsx

@@ -0,0 +1,228 @@
+import { useCallback, useMemo } from "react";
+import {
+  XIcon,
+  PersonIcon,
+  ClockIcon,
+  StarFillIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@renderer/components";
+import { useDate, useUserDetails } from "@renderer/hooks";
+import cn from "classnames";
+
+import type { Notification, Badge } from "@types";
+import "./notification-item.scss";
+
+const parseNotificationUrl = (notificationUrl: string): string => {
+  const url = new URL(notificationUrl, "http://localhost");
+  const userId = url.searchParams.get("userId");
+  const badgeName = url.searchParams.get("name");
+  const gameTitle = url.searchParams.get("title");
+  const showReviews = url.searchParams.get("reviews");
+
+  if (url.pathname === "/profile" && userId) {
+    return `/profile/${userId}`;
+  }
+
+  if (url.pathname === "/badges" && badgeName) {
+    return `/badges/${badgeName}`;
+  }
+
+  if (url.pathname.startsWith("/game/")) {
+    const params = new URLSearchParams();
+    if (gameTitle) params.set("title", gameTitle);
+    if (showReviews) params.set("reviews", showReviews);
+    const queryString = params.toString();
+    return queryString ? `${url.pathname}?${queryString}` : url.pathname;
+  }
+
+  return notificationUrl;
+};
+
+interface NotificationItemProps {
+  notification: Notification;
+  badges: Badge[];
+  onDismiss: (id: string) => void;
+  onMarkAsRead: (id: string) => void;
+  onAcceptFriendRequest?: (senderId: string) => void;
+  onRefuseFriendRequest?: (senderId: string) => void;
+}
+
+export function NotificationItem({
+  notification,
+  badges,
+  onDismiss,
+  onMarkAsRead,
+  onAcceptFriendRequest,
+  onRefuseFriendRequest,
+}: Readonly<NotificationItemProps>) {
+  const { t } = useTranslation("notifications_page");
+  const { formatDistance } = useDate();
+  const navigate = useNavigate();
+  const { updateFriendRequestState } = useUserDetails();
+
+  const badge = useMemo(() => {
+    if (notification.type !== "BADGE_RECEIVED") return null;
+    return badges.find((b) => b.name === notification.variables.badgeName);
+  }, [notification, badges]);
+
+  const handleClick = useCallback(() => {
+    if (!notification.isRead) {
+      onMarkAsRead(notification.id);
+    }
+
+    if (notification.url) {
+      navigate(parseNotificationUrl(notification.url));
+    }
+  }, [notification, onMarkAsRead, navigate]);
+
+  const handleAccept = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const senderId = notification.variables.senderId;
+      if (senderId) {
+        await updateFriendRequestState(senderId, "ACCEPTED");
+        onAcceptFriendRequest?.(senderId);
+        onDismiss(notification.id);
+      }
+    },
+    [notification, updateFriendRequestState, onAcceptFriendRequest, onDismiss]
+  );
+
+  const handleRefuse = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const senderId = notification.variables.senderId;
+      if (senderId) {
+        await updateFriendRequestState(senderId, "REFUSED");
+        onRefuseFriendRequest?.(senderId);
+        onDismiss(notification.id);
+      }
+    },
+    [notification, updateFriendRequestState, onRefuseFriendRequest, onDismiss]
+  );
+
+  const handleDismiss = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onDismiss(notification.id);
+    },
+    [notification.id, onDismiss]
+  );
+
+  const getNotificationContent = () => {
+    switch (notification.type) {
+      case "FRIEND_REQUEST_RECEIVED":
+        return {
+          title: t("friend_request_received_title"),
+          description: t("friend_request_received_description", {
+            displayName: notification.variables.senderDisplayName,
+          }),
+          showActions: true,
+        };
+      case "FRIEND_REQUEST_ACCEPTED":
+        return {
+          title: t("friend_request_accepted_title"),
+          description: t("friend_request_accepted_description", {
+            displayName: notification.variables.accepterDisplayName,
+          }),
+          showActions: false,
+        };
+      case "BADGE_RECEIVED":
+        return {
+          title: t("badge_received_title"),
+          description: badge?.description || notification.variables.badgeName,
+          showActions: false,
+        };
+      case "REVIEW_UPVOTE":
+        return {
+          title: t("review_upvote_title", {
+            gameTitle: notification.variables.gameTitle,
+          }),
+          description: t("review_upvote_description", {
+            count: Number.parseInt(
+              notification.variables.upvoteCount || "1",
+              10
+            ),
+          }),
+          showActions: false,
+        };
+      default:
+        return {
+          title: t("notification"),
+          description: "",
+          showActions: false,
+        };
+    }
+  };
+
+  const content = getNotificationContent();
+  const isBadge = notification.type === "BADGE_RECEIVED";
+  const isReview = notification.type === "REVIEW_UPVOTE";
+
+  const getIcon = () => {
+    if (notification.pictureUrl) {
+      return <img src={notification.pictureUrl} alt="" />;
+    }
+    if (isReview) {
+      return <StarFillIcon size={24} />;
+    }
+    return <PersonIcon size={24} />;
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn("notification-item", {
+        "notification-item--unread":
+          !notification.isRead ||
+          notification.type === "FRIEND_REQUEST_RECEIVED",
+      })}
+      onClick={handleClick}
+    >
+      <div
+        className={cn("notification-item__picture", {
+          "notification-item__badge-picture": isBadge,
+          "notification-item__review-picture": isReview,
+        })}
+      >
+        {getIcon()}
+      </div>
+
+      <div className="notification-item__content">
+        <span className="notification-item__title">{content.title}</span>
+        <span className="notification-item__description">
+          {content.description}
+        </span>
+        <span className="notification-item__time">
+          <ClockIcon size={12} />
+          {formatDistance(new Date(notification.createdAt), new Date())}
+        </span>
+      </div>
+
+      {content.showActions &&
+        notification.type === "FRIEND_REQUEST_RECEIVED" && (
+          <div className="notification-item__actions">
+            <Button theme="primary" onClick={handleAccept}>
+              {t("accept")}
+            </Button>
+            <Button theme="outline" onClick={handleRefuse}>
+              {t("refuse")}
+            </Button>
+          </div>
+        )}
+
+      {notification.type !== "FRIEND_REQUEST_RECEIVED" && (
+        <button
+          type="button"
+          className="notification-item__dismiss"
+          onClick={handleDismiss}
+          title={t("dismiss")}
+        >
+          <XIcon size={16} />
+        </button>
+      )}
+    </button>
+  );
+}

src/renderer/src/pages/notifications/notifications.scss

@@ -0,0 +1,58 @@
+@use "../../scss/globals.scss";
+
+.notifications {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  padding: calc(globals.$spacing-unit * 3);
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+    justify-content: flex-end;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__empty {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__icon-container {
+    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);
+  }
+
+  &__loading {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+}

src/renderer/src/pages/notifications/notifications.tsx

@@ -0,0 +1,400 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { BellIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from "@renderer/components";
+import { useAppDispatch, useToast, useUserDetails } from "@renderer/hooks";
+import { setHeaderTitle } from "@renderer/features";
+import { logger } from "@renderer/logger";
+
+import { NotificationItem } from "./notification-item";
+import { LocalNotificationItem } from "./local-notification-item";
+import type {
+  Notification,
+  LocalNotification,
+  NotificationsResponse,
+  MergedNotification,
+  Badge,
+} from "@types";
+import "./notifications.scss";
+
+export default function Notifications() {
+  const { t, i18n } = useTranslation("notifications_page");
+  const { showSuccessToast, showErrorToast } = useToast();
+  const { userDetails } = useUserDetails();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(setHeaderTitle(t("title")));
+  }, [dispatch, t]);
+
+  const [apiNotifications, setApiNotifications] = useState<Notification[]>([]);
+  const [localNotifications, setLocalNotifications] = useState<
+    LocalNotification[]
+  >([]);
+  const [badges, setBadges] = useState<Badge[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [clearingIds, setClearingIds] = useState<Set<string>>(new Set());
+  const [pagination, setPagination] = useState({
+    total: 0,
+    hasMore: false,
+    skip: 0,
+  });
+
+  const fetchLocalNotifications = useCallback(async () => {
+    try {
+      const notifications = await window.electron.getLocalNotifications();
+      setLocalNotifications(notifications);
+    } catch (error) {
+      logger.error("Failed to fetch local notifications", error);
+    }
+  }, []);
+
+  const fetchBadges = useCallback(async () => {
+    try {
+      const language = i18n.language.split("-")[0];
+      const params = new URLSearchParams({ locale: language });
+      const badgesResponse = await window.electron.hydraApi.get<Badge[]>(
+        `/badges?${params.toString()}`,
+        { needsAuth: false }
+      );
+      setBadges(badgesResponse);
+    } catch (error) {
+      logger.error("Failed to fetch badges", error);
+    }
+  }, [i18n.language]);
+
+  const fetchApiNotifications = useCallback(
+    async (skip = 0, append = false) => {
+      if (!userDetails) return;
+
+      try {
+        setIsLoading(true);
+        const response =
+          await window.electron.hydraApi.get<NotificationsResponse>(
+            "/profile/notifications",
+            {
+              params: { filter: "all", take: 20, skip },
+              needsAuth: true,
+            }
+          );
+
+        logger.log("Notifications API response:", response);
+
+        if (append) {
+          setApiNotifications((prev) => [...prev, ...response.notifications]);
+        } else {
+          setApiNotifications(response.notifications);
+        }
+
+        setPagination({
+          total: response.pagination.total,
+          hasMore: response.pagination.hasMore,
+          skip: response.pagination.skip + response.pagination.take,
+        });
+      } catch (error) {
+        logger.error("Failed to fetch API notifications", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [userDetails]
+  );
+
+  const fetchAllNotifications = useCallback(async () => {
+    setIsLoading(true);
+    await Promise.all([
+      fetchLocalNotifications(),
+      fetchBadges(),
+      userDetails ? fetchApiNotifications(0, false) : Promise.resolve(),
+    ]);
+    setIsLoading(false);
+  }, [
+    fetchLocalNotifications,
+    fetchBadges,
+    fetchApiNotifications,
+    userDetails,
+  ]);
+
+  useEffect(() => {
+    fetchAllNotifications();
+  }, [fetchAllNotifications]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onLocalNotificationCreated(
+      (notification) => {
+        setLocalNotifications((prev) => [notification, ...prev]);
+      }
+    );
+
+    return () => unsubscribe();
+  }, []);
+
+  const mergedNotifications = useMemo<MergedNotification[]>(() => {
+    const sortByDate = (a: MergedNotification, b: MergedNotification) =>
+      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+
+    // High priority notifications (priority === 1) - keep in API order
+    const highPriority: MergedNotification[] = apiNotifications
+      .filter((n) => n.priority === 1)
+      .map((n) => ({ ...n, source: "api" as const }));
+
+    // Low priority: other API notifications + local notifications, merged and sorted by date
+    const lowPriorityApi: MergedNotification[] = apiNotifications
+      .filter((n) => n.priority !== 1)
+      .map((n) => ({ ...n, source: "api" as const }));
+
+    const localWithSource: MergedNotification[] = localNotifications.map(
+      (n) => ({
+        ...n,
+        source: "local" as const,
+      })
+    );
+
+    const lowPriority = [...lowPriorityApi, ...localWithSource].sort(
+      sortByDate
+    );
+
+    return [...highPriority, ...lowPriority];
+  }, [apiNotifications, localNotifications]);
+
+  const displayedNotifications = useMemo(() => {
+    return mergedNotifications.filter((n) => !clearingIds.has(n.id));
+  }, [mergedNotifications, clearingIds]);
+
+  const notifyCountChange = useCallback(() => {
+    window.dispatchEvent(new CustomEvent("notificationsChanged"));
+  }, []);
+
+  const handleMarkAsRead = useCallback(
+    async (id: string, source: "api" | "local") => {
+      try {
+        if (source === "api") {
+          await window.electron.hydraApi.patch(
+            `/profile/notifications/${id}/read`,
+            {
+              data: { id },
+              needsAuth: true,
+            }
+          );
+          setApiNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+          );
+        } else {
+          await window.electron.markLocalNotificationRead(id);
+          setLocalNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+          );
+        }
+        notifyCountChange();
+      } catch (error) {
+        logger.error("Failed to mark notification as read", error);
+      }
+    },
+    [notifyCountChange]
+  );
+
+  const handleMarkAllAsRead = useCallback(async () => {
+    try {
+      // Mark all API notifications as read
+      if (userDetails && apiNotifications.some((n) => !n.isRead)) {
+        await window.electron.hydraApi.patch(
+          `/profile/notifications/all/read`,
+          { needsAuth: true }
+        );
+        setApiNotifications((prev) =>
+          prev.map((n) => ({ ...n, isRead: true }))
+        );
+      }
+
+      // Mark all local notifications as read
+      await window.electron.markAllLocalNotificationsRead();
+      setLocalNotifications((prev) =>
+        prev.map((n) => ({ ...n, isRead: true }))
+      );
+
+      notifyCountChange();
+      showSuccessToast(t("marked_all_as_read"));
+    } catch (error) {
+      logger.error("Failed to mark all as read", error);
+      showErrorToast(t("failed_to_mark_as_read"));
+    }
+  }, [
+    apiNotifications,
+    userDetails,
+    showSuccessToast,
+    showErrorToast,
+    t,
+    notifyCountChange,
+  ]);
+
+  const handleDismiss = useCallback(
+    async (id: string, source: "api" | "local") => {
+      try {
+        if (source === "api") {
+          await window.electron.hydraApi.delete(
+            `/profile/notifications/${id}`,
+            { needsAuth: true }
+          );
+          setApiNotifications((prev) => prev.filter((n) => n.id !== id));
+          setPagination((prev) => ({ ...prev, total: prev.total - 1 }));
+        } else {
+          await window.electron.deleteLocalNotification(id);
+          setLocalNotifications((prev) => prev.filter((n) => n.id !== id));
+        }
+        notifyCountChange();
+      } catch (error) {
+        logger.error("Failed to dismiss notification", error);
+        showErrorToast(t("failed_to_dismiss"));
+      }
+    },
+    [showErrorToast, t, notifyCountChange]
+  );
+
+  const handleClearAll = useCallback(async () => {
+    try {
+      // Mark all as clearing for animation
+      const allIds = new Set([
+        ...apiNotifications.map((n) => n.id),
+        ...localNotifications.map((n) => n.id),
+      ]);
+      setClearingIds(allIds);
+
+      // Wait for exit animation
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Clear all API notifications
+      if (userDetails && apiNotifications.length > 0) {
+        await window.electron.hydraApi.delete(`/profile/notifications/all`, {
+          needsAuth: true,
+        });
+        setApiNotifications([]);
+      }
+
+      // Clear all local notifications
+      await window.electron.clearAllLocalNotifications();
+      setLocalNotifications([]);
+
+      setClearingIds(new Set());
+      setPagination({ total: 0, hasMore: false, skip: 0 });
+      notifyCountChange();
+      showSuccessToast(t("cleared_all"));
+    } catch (error) {
+      logger.error("Failed to clear all notifications", error);
+      setClearingIds(new Set());
+      showErrorToast(t("failed_to_clear"));
+    }
+  }, [
+    apiNotifications,
+    localNotifications,
+    userDetails,
+    showSuccessToast,
+    showErrorToast,
+    t,
+    notifyCountChange,
+  ]);
+
+  const handleLoadMore = useCallback(() => {
+    if (pagination.hasMore && !isLoading) {
+      fetchApiNotifications(pagination.skip, true);
+    }
+  }, [pagination, isLoading, fetchApiNotifications]);
+
+  const handleAcceptFriendRequest = useCallback(() => {
+    showSuccessToast(t("friend_request_accepted"));
+  }, [showSuccessToast, t]);
+
+  const handleRefuseFriendRequest = useCallback(() => {
+    showSuccessToast(t("friend_request_refused"));
+  }, [showSuccessToast, t]);
+
+  const renderNotification = (notification: MergedNotification) => {
+    const key =
+      notification.source === "local"
+        ? `local-${notification.id}`
+        : `api-${notification.id}`;
+
+    return (
+      <motion.div
+        key={key}
+        layout
+        initial={{ opacity: 0, x: -20 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: 100, transition: { duration: 0.2 } }}
+        transition={{ duration: 0.2 }}
+      >
+        {notification.source === "local" ? (
+          <LocalNotificationItem
+            notification={notification}
+            onDismiss={(id) => handleDismiss(id, "local")}
+            onMarkAsRead={(id) => handleMarkAsRead(id, "local")}
+          />
+        ) : (
+          <NotificationItem
+            notification={notification}
+            badges={badges}
+            onDismiss={(id) => handleDismiss(id, "api")}
+            onMarkAsRead={(id) => handleMarkAsRead(id, "api")}
+            onAcceptFriendRequest={handleAcceptFriendRequest}
+            onRefuseFriendRequest={handleRefuseFriendRequest}
+          />
+        )}
+      </motion.div>
+    );
+  };
+
+  const renderContent = () => {
+    if (isLoading && mergedNotifications.length === 0) {
+      return (
+        <div className="notifications__loading">
+          <span>{t("loading")}</span>
+        </div>
+      );
+    }
+
+    if (mergedNotifications.length === 0) {
+      return (
+        <div className="notifications__empty">
+          <div className="notifications__icon-container">
+            <BellIcon size={24} />
+          </div>
+          <h2>{t("empty_title")}</h2>
+          <p>{t("empty_description")}</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="notifications">
+        <div className="notifications__actions">
+          <Button theme="outline" onClick={handleMarkAllAsRead}>
+            {t("mark_all_as_read")}
+          </Button>
+          <Button theme="danger" onClick={handleClearAll}>
+            {t("clear_all")}
+          </Button>
+        </div>
+
+        <div className="notifications__list">
+          <AnimatePresence mode="popLayout">
+            {displayedNotifications.map(renderNotification)}
+          </AnimatePresence>
+        </div>
+
+        {pagination.hasMore && (
+          <div className="notifications__load-more">
+            <Button
+              theme="outline"
+              onClick={handleLoadMore}
+              disabled={isLoading}
+            >
+              {isLoading ? t("loading") : t("load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return <>{renderContent()}</>;
+}

src/renderer/src/pages/profile/profile-content/add-friend-modal.scss

@@ -0,0 +1,120 @@
+@use "../../../scss/globals.scss";
+
+.add-friend-modal {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  width: 100%;
+  min-width: 400px;
+
+  &__my-code {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    padding: calc(globals.$spacing-unit * 1.5);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__my-code-label {
+    font-size: 0.875rem;
+    color: globals.$muted-color;
+    font-weight: 500;
+  }
+
+  &__my-code-value {
+    font-size: 0.875rem;
+    color: globals.$body-color;
+    font-family: monospace;
+    font-weight: 600;
+    flex: 1;
+  }
+
+  &__copy-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 4px;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      color: globals.$body-color;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: globals.$spacing-unit;
+  }
+
+  &__button {
+    align-self: flex-end;
+    white-space: nowrap;
+  }
+
+  &__pending-status {
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    text-align: center;
+    padding: calc(globals.$spacing-unit / 2);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    margin-top: calc(globals.$spacing-unit * -1);
+  }
+
+  &__pending-container {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+
+    h3 {
+      margin: 0;
+      font-size: globals.$body-font-size;
+      font-weight: 600;
+      color: globals.$muted-color;
+    }
+  }
+
+  &__pending-list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__friend-item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__friend-name {
+    flex: 1;
+    font-weight: 600;
+    color: globals.$muted-color;
+    font-size: globals.$body-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx

@@ -0,0 +1,185 @@
+import { Avatar, Button, Modal, TextField } from "@renderer/components";
+import { useToast, useUserDetails } from "@renderer/hooks";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { CopyIcon } from "@primer/octicons-react";
+import "./add-friend-modal.scss";
+
+interface AddFriendModalProps {
+  readonly visible: boolean;
+  readonly onClose: () => void;
+}
+
+export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
+  const { t } = useTranslation("user_profile");
+  const navigate = useNavigate();
+
+  const [friendCode, setFriendCode] = useState("");
+  const [isAddingFriend, setIsAddingFriend] = useState(false);
+
+  const {
+    sendFriendRequest,
+    updateFriendRequestState,
+    friendRequests,
+    fetchFriendRequests,
+    userDetails,
+  } = useUserDetails();
+
+  const { showSuccessToast, showErrorToast } = useToast();
+
+  const copyMyFriendCode = () => {
+    if (userDetails?.id) {
+      navigator.clipboard.writeText(userDetails.id);
+      showSuccessToast(t("friend_code_copied"));
+    }
+  };
+
+  useEffect(() => {
+    if (visible) {
+      setFriendCode("");
+      fetchFriendRequests();
+    }
+  }, [visible, fetchFriendRequests]);
+
+  const handleChangeFriendCode = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const code = e.target.value.trim().slice(0, 8);
+    setFriendCode(code);
+  };
+
+  const validateFriendCode = (callback: () => void) => {
+    if (friendCode.length === 8) {
+      return callback();
+    }
+
+    showErrorToast(t("friend_code_length_error"));
+  };
+
+  const handleClickAddFriend = () => {
+    setIsAddingFriend(true);
+    sendFriendRequest(friendCode)
+      .then(() => {
+        setFriendCode("");
+        showSuccessToast(t("request_sent"));
+      })
+      .catch(() => {
+        showErrorToast(t("error_adding_friend"));
+      })
+      .finally(() => {
+        setIsAddingFriend(false);
+      });
+  };
+
+  const handleClickSeeProfile = () => {
+    if (friendCode.length === 8) {
+      onClose();
+      navigate(`/profile/${friendCode}`);
+    }
+  };
+
+  const handleClickRequest = (userId: string) => {
+    onClose();
+    navigate(`/profile/${userId}`);
+  };
+
+  const handleCancelFriendRequest = (userId: string) => {
+    updateFriendRequestState(userId, "CANCEL").catch(() => {
+      showErrorToast(t("try_again"));
+    });
+  };
+
+  const sentRequests = friendRequests.filter((req) => req.type === "SENT");
+  const currentRequest =
+    friendCode.length === 8
+      ? sentRequests.find((req) => req.id === friendCode)
+      : null;
+
+  return (
+    <Modal visible={visible} title={t("add_friends")} onClose={onClose}>
+      <div className="add-friend-modal">
+        {userDetails?.id && (
+          <div className="add-friend-modal__my-code">
+            <span className="add-friend-modal__my-code-label">
+              {t("your_friend_code")}
+            </span>
+            <span className="add-friend-modal__my-code-value">
+              {userDetails.id}
+            </span>
+            <button
+              onClick={copyMyFriendCode}
+              type="button"
+              className="add-friend-modal__copy-icon-button"
+              title={t("copy_friend_code")}
+            >
+              <CopyIcon size={16} />
+            </button>
+          </div>
+        )}
+
+        <div className="add-friend-modal__actions">
+          <TextField
+            label={t("friend_code")}
+            value={friendCode}
+            containerProps={{ style: { flex: 1 } }}
+            onChange={handleChangeFriendCode}
+          />
+          <Button
+            disabled={isAddingFriend}
+            type="button"
+            className="add-friend-modal__button"
+            onClick={() => validateFriendCode(handleClickAddFriend)}
+          >
+            {isAddingFriend ? t("sending") : t("add")}
+          </Button>
+          <Button
+            theme="outline"
+            onClick={() => validateFriendCode(handleClickSeeProfile)}
+            disabled={isAddingFriend}
+            className="add-friend-modal__button"
+            type="button"
+          >
+            {t("see_profile")}
+          </Button>
+        </div>
+        {currentRequest && (
+          <div className="add-friend-modal__pending-status">{t("pending")}</div>
+        )}
+
+        {sentRequests.length > 0 && (
+          <div className="add-friend-modal__pending-container">
+            <h3>{t("pending")}</h3>
+            <div className="add-friend-modal__pending-list">
+              {sentRequests.map((request) => (
+                <button
+                  key={request.id}
+                  type="button"
+                  className="add-friend-modal__friend-item"
+                  onClick={() => handleClickRequest(request.id)}
+                >
+                  <Avatar
+                    src={request.profileImageUrl}
+                    alt={request.displayName}
+                    size={40}
+                  />
+                  <span className="add-friend-modal__friend-name">
+                    {request.displayName}
+                  </span>
+                  <Button
+                    theme="outline"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleCancelFriendRequest(request.id);
+                    }}
+                    type="button"
+                  >
+                    {t("cancel_request")}
+                  </Button>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

src/renderer/src/pages/profile/profile-content/all-badges-modal.scss

@@ -0,0 +1,87 @@
+@use "../../../scss/globals.scss";
+
+.all-badges-modal {
+  display: flex;
+  flex-direction: column;
+  gap: globals.$spacing-unit;
+  max-height: 400px;
+  margin-top: calc(globals.$spacing-unit * -1);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    transition: background-color ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 0.5);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-title {
+    font-size: globals.$body-font-size;
+    font-weight: 600;
+    color: globals.$body-color;
+    margin: 0;
+  }
+
+  &__item-description {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+  }
+}

src/renderer/src/pages/profile/profile-content/all-badges-modal.tsx

@@ -0,0 +1,58 @@
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal } from "@renderer/components";
+import { userProfileContext } from "@renderer/context";
+import "./all-badges-modal.scss";
+
+interface AllBadgesModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function AllBadgesModal({
+  visible,
+  onClose,
+}: Readonly<AllBadgesModalProps>) {
+  const { t } = useTranslation("user_profile");
+  const { userProfile, badges } = useContext(userProfileContext);
+
+  const userBadges = userProfile?.badges
+    .map((badgeName) => badges.find((b) => b.name === badgeName))
+    .filter((badge) => badge !== undefined);
+
+  const modalTitle = (
+    <div className="all-badges-modal__title">
+      {t("badges")}
+      {userBadges && userBadges.length > 0 && (
+        <span className="all-badges-modal__count">{userBadges.length}</span>
+      )}
+    </div>
+  );
+
+  return (
+    <Modal visible={visible} title={modalTitle} onClose={onClose}>
+      <div className="all-badges-modal">
+        <div className="all-badges-modal__list">
+          {userBadges?.map((badge) => (
+            <div key={badge.name} className="all-badges-modal__item">
+              <div className="all-badges-modal__item-icon">
+                <img
+                  src={badge.badge.url}
+                  alt={badge.name}
+                  width={32}
+                  height={32}
+                />
+              </div>
+              <div className="all-badges-modal__item-content">
+                <h3 className="all-badges-modal__item-title">{badge.title}</h3>
+                <p className="all-badges-modal__item-description">
+                  {badge.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Modal>
+  );
+}

src/renderer/src/pages/profile/profile-content/all-friends-modal.scss

@@ -0,0 +1,101 @@
+@use "../../../scss/globals.scss";
+
+.all-friends-modal {
+  display: flex;
+  flex-direction: column;
+  gap: globals.$spacing-unit;
+  max-height: 400px;
+  margin-top: calc(globals.$spacing-unit * -1);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-weight: 600;
+    color: globals.$muted-color;
+    font-size: globals.$body-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__game {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+    font-size: globals.$small-font-size;
+    color: globals.$body-color;
+
+    img {
+      border-radius: 4px;
+    }
+
+    small {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__empty {
+    text-align: center;
+    padding: calc(globals.$spacing-unit * 4);
+    color: globals.$body-color;
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding-top: globals.$spacing-unit;
+  }
+}

src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Modal, Avatar, Button } from "@renderer/components";
+import { logger } from "@renderer/logger";
+import SteamLogo from "@renderer/assets/steam-logo.svg?react";
+import type { UserFriend } from "@types";
+import "./all-friends-modal.scss";
+
+interface AllFriendsModalProps {
+  visible: boolean;
+  onClose: () => void;
+  userId: string;
+  isMe: boolean;
+}
+
+const PAGE_SIZE = 20;
+
+export function AllFriendsModal({
+  visible,
+  onClose,
+  userId,
+  isMe,
+}: AllFriendsModalProps) {
+  const { t } = useTranslation("user_profile");
+  const navigate = useNavigate();
+
+  const [friends, setFriends] = useState<UserFriend[]>([]);
+  const [totalFriends, setTotalFriends] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [page, setPage] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const fetchFriends = useCallback(
+    async (pageNum: number, append = false) => {
+      if (isLoading) return;
+
+      setIsLoading(true);
+      try {
+        const url = isMe ? "/profile/friends" : `/users/${userId}/friends`;
+        const response = await window.electron.hydraApi.get<{
+          totalFriends: number;
+          friends: UserFriend[];
+        }>(url, {
+          params: { take: PAGE_SIZE, skip: pageNum * PAGE_SIZE },
+        });
+
+        if (append) {
+          setFriends((prev) => [...prev, ...response.friends]);
+        } else {
+          setFriends(response.friends);
+        }
+
+        setTotalFriends(response.totalFriends);
+        setHasMore((pageNum + 1) * PAGE_SIZE < response.totalFriends);
+        setPage(pageNum + 1);
+      } catch (error) {
+        logger.error("Failed to fetch friends", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [userId, isMe, isLoading]
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setFriends([]);
+      setPage(0);
+      setHasMore(true);
+      fetchFriends(0, false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, userId]);
+
+  const handleScroll = useCallback(() => {
+    if (!listRef.current || isLoading || !hasMore) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = listRef.current;
+    if (scrollTop + clientHeight >= scrollHeight - 50) {
+      fetchFriends(page, true);
+    }
+  }, [isLoading, hasMore, page, fetchFriends]);
+
+  const handleFriendClick = (friendId: string) => {
+    onClose();
+    navigate(`/profile/${friendId}`);
+  };
+
+  const handleLoadMore = () => {
+    if (!isLoading && hasMore) {
+      fetchFriends(page, true);
+    }
+  };
+
+  const getGameImage = (game: { iconUrl: string | null; title: string }) => {
+    if (game.iconUrl) {
+      return <img alt={game.title} width={16} height={16} src={game.iconUrl} />;
+    }
+    return <SteamLogo width={16} height={16} />;
+  };
+
+  const modalTitle = (
+    <div className="all-friends-modal__title">
+      {t("friends")}
+      {totalFriends > 0 && (
+        <span className="all-friends-modal__count">{totalFriends}</span>
+      )}
+    </div>
+  );
+
+  return (
+    <Modal visible={visible} title={modalTitle} onClose={onClose}>
+      <div className="all-friends-modal">
+        {friends.length === 0 && !isLoading ? (
+          <div className="all-friends-modal__empty">
+            {t("no_friends_added")}
+          </div>
+        ) : (
+          <div
+            ref={listRef}
+            className="all-friends-modal__list"
+            onScroll={handleScroll}
+          >
+            {friends.map((friend) => (
+              <div
+                key={friend.id}
+                className="all-friends-modal__item"
+                onClick={() => handleFriendClick(friend.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    handleFriendClick(friend.id);
+                  }
+                }}
+                role="button"
+                tabIndex={0}
+              >
+                <Avatar
+                  size={40}
+                  src={friend.profileImageUrl}
+                  alt={friend.displayName}
+                />
+                <div className="all-friends-modal__info">
+                  <span className="all-friends-modal__name">
+                    {friend.displayName}
+                  </span>
+                  {friend.currentGame && (
+                    <div className="all-friends-modal__game">
+                      {getGameImage(friend.currentGame)}
+                      <small>{friend.currentGame.title}</small>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {isLoading && (
+          <div className="all-friends-modal__loading">{t("loading")}...</div>
+        )}
+
+        {hasMore && !isLoading && friends.length > 0 && (
+          <div className="all-friends-modal__load-more">
+            <Button theme="outline" onClick={handleLoadMore}>
+              {t("load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

src/renderer/src/pages/profile/profile-content/badges-box.scss

@@ -0,0 +1,95 @@
+@use "../../../scss/globals.scss";
+
+.badges-box {
+  &__box {
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__header {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    width: 100%;
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    transition: background-color ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+
+    img {
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 0.5);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-title {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: globals.$body-color;
+    margin: 0;
+  }
+
+  &__item-description {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+  }
+
+  &__view-all-container {
+    padding-top: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  &__view-all {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
+}

src/renderer/src/pages/profile/profile-content/badges-box.tsx

@@ -0,0 +1,67 @@
+import { userProfileContext } from "@renderer/context";
+import { useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AllBadgesModal } from "./all-badges-modal";
+import "./badges-box.scss";
+
+const MAX_VISIBLE_BADGES = 4;
+
+export function BadgesBox() {
+  const { userProfile, badges } = useContext(userProfileContext);
+  const { t } = useTranslation("user_profile");
+  const [showAllBadgesModal, setShowAllBadgesModal] = useState(false);
+
+  if (!userProfile?.badges.length) return null;
+
+  const visibleBadges = userProfile.badges.slice(0, MAX_VISIBLE_BADGES);
+  const hasMoreBadges = userProfile.badges.length > MAX_VISIBLE_BADGES;
+
+  return (
+    <>
+      <div className="badges-box__box">
+        <div className="badges-box__list">
+          {visibleBadges.map((badgeName) => {
+            const badge = badges.find((b) => b.name === badgeName);
+
+            if (!badge) return null;
+
+            return (
+              <div key={badge.name} className="badges-box__item">
+                <div className="badges-box__item-icon">
+                  <img
+                    src={badge.badge.url}
+                    alt={badge.name}
+                    width={32}
+                    height={32}
+                  />
+                </div>
+                <div className="badges-box__item-content">
+                  <h3 className="badges-box__item-title">{badge.title}</h3>
+                  <p className="badges-box__item-description">
+                    {badge.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        {hasMoreBadges && (
+          <div className="badges-box__view-all-container">
+            <button
+              type="button"
+              className="badges-box__view-all"
+              onClick={() => setShowAllBadgesModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <AllBadgesModal
+        visible={showAllBadgesModal}
+        onClose={() => setShowAllBadgesModal(false)}
+      />
+    </>
+  );
+}

src/renderer/src/pages/profile/profile-content/friends-box.scss

@@ -1,18 +1,34 @@
 @use "../../../scss/globals.scss";
 
 .friends-box {
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
+  &__box {
+    padding: calc(globals.$spacing-unit * 2);
+    position: relative;
   }
 
-  &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
-    padding: calc(globals.$spacing-unit * 2);
+  &__add-friend-button {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
+
+  &__view-all-container {
+    padding-top: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+    display: flex;
+    justify-content: flex-start;
   }
 
   &__list {
@@ -44,11 +60,12 @@
 
   &__friend-name {
     color: globals.$muted-color;
-    font-weight: bold;
-    font-size: globals.$body-font-size;
+    font-size: 0.8rem;
+    font-weight: 600;
   }
 
   &__game-info {
+    font-size: 0.75rem;
     display: flex;
     gap: globals.$spacing-unit;
     align-items: center;
@@ -63,4 +80,19 @@
   &__game-image {
     border-radius: 4px;
   }
+
+  &__view-all {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
 }

src/renderer/src/pages/profile/profile-content/friends-box.tsx

@@ -1,15 +1,24 @@
 import { userProfileContext } from "@renderer/context";
-import { useFormat } from "@renderer/hooks";
-import { useContext } from "react";
+import { useUserDetails } from "@renderer/hooks";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { PlusIcon } from "@primer/octicons-react";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar, Link } from "@renderer/components";
+import { AllFriendsModal } from "./all-friends-modal";
+import { AddFriendModal } from "./add-friend-modal";
 import "./friends-box.scss";
 
+const MAX_VISIBLE_FRIENDS = 5;
+
 export function FriendsBox() {
-  const { userProfile, userStats } = useContext(userProfileContext);
+  const { userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
   const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
+  const [showAllFriendsModal, setShowAllFriendsModal] = useState(false);
+  const [showAddFriendModal, setShowAddFriendModal] = useState(false);
+
+  const isMe = userDetails?.id === userProfile?.id;
 
   const getGameImage = (game: { iconUrl: string | null; title: string }) => {
     if (game.iconUrl) {
@@ -28,22 +37,15 @@ export function FriendsBox() {
 
   if (!userProfile?.friends.length) return null;
 
-  return (
-    <div>
-      <div className="friends-box__section-header">
-        <div className="profile-content__section-title-group">
-          <h2>{t("friends")}</h2>
-          {userStats && (
-            <span className="profile-content__section-badge">
-              {numberFormatter.format(userStats.friendsCount)}
-            </span>
-          )}
-        </div>
-      </div>
+  const visibleFriends = userProfile.friends.slice(0, MAX_VISIBLE_FRIENDS);
+  const totalFriends = userProfile.friends.length;
+  const showViewAllButton = totalFriends > MAX_VISIBLE_FRIENDS;
 
+  return (
+    <>
       <div className="friends-box__box">
         <ul className="friends-box__list">
-          {userProfile?.friends.map((friend) => (
+          {visibleFriends.map((friend) => (
             <li
               key={friend.id}
               title={
@@ -77,7 +79,61 @@ export function FriendsBox() {
             </li>
           ))}
         </ul>
+        {showViewAllButton && (
+          <div className="friends-box__view-all-container">
+            <button
+              type="button"
+              className="friends-box__view-all"
+              onClick={() => setShowAllFriendsModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
+        )}
       </div>
-    </div>
+
+      {userProfile && (
+        <>
+          <AllFriendsModal
+            visible={showAllFriendsModal}
+            onClose={() => setShowAllFriendsModal(false)}
+            userId={userProfile.id}
+            isMe={isMe}
+          />
+          <AddFriendModal
+            visible={showAddFriendModal}
+            onClose={() => setShowAddFriendModal(false)}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export function FriendsBoxAddButton() {
+  const { userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
+  const { t } = useTranslation("user_profile");
+  const [showAddFriendModal, setShowAddFriendModal] = useState(false);
+
+  const isMe = userDetails?.id === userProfile?.id;
+
+  if (!isMe) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="friends-box__add-friend-button"
+        onClick={() => setShowAddFriendModal(true)}
+      >
+        <PlusIcon size={16} />
+        {t("add_friends")}
+      </button>
+      <AddFriendModal
+        visible={showAddFriendModal}
+        onClose={() => setShowAddFriendModal(false)}
+      />
+    </>
   );
 }

src/renderer/src/pages/profile/profile-content/profile-content.tsx

@@ -14,14 +14,15 @@ import { useTranslation } from "react-i18next";
 import type { GameShop } from "@types";
 import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
-import { FriendsBox } from "./friends-box";
+import { BadgesBox } from "./badges-box";
+import { FriendsBox, FriendsBoxAddButton } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
-import { UserKarmaBox } from "./user-karma-box";
+import { ProfileSection } from "../profile-section/profile-section";
 import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
 import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
-import { ProfileTabs } from "./profile-tabs";
+import { ProfileTabs, type ProfileTabType } from "./profile-tabs";
 import { LibraryTab } from "./library-tab";
 import { ReviewsTab } from "./reviews-tab";
 import { AnimatePresence } from "framer-motion";
@@ -95,7 +96,7 @@ export function ProfileContent() {
   const [sortBy, setSortBy] = useState<SortOption>("playedRecently");
   const statsAnimation = useRef(-1);
 
-  const [activeTab, setActiveTab] = useState<"library" | "reviews">("library");
+  const [activeTab, setActiveTab] = useState<ProfileTabType>("library");
 
   // User reviews state
   const [reviews, setReviews] = useState<UserReview[]>([]);
@@ -186,8 +187,6 @@ export function ProfileContent() {
       );
       setReviews(response.reviews);
       setReviewsTotalCount(response.totalCount);
-    } catch (error) {
-      // Error handling for fetching reviews
     } finally {
       setIsLoadingReviews(false);
     }
@@ -426,10 +425,35 @@ export function ProfileContent() {
 
         {shouldShowRightContent && (
           <div className="profile-content__right-content">
-            <UserStatsBox />
-            <UserKarmaBox />
-            <RecentGamesBox />
-            <FriendsBox />
+            {userStats && (
+              <ProfileSection title={t("stats")} defaultOpen={true}>
+                <UserStatsBox />
+              </ProfileSection>
+            )}
+            {userProfile?.badges.length > 0 && (
+              <ProfileSection
+                title={t("badges")}
+                count={userProfile.badges.length}
+                defaultOpen={true}
+              >
+                <BadgesBox />
+              </ProfileSection>
+            )}
+            {userProfile?.recentGames.length > 0 && (
+              <ProfileSection title={t("activity")} defaultOpen={true}>
+                <RecentGamesBox />
+              </ProfileSection>
+            )}
+            {userProfile?.friends.length > 0 && (
+              <ProfileSection
+                title={t("friends")}
+                count={userStats?.friendsCount || userProfile.friends.length}
+                action={<FriendsBoxAddButton />}
+                defaultOpen={true}
+              >
+                <FriendsBox />
+              </ProfileSection>
+            )}
             <ReportProfile />
           </div>
         )}

src/renderer/src/pages/profile/profile-content/profile-tabs.tsx

@@ -2,10 +2,12 @@ import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import "./profile-content.scss";
 
+export type ProfileTabType = "library" | "reviews";
+
 interface ProfileTabsProps {
-  activeTab: "library" | "reviews";
+  activeTab: ProfileTabType;
   reviewsTotalCount: number;
-  onTabChange: (tab: "library" | "reviews") => void;
+  onTabChange: (tab: ProfileTabType) => void;
 }
 
 export function ProfileTabs({

src/renderer/src/pages/profile/profile-content/recent-games-box.scss

@@ -2,19 +2,9 @@
 
 .recent-games {
   &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
     padding: calc(globals.$spacing-unit * 2);
   }
 
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__list {
     list-style: none;
     margin: 0;
@@ -57,13 +47,15 @@
   }
 
   &__game-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
   &__game-description {
+    font-size: 0.75rem;
     display: flex;
     align-items: center;
     gap: globals.$spacing-unit;

src/renderer/src/pages/profile/profile-content/recent-games-box.tsx

@@ -42,38 +42,32 @@ export function RecentGamesBox() {
   if (!userProfile?.recentGames.length) return null;
 
   return (
-    <div>
-      <div className="recent-games__section-header">
-        <h2>{t("activity")}</h2>
-      </div>
+    <div className="recent-games__box">
+      <ul className="recent-games__list">
+        {userProfile?.recentGames.map((game) => (
+          <li key={`${game.shop}-${game.objectId}`}>
+            <Link
+              to={buildUserGameDetailsPath(game)}
+              className="recent-games__list-item"
+            >
+              <img
+                src={game.iconUrl!}
+                alt={game.title}
+                className="recent-games__game-image"
+              />
 
-      <div className="recent-games__box">
-        <ul className="recent-games__list">
-          {userProfile?.recentGames.map((game) => (
-            <li key={`${game.shop}-${game.objectId}`}>
-              <Link
-                to={buildUserGameDetailsPath(game)}
-                className="recent-games__list-item"
-              >
-                <img
-                  src={game.iconUrl!}
-                  alt={game.title}
-                  className="recent-games__game-image"
-                />
+              <div className="recent-games__game-details">
+                <span className="recent-games__game-title">{game.title}</span>
 
-                <div className="recent-games__game-details">
-                  <span className="recent-games__game-title">{game.title}</span>
-
-                  <div className="recent-games__game-description">
-                    <ClockIcon />
-                    <small>{formatPlayTime(game)}</small>
-                  </div>
+                <div className="recent-games__game-description">
+                  <ClockIcon />
+                  <small>{formatPlayTime(game)}</small>
                 </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

src/renderer/src/pages/profile/profile-content/user-karma-box.scss

@@ -1,47 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-karma {
-  &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
-    padding: calc(globals.$spacing-unit * 2);
-  }
-
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 1.5);
-  }
-
-  &__stats-row {
-    display: flex;
-    align-items: center;
-    color: globals.$body-color;
-  }
-
-  &__description {
-    display: flex;
-    align-items: center;
-    gap: globals.$spacing-unit;
-    font-weight: 600;
-    font-size: 1.1rem;
-  }
-
-  &__info {
-    padding-top: calc(globals.$spacing-unit * 0.5);
-  }
-
-  &__info-text {
-    color: globals.$muted-color;
-    font-size: 0.85rem;
-    line-height: 1.4;
-  }
-}

src/renderer/src/pages/profile/profile-content/user-karma-box.tsx

@@ -1,43 +0,0 @@
-import { useContext } from "react";
-import { userProfileContext } from "@renderer/context";
-import { useTranslation } from "react-i18next";
-import { useFormat, useUserDetails } from "@renderer/hooks";
-import { Award } from "lucide-react";
-import "./user-karma-box.scss";
-
-export function UserKarmaBox() {
-  const { isMe, userProfile } = useContext(userProfileContext);
-  const { userDetails } = useUserDetails();
-  const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
-
-  // Get karma from userDetails (for current user) or userProfile (for other users)
-  const karma = isMe ? userDetails?.karma : userProfile?.karma;
-
-  // Don't show if karma is not available
-  if (karma === undefined || karma === null) return null;
-
-  return (
-    <div>
-      <div className="user-karma__section-header">
-        <h2>{t("karma")}</h2>
-      </div>
-
-      <div className="user-karma__box">
-        <div className="user-karma__content">
-          <div className="user-karma__stats-row">
-            <p className="user-karma__description">
-              <Award size={20} /> {numberFormatter.format(karma)}{" "}
-              {t("karma_count")}
-            </p>
-          </div>
-          <div className="user-karma__info">
-            <small className="user-karma__info-text">
-              {t("karma_description")}
-            </small>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/renderer/src/pages/profile/profile-content/user-stats-box.scss

@@ -2,19 +2,9 @@
 
 .user-stats {
   &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
     padding: calc(globals.$spacing-unit * 2);
   }
 
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__list {
     list-style: none;
     margin: 0;
@@ -42,13 +32,15 @@
   }
 
   &__list-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
   &__list-description {
+    font-size: 0.75rem;
     display: flex;
     align-items: center;
     gap: globals.$spacing-unit;
@@ -72,4 +64,10 @@
       cursor: pointer;
     }
   }
+
+  &__karma-info-text {
+    color: globals.$muted-color;
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
 }

src/renderer/src/pages/profile/profile-content/user-stats-box.tsx

@@ -1,16 +1,18 @@
 import { useCallback, useContext } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useTranslation } from "react-i18next";
-import { useFormat } from "@renderer/hooks";
+import { useFormat, useUserDetails } from "@renderer/hooks";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { ClockIcon, TrophyIcon } from "@primer/octicons-react";
+import { Award } from "lucide-react";
 import "./user-stats-box.scss";
 
 export function UserStatsBox() {
   const { showHydraCloudModal } = useSubscription();
-  const { userStats, isMe } = useContext(userProfileContext);
+  const { userStats, isMe, userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
   const { t } = useTranslation("user_profile");
   const { numberFormatter } = useFormat();
 
@@ -33,88 +35,102 @@ export function UserStatsBox() {
 
   if (!userStats) return null;
 
+  const karma = isMe ? userDetails?.karma : userProfile?.karma;
+  const hasKarma = karma !== undefined && karma !== null;
+
   return (
-    <div>
-      <div className="user-stats__section-header">
-        <h2>{t("stats")}</h2>
-      </div>
-
-      <div className="user-stats__box">
-        <ul className="user-stats__list">
-          {(isMe || userStats.unlockedAchievementSum !== undefined) && (
-            <li className="user-stats__list-item">
-              <h3 className="user-stats__list-title">
-                {t("achievements_unlocked")}
-              </h3>
-              {userStats.unlockedAchievementSum !== undefined ? (
-                <div className="user-stats__stats-row">
-                  <p className="user-stats__list-description">
-                    <TrophyIcon /> {userStats.unlockedAchievementSum}{" "}
-                    {t("achievements")}
-                  </p>
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => showHydraCloudModal("achievements")}
-                  className="user-stats__link"
-                >
-                  <small style={{ color: "var(--color-warning)" }}>
-                    {t("show_achievements_on_profile")}
-                  </small>
-                </button>
-              )}
-            </li>
-          )}
-
-          {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && (
-            <li className="user-stats__list-item">
-              <h3 className="user-stats__list-title">{t("earned_points")}</h3>
-              {userStats.achievementsPointsEarnedSum !== undefined ? (
-                <div className="user-stats__stats-row">
-                  <p className="user-stats__list-description">
-                    <HydraIcon width={20} height={20} />
-                    {numberFormatter.format(
-                      userStats.achievementsPointsEarnedSum.value
-                    )}
-                  </p>
-                  <p title={t("ranking_updated_weekly")}>
-                    {t("top_percentile", {
-                      percentile:
-                        userStats.achievementsPointsEarnedSum.topPercentile,
-                    })}
-                  </p>
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => showHydraCloudModal("achievements-points")}
-                  className="user-stats__link"
-                >
-                  <small className="user-stats__link--warning">
-                    {t("show_points_on_profile")}
-                  </small>
-                </button>
-              )}
-            </li>
-          )}
-
+    <div className="user-stats__box">
+      <ul className="user-stats__list">
+        {(isMe || userStats.unlockedAchievementSum !== undefined) && (
           <li className="user-stats__list-item">
-            <h3 className="user-stats__list-title">{t("total_play_time")}</h3>
+            <h3 className="user-stats__list-title">
+              {t("achievements_unlocked")}
+            </h3>
+            {userStats.unlockedAchievementSum !== undefined ? (
+              <div className="user-stats__stats-row">
+                <p className="user-stats__list-description">
+                  <TrophyIcon /> {userStats.unlockedAchievementSum}{" "}
+                  {t("achievements")}
+                </p>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => showHydraCloudModal("achievements")}
+                className="user-stats__link"
+              >
+                <small style={{ color: "var(--color-warning)" }}>
+                  {t("show_achievements_on_profile")}
+                </small>
+              </button>
+            )}
+          </li>
+        )}
+
+        {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && (
+          <li className="user-stats__list-item">
+            <h3 className="user-stats__list-title">{t("earned_points")}</h3>
+            {userStats.achievementsPointsEarnedSum !== undefined ? (
+              <div className="user-stats__stats-row">
+                <p className="user-stats__list-description">
+                  <HydraIcon width={20} height={20} />
+                  {numberFormatter.format(
+                    userStats.achievementsPointsEarnedSum.value
+                  )}
+                </p>
+                <p title={t("ranking_updated_weekly")}>
+                  {t("top_percentile", {
+                    percentile:
+                      userStats.achievementsPointsEarnedSum.topPercentile,
+                  })}
+                </p>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => showHydraCloudModal("achievements-points")}
+                className="user-stats__link"
+              >
+                <small className="user-stats__link--warning">
+                  {t("show_points_on_profile")}
+                </small>
+              </button>
+            )}
+          </li>
+        )}
+
+        <li className="user-stats__list-item">
+          <h3 className="user-stats__list-title">{t("total_play_time")}</h3>
+          <div className="user-stats__stats-row">
+            <p className="user-stats__list-description">
+              <ClockIcon />
+              {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
+            </p>
+            <p title={t("ranking_updated_weekly")}>
+              {t("top_percentile", {
+                percentile: userStats.totalPlayTimeInSeconds.topPercentile,
+              })}
+            </p>
+          </div>
+        </li>
+
+        {hasKarma && karma !== undefined && karma !== null && (
+          <li className="user-stats__list-item user-stats__list-item--karma">
+            <h3 className="user-stats__list-title">{t("karma")}</h3>
             <div className="user-stats__stats-row">
               <p className="user-stats__list-description">
-                <ClockIcon />
-                {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
-              </p>
-              <p title={t("ranking_updated_weekly")}>
-                {t("top_percentile", {
-                  percentile: userStats.totalPlayTimeInSeconds.topPercentile,
-                })}
+                <Award size={20} /> {numberFormatter.format(karma)}{" "}
+                {t("karma_count")}
               </p>
             </div>
+            <div className="user-stats__karma-info">
+              <small className="user-stats__karma-info-text">
+                {t("karma_description")}
+              </small>
+            </div>
           </li>
-        </ul>
-      </div>
+        )}
+      </ul>
     </div>
   );
 }

src/renderer/src/pages/profile/profile-content/wrapped-tab.scss

@@ -0,0 +1,100 @@
+@use "../../../scss/globals.scss";
+
+.wrapped-fullscreen-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+
+  &__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.9);
+    border: none;
+    z-index: 1;
+  }
+
+  &__container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: calc(globals.$spacing-unit * 2);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  &__close-button {
+    position: absolute;
+    top: calc(globals.$spacing-unit * 5);
+    right: calc(globals.$spacing-unit * 5);
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: white;
+    transition: background 0.2s ease;
+    z-index: 10;
+    pointer-events: auto;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &__content {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
+    pointer-events: auto;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  &__loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+  }
+
+  &__spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(255, 255, 255, 0.2);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: wrapped-spin 0.8s linear infinite;
+  }
+
+  &__iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
+
+@keyframes wrapped-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/renderer/src/pages/profile/profile-content/wrapped-tab.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import { XIcon } from "@primer/octicons-react";
+import "./wrapped-tab.scss";
+
+interface WrappedFullscreenModalProps {
+  userId: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface ScaleConfig {
+  scale: number;
+  width: number;
+  height: number;
+}
+
+const SCALE_CONFIGS: Record<number, ScaleConfig> = {
+  0.25: { scale: 0.25, width: 270, height: 480 },
+  0.3: { scale: 0.3, width: 324, height: 576 },
+  0.5: { scale: 0.5, width: 540, height: 960 },
+};
+
+const getScaleConfigForHeight = (height: number): ScaleConfig => {
+  if (height >= 1000) return SCALE_CONFIGS[0.5];
+  if (height >= 650) return SCALE_CONFIGS[0.3];
+  return SCALE_CONFIGS[0.25];
+};
+
+export function WrappedFullscreenModal({
+  userId,
+  isOpen,
+  onClose,
+}: Readonly<WrappedFullscreenModalProps>) {
+  const [config, setConfig] = useState<ScaleConfig>(SCALE_CONFIGS[0.5]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const updateConfig = () => {
+      setConfig(getScaleConfigForHeight(window.innerHeight));
+    };
+
+    updateConfig();
+    window.addEventListener("resize", updateConfig);
+    return () => window.removeEventListener("resize", updateConfig);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsLoading(true);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <dialog className="wrapped-fullscreen-modal" aria-modal="true" open>
+      <button
+        type="button"
+        className="wrapped-fullscreen-modal__backdrop"
+        onClick={onClose}
+        aria-label="Close wrapped"
+      />
+      <div className="wrapped-fullscreen-modal__container">
+        <button
+          type="button"
+          className="wrapped-fullscreen-modal__close-button"
+          onClick={onClose}
+          aria-label="Close wrapped"
+        >
+          <XIcon size={24} />
+        </button>
+
+        <div
+          className="wrapped-fullscreen-modal__content"
+          style={{ width: config.width, height: config.height }}
+        >
+          {isLoading && (
+            <div className="wrapped-fullscreen-modal__loader">
+              <div className="wrapped-fullscreen-modal__spinner" />
+            </div>
+          )}
+          <iframe
+            src={`https://hydrawrapped.com/embed/${userId}?scale=${config.scale}`}
+            className="wrapped-fullscreen-modal__iframe"
+            title="Wrapped 2025"
+            onLoad={() => setIsLoading(false)}
+          />
+        </div>
+      </div>
+    </dialog>
+  );
+}

src/renderer/src/pages/profile/profile-hero/profile-hero.scss

@@ -27,9 +27,33 @@
     }
   }
 
-  &__badges {
+  &__copy-button {
     display: flex;
-    gap: calc(globals.$spacing-unit / 2);
+    align-items: center;
+    justify-content: flex-end;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    background-color: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 1.5);
+    border-radius: 6px;
+    transition: background-color ease 0.2s;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-shrink: 0;
+    box-sizing: border-box;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &__friend-code {
+    font-size: 0.875rem;
+    font-family: monospace;
+    white-space: nowrap;
   }
 
   &__user-information {
@@ -120,6 +144,11 @@
     }
   }
 
+  &__left-actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+  }
+
   &__actions {
     display: flex;
     gap: globals.$spacing-unit;
@@ -131,5 +160,35 @@
     &--outline {
       border-color: globals.$body-color;
     }
+
+    &--wrapped {
+      background: linear-gradient(
+        120deg,
+        #2a57ff 0%,
+        #2951e6 11%,
+        #2f5bff 16%,
+        #2c56e8 29%,
+        #244acc 34%,
+        #2245c2 40%,
+        #3a6bff 45%,
+        #3766f2 50%,
+        #2444b8 56%,
+        #122a73 82%,
+        #2348b3 86%,
+        #1f429e 87%,
+        #10286a 93%,
+        #0e2a63 100%
+      );
+      background-color: #2a57ff;
+      background-size: 105% 100%;
+      background-position: 100% 50%;
+      border: none;
+      color: white;
+      transition: background-position 0.4s ease;
+
+      &:hover {
+        background-position: 0% 50%;
+      }
+    }
   }
 }