Revert "feat: change selectFolderModal to a section inside repacksModal"

This reverts commit 934fb1145e.

src/renderer/declaration.d.ts

@@ -76,7 +76,7 @@ declare global {
     ) => Promise<void>;
 
     /* Hardware */
-    getDiskFreeSpace: (path: string) => Promise<DiskSpace>;
+    getDiskFreeSpace: () => Promise<DiskSpace>;
 
     /* Misc */
     getOrCacheImage: (url: string) => Promise<string>;

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

@@ -51,6 +51,7 @@ export function GameDetails() {
   const { t, i18n } = useTranslation("game_details");
 
   const [showRepacksModal, setShowRepacksModal] = useState(false);
+  const [showSelectFolderModal, setShowSelectFolderModal] = useState(false);
 
   const randomGameObjectID = useRef<string | null>(null);
 
@@ -153,6 +154,7 @@ export function GameDetails() {
     ).then(() => {
       getGame();
       setShowRepacksModal(false);
+      setShowSelectFolderModal(false);
     });
   };
 
@@ -177,6 +179,8 @@ export function GameDetails() {
           visible={showRepacksModal}
           gameDetails={gameDetails}
           startDownload={handleStartDownload}
+          showSelectFolderModal={showSelectFolderModal}
+          setShowSelectFolderModal={setShowSelectFolderModal}
           onClose={() => setShowRepacksModal(false)}
         />
       )}

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

@@ -16,23 +16,3 @@ export const repackButton = style({
   color: vars.color.bodyText,
   padding: `${SPACING_UNIT * 2}px`,
 });
-
-export const container = style({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-  marginBottom: SPACING_UNIT * 2,
-  paddingBottom: SPACING_UNIT * 2,
-  borderBottom: `solid 1px ${vars.color.borderColor}`,
-});
-
-export const downloadsPathField = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const hintText = style({
-  fontSize: 12,
-  color: vars.color.bodyText,
-});

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

@@ -6,16 +6,18 @@ import type { GameRepack, ShopDetails } from "@types";
 
 import * as styles from "./repacks-modal.css";
 
-import { useAppSelector } from "@renderer/hooks";
-import { SPACING_UNIT } from "@renderer/theme.css";
-import { formatBytes } from "@renderer/utils";
 import type { DiskSpace } from "check-disk-space";
 import { format } from "date-fns";
-import { Link } from "react-router-dom";
+import { SPACING_UNIT } from "@renderer/theme.css";
+import { formatBytes } from "@renderer/utils";
+import { useAppSelector } from "@renderer/hooks";
+import { SelectFolderModal } from "./select-folder-modal";
 
 export interface RepacksModalProps {
   visible: boolean;
   gameDetails: ShopDetails;
+  showSelectFolderModal: boolean;
+  setShowSelectFolderModal: (value: boolean) => void;
   startDownload: (repackId: number, downloadPath: string) => Promise<void>;
   onClose: () => void;
 }
@@ -23,13 +25,18 @@ export interface RepacksModalProps {
 export function RepacksModal({
   visible,
   gameDetails,
+  showSelectFolderModal,
+  setShowSelectFolderModal,
   startDownload,
   onClose,
 }: RepacksModalProps) {
   const [diskFreeSpace, setDiskFreeSpace] = useState<DiskSpace>(null);
   const [filteredRepacks, setFilteredRepacks] = useState<GameRepack[]>([]);
-  const [selectedPath, setSelectedPath] = useState("");
-  const [downloadStarting, setDownloadStarting] = useState(false);
+  const [repack, setRepack] = useState<GameRepack>(null);
+
+  const repackersFriendlyNames = useAppSelector(
+    (state) => state.repackersFriendlyNames.value
+  );
 
   const { t } = useTranslation("game_details");
 
@@ -37,22 +44,20 @@ export function RepacksModal({
     setFilteredRepacks(gameDetails.repacks);
   }, [gameDetails.repacks]);
 
-  useEffect(() => {
-    visible && getDiskFreeSpace(selectedPath);
-  }, [selectedPath, visible]);
-
-  useEffect(() => {
-    Promise.all([
-      window.electron.getDefaultDownloadsPath(),
-      window.electron.getUserPreferences(),
-    ]).then(([path, userPreferences]) => {
-      setSelectedPath(userPreferences?.downloadsPath || path);
+  const getDiskFreeSpace = () => {
+    window.electron.getDiskFreeSpace().then((result) => {
+      setDiskFreeSpace(result);
     });
-  }, []);
+  };
 
-  const repackersFriendlyNames = useAppSelector(
-    (state) => state.repackersFriendlyNames.value
-  );
+  useEffect(() => {
+    getDiskFreeSpace();
+  }, [visible]);
+
+  const handleRepackClick = (repack: GameRepack) => {
+    setRepack(repack);
+    setShowSelectFolderModal(true);
+  };
 
   const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     setFilteredRepacks(
@@ -64,31 +69,6 @@ export function RepacksModal({
     );
   };
 
-  const handleChooseDownloadsPath = async () => {
-    const { filePaths } = await window.electron.showOpenDialog({
-      defaultPath: selectedPath,
-      properties: ["openDirectory"],
-    });
-
-    if (filePaths && filePaths.length > 0) {
-      const path = filePaths[0];
-      setSelectedPath(path);
-    }
-  };
-
-  const handleRepackClick = (repack: GameRepack) => {
-    setDownloadStarting(true);
-    startDownload(repack.id, selectedPath).finally(() => {
-      setDownloadStarting(false);
-    });
-  };
-
-  const getDiskFreeSpace = (path: string) => {
-    window.electron.getDiskFreeSpace(path).then((result) => {
-      setDiskFreeSpace(result);
-    });
-  };
-
   return (
     <Modal
       visible={visible}
@@ -98,37 +78,13 @@ export function RepacksModal({
       })}
       onClose={onClose}
     >
-      <div className={styles.container}>
-        <div className={styles.downloadsPathField}>
-          <TextField
-            label={t("downloads_path")}
-            value={selectedPath}
-            readOnly
-            disabled
-          />
-
-          <Button
-            style={{ alignSelf: "flex-end" }}
-            theme="outline"
-            onClick={handleChooseDownloadsPath}
-            disabled={downloadStarting}
-          >
-            {t("change")}
-          </Button>
-        </div>
-        <p className={styles.hintText}>
-          {t("select_folder_hint")}{" "}
-          <Link
-            to="/settings"
-            style={{
-              textDecoration: "none",
-              color: "#C0C1C7",
-            }}
-          >
-            {t("hydra_settings")}
-          </Link>
-        </p>
-      </div>
+      <SelectFolderModal
+        visible={showSelectFolderModal}
+        onClose={() => setShowSelectFolderModal(false)}
+        gameDetails={gameDetails}
+        startDownload={startDownload}
+        repack={repack}
+      />
       <div style={{ marginBottom: `${SPACING_UNIT * 2}px` }}>
         <TextField placeholder={t("filter")} onChange={handleFilter} />
       </div>
@@ -140,7 +96,6 @@ export function RepacksModal({
             theme="dark"
             onClick={() => handleRepackClick(repack)}
             className={styles.repackButton}
-            disabled={downloadStarting}
           >
             <p style={{ color: "#DADBE1" }}>{repack.title}</p>
             <p style={{ fontSize: "12px" }}>

src/renderer/pages/game-details/select-folder-modal.css.tsx

@@ -0,0 +1,19 @@
+import { style } from "@vanilla-extract/css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT * 2}px`,
+  width: "100%",
+});
+
+export const downloadsPathField = style({
+  display: "flex",
+  gap: `${SPACING_UNIT * 2}px`,
+});
+
+export const hintText = style({
+  fontSize: 12,
+  color: vars.color.bodyText,
+});

src/renderer/pages/game-details/select-folder-modal.tsx

@@ -0,0 +1,99 @@
+import { Button, Modal, TextField } from "@renderer/components";
+import { GameRepack, ShopDetails } from "@types";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import * as styles from "./select-folder-modal.css";
+import { Link } from "react-router-dom";
+
+export interface SelectFolderModalProps {
+  visible: boolean;
+  gameDetails: ShopDetails;
+  onClose: () => void;
+  startDownload: (repackId: number, downloadPath: string) => Promise<void>;
+  repack: GameRepack;
+}
+
+export function SelectFolderModal({
+  visible,
+  gameDetails,
+  onClose,
+  startDownload,
+  repack,
+}: SelectFolderModalProps) {
+  const { t } = useTranslation("game_details");
+
+  const [selectedPath, setSelectedPath] = useState("");
+  const [downloadStarting, setDownloadStarting] = useState(false);
+
+  useEffect(() => {
+    Promise.all([
+      window.electron.getDefaultDownloadsPath(),
+      window.electron.getUserPreferences(),
+    ]).then(([path, userPreferences]) => {
+      setSelectedPath(userPreferences?.downloadsPath || path);
+    });
+  }, []);
+
+  const handleChooseDownloadsPath = async () => {
+    const { filePaths } = await window.electron.showOpenDialog({
+      defaultPath: selectedPath,
+      properties: ["openDirectory"],
+    });
+
+    if (filePaths && filePaths.length > 0) {
+      const path = filePaths[0];
+      setSelectedPath(path);
+    }
+  };
+
+  const handleStartClick = () => {
+    setDownloadStarting(true);
+    startDownload(repack.id, selectedPath).finally(() => {
+      setDownloadStarting(false);
+    });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={`${gameDetails.name} Installation folder`}
+      description={t("select_folder_description")}
+      onClose={onClose}
+    >
+      <div className={styles.container}>
+        <div className={styles.downloadsPathField}>
+          <TextField
+            label={t("downloads_path")}
+            value={selectedPath}
+            readOnly
+            disabled
+          />
+
+          <Button
+            style={{ alignSelf: "flex-end" }}
+            theme="outline"
+            onClick={handleChooseDownloadsPath}
+          >
+            {t("change")}
+          </Button>
+        </div>
+        <p className={styles.hintText}>
+          {t("select_folder_hint")}{" "}
+          <Link
+            to="/settings"
+            style={{
+              textDecoration: "none",
+              color: "#C0C1C7",
+            }}
+          >
+            {t("hydra_settings")}
+          </Link>
+        </p>
+        <Button onClick={handleStartClick} disabled={downloadStarting}>
+          {t("download_now")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}