diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 46fcf1e1..f1df6e89 100644 --- a/src/locales/en/translation.json +++ b/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", diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json index a6c9c0ea..eae09925 100644 --- a/src/locales/es/translation.json +++ b/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", diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json index b8f881e6..5f846327 100644 --- a/src/locales/fr/translation.json +++ b/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", diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index 591ed626..7d648c25 100644 --- a/src/locales/pt/translation.json +++ b/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", diff --git a/src/renderer/pages/downloads/downloads.tsx b/src/renderer/pages/downloads/downloads.tsx index 29966202..0165105d 100644 --- a/src/renderer/pages/downloads/downloads.tsx +++ b/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")} ); diff --git a/src/renderer/pages/game-details/delete-modal.css.ts b/src/renderer/pages/game-details/delete-modal.css.ts new file mode 100644 index 00000000..4d04c7a2 --- /dev/null +++ b/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`, +}); diff --git a/src/renderer/pages/game-details/delete-modal.tsx b/src/renderer/pages/game-details/delete-modal.tsx new file mode 100644 index 00000000..f446fd7b --- /dev/null +++ b/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 ( + +
+ + + +
+
+ ); +} diff --git a/src/renderer/pages/game-details/hero-panel.tsx b/src/renderer/pages/game-details/hero-panel.tsx index 71e3ff63..a3df6825 100644 --- a/src/renderer/pages/game-details/hero-panel.tsx +++ b/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")} + + + 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")} );