Add macOS window button

electron/index.ts

@@ -78,6 +78,7 @@ app.on("ready", async () => {
       webSecurity: false,
       preload: join(__dirname, "preload.js"),
     },
+    titleBarStyle: getPlatform() === "mac" ? "hiddenInset" : "default",
   });
   const url = isDev
     ? "http://localhost:8000"
@@ -159,9 +160,9 @@ app.on("ready", async () => {
   // GET IMAGE QUALITY (NUMBER) TO LOCAL STORAGE
   mainWindow.webContents
     .executeJavaScript('localStorage.getItem("quality");', true)
-    .then((overwriteToggle: string | null) => {
-      if (overwriteToggle !== null) {
-        quality = parseInt(overwriteToggle);
+    .then((lastSavedQuality: string | null) => {
+      if (lastSavedQuality !== null) {
+        quality = parseInt(lastSavedQuality);
       }
     });
   // GET OVERWRITE SETTINGS FROM LOCAL STORAGE
@@ -416,8 +417,18 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
     "." +
     saveImageAs;
 
+  // GET OVERWRITE SETTINGS FROM LOCAL STORAGE
+  mainWindow.webContents
+    .executeJavaScript('localStorage.getItem("overwrite");', true)
+    .then((lastSavedOverwrite: boolean | null) => {
+      if (lastSavedOverwrite !== null) {
+        console.log("Overwrite: ", lastSavedOverwrite);
+        overwrite = lastSavedOverwrite;
+      }
+    });
+
   // UPSCALE
-  if (fs.existsSync(outFile) && !overwrite) {
+  if (fs.existsSync(outFile) && overwrite === false) {
     // If already upscayled, just output that file
     logit("✅ Already upscayled at: ", outFile);
     mainWindow.webContents.send(commands.UPSCAYL_DONE, outFile);

electron/preload.ts

@@ -1,4 +1,5 @@
 import { ipcRenderer, contextBridge } from "electron";
+import getPlatform from "./getPlatform";
 
 // 'ipcRenderer' will be available in index.js with the method 'window.electron'
 contextBridge.exposeInMainWorld("electron", {
@@ -9,4 +10,5 @@ contextBridge.exposeInMainWorld("electron", {
     }),
   invoke: (command: string, payload: any) =>
     ipcRenderer.invoke(command, payload),
+  platform: getPlatform(),
 });

renderer/components/Header.tsx

@@ -5,7 +5,7 @@ export default function Header({ version }: { version: string }) {
     <a
       href="https://github.com/upscayl/upscayl"
       target="_blank"
-      className="outline-none focus-visible:ring-2"
+      className={`outline-none focus-visible:ring-2`}
       data-tip="Star us on GitHub 😁">
       <div className="flex items-center gap-3 px-5 py-5">
         <img src="icon.png" className="inline-block w-14" alt="Upscayl Logo" />

renderer/components/settings-tab/ImageFormatSelect.tsx

@@ -42,14 +42,14 @@ export function ImageFormatSelect({
             onClick={() => setExportType("jpg")}>
             JPG
           </button>
-          {/* WEBP */}
+          {/* WEBP
           <button
             className={`btn-primary btn ${
               saveImageAs === "webp" && "btn-accent"
             }`}
             onClick={() => setExportType("webp")}>
             WEBP
-          </button>
+          </button> */}
         </div>
       </div>
     </div>

renderer/components/settings-tab/QualityInput.tsx

@@ -11,9 +11,12 @@ export function QualityInput({
 }: QualityInputProps) {
   return (
     <div className="flex flex-col gap-2">
-      <p className="text-sm font-medium uppercase">
-        Image Compression ({quality}%)
-      </p>
+      <div className="flex gap-1 text-sm font-medium uppercase">
+        <p className="shrink-0">Image Compression ({quality}%)</p>
+        <p className="badge-primary badge text-[10px] font-medium">
+          EXPERIMENTAL
+        </p>
+      </div>
       <input
         type="range"
         placeholder="Type here"

renderer/components/settings-tab/ToggleOverwrite.tsx

@@ -10,9 +10,13 @@ const ToggleOverwrite = ({ overwrite, setOverwrite }: ToggleOverwriteProps) => {
     if (!localStorage.getItem("overwrite")) {
       localStorage.setItem("overwrite", JSON.stringify(overwrite));
     } else {
-      setOverwrite(localStorage.getItem("overwrite"));
+      const currentlySavedOverwrite = localStorage.getItem("overwrite");
+      if (currentlySavedOverwrite) {
+        setOverwrite(JSON.parse(currentlySavedOverwrite));
+      }
     }
   }, []);
+
   return (
     <div className="flex flex-col gap-2">
       <p className="text-sm font-medium">OVERWRITE PREVIOUS UPSCALE</p>
@@ -21,11 +25,13 @@ const ToggleOverwrite = ({ overwrite, setOverwrite }: ToggleOverwriteProps) => {
         className="toggle"
         checked={overwrite}
         onClick={() => {
-          setOverwrite((oldValue) => {
-            if (oldValue === true) {
+          setOverwrite((oldValue: boolean) => {
+            if (oldValue) {
               localStorage.removeItem("overwrite");
+              return false;
+            } else {
+              return true;
             }
-            return !oldValue;
           });
           localStorage.setItem("overwrite", JSON.stringify(!overwrite));
         }}

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

@@ -130,7 +130,8 @@ function LeftPaneImageSteps({
   };
 
   return (
-    <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
+    <div
+      className={`animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden`}>
       {/* BATCH OPTION */}
       <div className="flex flex-row items-center gap-2">
         <input
@@ -139,7 +140,7 @@ function LeftPaneImageSteps({
           defaultChecked={batchMode}
           onClick={() => setBatchMode((oldValue) => !oldValue)}></input>
         <p
-          className="mr-1 inline-block  cursor-help text-sm"
+          className="mr-1 inline-block cursor-help text-sm"
           data-tooltip-id="tooltip"
           data-tooltip-content="This will let you Upscayl all files in a folder at once">
           Batch Upscayl

renderer/pages/index.tsx

@@ -435,9 +435,22 @@ const Home = () => {
 
   const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
 
+  if (typeof window === "undefined") {
+    return (
+      <img
+        src="/icon.png"
+        alt="Upscayl icon"
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-36 animate-pulse"
+      />
+    );
+  }
+
   return (
     <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
-      <div className="flex h-screen w-128 flex-col rounded-r-3xl bg-base-100">
+      <div className={`flex h-screen w-128 flex-col bg-base-100`}>
+        {window.electron.platform === "mac" && (
+          <div className="pt-8 mac-titlebar"></div>
+        )}
         {/* HEADER */}
         <Header version={version} />
 
@@ -492,6 +505,10 @@ const Home = () => {
         onDragEnter={(e) => handleDragEnter(e)}
         onDragLeave={(e) => handleDragLeave(e)}
         onPaste={(e) => handlePaste(e)}>
+        {window.electron.platform === "mac" && (
+          <div className="absolute top-0 w-full h-8 mac-titlebar"></div>
+        )}
+
         {progress.length > 0 &&
         upscaledImagePath.length === 0 &&
         upscaledBatchFolderPath.length === 0 ? (

renderer/renderer.d.ts

@@ -4,6 +4,7 @@ export interface IElectronAPI {
   on: (command, func?) => IpcRenderer;
   send: (command, func?) => IpcRenderer;
   invoke: (command, func?) => any;
+  platform: "mac" | "win" | "linux";
 }
 
 declare global {

renderer/styles/globals.css

@@ -161,6 +161,10 @@
   @apply rounded-btn h-10 ring-1 ring-slate-500 cursor-pointer !border-0 !border-none !border-transparent bg-primary shadow-none;
 }
 
+.mac-titlebar {
+  -webkit-app-region: drag;
+}
+
 @keyframes animate-step-in {
   0% {
     opacity: 0;