Add scale on main screen

renderer/atoms/userSettingsAtom.ts

@@ -6,7 +6,7 @@ export const customModelsPathAtom = atomWithStorage<string | null>(
   null,
 );
 
-export const scaleAtom = atomWithStorage<"2" | "3" | "4">("scale", "4");
+export const scaleAtom = atomWithStorage<string>("scale", "4");
 
 export const batchModeAtom = atom<boolean>(false);
 

renderer/components/settings-tab/CompressionInput.tsx

@@ -14,8 +14,8 @@ export function CompressionInput({
       </div>
       {compression > 0 && (
         <p className="text-xs text-base-content/80">
-          PNG compression is lossless. It might not have a significant effect on
-          some images.
+          PNG compression is lossless, so it might not reduce the file size
+          significantly. JPG and WebP compression is lossy.
         </p>
       )}
       <input

renderer/components/settings-tab/ImageScaleSelect.tsx

@@ -1,30 +1,55 @@
 import { useCustomWidthAtom } from "@/atoms/userSettingsAtom";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 
 type ImageScaleSelectProps = {
-  scale: "4" | "2" | "3";
-  setScale: (arg: "4" | "2" | "3") => void;
+  scale: string;
+  setScale: React.Dispatch<React.SetStateAction<string>>;
+  hideInfo?: boolean;
 };
 
-export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
-  const [useCustomWidth, setUseCustomWidth] = useAtom(useCustomWidthAtom);
+export function ImageScaleSelect({
+  scale,
+  setScale,
+  hideInfo,
+}: ImageScaleSelectProps) {
+  const useCustomWidth = useAtomValue(useCustomWidthAtom);
 
   return (
     <div className={`${useCustomWidth && "opacity-50"}`}>
       <div className="flex flex-row gap-1">
+        {hideInfo ? (
+          <>
+            <p className="text-sm">
+              Image Scale <span className="text-xs">({scale}X)</span>
+            </p>
+            {hideInfo && parseInt(scale) >= 6 && (
+              <p
+                className="badge badge-warning text-xs font-bold"
+                data-tooltip-id="tooltip"
+                data-tooltip-content="Anything above 5X may cause performance issues on some devices!"
+              >
+                !
+              </p>
+            )}
+          </>
+        ) : (
           <p className="text-sm font-medium">
             IMAGE SCALE ({scale}X) {useCustomWidth && "DISABLED"}
           </p>
+        )}
       </div>
+      {!hideInfo && (
         <p className="text-xs text-base-content/80">
-        Anything above 4X (except 16X Double Upscayl) only resizes the image and
-        does not use AI upscaling.
+          Anything above 4X (except 16X Double Upscayl) only resizes the image
+          and does not use AI upscaling.
         </p>
-      {parseInt(scale) >= 6 && (
+      )}
+      {!hideInfo && parseInt(scale) >= 6 && (
         <p className="text-xs text-base-content/80 text-red-500">
           This may cause performance issues on some devices!
         </p>
       )}
+
       <input
         type="range"
         min="1"

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

@@ -19,6 +19,7 @@ import COMMAND from "@common/commands";
 import Select from "react-select";
 import { cn } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
+import { ImageScaleSelect } from "@/components/settings-tab/ImageScaleSelect";
 
 interface IProps {
   selectImageHandler: () => Promise<void>;
@@ -62,7 +63,7 @@ function LeftPaneImageSteps({
   });
 
   const modelOptions = useAtomValue(modelsListAtom);
-  const scale = useAtomValue(scaleAtom);
+  const [scale, setScale] = useAtom(scaleAtom);
   const noImageProcessing = useAtomValue(noImageProcessingAtom);
   const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
   const [progress, setProgress] = useAtom(progressAtom);
@@ -204,7 +205,8 @@ function LeftPaneImageSteps({
       </div>
 
       {/* STEP 2 */}
-      <div className="animate-step-in group">
+      <div className="animate-step-in group flex flex-col gap-4">
+        <div>
           <p className="step-heading">Step 2</p>
           <p className="mb-2 text-sm">Select Model</p>
 
@@ -227,9 +229,10 @@ function LeftPaneImageSteps({
             classNamePrefix="react-select"
             value={currentModel}
           />
+        </div>
 
         {!batchMode && (
-          <div className="mt-4 flex items-center gap-1">
+          <div className="flex items-center gap-1">
             <input
               type="checkbox"
               className="checkbox"
@@ -259,6 +262,8 @@ function LeftPaneImageSteps({
             </button>
           </div>
         )}
+
+        <ImageScaleSelect scale={scale} setScale={setScale} hideInfo />
       </div>
 
       {/* STEP 3 */}