Fix macos builds

electron/commands/custom-models-select.ts

@@ -8,7 +8,7 @@ import slash from "../utils/slash";
 import COMMAND from "../constants/commands";
 import getModels from "../utils/get-models";
 import { getMainWindow } from "../main-window";
-import { settings } from "../utils/settings";
+import settings from "electron-settings";
 
 const customModelsSelect = async (event, message) => {
   const mainWindow = getMainWindow();
@@ -23,11 +23,12 @@ const customModelsSelect = async (event, message) => {
     title: "Select Custom Models Folder",
     defaultPath: customModelsFolderPath,
     securityScopedBookmarks: true,
+    message: "Select Custom Models Folder that is named 'models'",
   });
 
   if (bookmarks && bookmarks.length > 0) {
-    logit("📁 Bookmarks: ", bookmarks);
-    settings.set("custom-models-bookmarks", bookmarks[0]);
+    console.log("🚨 Setting Bookmark: ", bookmarks);
+    await settings.set("custom-models-bookmarks", bookmarks[0]);
   }
 
   if (canceled) {
@@ -52,10 +53,8 @@ const customModelsSelect = async (event, message) => {
       return null;
     }
 
-    mainWindow.webContents.send(
-      COMMAND.CUSTOM_MODEL_FILES_LIST,
-      getModels(customModelsFolderPath)
-    );
+    const models = await getModels(customModelsFolderPath);
+    mainWindow.webContents.send(COMMAND.CUSTOM_MODEL_FILES_LIST, models);
 
     logit("📁 Custom Folder Path: ", customModelsFolderPath);
     return customModelsFolderPath;

electron/commands/get-models-list.ts

@@ -15,11 +15,9 @@ const getModelsList = async (event, payload) => {
     setCustomModelsFolderPath(payload);
 
     logit("📁 Custom Models Folder Path: ", customModelsFolderPath);
+    const models = await getModels(payload);
 
-    mainWindow.webContents.send(
-      COMMAND.CUSTOM_MODEL_FILES_LIST,
-      getModels(payload)
-    );
+    mainWindow.webContents.send(COMMAND.CUSTOM_MODEL_FILES_LIST, models);
   }
 };
 

electron/commands/select-file.ts

@@ -1,21 +1,37 @@
-import { MessageBoxOptions, dialog } from "electron";
+import { MessageBoxOptions, app, dialog } from "electron";
 import { getMainWindow } from "../main-window";
 import { imagePath, setImagePath } from "../utils/config-variables";
 import logit from "../utils/logit";
-import { settings } from "../utils/settings";
+import settings from "electron-settings";
 
 const selectFile = async () => {
   const mainWindow = getMainWindow();
 
   const { canceled, filePaths, bookmarks } = await dialog.showOpenDialog({
-    properties: ["openFile", "multiSelections"],
+    properties: ["openFile"],
     title: "Select Image",
     defaultPath: imagePath,
     securityScopedBookmarks: true,
+    message: "Select Image to Upscale",
+    filters: [
+      {
+        name: "Images",
+        extensions: [
+          "png",
+          "jpg",
+          "jpeg",
+          "webp",
+          "PNG",
+          "JPG",
+          "JPEG",
+          "WEBP",
+        ],
+      },
+    ],
   });
 
   if (bookmarks && bookmarks.length > 0) {
-    logit("📁 Bookmarks: ", bookmarks);
+    console.log("🚨 Setting Bookmark: ", bookmarks);
     settings.set("file-bookmarks", bookmarks[0]);
   }
 

electron/commands/select-folder.ts

@@ -1,9 +1,22 @@
-import { dialog } from "electron";
+import { app, dialog } from "electron";
 import { folderPath, setFolderPath } from "../utils/config-variables";
 import logit from "../utils/logit";
-import { settings } from "../utils/settings";
+import settings from "electron-settings";
 
 const selectFolder = async (event, message) => {
+  let closeAccess;
+  const folderBookmarks = await settings.get("folder-bookmarks");
+  if (folderBookmarks) {
+    logit("🚨 Folder Bookmarks: ", folderBookmarks);
+    try {
+      closeAccess = app.startAccessingSecurityScopedResource(
+        folderBookmarks as string
+      );
+    } catch (error) {
+      logit("📁 Folder Bookmarks Error: ", error);
+    }
+  }
+
   const {
     canceled,
     filePaths: folderPaths,
@@ -15,8 +28,8 @@ const selectFolder = async (event, message) => {
   });
 
   if (bookmarks && bookmarks.length > 0) {
-    logit("📁 Bookmarks: ", bookmarks);
-    settings.set("folder-bookmarks", bookmarks[0]);
+    console.log("🚨 Setting folder Bookmark: ", bookmarks);
+    await settings.set("folder-bookmarks", bookmarks[0]);
   }
 
   if (canceled) {

electron/index.ts

@@ -19,7 +19,7 @@ import doubleUpscayl from "./commands/double-upscayl";
 import autoUpdate from "./commands/auto-update";
 import sharp from "sharp";
 import { featureFlags } from "../common/feature-flags";
-import { settings } from "./utils/settings";
+import settings from "electron-settings";
 
 // INITIALIZATION
 log.initialize({ preload: true });
@@ -45,21 +45,17 @@ app.on("ready", async () => {
   log.info("🚀 UPSCAYL EXEC PATH: ", execPath("bin"));
   log.info("🚀 MODELS PATH: ", modelsPath);
 
-  // SECURITY SCOPED BOOKMARKS
-  const fileBookmarks = settings.get("file-bookmarks", true);
-  const folderBookmarks = settings.get("folder-bookmarks", true);
-  const customModelsBookmarks = settings.get("custom-models-bookmarks", true);
-  if (fileBookmarks) {
-    log.info("📁 File Bookmarks: ", fileBookmarks);
-    app.startAccessingSecurityScopedResource(fileBookmarks);
-  }
+  let closeAccess;
+  const folderBookmarks = await settings.get("folder-bookmarks");
   if (folderBookmarks) {
-    log.info("📁 Folder Bookmarks: ", folderBookmarks);
-    app.startAccessingSecurityScopedResource(folderBookmarks);
+    logit("🚨 Folder Bookmarks: ", folderBookmarks);
+    try {
+      closeAccess = app.startAccessingSecurityScopedResource(
+        folderBookmarks as string
+      );
+    } catch (error) {
+      logit("📁 Folder Bookmarks Error: ", error);
     }
-  if (customModelsBookmarks) {
-    log.info("📁 Custom Models Bookmarks: ", customModelsBookmarks);
-    app.startAccessingSecurityScopedResource(customModelsBookmarks);
   }
 });
 

electron/utils/get-models.ts

@@ -1,11 +1,29 @@
 import fs from "fs";
 import logit from "./logit";
-import { MessageBoxOptions, dialog } from "electron";
+import { MessageBoxOptions, app, dialog } from "electron";
+import settings from "electron-settings";
 
-const getModels = (folderPath: string | undefined) => {
+const getModels = async (folderPath: string | undefined) => {
   let models: string[] = [];
   let isValid = false;
 
+  // SECURITY SCOPED BOOKMARKS
+  let closeAccess;
+  const customModelsBookmarks = await settings.get("custom-models-bookmarks");
+  if (customModelsBookmarks) {
+    console.log(
+      "🚀 => file: get-models.ts:18 => customModelsBookmarks:",
+      customModelsBookmarks
+    );
+    try {
+      closeAccess = app.startAccessingSecurityScopedResource(
+        customModelsBookmarks as string
+      );
+    } catch (error) {
+      logit("📁 Custom Models Bookmarks Error: ", error);
+    }
+  }
+
   if (!folderPath) {
     logit("❌ Invalid Custom Model Folder Detected");
     const options: MessageBoxOptions = {

electron/utils/local-storage.ts

@@ -11,8 +11,8 @@ import { getMainWindow } from "../main-window";
  * // Set a value
  * settings.set("key", value);
  */
-export const settings = {
-  get: (key: string, parse: boolean = false): any => {
+export const localStorage = {
+  get: <T>(key: string, parse: boolean = false): T | null => {
     const mainWindow = getMainWindow();
     if (!mainWindow) return null;
     let result = null;

package.json

@@ -225,6 +225,7 @@
     "electron-is-dev": "^2.0.0",
     "electron-log": "^5.0.0-beta.16",
     "electron-next": "^3.1.5",
+    "electron-settings": "^4.0.2",
     "electron-updater": "^6.1.4",
     "firebase": "^10.3.0",
     "jotai": "^2.2.2",

renderer/atoms/userSettingsAtom.ts

@@ -5,10 +5,10 @@ export const customModelsPathAtom = atomWithStorage<string | null>(
   "customModelsPath",
   null
 );
-
 export const scaleAtom = atomWithStorage<"2" | "3" | "4">("scale", "4");
-
 export const batchModeAtom = atom<boolean>(false);
+export const outputPathAtom = atom<string | null>("");
+export const progressAtom = atom<string>("");
 
 export const rememberOutputFolderAtom = atomWithStorage<boolean>(
   "rememberOutputFolder",

renderer/components/settings-tab/SaveOutputFolderToggle.tsx

@@ -17,7 +17,7 @@ export function SaveOutputFolderToggle({
       </p>
       <input
         type="checkbox"
-        className="toggle-primary toggle"
+        className="toggle"
         checked={rememberOutputFolder}
         onClick={() => {
           setRememberOutputFolder((oldValue) => {

renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx

@@ -1,4 +1,4 @@
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Select from "react-select";
 import { Tooltip } from "react-tooltip";
@@ -7,12 +7,13 @@ import { modelsListAtom } from "../../../atoms/modelsListAtom";
 import useLog from "../../hooks/useLog";
 import {
   noImageProcessingAtom,
+  outputPathAtom,
+  progressAtom,
   scaleAtom,
 } from "../../../atoms/userSettingsAtom";
 import { featureFlags } from "@common/feature-flags";
 
 interface IProps {
-  progress: string;
   selectImageHandler: () => Promise<void>;
   selectFolderHandler: () => Promise<void>;
   handleModelChange: (e: any) => void;
@@ -21,7 +22,6 @@ interface IProps {
   batchMode: boolean;
   setBatchMode: React.Dispatch<React.SetStateAction<boolean>>;
   imagePath: string;
-  outputPath: string;
   doubleUpscayl: boolean;
   setDoubleUpscayl: React.Dispatch<React.SetStateAction<boolean>>;
   dimensions: {
@@ -35,7 +35,6 @@ interface IProps {
 }
 
 function LeftPaneImageSteps({
-  progress,
   selectImageHandler,
   selectFolderHandler,
   handleModelChange,
@@ -44,7 +43,6 @@ function LeftPaneImageSteps({
   batchMode,
   setBatchMode,
   imagePath,
-  outputPath,
   doubleUpscayl,
   setDoubleUpscayl,
   dimensions,
@@ -64,6 +62,8 @@ function LeftPaneImageSteps({
   const modelOptions = useAtomValue(modelsListAtom);
   const scale = useAtomValue(scaleAtom);
   const noImageProcessing = useAtomValue(noImageProcessingAtom);
+  const [outputPath, setOutputPath] = useAtom(outputPathAtom);
+  const [progress, setProgress] = useAtom(progressAtom);
 
   const { logit } = useLog();
 
@@ -162,7 +162,11 @@ function LeftPaneImageSteps({
           type="checkbox"
           className="toggle"
           defaultChecked={batchMode}
-          onClick={() => setBatchMode((oldValue) => !oldValue)}></input>
+          onClick={() => {
+            setOutputPath("");
+            setProgress("");
+            setBatchMode((oldValue) => !oldValue);
+          }}></input>
         <p
           className="mr-1 inline-block cursor-help text-sm"
           data-tooltip-id="tooltip"
@@ -182,7 +186,7 @@ function LeftPaneImageSteps({
       </div>
 
       {/* STEP 2 */}
-      <div className="animate-step-in">
+      <div className="animate-step-in group">
         <p className="step-heading">Step 2</p>
         <p className="mb-2 text-sm">Select Model</p>
 
@@ -196,7 +200,7 @@ function LeftPaneImageSteps({
             handleModelChange(e);
             setCurrentModel({ label: e.label, value: e.value });
           }}
-          className="react-select-container active:w-full focus:w-full hover:w-full transition-all"
+          className="react-select-container group-active:w-full focus:w-full group-hover:w-full transition-all"
           classNamePrefix="react-select"
           value={currentModel}
         />
@@ -239,9 +243,9 @@ function LeftPaneImageSteps({
         data-tooltip-id="tooltip">
         <div className="step-heading flex items-center gap-2">
           <span>Step 3</span>
-          {!outputPath && (
+          {!outputPath && featureFlags.APP_STORE_BUILD && (
             <div className="text-xs">
-              <span className="bg-error font-medium uppercase text-error-content rounded-btn px-2">
+              <span className="bg-base-200 font-medium uppercase text-base-content/50 rounded-btn px-2">
                 Not selected
               </span>
             </div>
@@ -274,8 +278,11 @@ function LeftPaneImageSteps({
         )}
         <button
           className="btn-accent btn"
-          onClick={upscaylHandler}
-          disabled={progress.length > 0 || !outputPath}>
+          onClick={
+            progress.length > 0 || !outputPath
+              ? () => alert("Please select an output folder first")
+              : upscaylHandler
+          }>
           {progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
         </button>
       </div>

renderer/pages/index.tsx

@@ -16,6 +16,8 @@ import { modelsListAtom } from "../atoms/modelsListAtom";
 import {
   batchModeAtom,
   dontShowCloudModalAtom,
+  outputPathAtom,
+  progressAtom,
   scaleAtom,
 } from "../atoms/userSettingsAtom";
 import useLog from "../components/hooks/useLog";
@@ -27,9 +29,9 @@ const Home = () => {
   const [os, setOs] = useState<"linux" | "mac" | "win" | undefined>(undefined);
   const [imagePath, SetImagePath] = useState("");
   const [upscaledImagePath, setUpscaledImagePath] = useState("");
-  const [outputPath, setOutputPath] = useState("");
+  const [outputPath, setOutputPath] = useAtom(outputPathAtom);
   const [scaleFactor] = useState(4);
-  const [progress, setProgress] = useState("");
+  const [progress, setProgress] = useAtom(progressAtom);
   const [model, setModel] = useState("realesrgan-x4plus");
   const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
@@ -77,7 +79,7 @@ const Home = () => {
         if (batchMode) return;
         alert(
           data.includes("encode")
-            ? "ENCODING ERROR => "
+            ? `ENCODING ERROR: ${data}`
             : "DECODING ERROR => " +
                 "This image is possibly corrupt or not supported by Upscayl, or your GPU drivers are acting funny (Did you check if your GPU is compatible and drivers are alright?). You could try converting the image into another format and upscaling again. Also make sure that the output path is correct and you have the proper write permissions for the directory. If not, then unfortuantely there's not much we can do to help, sorry."
         );
@@ -175,6 +177,8 @@ const Home = () => {
 
     // CUSTOM FOLDER LISTENER
     window.electron.on(COMMAND.CUSTOM_MODEL_FILES_LIST, (_, data: string[]) => {
+      console.log("🚀 => file: index.tsx:178 => data:", data);
+
       logit(`📜 CUSTOM_MODEL_FILES_LIST: `, data);
       const newModelOptions = data.map((model) => {
         return {
@@ -182,7 +186,10 @@ const Home = () => {
           label: model,
         };
       });
-
+      console.log(
+        "🚀 => file: index.tsx:185 => newModelOptions:",
+        newModelOptions
+      );
       // Add newModelsList to modelOptions and remove duplicates
       const combinedModelOptions = [...modelOptions, ...newModelOptions];
       const uniqueModelOptions = combinedModelOptions.filter(
@@ -190,8 +197,13 @@ const Home = () => {
         (model, index, array) =>
           array.findIndex((t) => t.value === model.value) === index
       );
+      console.log(
+        "🚀 => file: index.tsx:197 => uniqueModelOptions:",
+        uniqueModelOptions
+      );
       setModelOptions(uniqueModelOptions);
     });
+
     if (!localStorage.getItem("upscaylCloudModalShown")) {
       logit("⚙️ upscayl cloud show to true");
       localStorage.setItem("upscaylCloudModalShown", "true");
@@ -210,10 +222,15 @@ const Home = () => {
     }
   }, []);
 
+  // CHECK IF OUTPUT FOLDER IS REMEMBERED
   useEffect(() => {
     const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
-    const lastOutputFolderPath = localStorage.getItem("lastOutputFolderPath");
+    console.log(
+      "🚀 => file: index.tsx:226 => rememberOutputFolder:",
+      rememberOutputFolder
+    );
 
+    const lastOutputFolderPath = localStorage.getItem("lastOutputFolderPath");
     // GET OVERWRITE
     if (!localStorage.getItem("overwrite")) {
       localStorage.setItem("overwrite", JSON.stringify(overwrite));
@@ -223,8 +240,8 @@ const Home = () => {
         setOverwrite(currentlySavedOverwrite === "true");
       }
     }
-
     if (rememberOutputFolder === "true") {
+      logit("🧠 Recalling Output Folder: ", lastOutputFolderPath);
       setOutputPath(lastOutputFolderPath);
     } else {
       setOutputPath("");
@@ -232,11 +249,6 @@ const Home = () => {
     }
   }, []);
 
-  useEffect(() => {
-    setProgress("");
-    setOutputPath("");
-  }, [batchMode]);
-
   useEffect(() => {
     if (imagePath.length > 0) {
       logit("🖼 imagePath: ", imagePath);
@@ -523,7 +535,6 @@ const Home = () => {
 
         {selectedTab === 0 && (
           <LeftPaneImageSteps
-            progress={progress}
             selectImageHandler={selectImageHandler}
             selectFolderHandler={selectFolderHandler}
             handleModelChange={handleModelChange}
@@ -532,7 +543,6 @@ const Home = () => {
             batchMode={batchMode}
             setBatchMode={setBatchMode}
             imagePath={imagePath}
-            outputPath={outputPath}
             doubleUpscayl={doubleUpscayl}
             setDoubleUpscayl={setDoubleUpscayl}
             dimensions={dimensions}