fixed remember output toggle

electron/index.ts

@@ -33,7 +33,7 @@ import commands from "./commands";
 log.initialize({ preload: true });
 
 function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
 }
 
 // Prepare the renderer once the app is ready
@@ -164,7 +164,10 @@ ipcMain.handle(commands.SELECT_FILE, async () => {
   } else {
     logit("Selected File Path: ", filePaths[0]);
     const platform = getPlatform();
-    imagePath = platform === "win" ? filePaths[0].replace(new RegExp(escapeRegExp('\\'), 'g'), '\\\\') : filePaths[0];
+    imagePath =
+      platform === "win"
+        ? filePaths[0].replace(new RegExp(escapeRegExp("\\"), "g"), "\\\\")
+        : filePaths[0];
     mainWindow.webContents
       .executeJavaScript(
         `localStorage.setItem("lastImagePath", "${imagePath}");`,
@@ -219,7 +222,13 @@ ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => {
   } else {
     logit("Selected Folder Path: ", folderPaths[0]);
     const platform = getPlatform();
-    folderPath = platform === "win" ? folderPaths[0].replace(new RegExp(escapeRegExp('\\'), 'g'), '\\\\') : folderPaths[0];
+    folderPath =
+      platform === "win"
+        ? folderPaths[0].replace(new RegExp(escapeRegExp("\\"), "g"), "\\\\")
+        : folderPaths[0];
+    mainWindow.webContents
+      .executeJavaScript('localStorage.getItem("rememberOutputFolder");', true)
+      .then(() => {
         mainWindow.webContents
           .executeJavaScript(
             `localStorage.setItem("lastFolderPath", "${folderPath}");`,
@@ -228,6 +237,8 @@ ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => {
           .then(() => {
             logit(`Saved Last Folder Path (${folderPath}) to Local Storage`);
           });
+      });
+
     return folderPaths[0];
   }
 });
@@ -447,7 +458,7 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
   const gpuId = payload.gpuId as string;
   const saveImageAs = payload.saveImageAs as string;
   let inputDir = (payload.imagePath.match(/(.*)[\/\\]/)[1] || "") as string;
-  let outputDir = folderPath || payload.outputPath as string;
+  let outputDir = folderPath || (payload.outputPath as string);
 
   const isDefaultModel = defaultModels.includes(model);
 

renderer/components/SettingsTab.tsx

@@ -2,16 +2,14 @@ import React, { useEffect, useState } from "react";
 import { themeChange } from "theme-change";
 import commands from "../../electron/commands";
 import { useAtom } from "jotai";
-import {
+import { customModelsPathAtom, scaleAtom } from "../atoms/userSettingsAtom";
-  customModelsPathAtom,
-  rememberOutputFolderAtom,
-  scaleAtom,
-} from "../atoms/userSettingsAtom";
 import { modelsListAtom } from "../atoms/modelsListAtom";
 
 interface IProps {
   batchMode: boolean;
   setBatchMode: React.Dispatch<React.SetStateAction<boolean>>;
+  rememberOutputFolder: boolean;
+  setRememberOutputFolder: React.Dispatch<React.SetStateAction<boolean>>;
   imagePath: string;
   setModel: React.Dispatch<React.SetStateAction<string>>;
   saveImageAs: string;
@@ -24,6 +22,8 @@ interface IProps {
 function SettingsTab({
   batchMode,
   setBatchMode,
+  rememberOutputFolder,
+  setRememberOutputFolder,
   imagePath,
   setModel,
   gpuId,
@@ -45,9 +45,6 @@ function SettingsTab({
 
   const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom);
   const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
-  const [rememberOutputFolder, setRememberOutputFolder] = useAtom(
-    rememberOutputFolderAtom
-  );
 
   const [scale, setScale] = useAtom(scaleAtom);
 
@@ -68,7 +65,7 @@ function SettingsTab({
     } else {
       const currentlySavedModel = JSON.parse(
         localStorage.getItem("model")
-      ) as typeof modelOptions[0];
+      ) as (typeof modelOptions)[0];
       setCurrentModel(currentlySavedModel);
       setModel(currentlySavedModel.value);
     }
@@ -91,6 +88,10 @@ function SettingsTab({
     localStorage.setItem("saveImageAs", format);
   };
 
+  const handleRememberOutputFolder = () => {
+    setRememberOutputFolder((oldValue) => !oldValue);
+  };
+
   const handleGpuIdChange = (e) => {
     setGpuId(e.target.value);
     localStorage.setItem("gpuId", e.target.value);
@@ -159,9 +160,7 @@ function SettingsTab({
           type="checkbox"
           className="toggle-primary toggle"
           defaultChecked={rememberOutputFolder}
-          onChange={() => {
+          onChange={handleRememberOutputFolder}
-            setRememberOutputFolder((oldValue) => !oldValue);
-          }}
         />
       </div>
 
@@ -192,7 +191,8 @@ function SettingsTab({
               setCustomModelsPath(customModelPath);
               window.electron.send(commands.GET_MODELS_LIST, customModelPath);
             }
-          }}>
+          }}
+        >
           Select Folder
         </button>
       </div>
@@ -217,7 +217,8 @@ function SettingsTab({
               className={`btn-primary btn ${
                 saveImageAs === "png" && "btn-accent"
               }`}
-              onClick={() => setExportType("png")}>
+              onClick={() => setExportType("png")}
+            >
               PNG
             </button>
             {/* JPG */}
@@ -225,7 +226,8 @@ function SettingsTab({
               className={`btn-primary btn ${
                 saveImageAs === "jpg" && "btn-accent"
               }`}
-              onClick={() => setExportType("jpg")}>
+              onClick={() => setExportType("jpg")}
+            >
               JPG
             </button>
             {/* WEBP */}
@@ -233,7 +235,8 @@ function SettingsTab({
               className={`btn-primary btn ${
                 saveImageAs === "webp" && "btn-accent"
               }`}
-              onClick={() => setExportType("webp")}>
+              onClick={() => setExportType("webp")}
+            >
               WEBP
             </button>
           </div>
@@ -268,8 +271,9 @@ function SettingsTab({
 
       <div className="relative flex flex-col gap-2">
         <button
-          className="btn-primary btn-xs btn absolute top-10 right-2 z-10"
+          className="btn-primary btn-xs btn absolute right-2 top-10 z-10"
-          onClick={copyOnClickHandler}>
+          onClick={copyOnClickHandler}
+        >
           {isCopied ? <span>Copied 📋</span> : <span>Copy 📋</span>}
         </button>
         <p className="text-sm font-medium">LOGS</p>

renderer/pages/index.tsx

@@ -15,6 +15,7 @@ import { modelsListAtom } from "../atoms/modelsListAtom";
 import {
   batchModeAtom,
   customModelsPathAtom,
+  rememberOutputFolderAtom,
   scaleAtom,
 } from "../atoms/userSettingsAtom";
 
@@ -29,6 +30,9 @@ const Home = () => {
   const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
   const [batchMode, setBatchMode] = useAtom(batchModeAtom);
+  const [rememberOutputFolder, setRememberOutputFolder] = useAtom(
+    rememberOutputFolderAtom
+  );
   const [batchFolderPath, setBatchFolderPath] = useState("");
   const [upscaledBatchFolderPath, setUpscaledBatchFolderPath] = useState("");
   const [doubleUpscayl, setDoubleUpscayl] = useState(false);
@@ -538,6 +542,8 @@ const Home = () => {
           <SettingsTab
             batchMode={batchMode}
             setBatchMode={setBatchMode}
+            rememberOutputFolder={rememberOutputFolder}
+            setRememberOutputFolder={setRememberOutputFolder}
             imagePath={imagePath}
             setModel={setModel}
             gpuId={gpuId}
@@ -558,7 +564,8 @@ const Home = () => {
         onDragOver={(e) => handleDragOver(e)}
         onDragEnter={(e) => handleDragEnter(e)}
         onDragLeave={(e) => handleDragLeave(e)}
-        onPaste={(e) => handlePaste(e)}>
+        onPaste={(e) => handlePaste(e)}
+      >
         {progress.length > 0 &&
         upscaledImagePath.length === 0 &&
         upscaledBatchFolderPath.length === 0 &&
@@ -635,7 +642,8 @@ const Home = () => {
             </p>
             <button
               className="bg-gradient-blue rounded-lg p-3 font-medium text-white/90 transition-colors"
-              onClick={openFolderHandler}>
+              onClick={openFolderHandler}
+            >
               Open Upscayled Folder
             </button>
           </>