feat: add/remove game from library

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

@@ -1,4 +1,4 @@
-import { GearIcon, NoEntryIcon, PlusCircleIcon } from "@primer/octicons-react";
+import { GearIcon, PlusCircleIcon } from "@primer/octicons-react";
 import { Button } from "@renderer/components";
 import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks";
 import { useContext, useState } from "react";
@@ -12,7 +12,7 @@ export function HeroPanelActions() {
     useState(false);
   const [showGameOptionsModal, setShowGameOptionsModal] = useState(false);
 
-  const { removeGameFromLibrary, isGameDeleting } = useDownload();
+  const { isGameDeleting } = useDownload();
 
   const {
     game,
@@ -60,15 +60,11 @@ export function HeroPanelActions() {
       });
   };
 
-  const toggleGameOnLibrary = async () => {
+  const addGameToLibrary = async () => {
     setToggleLibraryGameDisabled(true);
 
     try {
-      if (game) {
-        await removeGameFromLibrary(game.id);
-      } else {
       await window.electron.addGameToLibrary(objectID!, gameTitle, "steam");
-      }
 
       updateLibrary();
       updateGame();
@@ -96,15 +92,15 @@ export function HeroPanelActions() {
 
   const deleting = game ? isGameDeleting(game?.id) : false;
 
-  const toggleGameOnLibraryButton = (
+  const addGameToLibraryButton = (
     <Button
       theme="outline"
       disabled={toggleLibraryGameDisabled}
-      onClick={toggleGameOnLibrary}
+      onClick={addGameToLibrary}
       className={styles.heroPanelAction}
     >
-      {game ? <NoEntryIcon /> : <PlusCircleIcon />}
+      <PlusCircleIcon />
-      {game ? t("remove_from_library") : t("add_to_library")}
+      {t("add_to_library")}
     </Button>
   );
 
@@ -119,27 +115,10 @@ export function HeroPanelActions() {
     </Button>
   );
 
-  if (game?.status === "removed") {
-    return (
-      <>
-        {showDownloadOptionsButton}
-
-        <Button
-          onClick={() => removeGameFromLibrary(game.id).then(updateGame)}
-          theme="outline"
-          disabled={deleting}
-          className={styles.heroPanelAction}
-        >
-          {t("remove_from_list")}
-        </Button>
-      </>
-    );
-  }
-
   if (repacks.length && !game) {
     return (
       <>
-        {toggleGameOnLibraryButton}
+        {addGameToLibraryButton}
         {showDownloadOptionsButton}
       </>
     );
@@ -169,8 +148,6 @@ export function HeroPanelActions() {
 
         <div className={styles.separator} />
 
-        {game.progress !== 1 && toggleGameOnLibraryButton}
-
         {isGameRunning ? (
           <Button
             onClick={closeGame}
@@ -194,5 +171,5 @@ export function HeroPanelActions() {
     );
   }
 
-  return toggleGameOnLibraryButton;
+  return addGameToLibraryButton;
 }

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

@@ -62,7 +62,12 @@ export function HeroPanelPlaytime() {
     } else if (game.progress !== 1) {
       downloadContent = (
         <p className={styles.downloadDetailsRow}>
-          {isGameDownloading ? progress : formatDownloadProgress(game.progress)}
+          Download em andamento
+          <small>
+            {isGameDownloading
+              ? progress
+              : formatDownloadProgress(game.progress)}
+          </small>
         </p>
       );
     }

src/renderer/src/pages/game-details/hero/hero-panel.css.ts

@@ -28,7 +28,7 @@ export const actions = style({
 });
 
 export const downloadDetailsRow = style({
-  gap: `${SPACING_UNIT * 2}px`,
+  gap: `${SPACING_UNIT}px`,
   display: "flex",
   alignItems: "flex-end",
 });

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -4,7 +4,7 @@ import { Button, Modal, TextField } from "@renderer/components";
 import type { Game } from "@types";
 import * as styles from "./game-options-modal.css";
 import { gameDetailsContext } from "../game-details.context";
-import { TrashIcon } from "@primer/octicons-react";
+import { NoEntryIcon, TrashIcon } from "@primer/octicons-react";
 import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload } from "@renderer/hooks";
 
@@ -25,12 +25,19 @@ export function GameOptionsModal({
 
   const [showDeleteModal, setShowDeleteModal] = useState(false);
 
-  const { removeGameInstaller, isGameDeleting } = useDownload();
+  const { removeGameInstaller, removeGameFromLibrary, isGameDeleting } =
+    useDownload();
 
   const deleting = game ? isGameDeleting(game?.id) : false;
 
   const { t } = useTranslation("game_details");
 
+  const handleRemoveGameFromLibrary = async () => {
+    await removeGameFromLibrary(game.id);
+    updateGame();
+    onClose();
+  };
+
   const handleChangeExecutableLocation = async () => {
     const location = await selectGameExecutable();
 
@@ -133,6 +140,17 @@ export function GameOptionsModal({
               <TrashIcon />
               Remover arquivos
             </Button>
+
+            <Button
+              onClick={handleRemoveGameFromLibrary}
+              style={{ alignSelf: "flex-end" }}
+              theme="outline"
+              disabled={deleting}
+              title={t("create_shortcut")}
+            >
+              <NoEntryIcon />
+              Remover da biblioteca
+            </Button>
           </div>
         </div>
       </Modal>