Add reset and hide modal

package.json

@@ -1,7 +1,7 @@
 {
   "name": "upscayl",
   "private": true,
-  "version": "2.7.5",
+  "version": "2.8.0",
   "productName": "Upscayl",
   "homepage": "https://github.com/TGS963/upscayl",
   "contributors": [
@@ -56,7 +56,6 @@
     "appId": "org.upscayl.app",
     "artifactName": "${name}-${version}-${os}-${arch}.${ext}",
     "asar": true,
-    "notarize": false,
     "afterSign": "scripts/notarize.js",
     "extraFiles": [
       {
@@ -97,6 +96,7 @@
       "hardenedRuntime": true,
       "entitlements": "resources/entitlements.mac.plist",
       "entitlementsInherit": "resources/entitlements.mac.plist",
+      "notarize": false,
       "gatekeeperAssess": false,
       "target": [
         {

renderer/atoms/userSettingsAtom.ts

@@ -13,3 +13,8 @@ export const rememberOutputFolderAtom = atomWithStorage<boolean>(
   "rememberOutputFolder",
   false
 );
+
+export const dontShowCloudModalAtom = atomWithStorage<boolean>(
+  "dontShowCloudModal",
+  false
+);

renderer/components/Header.tsx

@@ -6,7 +6,8 @@ export default function Header({ version }: { version: string }) {
       href="https://github.com/upscayl/upscayl"
       target="_blank"
       className={`outline-none focus-visible:ring-2`}
-      data-tip="Star us on GitHub 😁">
+      data-tooltip-id="tooltip"
+      data-tooltip-content="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" />
         <div className="flex flex-col justify-center">

renderer/components/UpscaylCloudModal.tsx

@@ -5,13 +5,38 @@ import { doc, setDoc } from "firebase/firestore";
 const nameRegex = /^[A-Za-z\s.'-]+$/;
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
-export const UpscaylCloudModal = ({ show, setShow }) => {
+export const UpscaylCloudModal = ({ show, setShow, setDontShowCloudModal }) => {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
 
   return (
     <dialog className={`modal ${show && "modal-open"}`}>
       <div className="modal-box flex flex-col text-center items-center gap-4">
+        <button
+          className="absolute top-2 right-4 btn btn-circle"
+          onClick={() => setShow(false)}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24">
+            <rect
+              x="0"
+              y="0"
+              width="24"
+              height="24"
+              fill="none"
+              stroke="none"
+            />
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-width="1.5"
+              d="m8.464 15.535l7.072-7.07m-7.072 0l7.072 7.07"
+            />
+          </svg>
+        </button>
         <p className="badge badge-neutral text-xs">Coming soon!</p>
         <p className="text-2xl font-semibold">Introducing Upscayl Cloud!</p>
         <p className="w-9/12 font-medium text-lg">
@@ -46,11 +71,15 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
                   email,
                 });
               } catch (error) {
-                alert("Error joining the waitlist. Please try again...");
+                alert(
+                  `Thank you ${name}! It seems that your email has already been registered :D If that's not the case, please try again.`
+                );
                 return;
               }
               setName("");
               setEmail("");
+              setDontShowCloudModal(true);
+              setShow(false);
               alert(
                 "Thank you for joining the waitlist! We will notify you when Upscayl Cloud is ready for you."
               );
@@ -79,6 +108,16 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
             className="bg-success text-success-content rounded-2xl px-4 py-2">
             Join the waitlist
           </button>
+
+          <button
+            className="text-xs text-base-content/50"
+            onClick={() => {
+              setDontShowCloudModal(true);
+              setShow(false);
+            }}
+            type="button">
+            DON'T SHOW AGAIN
+          </button>
         </form>
       </div>
 

renderer/components/settings-tab/ResetSettings.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import commands from "../../../electron/commands";
+
+export function ResetSettings() {
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <p className="text-sm font-medium">RESET UPSCAYL</p>
+      <button
+        className="btn-primary btn"
+        onClick={async () => {
+          localStorage.clear();
+          alert(
+            "Upscayl has been reset. Please close this window and open Upscayl again."
+          );
+        }}>
+        RESET UPSCAYL
+      </button>
+    </div>
+  );
+}

renderer/components/settings-tab/index.tsx

@@ -14,6 +14,8 @@ import { modelsListAtom } from "../../atoms/modelsListAtom";
 import useLog from "../hooks/useLog";
 import { QualityInput } from "./QualityInput";
 import ToggleOverwrite from "./ToggleOverwrite";
+import { UpscaylCloudModal } from "../UpscaylCloudModal";
+import { ResetSettings } from "./ResetSettings";
 
 interface IProps {
   batchMode: boolean;
@@ -28,6 +30,9 @@ interface IProps {
   overwrite: boolean;
   setOverwrite: (arg: any) => void;
   os: "linux" | "mac" | "win" | undefined;
+  show: boolean;
+  setShow: React.Dispatch<React.SetStateAction<boolean>>;
+  setDontShowCloudModal: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 function SettingsTab({
@@ -43,6 +48,9 @@ function SettingsTab({
   overwrite,
   setOverwrite,
   os,
+  show,
+  setShow,
+  setDontShowCloudModal,
 }: IProps) {
   // STATES
   const [currentModel, setCurrentModel] = useState<{
@@ -195,6 +203,23 @@ function SettingsTab({
         customModelsPath={customModelsPath}
         setCustomModelsPath={setCustomModelsPath}
       />
+
+      {/* RESET SETTINGS */}
+      <ResetSettings />
+
+      <button
+        className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm"
+        onClick={() => {
+          setShow(true);
+        }}>
+        Introducing Upscayl Cloud
+      </button>
+
+      <UpscaylCloudModal
+        show={show}
+        setShow={setShow}
+        setDontShowCloudModal={setDontShowCloudModal}
+      />
     </div>
   );
 }

renderer/pages/index.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { useState, useEffect, useCallback } from "react";
 import commands from "../../electron/commands";
 import { ReactCompareSlider } from "react-compare-slider";
@@ -13,7 +13,11 @@ import SettingsTab from "../components/settings-tab";
 import { useAtom } from "jotai";
 import { logAtom } from "../atoms/logAtom";
 import { modelsListAtom } from "../atoms/modelsListAtom";
-import { batchModeAtom, scaleAtom } from "../atoms/userSettingsAtom";
+import {
+  batchModeAtom,
+  dontShowCloudModalAtom,
+  scaleAtom,
+} from "../atoms/userSettingsAtom";
 import useLog from "../components/hooks/useLog";
 import { UpscaylCloudModal } from "../components/UpscaylCloudModal";
 
@@ -47,6 +51,9 @@ const Home = () => {
   const [logData, setLogData] = useAtom(logAtom);
   const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
   const [scale] = useAtom(scaleAtom);
+  const [dontShowCloudModal, setDontShowCloudModal] = useAtom(
+    dontShowCloudModalAtom
+  );
 
   const [showCloudModal, setShowCloudModal] = useState(false);
 
@@ -458,19 +465,25 @@ const Home = () => {
   return (
     <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
       <div className={`flex h-screen w-128 flex-col bg-base-100`}>
-        <UpscaylCloudModal show={showCloudModal} setShow={setShowCloudModal} />
+        <UpscaylCloudModal
+          show={showCloudModal}
+          setShow={setShowCloudModal}
+          setDontShowCloudModal={setDontShowCloudModal}
+        />
         {window.electron.platform === "mac" && (
           <div className="pt-8 mac-titlebar"></div>
         )}
         {/* HEADER */}
         <Header version={version} />
-        <button
-          className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm"
-          onClick={() => {
-            setShowCloudModal(true);
-          }}>
-          Introducing Upscayl Cloud
-        </button>
+        {!dontShowCloudModal && (
+          <button
+            className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm"
+            onClick={() => {
+              setShowCloudModal(true);
+            }}>
+            Introducing Upscayl Cloud
+          </button>
+        )}
 
         <Tabs selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
 
@@ -509,6 +522,9 @@ const Home = () => {
             overwrite={overwrite}
             setOverwrite={setOverwrite}
             os={os}
+            show={showCloudModal}
+            setShow={setShowCloudModal}
+            setDontShowCloudModal={setDontShowCloudModal}
           />
         )}
         {/* )} */}