style: enhance overlay styling and adjust close button positioning

v3.7.6 - Hungarian Translation

src/locales/en/translation.json

@@ -420,7 +420,9 @@
     "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"
+    "no": "No",
+    "network": "NETWORK",
+    "peak": "PEAK"
   },
   "settings": {
     "downloads_path": "Downloads path",

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

@@ -408,7 +408,9 @@
     "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"
+    "no": "Não",
+    "network": "REDE",
+    "peak": "PICO"
   },
   "settings": {
     "downloads_path": "Diretório dos downloads",

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

@@ -1,5 +1,21 @@
 @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;
@@ -7,12 +23,17 @@
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  max-width: none;
+  max-height: none;
 
   &__close-button {
     position: absolute;
-    top: calc(globals.$spacing-unit * 4);
+    top: calc(globals.$spacing-unit * 5);
-    right: calc(globals.$spacing-unit * 3);
+    right: calc(globals.$spacing-unit * 4);
     cursor: pointer;
     color: globals.$body-color;
     background-color: rgba(0, 0, 0, 0.5);

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

@@ -3,7 +3,6 @@ import { createPortal } from "react-dom";
 import { XIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 
-import { Backdrop } from "../backdrop/backdrop";
 import "./fullscreen-media-modal.scss";
 
 export interface FullscreenMediaModalProps {
@@ -64,7 +63,7 @@ export function FullscreenMediaModal({
   if (!visible || !src) return null;
 
   return createPortal(
-    <Backdrop>
+    <div className="fullscreen-media-modal__overlay">
       <dialog className="fullscreen-media-modal" open aria-label={alt}>
         <button
           type="button"
@@ -82,7 +81,7 @@ export function FullscreenMediaModal({
           <img src={src} alt={alt} className="fullscreen-media-modal__image" />
         </div>
       </dialog>
-    </Backdrop>,
+    </div>,
     document.body
   );
 }

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

@@ -12,6 +12,8 @@ export interface DownloadState {
   gameId: string | null;
   gamesWithDeletionInProgress: string[];
   extraction: ExtractionInfo | null;
+  peakSpeeds: Record<string, number>;
+  speedHistory: Record<string, number[]>;
 }
 
 const initialState: DownloadState = {
@@ -19,6 +21,8 @@ const initialState: DownloadState = {
   gameId: null,
   gamesWithDeletionInProgress: [],
   extraction: null,
+  peakSpeeds: {},
+  speedHistory: {},
 };
 
 export const downloadSlice = createSlice({
@@ -28,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;
@@ -62,6 +87,20 @@ export const downloadSlice = createSlice({
     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] = [];
+    },
   },
 });
 
@@ -72,4 +111,6 @@ export const {
   removeGameFromDeleting,
   setExtractionProgress,
   clearExtraction,
+  updatePeakSpeed,
+  clearPeakSpeed,
 } = downloadSlice.actions;

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

@@ -412,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>
             )}
@@ -512,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>>(
     {}
   );
@@ -576,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")) {
@@ -842,7 +785,14 @@ export function DownloadGroup({
       ? (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
+    // 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) {
@@ -864,7 +814,7 @@ export function DownloadGroup({
         currentProgress={currentProgress}
         dominantColor={dominantColor}
         lastPacket={lastPacket}
-        speedHistory={speedHistoryRef.current[game.id] || []}
+        speedHistory={gameSpeedHistory}
         formatSpeed={formatSpeed}
         calculateETA={calculateETA}
         pauseDownload={pauseDownload}
@@ -908,7 +858,9 @@ 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">
                     {extraction?.visibleId === game.id ? (