style: enhance overlay styling and adjust close button positioning

v3.7.6 - Hungarian Translation

package.json

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

@@ -115,6 +115,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 +203,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 +416,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",

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/torrenting/start-game-download.ts

@@ -82,6 +82,7 @@ const startGameDownload = async (
     queued: true,
     extracting: false,
     automaticallyExtract,
+    extractionProgress: 0,
   };
 
   try {

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,
+    onProgress?: (progress: ExtractionProgress) => void
-    errorCb: () => void
+  ): Promise<ExtractionResult> {
-  ) {
+    return new Promise((resolve, reject) => {
-    const tryPassword = (index = -1) => {
+      const tryPassword = (index = -1) => {
-      const password = passwords[index] ?? "";
+        const password = passwords[index] ?? "";
-      logger.info(`Trying password ${password} on ${filePath}`);
+        logger.info(
+          `Trying password "${password || "(empty)"}" on ${filePath}`
+        );
 
-      const args = ["x", filePath, "-y", "-p" + password];
+        const extractedFiles: string[] = [];
+        let fileCount = 0;
 
-      if (outputPath) {
+        const options: CommandLineSwitches = {
-        args.push("-o" + outputPath);
+          $bin: this.binaryPath,
-      }
+          $progress: true,
+          yes: true,
+          password: password || undefined,
+        };
 
-      const child = cp.execFile(this.binaryPath, args, {
+        if (outputPath) {
-        cwd,
+          options.outputDir = outputPath;
-      });
-
-      child.once("exit", (code) => {
-        if (code === 0) {
-          successCb();
-          return;
         }
 
-        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);
+        stream.on("error", (err) => {
-        } else {
+          logger.error(`Extraction error for ${filePath}:`, err);
-          logger.info(`Failed to extract file: ${filePath}`);
 
-          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/decky-plugin.ts

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

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

@@ -126,21 +126,10 @@ export class DownloadManager {
         }
       );
 
-      if (WindowManager.mainWindow && download) {
-        WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
-        WindowManager.mainWindow.webContents.send(
-          "on-download-progress",
-          JSON.parse(
-            JSON.stringify({
-              ...status,
-              game,
-            })
-          )
-        );
-      }
-
       const shouldExtract = download.automaticallyExtract;
 
+      // Handle download completion BEFORE sending progress to renderer
+      // This ensures extraction starts and DB is updated before UI reacts
       if (progress === 1 && download) {
         publishDownloadCompleteNotification(game);
 
@@ -154,6 +143,7 @@ export class DownloadManager {
             shouldSeed: true,
             queued: false,
             extracting: shouldExtract,
+            extractionProgress: shouldExtract ? 0 : download.extractionProgress,
           });
         } else {
           await downloadsSublevel.put(gameId, {
@@ -162,12 +152,22 @@ export class DownloadManager {
             shouldSeed: false,
             queued: false,
             extracting: shouldExtract,
+            extractionProgress: shouldExtract ? 0 : download.extractionProgress,
           });
 
           this.cancelDownload(gameId);
         }
 
         if (shouldExtract) {
+          // Send initial extraction progress BEFORE download progress
+          // This ensures the UI shows extraction immediately
+          WindowManager.mainWindow?.webContents.send(
+            "on-extraction-progress",
+            game.shop,
+            game.objectId,
+            0
+          );
+
           const gameFilesManager = new GameFilesManager(
             game.shop,
             game.objectId
@@ -209,6 +209,18 @@ export class DownloadManager {
           this.downloadingGameId = null;
         }
       }
+
+      // Send progress to renderer after completion handling
+      if (WindowManager.mainWindow && download) {
+        WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
+        WindowManager.mainWindow.webContents.send(
+          "on-download-progress",
+          structuredClone({
+            ...status,
+            game,
+          })
+        );
+      }
     }
   }
 

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() {
+  private get gameKey() {
-    const gameKey = levelKeys.game(this.shop, this.objectId);
+    return levelKeys.game(this.shop, this.objectId);
-    const download = await downloadsSublevel.get(gameKey);
+  }
 
-    await downloadsSublevel.put(gameKey, {
+  private async updateExtractionProgress(progress: number, force = false) {
-      ...download!,
+    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(
+    if (filesToExtract.length === 0) return;
-      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();
-            }
-          );
-        });
-      })
-    );
 
-    compressedFiles.forEach((file) => {
+    await this.updateExtractionProgress(0, true);
-      const extractionPath = path.join(directoryPath, file);
 
-      if (fs.existsSync(extractionPath)) {
+    const totalFiles = filesToExtract.length;
-        fs.unlink(extractionPath, (err) => {
+    let completedFiles = 0;
-          if (err) {
-            logger.error(`Failed to delete file: ${file}`, err);
 
-            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),
+      downloadsSublevel.get(this.gameKey),
-      gamesSublevel.get(gameKey),
+      gamesSublevel.get(this.gameKey),
     ]);
 
-    await downloadsSublevel.put(gameKey, {
+    if (!download) return;
-      ...download!,
+
+    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) {
+    if (publishNotification && game) {
-      publishExtractionCompleteNotification(game!);
+      publishExtractionCompleteNotification(game);
     }
   }
 
   async extractDownloadedFile() {
-    const gameKey = levelKeys.game(this.shop, this.objectId);
-
     const [download, game] = await Promise.all([
-      downloadsSublevel.get(gameKey),
+      downloadsSublevel.get(this.gameKey),
-      gamesSublevel.get(gameKey),
+      gamesSublevel.get(this.gameKey),
     ]);
 
     if (!download || !game) return false;
@@ -119,39 +168,39 @@ export class GameFilesManager {
       path.parse(download.folderName!).name
     );
 
-    SevenZip.extractFile(
+    await this.updateExtractionProgress(0, true);
-      {
+
-        filePath,
+    try {
-        outputPath: extractionPath,
+      const result = await SevenZip.extractFile(
-        passwords: ["online-fix.me", "steamrip.com"],
+        {
-      },
+          filePath,
-      async () => {
+          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) => {
+          WindowManager.mainWindow?.webContents.send(
-            if (err) {
+            "on-archive-deletion-prompt",
-              logger.error(
+            [filePath]
-                `Failed to delete file: ${download.folderName}`,
+          );
-                err
-              );
-
-              this.clearExtractionState();
-            }
-          });
         }
 
-        await downloadsSublevel.put(gameKey, {
+        await downloadsSublevel.put(this.gameKey, {
-          ...download!,
+          ...download,
           folderName: path.parse(download.folderName!).name,
         });
 
-        this.setExtractionComplete();
+        await this.setExtractionComplete();
-      },
-      () => {
-        this.clearExtractionState();
       }
-    );
+    } catch (err) {
+      logger.error(`Failed to extract downloaded file: ${filePath}`, err);
+      await this.clearExtractionState();
+    }
 
     return true;
   }

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/preload/index.ts

@@ -267,6 +267,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) =>

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,14 @@ 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,
@@ -78,6 +81,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"),
@@ -184,12 +191,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,6 +299,12 @@ export function App() {
         feature={hydraCloudFeature}
       />
 
+      <ArchiveDeletionModal
+        visible={showArchiveDeletionModal}
+        archivePaths={archivePaths}
+        onClose={() => setShowArchiveDeletionModal(false)}
+      />
+
       {userDetails && (
         <UserFriendModal
           visible={isFriendsModalVisible}

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 (

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/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/declaration.d.ts

@@ -208,6 +208,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>;
 

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

@@ -390,6 +390,21 @@
     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%;
@@ -521,5 +536,9 @@
     background-color: #fff;
     transition: width 0.3s ease;
     border-radius: 4px;
+
+    &--extraction {
+      background-color: #fff;
+    }
   }
 }

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

@@ -128,16 +128,20 @@ function SpeedChart({
         g = 255,
         b = 255;
       if (color.startsWith("#")) {
-        const hex = color.replace("#", "");
+        let hex = color.replace("#", "");
-        r = Number.parseInt(hex.substring(0, 2), 16);
+        // Handle shorthand hex colors (e.g., "#fff" -> "#ffffff")
-        g = Number.parseInt(hex.substring(2, 4), 16);
+        if (hex.length === 3) {
-        b = Number.parseInt(hex.substring(4, 6), 16);
+          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]);
+          r = Number.parseInt(matches[0]) || 255;
-          g = Number.parseInt(matches[1]);
+          g = Number.parseInt(matches[1]) || 255;
-          b = Number.parseInt(matches[2]);
+          b = Number.parseInt(matches[2]) || 255;
         }
       }
       const displaySpeeds = speeds.slice(-totalBars);
@@ -203,6 +207,7 @@ function SpeedChart({
 interface HeroDownloadViewProps {
   game: LibraryGame;
   isGameDownloading: boolean;
+  isGameExtracting?: boolean;
   downloadSpeed: number;
   finalDownloadSize: string;
   peakSpeed: number;
@@ -221,6 +226,7 @@ interface HeroDownloadViewProps {
 function HeroDownloadView({
   game,
   isGameDownloading,
+  isGameExtracting = false,
   downloadSpeed,
   finalDownloadSize,
   peakSpeed,
@@ -278,11 +284,17 @@ function HeroDownloadView({
           <div className="download-group__progress-row download-group__progress-row--bar">
             <div className="download-group__progress-wrapper">
               <div className="download-group__progress-info-row">
-                {lastPacket?.isCheckingFiles ? (
+                {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
@@ -293,7 +305,7 @@ function HeroDownloadView({
                 <span></span>
               </div>
               <div className="download-group__progress-info-row">
-                {!lastPacket?.isCheckingFiles && (
+                {!lastPacket?.isCheckingFiles && !isGameExtracting && (
                   <span className="download-group__progress-time">
                     {isGameDownloading &&
                       lastPacket?.timeRemaining &&
@@ -311,42 +323,44 @@ function HeroDownloadView({
               </div>
               <div className="download-group__progress-bar">
                 <div
-                  className="download-group__progress-fill"
+                  className={`download-group__progress-fill ${isGameExtracting ? "download-group__progress-fill--extraction" : ""}`}
                   style={{
                     width: `${currentProgress * 100}%`,
                   }}
                 />
               </div>
             </div>
-            <div className="download-group__hero-buttons">
+            {!isGameExtracting && (
-              {isGameDownloading ? (
+              <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={() => pauseDownload(game.shop, game.objectId)}
+                  onClick={() => cancelDownload(game.shop, game.objectId)}
                   className="download-group__glass-btn"
                 >
-                  <ColumnsIcon size={14} />
+                  <XCircleIcon size={14} />
-                  {t("pause")}
+                  {t("cancel")}
                 </button>
-              ) : (
+              </div>
-                <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>
 
@@ -398,10 +412,12 @@ function HeroDownloadView({
                 </div>
               )}
 
-            {game.download?.downloader && (
+            {game.download?.downloader !== undefined && (
               <div className="download-group__stat-item">
                 <div className="download-group__stat-content">
-                  <Badge>{DOWNLOADER_NAME[game.download.downloader]}</Badge>
+                  <Badge>
+                    {DOWNLOADER_NAME[Number(game.download.downloader)]}
+                  </Badge>
                 </div>
               </div>
             )}
@@ -442,6 +458,8 @@ export function DownloadGroup({
     (state) => state.userPreferences.value
   );
 
+  const extraction = useAppSelector((state) => state.download.extraction);
+
   const { updateLibrary } = useLibrary();
 
   const {
@@ -496,8 +514,9 @@ export function DownloadGroup({
 
   const { formatDistance } = useDate();
 
-  const [peakSpeeds, setPeakSpeeds] = useState<Record<string, number>>({});
+  // Get speed history and peak speeds from Redux (centralized state)
-  const speedHistoryRef = useRef<Record<string, number[]>>({});
+  const speedHistory = useAppSelector((state) => state.download.speedHistory);
+  const peakSpeeds = useAppSelector((state) => state.download.peakSpeeds);
   const [dominantColors, setDominantColors] = useState<Record<string, string>>(
     {}
   );
@@ -560,68 +579,8 @@ export function DownloadGroup({
     });
   }, [library, lastPacket?.gameId]);
 
-  useEffect(() => {
+  // Speed history and peak speeds are now tracked in Redux (in setLastPacket reducer)
-    if (lastPacket?.gameId && lastPacket.downloadSpeed !== undefined) {
+  // No local effect needed - data is updated atomically when packets arrive
-      const gameId = lastPacket.gameId;
-
-      const currentPeak = peakSpeeds[gameId] || 0;
-      if (lastPacket.downloadSpeed > currentPeak) {
-        setPeakSpeeds((prev) => ({
-          ...prev,
-          [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();
-      }
-    }
-  }, [lastPacket?.gameId, lastPacket?.downloadSpeed, peakSpeeds]);
-
-  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] = [];
-          setPeakSpeeds((prev) => ({ ...prev, [game.id]: 0 }));
-        }
-      }
-    }
-  }, [library]);
-
-  useEffect(() => {
-    const timeouts: NodeJS.Timeout[] = [];
-
-    for (const game of library) {
-      if (
-        game.download?.progress === 1 &&
-        speedHistoryRef.current[game.id]?.length > 0
-      ) {
-        const timeout = setTimeout(() => {
-          speedHistoryRef.current[game.id] = [];
-          setPeakSpeeds((prev) => ({ ...prev, [game.id]: 0 }));
-        }, 10_000);
-        timeouts.push(timeout);
-      }
-    }
-
-    return () => {
-      for (const timeout of timeouts) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [library]);
 
   useEffect(() => {
     if (library.length > 0 && title === t("download_in_progress")) {
@@ -819,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 = peakSpeeds[game.id] || 0;
+    // Use lastPacket.gameId for lookup since that's the key used to store the data
-    const currentProgress =
+    // Fall back to game.id if lastPacket is not available
-      isGameDownloading && lastPacket
+    const dataKey = lastPacket?.gameId ?? game.id;
-        ? lastPacket.progress
+    const gameSpeedHistory = speedHistory[dataKey] ?? [];
-        : game.download?.progress || 0;
+    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";
 
@@ -836,13 +807,14 @@ 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] || []}
+        speedHistory={gameSpeedHistory}
         formatSpeed={formatSpeed}
         calculateETA={calculateETA}
         pauseDownload={pauseDownload}
@@ -868,9 +840,13 @@ export function DownloadGroup({
         {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">
                 <button
@@ -882,12 +858,15 @@ export function DownloadGroup({
                 </button>
                 <div className="download-group__simple-meta">
                   <div className="download-group__simple-meta-row">
-                    <Badge>{DOWNLOADER_NAME[game.download!.downloader]}</Badge>
+                    <Badge>
+                      {DOWNLOADER_NAME[Number(game.download!.downloader)]}
+                    </Badge>
                   </div>
                   <div className="download-group__simple-meta-row">
-                    {game.download?.extracting ? (
+                    {extraction?.visibleId === game.id ? (
                       <span className="download-group__simple-extracting">
-                        {t("extracting")}
+                        {t("extracting")} (
+                        {Math.round(extraction.progress * 100)}%)
                       </span>
                     ) : (
                       <span className="download-group__simple-size">

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 */
+      /* Is downloading or extracting */
-      if (lastPacket?.gameId === next.id || next.download.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/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 ? (
+      {isExtracting && extractionInProgressInfo}
-        downloadInProgressInfo
+      {!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/profile/profile-hero/profile-hero.tsx

@@ -9,7 +9,12 @@ import {
   XCircleFillIcon,
 } from "@primer/octicons-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
-import { Avatar, Button, Link } from "@renderer/components";
+import {
+  Avatar,
+  Button,
+  FullscreenMediaModal,
+  Link,
+} from "@renderer/components";
 import { useTranslation } from "react-i18next";
 import {
   useAppSelector,
@@ -33,6 +38,7 @@ type FriendAction =
 
 export function ProfileHero() {
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
+  const [showFullscreenAvatar, setShowFullscreenAvatar] = useState(false);
   const [isPerformingAction, setIsPerformingAction] = useState(false);
 
   const {
@@ -246,10 +252,12 @@ export function ProfileHero() {
   ]);
 
   const handleAvatarClick = useCallback(() => {
-    if (isMe) {
+    if (userProfile?.profileImageUrl) {
+      setShowFullscreenAvatar(true);
+    } else if (isMe) {
       setShowEditProfileModal(true);
     }
-  }, [isMe]);
+  }, [isMe, userProfile?.profileImageUrl]);
 
   const currentGame = useMemo(() => {
     if (isMe) {
@@ -272,6 +280,13 @@ export function ProfileHero() {
         onClose={() => setShowEditProfileModal(false)}
       />
 
+      <FullscreenMediaModal
+        visible={showFullscreenAvatar}
+        onClose={() => setShowFullscreenAvatar(false)}
+        src={userProfile?.profileImageUrl}
+        alt={userProfile?.displayName}
+      />
+
       <section
         className="profile-hero__content-box"
         style={{ background: !backgroundImage ? heroBackground : undefined }}

src/types/level.types.ts

@@ -82,6 +82,7 @@ export interface Download {
   timestamp: number;
   extracting: boolean;
   automaticallyExtract: boolean;
+  extractionProgress: number;
 }
 
 export interface GameAchievement {

yarn.lock

@@ -6438,11 +6438,26 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
 
+lodash.defaultsdeep@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
+  integrity sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==
+
+lodash.defaultto@^4.14.0:
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaultto/-/lodash.defaultto-4.14.0.tgz#38bd3d425acee733e0e2bbbd4e4b29711cc2ee11"
+  integrity sha512-G6tizqH6rg4P5j32Wy4Z3ZIip7OfG8YWWlPFzUFGcYStH1Ld0l1tWs6NevEQNEDnO1M3NZYjuHuraaFSN5WqeQ==
+
 lodash.escaperegexp@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347"
   integrity sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==
 
+lodash.flattendeep@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
+  integrity sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==
+
 lodash.includes@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@@ -6453,6 +6468,11 @@ lodash.isboolean@^3.0.3:
   resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
   integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
 
+lodash.isempty@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+  integrity sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -6493,6 +6513,11 @@ lodash.mergewith@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
   integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
 
+lodash.negate@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.negate/-/lodash.negate-3.0.2.tgz#9c897b0bf610019e0b43b8ff3f0afef3d7b66f34"
+  integrity sha512-JGJYYVslKYC0tRMm/7igfdHulCjoXjoganRNWM8AgS+RXfOvFnPkOveDhPI65F9aAypCX9QEEQoBqWf7Q6uAeA==
+
 lodash.once@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
@@ -6872,6 +6897,19 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-7z@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/node-7z/-/node-7z-3.0.0.tgz#42f71c5a43b00028749f7c88291a7abf2e2623e3"
+  integrity sha512-KIznWSxIkOYO/vOgKQfJEaXd7rgoFYKZbaurainCEdMhYc7V7mRHX+qdf2HgbpQFcdJL/Q6/XOPrDLoBeTfuZA==
+  dependencies:
+    debug "^4.3.2"
+    lodash.defaultsdeep "^4.6.1"
+    lodash.defaultto "^4.14.0"
+    lodash.flattendeep "^4.4.0"
+    lodash.isempty "^4.4.0"
+    lodash.negate "^3.0.2"
+    normalize-path "^3.0.0"
+
 node-abi@^3.45.0:
   version "3.78.0"
   resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.78.0.tgz#fd0ecbd0aa89857b98da06bd3909194abb0821ba"
@@ -6927,6 +6965,11 @@ nopt@^6.0.0:
   dependencies:
     abbrev "^1.0.0"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-url@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"