From 835c10df9e4264bece4e566d381b702aa348b573 Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Mon, 1 Apr 2024 14:34:56 +0530
Subject: [PATCH] Fix #760

---
 renderer/atoms/userSettingsAtom.ts            |  2 +-
 .../upscayl-tab/view/ImageOptions.tsx         | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/renderer/atoms/userSettingsAtom.ts b/renderer/atoms/userSettingsAtom.ts
index 3e2b73d..c6a487c 100644
--- a/renderer/atoms/userSettingsAtom.ts
+++ b/renderer/atoms/userSettingsAtom.ts
@@ -36,7 +36,7 @@ export const turnOffNotificationsAtom = atomWithStorage(
 
 export const viewTypeAtom = atomWithStorage<"slider" | "lens">(
   "viewType",
-  "lens",
+  "slider",
 );
 
 export const lensSizeAtom = atomWithStorage<number>("lensSize", 100);
diff --git a/renderer/components/upscayl-tab/view/ImageOptions.tsx b/renderer/components/upscayl-tab/view/ImageOptions.tsx
index 1706851..63e6612 100644
--- a/renderer/components/upscayl-tab/view/ImageOptions.tsx
+++ b/renderer/components/upscayl-tab/view/ImageOptions.tsx
@@ -2,7 +2,7 @@ import { lensSizeAtom, viewTypeAtom } from "@/atoms/userSettingsAtom";
 import SidebarClosed from "@/components/icons/SidebarClosed";
 import SidebarOpened from "@/components/icons/SidebarOpened";
 import { useAtom } from "jotai";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 const ImageOptions = ({
   zoomAmount,
@@ -32,42 +32,46 @@ const ImageOptions = ({
       onDoubleClick={(e) => {
         e.stopPropagation();
       }}
-      className="w-full h-full absolute">
+      className="absolute h-full w-full"
+    >
       <div
-        className={`transition-all duration-500 bg-base-100 text-base-content h-screen w-[28rem] fixed right-0 top-0 z-50 shadow-xl shadow-black ${
+        className={`fixed right-0 top-0 z-50 h-screen w-[28rem] bg-base-100 text-base-content shadow-xl shadow-black transition-all duration-500 ${
           openSidebar ? "right-0" : "-right-full translate-x-full"
-        }`}>
+        }`}
+      >
         <div
-          className={`transition-all duration-500 bg-base-100 p-4 rounded-btn rounded-r-none absolute top-1/2 right-[100%] z-50 cursor-pointer flex items-center group gap-2`}
+          className={`group rounded-btn absolute right-[100%] top-1/2 z-50 flex cursor-pointer items-center gap-2 rounded-r-none bg-base-100 p-4 transition-all duration-500`}
           onClick={() => {
             setOpenSidebar(!openSidebar);
-          }}>
+          }}
+        >
           {openSidebar ? (
-            <SidebarOpened className="text-white text-xl" />
+            <SidebarOpened className="text-xl text-white" />
           ) : (
-            <SidebarClosed className="text-white text-xl" />
+            <SidebarClosed className="text-xl text-white" />
           )}
         </div>
 
         <div className="flex flex-col justify-center gap-5 overflow-auto p-5">
-          <button className="btn-primary btn" onClick={resetImagePaths}>
+          <button className="btn btn-primary" onClick={resetImagePaths}>
             Reset Image
           </button>
 
           <div className="flex flex-row items-center gap-2">
-            <p className="font-medium text-sm">Lens View</p>
+            <p className="text-sm font-medium">Lens View</p>
             <input
               type="checkbox"
               className="toggle"
+              checked={viewType === "slider"}
               onChange={(e) => {
                 setViewType(e.target.checked ? "slider" : "lens");
               }}
             />
-            <p className="font-medium text-sm">Slider View</p>
+            <p className="text-sm font-medium">Slider View</p>
           </div>
 
           <div className="flex flex-col gap-2">
-            <p className="font-medium text-sm">Zoom Amount ({zoomAmount}%)</p>
+            <p className="text-sm font-medium">Zoom Amount ({zoomAmount}%)</p>
             <input
               type="range"
               min="100"
@@ -83,7 +87,7 @@ const ImageOptions = ({
           </div>
 
           <div className="flex flex-col gap-2">
-            <p className="font-medium text-sm">Lens Size ({lensSize / 10})</p>
+            <p className="text-sm font-medium">Lens Size ({lensSize / 10})</p>
             <input
               type="range"
               min="20"