feat: migrating repacks to a worker

src/renderer/src/helpers.ts

@@ -40,7 +40,3 @@ export const buildGameDetailsPath = (
   const searchParams = new URLSearchParams({ title: game.title, ...params });
   return `/game/${game.shop}/${game.objectID}?${searchParams.toString()}`;
 };
-
-export const numberFormatter = new Intl.NumberFormat("en-US", {
-  maximumSignificantDigits: 3,
-});

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

@@ -224,47 +224,51 @@ export function HeroPanelActions() {
     );
   }
 
-  return (
-    <>
-      {game?.progress === 1 ? (
-        <>
-          <BinaryNotFoundModal
-            visible={showBinaryNotFoundModal}
-            onClose={() => setShowBinaryNotFoundModal(false)}
-          />
+  if (game) {
+    return (
+      <>
+        {game?.progress === 1 ? (
+          <>
+            <BinaryNotFoundModal
+              visible={showBinaryNotFoundModal}
+              onClose={() => setShowBinaryNotFoundModal(false)}
+            />
 
+            <Button
+              onClick={openGameInstaller}
+              theme="outline"
+              disabled={deleting || isGameRunning}
+              className={styles.heroPanelAction}
+            >
+              {t("install")}
+            </Button>
+          </>
+        ) : (
+          toggleGameOnLibraryButton
+        )}
+
+        {isGameRunning ? (
           <Button
-            onClick={openGameInstaller}
+            onClick={closeGame}
+            theme="outline"
+            disabled={deleting}
+            className={styles.heroPanelAction}
+          >
+            {t("close")}
+          </Button>
+        ) : (
+          <Button
+            onClick={openGame}
             theme="outline"
             disabled={deleting || isGameRunning}
             className={styles.heroPanelAction}
           >
-            {t("install")}
+            {t("play")}
           </Button>
-        </>
-      ) : (
-        toggleGameOnLibraryButton
-      )}
+        )}
+      </>
+    );
+  }
 
-      {isGameRunning ? (
-        <Button
-          onClick={closeGame}
-          theme="outline"
-          disabled={deleting}
-          className={styles.heroPanelAction}
-        >
-          {t("close")}
-        </Button>
-      ) : (
-        <Button
-          onClick={openGame}
-          theme="outline"
-          disabled={deleting || isGameRunning}
-          className={styles.heroPanelAction}
-        >
-          {t("play")}
-        </Button>
-      )}
-    </>
-  );
+  return toggleGameOnLibraryButton;
 }

src/renderer/src/pages/settings/add-download-source-modal.tsx

@@ -1,10 +1,9 @@
 import { Button, Modal, TextField } from "@renderer/components";
 import { SPACING_UNIT } from "@renderer/theme.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import * as styles from "./settings-download-sources.css";
-import { numberFormatter } from "@renderer/helpers";
 
 interface AddDownloadSourceModalProps {
   visible: boolean;
@@ -25,6 +24,12 @@ export function AddDownloadSourceModal({
     downloadCount: number;
   } | null>(null);
 
+  useEffect(() => {
+    setValue("");
+    setIsLoading(false);
+    setValidationResult(null);
+  }, [visible]);
+
   const { t } = useTranslation("settings");
 
   const handleValidateDownloadSource = async () => {
@@ -32,8 +37,8 @@ export function AddDownloadSourceModal({
 
     try {
       const result = await window.electron.validateDownloadSource(value);
-      setValidationResult(result);
       console.log(result);
+      setValidationResult(result);
     } finally {
       setIsLoading(false);
     }
@@ -96,7 +101,8 @@ export function AddDownloadSourceModal({
             >
               <h4>{validationResult?.name}</h4>
               <small>
-                Found {numberFormatter.format(validationResult?.downloadCount)}{" "}
+                Found{" "}
+                {validationResult?.downloadCount.toLocaleString(undefined)}{" "}
                 download options
               </small>
             </div>

src/renderer/src/pages/settings/settings-download-sources.tsx

@@ -8,7 +8,6 @@ import type { DownloadSource } from "@types";
 import { NoEntryIcon, PlusCircleIcon } from "@primer/octicons-react";
 import { AddDownloadSourceModal } from "./add-download-source-modal";
 import { useToast } from "@renderer/hooks";
-import { numberFormatter } from "@renderer/helpers";
 
 export function SettingsDownloadSources() {
   const [showAddDownloadSourceModal, setShowAddDownloadSourceModal] =
@@ -53,6 +52,16 @@ export function SettingsDownloadSources() {
         {t("download_sources_description")}
       </p>
 
+      <Button
+        type="button"
+        theme="outline"
+        style={{ alignSelf: "flex-start" }}
+        onClick={() => setShowAddDownloadSourceModal(true)}
+      >
+        <PlusCircleIcon />
+        {t("add_download_source")}
+      </Button>
+
       {downloadSources.map((downloadSource) => (
         <div key={downloadSource.id} className={styles.downloadSourceItem}>
           <div className={styles.downloadSourceItemHeader}>
@@ -60,9 +69,7 @@ export function SettingsDownloadSources() {
             <small>
               {t("download_options", {
                 count: downloadSource.repackCount,
-                countFormatted: numberFormatter.format(
-                  downloadSource.repackCount
-                ),
+                countFormatted: downloadSource.repackCount.toLocaleString(),
               })}
             </small>
           </div>
@@ -87,16 +94,6 @@ export function SettingsDownloadSources() {
           </div>
         </div>
       ))}
-
-      <Button
-        type="button"
-        theme="outline"
-        style={{ alignSelf: "flex-start" }}
-        onClick={() => setShowAddDownloadSourceModal(true)}
-      >
-        <PlusCircleIcon />
-        {t("add_download_source")}
-      </Button>
     </>
   );
 }