refactor: enhance download management by adding filename resolution and extraction handling in DownloadManage

src/locales/en/translation.json

@@ -404,6 +404,10 @@
     "completed": "Completed",
     "removed": "Not downloaded",
     "cancel": "Cancel",
+    "cancel_download": "Cancel download?",
+    "cancel_download_description": "Are you sure you want to cancel this download? All downloaded files will be deleted.",
+    "keep_downloading": "No, keep downloading",
+    "yes_cancel": "Yes, cancel",
     "filter": "Filter downloaded games",
     "remove": "Remove",
     "downloading_metadata": "Downloading metadata…",

src/main/main.ts

@@ -34,7 +34,9 @@ export const loadState = async () => {
 
   await import("./events");
 
-  if (!userPreferences?.useNativeHttpDownloader) {
+  // Only spawn aria2 if user explicitly disabled native HTTP downloader
+  // Default is to use native HTTP downloader (aria2 is opt-in)
+  if (userPreferences?.useNativeHttpDownloader === false) {
     Aria2.spawn();
   }
 
@@ -124,8 +126,9 @@ export const loadState = async () => {
 
   // For torrents or if JS downloader is disabled, use Python RPC
   const isTorrent = downloadToResume?.downloader === Downloader.Torrent;
+  // Default to true - native HTTP downloader is enabled by default
   const useJsDownloader =
-    userPreferences?.useNativeHttpDownloader && !isTorrent;
+    (userPreferences?.useNativeHttpDownloader ?? true) && !isTorrent;
 
   if (useJsDownloader && downloadToResume) {
     // Start Python RPC for seeding only, then resume HTTP download with JS

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

@@ -75,6 +75,34 @@ export class DownloadManager {
     return filename.replaceAll(/[<>:"/\\|?*]/g, "_");
   }
 
+  private static resolveFilename(
+    resumingFilename: string | undefined,
+    originalUrl: string,
+    downloadUrl: string
+  ): string | undefined {
+    if (resumingFilename) return resumingFilename;
+
+    const extracted =
+      this.extractFilename(originalUrl, downloadUrl) ||
+      this.extractFilename(downloadUrl);
+
+    return extracted ? this.sanitizeFilename(extracted) : undefined;
+  }
+
+  private static buildDownloadOptions(
+    url: string,
+    savePath: string,
+    filename: string | undefined,
+    headers?: Record<string, string>
+  ) {
+    return {
+      url,
+      savePath,
+      filename,
+      headers,
+    };
+  }
+
   private static createDownloadPayload(
     directUrl: string,
     originalUrl: string,
@@ -111,7 +139,8 @@ export class DownloadManager {
       levelKeys.userPreferences,
       { valueEncoding: "json" }
     );
-    return userPreferences?.useNativeHttpDownloader ?? false;
+    // Default to true - native HTTP downloader is enabled by default (opt-out)
+    return userPreferences?.useNativeHttpDownloader ?? true;
   }
 
   private static isHttpDownloader(downloader: Downloader): boolean {
@@ -285,100 +314,127 @@ export class DownloadManager {
 
   public static async watchDownloads() {
     const status = await this.getDownloadStatus();
+    if (!status) return;
 
-    if (status) {
-      const { gameId, progress } = status;
+    const { gameId, progress } = status;
+    const [download, game] = await Promise.all([
+      downloadsSublevel.get(gameId),
+      gamesSublevel.get(gameId),
+    ]);
 
-      const [download, game] = await Promise.all([
-        downloadsSublevel.get(gameId),
-        gamesSublevel.get(gameId),
-      ]);
+    if (!download || !game) return;
 
-      if (!download || !game) return;
+    this.sendProgressUpdate(progress, status, game);
 
-      const userPreferences = await db.get<string, UserPreferences | null>(
-        levelKeys.userPreferences,
-        { valueEncoding: "json" }
+    if (progress === 1) {
+      await this.handleDownloadCompletion(download, game, gameId);
+    }
+  }
+
+  private static sendProgressUpdate(
+    progress: number,
+    status: DownloadProgress,
+    game: any
+  ) {
+    if (WindowManager.mainWindow) {
+      WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
+      WindowManager.mainWindow.webContents.send(
+        "on-download-progress",
+        structuredClone({ ...status, game })
+      );
+    }
+  }
+
+  private static async handleDownloadCompletion(
+    download: Download,
+    game: any,
+    gameId: string
+  ) {
+    publishDownloadCompleteNotification(game);
+
+    const userPreferences = await db.get<string, UserPreferences | null>(
+      levelKeys.userPreferences,
+      { valueEncoding: "json" }
+    );
+
+    await this.updateDownloadStatus(
+      download,
+      gameId,
+      userPreferences?.seedAfterDownloadComplete
+    );
+
+    if (download.automaticallyExtract) {
+      this.handleExtraction(download, game);
+    }
+
+    await this.processNextQueuedDownload();
+  }
+
+  private static async updateDownloadStatus(
+    download: Download,
+    gameId: string,
+    shouldSeed?: boolean
+  ) {
+    const shouldExtract = download.automaticallyExtract;
+
+    if (shouldSeed && download.downloader === Downloader.Torrent) {
+      await downloadsSublevel.put(gameId, {
+        ...download,
+        status: "seeding",
+        shouldSeed: true,
+        queued: false,
+        extracting: shouldExtract,
+      });
+    } else {
+      await downloadsSublevel.put(gameId, {
+        ...download,
+        status: "complete",
+        shouldSeed: false,
+        queued: false,
+        extracting: shouldExtract,
+      });
+      this.cancelDownload(gameId);
+    }
+  }
+
+  private static handleExtraction(download: Download, game: any) {
+    const gameFilesManager = new GameFilesManager(game.shop, game.objectId);
+
+    if (
+      FILE_EXTENSIONS_TO_EXTRACT.some((ext) =>
+        download.folderName?.endsWith(ext)
+      )
+    ) {
+      gameFilesManager.extractDownloadedFile();
+    } else if (download.folderName) {
+      gameFilesManager
+        .extractFilesInDirectory(
+          path.join(download.downloadPath, download.folderName)
+        )
+        .then(() => gameFilesManager.setExtractionComplete());
+    }
+  }
+
+  private static async processNextQueuedDownload() {
+    const downloads = await downloadsSublevel
+      .values()
+      .all()
+      .then((games) =>
+        sortBy(
+          games.filter((game) => game.status === "paused" && game.queued),
+          "timestamp",
+          "DESC"
+        )
       );
 
-      if (WindowManager.mainWindow && download) {
-        WindowManager.mainWindow.setProgressBar(progress === 1 ? -1 : progress);
-        WindowManager.mainWindow.webContents.send(
-          "on-download-progress",
-          structuredClone({ ...status, game })
-        );
-      }
+    const [nextItemOnQueue] = downloads;
 
-      const shouldExtract = download.automaticallyExtract;
-
-      if (progress === 1 && download) {
-        publishDownloadCompleteNotification(game);
-
-        if (
-          userPreferences?.seedAfterDownloadComplete &&
-          download.downloader === Downloader.Torrent
-        ) {
-          await downloadsSublevel.put(gameId, {
-            ...download,
-            status: "seeding",
-            shouldSeed: true,
-            queued: false,
-            extracting: shouldExtract,
-          });
-        } else {
-          await downloadsSublevel.put(gameId, {
-            ...download,
-            status: "complete",
-            shouldSeed: false,
-            queued: false,
-            extracting: shouldExtract,
-          });
-
-          this.cancelDownload(gameId);
-        }
-
-        if (shouldExtract) {
-          const gameFilesManager = new GameFilesManager(
-            game.shop,
-            game.objectId
-          );
-
-          if (
-            FILE_EXTENSIONS_TO_EXTRACT.some((ext) =>
-              download.folderName?.endsWith(ext)
-            )
-          ) {
-            gameFilesManager.extractDownloadedFile();
-          } else if (download.folderName) {
-            gameFilesManager
-              .extractFilesInDirectory(
-                path.join(download.downloadPath, download.folderName)
-              )
-              .then(() => gameFilesManager.setExtractionComplete());
-          }
-        }
-
-        const downloads = await downloadsSublevel
-          .values()
-          .all()
-          .then((games) =>
-            sortBy(
-              games.filter((game) => game.status === "paused" && game.queued),
-              "timestamp",
-              "DESC"
-            )
-          );
-
-        const [nextItemOnQueue] = downloads;
-
-        if (nextItemOnQueue) {
-          this.resumeDownload(nextItemOnQueue);
-        } else {
-          this.downloadingGameId = null;
-          this.usingJsDownloader = false;
-          this.jsDownloader = null;
-        }
-      }
+    if (nextItemOnQueue) {
+      this.resumeDownload(nextItemOnQueue);
+    } else {
+      this.downloadingGameId = null;
+      this.usingJsDownloader = false;
+      this.jsDownloader = null;
     }
   }
 
@@ -483,160 +539,235 @@ export class DownloadManager {
     filename?: string;
     headers?: Record<string, string>;
   } | null> {
+    const resumingFilename = download.folderName || undefined;
+
     switch (download.downloader) {
-      case Downloader.Gofile: {
-        const id = download.uri.split("/").pop();
-        const token = await GofileApi.authorize();
-        const downloadLink = await GofileApi.getDownloadLink(id!);
-        await GofileApi.checkDownloadUrl(downloadLink);
-        const filename =
-          this.extractFilename(download.uri, downloadLink) ||
-          this.extractFilename(downloadLink);
-
-        return {
-          url: downloadLink,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-          headers: { Cookie: `accountToken=${token}` },
-        };
-      }
-      case Downloader.PixelDrain: {
-        const id = download.uri.split("/").pop();
-        const downloadUrl = await PixelDrainApi.getDownloadUrl(id!);
-        const filename =
-          this.extractFilename(download.uri, downloadUrl) ||
-          this.extractFilename(downloadUrl);
-
-        return {
-          url: downloadUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.Qiwi: {
-        const downloadUrl = await QiwiApi.getDownloadUrl(download.uri);
-        const filename =
-          this.extractFilename(download.uri, downloadUrl) ||
-          this.extractFilename(downloadUrl);
-
-        return {
-          url: downloadUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.Datanodes: {
-        const downloadUrl = await DatanodesApi.getDownloadUrl(download.uri);
-        const filename =
-          this.extractFilename(download.uri, downloadUrl) ||
-          this.extractFilename(downloadUrl);
-
-        return {
-          url: downloadUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.Buzzheavier: {
-        logger.log(
-          `[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`
-        );
-        const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
-        const filename =
-          this.extractFilename(download.uri, directUrl) ||
-          this.extractFilename(directUrl);
-
-        return {
-          url: directUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.FuckingFast: {
-        logger.log(
-          `[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`
-        );
-        const directUrl = await FuckingFastApi.getDirectLink(download.uri);
-        const filename =
-          this.extractFilename(download.uri, directUrl) ||
-          this.extractFilename(directUrl);
-
-        return {
-          url: directUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.Mediafire: {
-        const downloadUrl = await MediafireApi.getDownloadUrl(download.uri);
-        const filename =
-          this.extractFilename(download.uri, downloadUrl) ||
-          this.extractFilename(downloadUrl);
-
-        return {
-          url: downloadUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.RealDebrid: {
-        const downloadUrl = await RealDebridClient.getDownloadUrl(download.uri);
-        if (!downloadUrl) throw new Error(DownloadError.NotCachedOnRealDebrid);
-        const filename =
-          this.extractFilename(download.uri, downloadUrl) ||
-          this.extractFilename(downloadUrl);
-
-        return {
-          url: downloadUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.TorBox: {
-        const { name, url } = await TorBoxClient.getDownloadInfo(download.uri);
-        if (!url) return null;
-
-        return {
-          url,
-          savePath: download.downloadPath,
-          filename: name,
-        };
-      }
-      case Downloader.Hydra: {
-        const downloadUrl = await HydraDebridClient.getDownloadUrl(
-          download.uri
-        );
-        if (!downloadUrl) throw new Error(DownloadError.NotCachedOnHydra);
-        const filename =
-          this.extractFilename(download.uri, downloadUrl) ||
-          this.extractFilename(downloadUrl);
-
-        return {
-          url: downloadUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
-      case Downloader.VikingFile: {
-        logger.log(
-          `[DownloadManager] Processing VikingFile download for URI: ${download.uri}`
-        );
-        const downloadUrl = await VikingFileApi.getDownloadUrl(download.uri);
-        const filename =
-          this.extractFilename(download.uri, downloadUrl) ||
-          this.extractFilename(downloadUrl);
-
-        return {
-          url: downloadUrl,
-          savePath: download.downloadPath,
-          filename: filename ? this.sanitizeFilename(filename) : undefined,
-        };
-      }
+      case Downloader.Gofile:
+        return this.getGofileDownloadOptions(download, resumingFilename);
+      case Downloader.PixelDrain:
+        return this.getPixelDrainDownloadOptions(download, resumingFilename);
+      case Downloader.Qiwi:
+        return this.getQiwiDownloadOptions(download, resumingFilename);
+      case Downloader.Datanodes:
+        return this.getDatanodesDownloadOptions(download, resumingFilename);
+      case Downloader.Buzzheavier:
+        return this.getBuzzheavierDownloadOptions(download, resumingFilename);
+      case Downloader.FuckingFast:
+        return this.getFuckingFastDownloadOptions(download, resumingFilename);
+      case Downloader.Mediafire:
+        return this.getMediafireDownloadOptions(download, resumingFilename);
+      case Downloader.RealDebrid:
+        return this.getRealDebridDownloadOptions(download, resumingFilename);
+      case Downloader.TorBox:
+        return this.getTorBoxDownloadOptions(download, resumingFilename);
+      case Downloader.Hydra:
+        return this.getHydraDownloadOptions(download, resumingFilename);
+      case Downloader.VikingFile:
+        return this.getVikingFileDownloadOptions(download, resumingFilename);
       default:
         return null;
     }
   }
 
+  private static async getGofileDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const id = download.uri.split("/").pop();
+    const token = await GofileApi.authorize();
+    const downloadLink = await GofileApi.getDownloadLink(id!);
+    await GofileApi.checkDownloadUrl(downloadLink);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadLink
+    );
+    return this.buildDownloadOptions(
+      downloadLink,
+      download.downloadPath,
+      filename,
+      { Cookie: `accountToken=${token}` }
+    );
+  }
+
+  private static async getPixelDrainDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const id = download.uri.split("/").pop();
+    const downloadUrl = await PixelDrainApi.getDownloadUrl(id!);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadUrl
+    );
+    return this.buildDownloadOptions(
+      downloadUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getQiwiDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const downloadUrl = await QiwiApi.getDownloadUrl(download.uri);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadUrl
+    );
+    return this.buildDownloadOptions(
+      downloadUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getDatanodesDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const downloadUrl = await DatanodesApi.getDownloadUrl(download.uri);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadUrl
+    );
+    return this.buildDownloadOptions(
+      downloadUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getBuzzheavierDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    logger.log(
+      `[DownloadManager] Processing Buzzheavier download for URI: ${download.uri}`
+    );
+    const directUrl = await BuzzheavierApi.getDirectLink(download.uri);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      directUrl
+    );
+    return this.buildDownloadOptions(
+      directUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getFuckingFastDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    logger.log(
+      `[DownloadManager] Processing FuckingFast download for URI: ${download.uri}`
+    );
+    const directUrl = await FuckingFastApi.getDirectLink(download.uri);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      directUrl
+    );
+    return this.buildDownloadOptions(
+      directUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getMediafireDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const downloadUrl = await MediafireApi.getDownloadUrl(download.uri);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadUrl
+    );
+    return this.buildDownloadOptions(
+      downloadUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getRealDebridDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const downloadUrl = await RealDebridClient.getDownloadUrl(download.uri);
+    if (!downloadUrl) throw new Error(DownloadError.NotCachedOnRealDebrid);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadUrl
+    );
+    return this.buildDownloadOptions(
+      downloadUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getTorBoxDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const { name, url } = await TorBoxClient.getDownloadInfo(download.uri);
+    if (!url) return null;
+    return this.buildDownloadOptions(
+      url,
+      download.downloadPath,
+      resumingFilename || name
+    );
+  }
+
+  private static async getHydraDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    const downloadUrl = await HydraDebridClient.getDownloadUrl(download.uri);
+    if (!downloadUrl) throw new Error(DownloadError.NotCachedOnHydra);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadUrl
+    );
+    return this.buildDownloadOptions(
+      downloadUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
+  private static async getVikingFileDownloadOptions(
+    download: Download,
+    resumingFilename?: string
+  ) {
+    logger.log(
+      `[DownloadManager] Processing VikingFile download for URI: ${download.uri}`
+    );
+    const downloadUrl = await VikingFileApi.getDownloadUrl(download.uri);
+    const filename = this.resolveFilename(
+      resumingFilename,
+      download.uri,
+      downloadUrl
+    );
+    return this.buildDownloadOptions(
+      downloadUrl,
+      download.downloadPath,
+      filename
+    );
+  }
+
   private static async getDownloadPayload(download: Download) {
     const downloadId = levelKeys.game(download.shop, download.objectId);
 

src/main/services/download/js-http-downloader.ts

@@ -258,7 +258,11 @@ export class JsHttpDownloader {
   }
 
   private handleDownloadError(err: Error): void {
-    if (err.name === "AbortError") {
+    // Handle abort/cancellation errors - these are expected when user pauses/cancels
+    if (
+      err.name === "AbortError" ||
+      (err as NodeJS.ErrnoException).code === "ERR_STREAM_PREMATURE_CLOSE"
+    ) {
       logger.log("[JsHttpDownloader] Download aborted");
       this.status = "paused";
     } else {

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

@@ -1,6 +1,6 @@
 import type { GameShop, LibraryGame, SeedingStatus } from "@types";
 
-import { Badge, Button } from "@renderer/components";
+import { Badge, Button, ConfirmationModal } from "@renderer/components";
 import {
   formatDownloadProgress,
   buildGameDetailsPath,
@@ -219,7 +219,7 @@ interface HeroDownloadViewProps {
   calculateETA: () => string;
   pauseDownload: (shop: GameShop, objectId: string) => void;
   resumeDownload: (shop: GameShop, objectId: string) => void;
-  cancelDownload: (shop: GameShop, objectId: string) => void;
+  onCancelClick: (shop: GameShop, objectId: string) => void;
   t: (key: string) => string;
 }
 
@@ -238,7 +238,7 @@ function HeroDownloadView({
   calculateETA,
   pauseDownload,
   resumeDownload,
-  cancelDownload,
+  onCancelClick,
   t,
 }: Readonly<HeroDownloadViewProps>) {
   const navigate = useNavigate();
@@ -353,7 +353,7 @@ function HeroDownloadView({
                 )}
                 <button
                   type="button"
-                  onClick={() => cancelDownload(game.shop, game.objectId)}
+                  onClick={() => onCancelClick(game.shop, game.objectId)}
                   className="download-group__glass-btn"
                 >
                   <XCircleIcon size={14} />
@@ -523,6 +523,13 @@ export function DownloadGroup({
   const [optimisticallyResumed, setOptimisticallyResumed] = useState<
     Record<string, boolean>
   >({});
+  const [cancelModalVisible, setCancelModalVisible] = useState(false);
+  const [gameToCancelShop, setGameToCancelShop] = useState<GameShop | null>(
+    null
+  );
+  const [gameToCancelObjectId, setGameToCancelObjectId] = useState<
+    string | null
+  >(null);
 
   const extractDominantColor = useCallback(
     async (imageUrl: string, gameId: string) => {
@@ -658,6 +665,27 @@ export function DownloadGroup({
     [updateLibrary]
   );
 
+  const handleCancelClick = useCallback((shop: GameShop, objectId: string) => {
+    setGameToCancelShop(shop);
+    setGameToCancelObjectId(objectId);
+    setCancelModalVisible(true);
+  }, []);
+
+  const handleConfirmCancel = useCallback(async () => {
+    if (gameToCancelShop && gameToCancelObjectId) {
+      await cancelDownload(gameToCancelShop, gameToCancelObjectId);
+    }
+    setCancelModalVisible(false);
+    setGameToCancelShop(null);
+    setGameToCancelObjectId(null);
+  }, [gameToCancelShop, gameToCancelObjectId, cancelDownload]);
+
+  const handleCancelModalClose = useCallback(() => {
+    setCancelModalVisible(false);
+    setGameToCancelShop(null);
+    setGameToCancelObjectId(null);
+  }, []);
+
   const getGameActions = (game: LibraryGame): DropdownMenuItem[] => {
     const download = lastPacket?.download;
     const isGameDownloading = isGameDownloadingMap[game.id];
@@ -728,7 +756,7 @@ export function DownloadGroup({
         {
           label: t("cancel"),
           onClick: () => {
-            cancelDownload(game.shop, game.objectId);
+            handleCancelClick(game.shop, game.objectId);
           },
           icon: <XCircleIcon />,
         },
@@ -753,7 +781,7 @@ export function DownloadGroup({
       {
         label: t("cancel"),
         onClick: () => {
-          cancelDownload(game.shop, game.objectId);
+          handleCancelClick(game.shop, game.objectId);
         },
         icon: <XCircleIcon />,
       },
@@ -811,136 +839,162 @@ export function DownloadGroup({
     const dominantColor = dominantColors[game.id] || "#fff";
 
     return (
-      <HeroDownloadView
-        game={game}
-        isGameDownloading={isGameDownloading}
-        isGameExtracting={isGameExtracting}
-        downloadSpeed={downloadSpeed}
-        finalDownloadSize={finalDownloadSize}
-        peakSpeed={peakSpeed}
-        currentProgress={currentProgress}
-        dominantColor={dominantColor}
-        lastPacket={lastPacket}
-        speedHistory={gameSpeedHistory}
-        formatSpeed={formatSpeed}
-        calculateETA={calculateETA}
-        pauseDownload={pauseDownload}
-        resumeDownload={resumeDownload}
-        cancelDownload={cancelDownload}
-        t={t}
-      />
+      <>
+        <ConfirmationModal
+          visible={cancelModalVisible}
+          title={t("cancel_download")}
+          descriptionText={t("cancel_download_description")}
+          confirmButtonLabel={t("yes_cancel")}
+          cancelButtonLabel={t("keep_downloading")}
+          onConfirm={handleConfirmCancel}
+          onClose={handleCancelModalClose}
+        />
+        <HeroDownloadView
+          game={game}
+          isGameDownloading={isGameDownloading}
+          isGameExtracting={isGameExtracting}
+          downloadSpeed={downloadSpeed}
+          finalDownloadSize={finalDownloadSize}
+          peakSpeed={peakSpeed}
+          currentProgress={currentProgress}
+          dominantColor={dominantColor}
+          lastPacket={lastPacket}
+          speedHistory={gameSpeedHistory}
+          formatSpeed={formatSpeed}
+          calculateETA={calculateETA}
+          pauseDownload={pauseDownload}
+          resumeDownload={resumeDownload}
+          onCancelClick={handleCancelClick}
+          t={t}
+        />
+      </>
     );
   }
 
   return (
-    <div
-      className={`download-group ${isQueuedGroup ? "download-group--queued" : ""} ${isCompletedGroup ? "download-group--completed" : ""}`}
-    >
-      <div className="download-group__header">
-        <div className="download-group__header-title-group">
-          <h2>{title}</h2>
-          <h3 className="download-group__header-count">{library.length}</h3>
+    <>
+      <ConfirmationModal
+        visible={cancelModalVisible}
+        title={t("cancel_download")}
+        descriptionText={t("cancel_download_description")}
+        confirmButtonLabel={t("yes_cancel")}
+        cancelButtonLabel={t("keep_downloading")}
+        onConfirm={handleConfirmCancel}
+        onClose={handleCancelModalClose}
+      />
+      <div
+        className={`download-group ${isQueuedGroup ? "download-group--queued" : ""} ${isCompletedGroup ? "download-group--completed" : ""}`}
+      >
+        <div className="download-group__header">
+          <div className="download-group__header-title-group">
+            <h2>{title}</h2>
+            <h3 className="download-group__header-count">{library.length}</h3>
+          </div>
         </div>
-      </div>
 
-      <ul className="download-group__simple-list">
-        {downloadInfo.map(({ game, size, progress, isSeeding: seeding }) => {
-          return (
-            <li key={game.id} className="download-group__simple-card">
-              <button
-                type="button"
-                onClick={() => navigate(buildGameDetailsPath(game))}
-                className="download-group__simple-thumbnail"
-              >
-                <img src={game.libraryImageUrl || ""} alt={game.title} />
-              </button>
-
-              <div className="download-group__simple-info">
+        <ul className="download-group__simple-list">
+          {downloadInfo.map(({ game, size, progress, isSeeding: seeding }) => {
+            return (
+              <li key={game.id} className="download-group__simple-card">
                 <button
                   type="button"
                   onClick={() => navigate(buildGameDetailsPath(game))}
-                  className="download-group__simple-title-button"
+                  className="download-group__simple-thumbnail"
                 >
-                  <h3 className="download-group__simple-title">{game.title}</h3>
+                  <img src={game.libraryImageUrl || ""} alt={game.title} />
                 </button>
-                <div className="download-group__simple-meta">
-                  <div className="download-group__simple-meta-row">
-                    <Badge>
-                      {DOWNLOADER_NAME[Number(game.download!.downloader)]}
-                    </Badge>
-                  </div>
-                  <div className="download-group__simple-meta-row">
-                    {extraction?.visibleId === game.id ? (
-                      <span className="download-group__simple-extracting">
-                        {t("extracting")} (
-                        {Math.round(extraction.progress * 100)}%)
-                      </span>
-                    ) : (
-                      <span className="download-group__simple-size">
-                        <DownloadIcon size={14} />
-                        {size}
-                      </span>
-                    )}
-                    {game.download?.progress === 1 && seeding && (
-                      <span className="download-group__simple-seeding">
-                        {t("seeding")}
-                      </span>
-                    )}
+
+                <div className="download-group__simple-info">
+                  <button
+                    type="button"
+                    onClick={() => navigate(buildGameDetailsPath(game))}
+                    className="download-group__simple-title-button"
+                  >
+                    <h3 className="download-group__simple-title">
+                      {game.title}
+                    </h3>
+                  </button>
+                  <div className="download-group__simple-meta">
+                    <div className="download-group__simple-meta-row">
+                      <Badge>
+                        {DOWNLOADER_NAME[Number(game.download!.downloader)]}
+                      </Badge>
+                    </div>
+                    <div className="download-group__simple-meta-row">
+                      {extraction?.visibleId === game.id ? (
+                        <span className="download-group__simple-extracting">
+                          {t("extracting")} (
+                          {Math.round(extraction.progress * 100)}%)
+                        </span>
+                      ) : (
+                        <span className="download-group__simple-size">
+                          <DownloadIcon size={14} />
+                          {size}
+                        </span>
+                      )}
+                      {game.download?.progress === 1 && seeding && (
+                        <span className="download-group__simple-seeding">
+                          {t("seeding")}
+                        </span>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              {isQueuedGroup && (
-                <div className="download-group__simple-progress">
-                  <span className="download-group__simple-progress-text">
-                    {formatDownloadProgress(progress)}
-                  </span>
-                  <div className="download-group__progress-bar download-group__progress-bar--small">
-                    <div
-                      className="download-group__progress-fill"
-                      style={{
-                        width: `${progress * 100}%`,
-                        backgroundColor: "#fff",
-                      }}
-                    />
+                {isQueuedGroup && (
+                  <div className="download-group__simple-progress">
+                    <span className="download-group__simple-progress-text">
+                      {formatDownloadProgress(progress)}
+                    </span>
+                    <div className="download-group__progress-bar download-group__progress-bar--small">
+                      <div
+                        className="download-group__progress-fill"
+                        style={{
+                          width: `${progress * 100}%`,
+                          backgroundColor: "#fff",
+                        }}
+                      />
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
 
-              <div className="download-group__simple-actions">
-                {game.download?.progress === 1 && (
-                  <Button
-                    theme="primary"
-                    onClick={() => openGameInstaller(game.shop, game.objectId)}
-                    disabled={isGameDeleting(game.id)}
-                    className="download-group__simple-menu-btn"
-                  >
-                    <PlayIcon size={16} />
-                  </Button>
-                )}
-                {isQueuedGroup && game.download?.progress !== 1 && (
-                  <Button
-                    theme="primary"
-                    onClick={() => resumeDownload(game.shop, game.objectId)}
-                    className="download-group__simple-menu-btn"
-                    tooltip={t("resume")}
-                  >
-                    <DownloadIcon size={16} />
-                  </Button>
-                )}
-                <DropdownMenu align="end" items={getGameActions(game)}>
-                  <Button
-                    theme="outline"
-                    className="download-group__simple-menu-btn"
-                  >
-                    <ThreeBarsIcon />
-                  </Button>
-                </DropdownMenu>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+                <div className="download-group__simple-actions">
+                  {game.download?.progress === 1 && (
+                    <Button
+                      theme="primary"
+                      onClick={() =>
+                        openGameInstaller(game.shop, game.objectId)
+                      }
+                      disabled={isGameDeleting(game.id)}
+                      className="download-group__simple-menu-btn"
+                    >
+                      <PlayIcon size={16} />
+                    </Button>
+                  )}
+                  {isQueuedGroup && game.download?.progress !== 1 && (
+                    <Button
+                      theme="primary"
+                      onClick={() => resumeDownload(game.shop, game.objectId)}
+                      className="download-group__simple-menu-btn"
+                      tooltip={t("resume")}
+                    >
+                      <DownloadIcon size={16} />
+                    </Button>
+                  )}
+                  <DropdownMenu align="end" items={getGameActions(game)}>
+                    <Button
+                      theme="outline"
+                      className="download-group__simple-menu-btn"
+                    >
+                      <ThreeBarsIcon />
+                    </Button>
+                  </DropdownMenu>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </>
   );
 }

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

@@ -91,6 +91,7 @@
     display: flex;
     flex-direction: column;
     gap: globals.$spacing-unit;
+    padding-bottom: calc(globals.$spacing-unit * 3);
   }
 
   &__empty {
@@ -134,5 +135,6 @@
     display: flex;
     justify-content: center;
     padding: calc(globals.$spacing-unit * 2);
+    padding-bottom: calc(globals.$spacing-unit * 3);
   }
 }