Merge pull request #13 from xbozo/feat/confirm-pack-delete

Add modal to confirm if user really wants to delete game archives

src/locales/en/translation.json

@@ -42,6 +42,7 @@
     "pause": "Pause",
     "cancel": "Cancel",
     "remove": "Remove",
+    "remove_from_list": "Remove from list",
     "space_left_on_disk": "{{space}} left on disk",
     "eta": "Conclusion {{eta}}",
     "downloading_metadata": "Downloading metadata…",
@@ -61,7 +62,9 @@
     "copied_link_to_clipboard": "Link copied",
     "hours": "hours",
     "minutes": "minutes",
-    "accuracy": "{{accuracy}}% accuracy"
+    "accuracy": "{{accuracy}}% accuracy",
+    "delete_modal_title": "Are you sure?",
+    "delete_modal_description": "This will remove all game files from your system"
   },
   "activation": {
     "title": "Activate Hydra",

src/locales/es/translation.json

@@ -42,6 +42,7 @@
     "pause": "Pausa",
     "cancel": "Cancelar",
     "remove": "Eliminar",
+    "remove_from_list": "Quitar de la lista",
     "space_left_on_disk": "{{space}} restantes en el disco",
     "eta": "Finalizando {{eta}}",
     "downloading_metadata": "Descargando metadatos…",
@@ -61,7 +62,9 @@
     "copied_link_to_clipboard": "Enlace copiado",
     "hours": "horas",
     "minutes": "minutos",
-    "accuracy": "{{accuracy}}% precisión"
+    "accuracy": "{{accuracy}}% precisión",
+    "delete_modal_title": "¿Estás seguro de esto?",
+    "delete_modal_description": "Esto eliminará todos los archivos del juego de tu sistema"
   },
   "activation": {
     "title": "Activar Hydra",

src/locales/fr/translation.json

@@ -42,6 +42,7 @@
     "pause": "Pause",
     "cancel": "Annuler",
     "remove": "Supprimer",
+    "remove_from_list": "Retirer de la liste",
     "space_left_on_disk": "{{space}} restant sur le disque",
     "eta": "Conclusion dans {{eta}}",
     "downloading_metadata": "Téléchargement des métadonnées en cours…",
@@ -58,7 +59,9 @@
     "release_date": "Sorti le {{date}}",
     "publisher": "Édité par {{publisher}}",
     "copy_link_to_clipboard": "Copier le lien",
-    "copied_link_to_clipboard": "Lien copié"
+    "copied_link_to_clipboard": "Lien copié",
+    "delete_modal_title": "Êtes-vous sûr de cela?",
+    "delete_modal_description": "Cela effacera tous les fichiers de jeu de votre système"
   },
   "activation": {
     "title": "Activer Hydra",

src/locales/pt/translation.json

@@ -42,6 +42,7 @@
     "pause": "Pausar",
     "cancel": "Cancelar",
     "remove": "Remover",
+    "remove_from_list": "Remover da lista",
     "space_left_on_disk": "{{space}} livres em disco",
     "eta": "Conclusão {{eta}}",
     "downloading_metadata": "Baixando metadados…",
@@ -61,7 +62,9 @@
     "copied_link_to_clipboard": "Link copiado",
     "hours": "horas",
     "minutes": "minutos",
-    "accuracy": "{{accuracy}}% de precisão"
+    "accuracy": "{{accuracy}}% de precisão",
+    "delete_modal_title": "Tem certeza disso?",
+    "delete_modal_description": "Isso apagará todos os arquivos do jogo do seu sistema"
   },
   "activation": {
     "title": "Ativação",

src/renderer/pages/downloads/downloads.tsx

@@ -1,15 +1,15 @@
+import prettyBytes from "pretty-bytes";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import prettyBytes from "pretty-bytes";
 
 import { AsyncImage, Button, TextField } from "@renderer/components";
 import { formatDownloadProgress, steamUrlBuilder } from "@renderer/helpers";
 import { useDownload, useLibrary } from "@renderer/hooks";
 import type { Game } from "@types";
 
-import * as styles from "./downloads.css";
 import { useEffect, useState } from "react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
+import * as styles from "./downloads.css";
 
 export function Downloads() {
   const { library, updateLibrary } = useLibrary();
@@ -187,7 +187,7 @@ export function Downloads() {
           theme="outline"
           disabled={deleting}
         >
-          {t("remove")}
+          {t("remove_from_list")}
         </Button>
       </>
     );

src/renderer/pages/game-details/delete-modal.css.ts

@@ -0,0 +1,10 @@
+import { SPACING_UNIT } from "@renderer/theme.css";
+import { style } from "@vanilla-extract/css";
+
+export const deleteActionsButtonsCtn = style({
+  display: "flex",
+  width: "100%",
+  justifyContent: "end",
+  alignItems: "center",
+  gap: `${SPACING_UNIT}px`,
+});

src/renderer/pages/game-details/delete-modal.tsx

@@ -0,0 +1,43 @@
+import { Button, Modal } from "@renderer/components";
+import { useTranslation } from "react-i18next";
+import * as styles from "./delete-modal.css";
+
+interface DeleteModalProps {
+  visible: boolean;
+  onClose: () => void;
+  deleting: boolean;
+  deleteGame: () => void;
+}
+
+export function DeleteModal({
+  onClose,
+  visible,
+  deleting,
+  deleteGame,
+}: DeleteModalProps) {
+  const { t } = useTranslation("game_details");
+
+  const handleDeleteGame = () => {
+    deleteGame();
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("delete_modal_title")}
+      description={t("delete_modal_description")}
+      onClose={onClose}
+    >
+      <div className={styles.deleteActionsButtonsCtn}>
+        <Button onClick={handleDeleteGame} theme="outline" disabled={deleting}>
+          {t("delete")}
+        </Button>
+
+        <Button onClick={onClose} theme="primary" disabled={deleting}>
+          {t("cancel")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}

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

@@ -1,15 +1,16 @@
+import { format } from "date-fns";
+import prettyBytes from "pretty-bytes";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import prettyBytes from "pretty-bytes";
-import { format } from "date-fns";
 
 import { Button } from "@renderer/components";
 import { useDownload, useLibrary } from "@renderer/hooks";
 import type { Game, ShopDetails } from "@types";
 
-import * as styles from "./hero-panel.css";
 import { formatDownloadProgress } from "@renderer/helpers";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
+import { DeleteModal } from "./delete-modal";
+import * as styles from "./hero-panel.css";
 
 export interface HeroPanelProps {
   game: Game | null;
@@ -46,6 +47,8 @@ export function HeroPanel({
   } = useDownload();
   const { updateLibrary } = useLibrary();
 
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
   const isGameDownloading = isDownloading && gameDownloading?.id === game?.id;
 
   const openGame = (gameId: number) =>
@@ -165,13 +168,21 @@ export function HeroPanel({
           >
             {t("launch")}
           </Button>
+
           <Button
-            onClick={() => deleteGame(game.id).then(getGame)}
+            onClick={() => setShowDeleteModal(true)}
             theme="outline"
             disabled={deleting}
           >
             {t("delete")}
           </Button>
+
+          <DeleteModal
+            visible={showDeleteModal}
+            onClose={() => setShowDeleteModal(false)}
+            deleting={deleting}
+            deleteGame={() => deleteGame(game.id).then(getGame)}
+          />
         </>
       );
     }
@@ -191,7 +202,7 @@ export function HeroPanel({
             theme="outline"
             disabled={deleting}
           >
-            {t("remove")}
+            {t("remove_from_list")}
           </Button>
         </>
       );