fix: fixing remove installer button on downloads page

src/locales/en/translation.json

@@ -132,7 +132,7 @@
     "install": "Install",
     "download_in_progress": "In progress",
     "queued_downloads": "Queued downloads",
-    "downloads_complete": "Completed",
+    "downloads_completed": "Completed",
     "queued": "Queued"
   },
   "settings": {

src/locales/pt/translation.json

@@ -130,7 +130,7 @@
     "install": "Instalar",
     "download_in_progress": "Baixando agora",
     "queued_downloads": "Na fila",
-    "downloads_complete": "Completo",
+    "downloads_completed": "Completo",
     "queued": "Na fila"
   },
   "settings": {

src/renderer/src/pages/downloads/download-group.css.ts

@@ -111,3 +111,9 @@ export const downloadActions = style({
   alignItems: "center",
   gap: `${SPACING_UNIT}px`,
 });
+
+export const downloadGroup = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT * 2}px`,
+});

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

@@ -11,22 +11,28 @@ import {
 
 import { Downloader, formatBytes } from "@shared";
 import { DOWNLOADER_NAME } from "@renderer/constants";
-import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks";
+import { useAppSelector, useDownload } from "@renderer/hooks";
 
-import * as styles from "./download-list.css";
+import * as styles from "./download-group.css";
 import { useTranslation } from "react-i18next";
 
-export interface DownloadListProps {
+export interface DownloadGroupProps {
   library: LibraryGame[];
+  title: string;
+  openDeleteGameModal: (gameId: number) => void;
+  openGameInstaller: (gameId: number) => void;
 }
 
-export function DownloadList({ library }: DownloadListProps) {
+export function DownloadGroup({
+  library,
+  title,
+  openDeleteGameModal,
+  openGameInstaller,
+}: DownloadGroupProps) {
   const navigate = useNavigate();
 
   const { t } = useTranslation("downloads");
 
-  const { updateLibrary } = useLibrary();
-
   const userPreferences = useAppSelector(
     (state) => state.userPreferences.value
   );
@@ -38,16 +44,9 @@ export function DownloadList({ library }: DownloadListProps) {
     resumeDownload,
     removeGameFromLibrary,
     cancelDownload,
-    removeGameInstaller,
     isGameDeleting,
   } = useDownload();
 
-  const openGameInstaller = (gameId: number) =>
-    window.electron.openGameInstaller(gameId).then((isBinaryInPath) => {
-      if (!isBinaryInPath) setShowBinaryNotFoundModal(true);
-      updateLibrary();
-    });
-
   const getFinalDownloadSize = (game: LibraryGame) => {
     const isGameDownloading = lastPacket?.game.id === game.id;
 
@@ -114,11 +113,6 @@ export function DownloadList({ library }: DownloadListProps) {
     return <p>{t(game.status)}</p>;
   };
 
-  const openDeleteModal = (gameId: number) => {
-    // gameToBeDeleted.current = gameId;
-    // setShowDeleteModal(true);
-  };
-
   const getGameActions = (game: LibraryGame) => {
     const isGameDownloading = lastPacket?.game.id === game.id;
 
@@ -135,7 +129,7 @@ export function DownloadList({ library }: DownloadListProps) {
             {t("install")}
           </Button>
 
-          <Button onClick={() => openDeleteModal(game.id)} theme="outline">
+          <Button onClick={() => openDeleteGameModal(game.id)} theme="outline">
             {t("delete")}
           </Button>
         </>
@@ -196,51 +190,57 @@ export function DownloadList({ library }: DownloadListProps) {
     );
   };
 
+  if (!library.length) return null;
+
   return (
-    <ul className={styles.downloads}>
+    <div className={styles.downloadGroup}>
-      {library.map((game) => {
+      <h2>{title}</h2>
-        return (
-          <li
-            key={game.id}
-            className={styles.download({
-              cancelled: game.status === "removed",
-            })}
-          >
-            <div className={styles.downloadCover}>
-              <div className={styles.downloadCoverBackdrop}>
-                <img
-                  src={steamUrlBuilder.library(game.objectID)}
-                  className={styles.downloadCoverImage}
-                  alt={game.title}
-                />
 
-                <div className={styles.downloadCoverContent}>
+      <ul className={styles.downloads}>
-                  <Badge>{DOWNLOADER_NAME[game.downloader]}</Badge>
+        {library.map((game) => {
+          return (
+            <li
+              key={game.id}
+              className={styles.download({
+                cancelled: game.status === "removed",
+              })}
+            >
+              <div className={styles.downloadCover}>
+                <div className={styles.downloadCoverBackdrop}>
+                  <img
+                    src={steamUrlBuilder.library(game.objectID)}
+                    className={styles.downloadCoverImage}
+                    alt={game.title}
+                  />
+
+                  <div className={styles.downloadCoverContent}>
+                    <Badge>{DOWNLOADER_NAME[game.downloader]}</Badge>
+                  </div>
                 </div>
               </div>
-            </div>
+              <div className={styles.downloadRightContent}>
-            <div className={styles.downloadRightContent}>
+                <div className={styles.downloadDetails}>
-              <div className={styles.downloadDetails}>
+                  <div className={styles.downloadTitleWrapper}>
-                <div className={styles.downloadTitleWrapper}>
+                    <button
-                  <button
+                      type="button"
-                    type="button"
+                      className={styles.downloadTitle}
-                    className={styles.downloadTitle}
+                      onClick={() => navigate(buildGameDetailsPath(game))}
-                    onClick={() => navigate(buildGameDetailsPath(game))}
+                    >
-                  >
+                      {game.title}
-                    {game.title}
+                    </button>
-                  </button>
+                  </div>
+
+                  {getGameInfo(game)}
                 </div>
 
-                {getGameInfo(game)}
+                <div className={styles.downloadActions}>
+                  {getGameActions(game)}
+                </div>
               </div>
-
+            </li>
-              <div className={styles.downloadActions}>
+          );
-                {getGameActions(game)}
+        })}
-              </div>
+      </ul>
-            </div>
+    </div>
-          </li>
-        );
-      })}
-    </ul>
   );
 }

src/renderer/src/pages/downloads/downloads.css.ts

@@ -13,9 +13,3 @@ export const downloadGroups = style({
   gap: `${SPACING_UNIT * 3}px`,
   flexDirection: "column",
 });
-
-export const downloadGroup = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-});

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

@@ -6,12 +6,12 @@ import { useMemo, useRef, useState } from "react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 import * as styles from "./downloads.css";
 import { DeleteGameModal } from "./delete-game-modal";
-import { DownloadList } from "./download-list";
+import { DownloadGroup } from "./download-group";
 import { LibraryGame } from "@types";
 import { orderBy } from "lodash-es";
 
 export function Downloads() {
-  const { library } = useLibrary();
+  const { library, updateLibrary } = useLibrary();
 
   const { t } = useTranslation("downloads");
 
@@ -29,6 +29,17 @@ export function Downloads() {
 
   const { lastPacket } = useDownload();
 
+  const handleOpenGameInstaller = (gameId: number) =>
+    window.electron.openGameInstaller(gameId).then((isBinaryInPath) => {
+      if (!isBinaryInPath) setShowBinaryNotFoundModal(true);
+      updateLibrary();
+    });
+
+  const handleOpenDeleteGameModal = (gameId: number) => {
+    gameToBeDeleted.current = gameId;
+    setShowDeleteModal(true);
+  };
+
   const libraryGroup: Record<string, LibraryGame[]> = useMemo(() => {
     const initialValue: Record<string, LibraryGame[]> = {
       downloading: [],
@@ -65,7 +76,20 @@ export function Downloads() {
     };
   }, [library, lastPacket?.game.id]);
 
-  console.log(libraryGroup);
+  const downloadGroups = [
+    {
+      title: t("download_in_progress"),
+      library: libraryGroup.downloading,
+    },
+    {
+      title: t("queued_downloads"),
+      library: libraryGroup.queued,
+    },
+    {
+      title: t("downloads_completed"),
+      library: libraryGroup.complete,
+    },
+  ];
 
   return (
     <section className={styles.downloadsContainer}>
@@ -81,26 +105,15 @@ export function Downloads() {
       />
 
       <div className={styles.downloadGroups}>
-        {libraryGroup.downloading.length > 0 && (
+        {downloadGroups.map((group) => (
-          <div className={styles.downloadGroup}>
+          <DownloadGroup
-            <h2>{t("download_in_progress")}</h2>
+            key={group.title}
-            <DownloadList library={libraryGroup.downloading} />
+            title={group.title}
-          </div>
+            library={group.library}
-        )}
+            openDeleteGameModal={handleOpenDeleteGameModal}
-
+            openGameInstaller={handleOpenGameInstaller}
-        {libraryGroup.queued.length > 0 && (
+          />
-          <div className={styles.downloadGroup}>
+        ))}
-            <h2>{t("queued_downloads")}</h2>
-            <DownloadList library={libraryGroup.queued} />
-          </div>
-        )}
-
-        {libraryGroup.complete.length > 0 && (
-          <div className={styles.downloadGroup}>
-            <h2>{t("downloads_complete")}</h2>
-            <DownloadList library={libraryGroup.complete} />
-          </div>
-        )}
       </div>
     </section>
   );