Rename files and components

renderer/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { newsAtom, showNewsModalAtom } from "@/atoms/newsAtom";
+import { newsAtom, showNewsModalAtom } from "@/atoms/news-atom";
 import { translationAtom } from "@/atoms/translations-atom";
 import { useAtomValue, useSetAtom } from "jotai";
 import React from "react";

renderer/components/Header.tsx

@@ -1,6 +1,6 @@
 import { FEATURE_FLAGS } from "@common/feature-flags";
 import React from "react";
-import UpscaylSVGLogo from "./icons/Logo";
+import UpscaylSVGLogo from "./icons/upscayl-logo-svg";
 import { useAtomValue } from "jotai";
 import { translationAtom } from "@/atoms/translations-atom";
 

renderer/components/hooks/use-logger.ts

@@ -1,4 +1,4 @@
-import { logAtom } from "../../atoms/logAtom";
+import { logAtom } from "../../atoms/log-atom";
 import log from "electron-log/renderer";
 import { useSetAtom } from "jotai";
 import React from "react";

renderer/components/icons/spinner-svg.tsx

@@ -1,7 +1,3 @@
-// React SVG Component
-
-import React from "react";
-
 function Spinner() {
   return (
     // By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
@@ -10,7 +6,8 @@ function Spinner() {
       fill="currentColor"
       stroke="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      className="h-16 w-16 rounded-full bg-base-300 p-2 text-base-content">
+      className="h-16 w-16 rounded-full bg-base-300 p-2 text-base-content"
+    >
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(2 1)" stroke="currentColor" stroke-width="1.5">
           <circle
@@ -18,7 +15,8 @@ function Spinner() {
             cy="11.462"
             r="5"
             fill-opacity="1"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -33,7 +31,8 @@ function Spinner() {
             cy="27.063"
             r="5"
             fill-opacity="0"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -48,7 +47,8 @@ function Spinner() {
             cy="42.663"
             r="5"
             fill-opacity="0"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -63,7 +63,8 @@ function Spinner() {
             cy="49.125"
             r="5"
             fill-opacity="0"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -78,7 +79,8 @@ function Spinner() {
             cy="42.663"
             r="5"
             fill-opacity="0"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -93,7 +95,8 @@ function Spinner() {
             cy="27.063"
             r="5"
             fill-opacity="0"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <animate
               attributeName="fill-opacity"
               begin="0s"
@@ -108,7 +111,8 @@ function Spinner() {
             cy="11.462"
             r="5"
             fill-opacity="0"
-            fill="currentColor">
+            fill="currentColor"
+          >
             <animate
               attributeName="fill-opacity"
               begin="0s"

renderer/components/main-content/image-view-settings.tsx

@@ -1,5 +1,5 @@
 import { translationAtom } from "@/atoms/translations-atom";
-import { lensSizeAtom, viewTypeAtom } from "@/atoms/userSettingsAtom";
+import { lensSizeAtom, viewTypeAtom } from "@/atoms/user-settings-atom";
 import { cn } from "@/lib/utils";
 import { useAtom, useAtomValue } from "jotai";
 import { WrenchIcon } from "lucide-react";
@@ -9,12 +9,10 @@ const ImageViewSettings = ({
   zoomAmount,
   setZoomAmount,
   resetImagePaths,
-  hideZoomOptions,
 }: {
   zoomAmount: string;
   setZoomAmount: (arg: any) => void;
   resetImagePaths: () => void;
-  hideZoomOptions?: boolean;
 }) => {
   const [openSidebar, setOpenSidebar] = useState(false);
   const [viewType, setViewType] = useAtom(viewTypeAtom);

renderer/components/main-content/image-viewer.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-import ImageViewSettings from "../upscayl-tab/view/ImageOptions";
 import { sanitizePath } from "@common/sanitize-path";
 
 const ImageViewer = ({

renderer/components/main-content/index.tsx

@@ -9,15 +9,15 @@ import {
   progressAtom,
   viewTypeAtom,
   rememberOutputFolderAtom,
-} from "../../atoms/userSettingsAtom";
+} from "../../atoms/user-settings-atom";
 import { useToast } from "@/components/ui/use-toast";
 import { sanitizePath } from "@common/sanitize-path";
 import getDirectoryFromPath from "@common/get-directory-from-path";
 import { FEATURE_FLAGS } from "@common/feature-flags";
 import { VALID_IMAGE_FORMATS } from "@/lib/valid-formats";
 import ProgressBar from "./progress-bar";
-import InformationCard from "../upscayl-tab/view/RightPaneInfo";
-import ImageViewSettings from "../upscayl-tab/view/ImageOptions";
+import InstructionsCard from "./instructions-card";
+import ImageViewSettings from "./image-view-settings";
 import useUpscaylVersion from "../hooks/use-upscayl-version";
 import MacTitlebarDragRegion from "./mac-titlebar-drag-region";
 import LensViewer from "./lens-view";
@@ -210,16 +210,13 @@ const MainContent = ({
 
       {/* DEFAULT PANE INFO */}
       {showInformationCard && (
-        <InformationCard version={version} batchMode={batchMode} />
+        <InstructionsCard version={version} batchMode={batchMode} />
       )}
 
       <ImageViewSettings
         zoomAmount={zoomAmount}
         setZoomAmount={setZoomAmount}
         resetImagePaths={resetImagePaths}
-        hideZoomOptions={
-          !batchMode && upscaledImagePath.length === 0 && imagePath.length > 0
-        }
       />
 
       {/* SHOW SELECTED IMAGE */}

renderer/components/main-content/instructions-card.tsx

@@ -2,7 +2,7 @@ import { translationAtom } from "@/atoms/translations-atom";
 import { useAtomValue } from "jotai";
 import React from "react";
 
-function InformationCard({ version, batchMode }) {
+function InstructionsCard({ version, batchMode }) {
   const t = useAtomValue(translationAtom);
 
   return (
@@ -26,4 +26,4 @@ function InformationCard({ version, batchMode }) {
   );
 }
 
-export default InformationCard;
+export default InstructionsCard;

renderer/components/main-content/progress-bar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import UpscaylSVGLogo from "@/components/icons/Logo";
+import UpscaylSVGLogo from "@/components/icons/upscayl-logo-svg";
 import { useAtomValue } from "jotai";
 import { translationAtom } from "@/atoms/translations-atom";
 import ELECTRON_COMMANDS from "@common/commands";

renderer/components/news-modal.tsx

@@ -1,4 +1,4 @@
-import { newsAtom, showNewsModalAtom } from "@/atoms/newsAtom";
+import { newsAtom, showNewsModalAtom } from "@/atoms/news-atom";
 import { translationAtom } from "@/atoms/translations-atom";
 import matter, { GrayMatterFile } from "gray-matter";
 import { useAtom, useAtomValue } from "jotai";

renderer/components/sidebar/index.tsx

@@ -14,7 +14,7 @@ import {
   useCustomWidthAtom,
   tileSizeAtom,
   showSidebarAtom,
-} from "../../atoms/userSettingsAtom";
+} from "../../atoms/user-settings-atom";
 import useLogger from "../hooks/use-logger";
 import {
   BatchUpscaylPayload,
@@ -22,14 +22,14 @@ import {
   ImageUpscaylPayload,
 } from "@common/types/types";
 import { useToast } from "@/components/ui/use-toast";
-import LeftPaneImageSteps from "../upscayl-tab/config/LeftPaneImageSteps";
-import SettingsTab from "../settings-tab";
-import Footer from "../Footer";
-import { NewsModal } from "../NewsModal";
-import Tabs from "../Tabs";
-import Header from "../Header";
+import UpscaylSteps from "./upscayl-tab/upscayl-steps";
+import SettingsTab from "./settings-tab";
+import Footer from "../footer";
+import { NewsModal } from "../news-modal";
+import Tabs from "../tabs";
+import Header from "../header";
 import { ChevronLeftIcon } from "lucide-react";
-import { logAtom } from "@/atoms/logAtom";
+import { logAtom } from "@/atoms/log-atom";
 import ELECTRON_COMMANDS from "@common/commands";
 import useUpscaylVersion from "../hooks/use-upscayl-version";
 import useTranslation from "../hooks/use-translation";
@@ -198,7 +198,7 @@ const Sidebar = ({
         <Tabs selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
 
         {selectedTab === 0 && (
-          <LeftPaneImageSteps
+          <UpscaylSteps
             selectImageHandler={selectImageHandler}
             selectFolderHandler={selectFolderHandler}
             handleModelChange={handleModelChange}

renderer/components/sidebar/settings-tab/index.tsx

@@ -9,12 +9,12 @@ import { DonateButton } from "./donate-button";
 import React, { useEffect, useState } from "react";
 import { themeChange } from "theme-change";
 import { useAtom, useAtomValue } from "jotai";
-import { customModelsPathAtom, scaleAtom } from "../../atoms/userSettingsAtom";
-import { modelsListAtom } from "../../atoms/modelsListAtom";
-import useLogger from "../hooks/use-logger";
+import { customModelsPathAtom, scaleAtom } from "@/atoms/user-settings-atom";
+import { modelsListAtom } from "@/atoms/models-list-atom";
+import useLogger from "@/components/hooks/use-logger";
 import { InputCompression } from "./input-compression";
 import OverwriteToggle from "./overwrite-toggle";
-import { UpscaylCloudModal } from "../UpscaylCloudModal";
+import { UpscaylCloudModal } from "@/components/upscayl-cloud-modal";
 import { ResetSettingsButton } from "./reset-settings-button";
 import { FEATURE_FLAGS } from "@common/feature-flags";
 import TurnOffNotificationsToggle from "./turn-off-notifications-toggle";

renderer/components/sidebar/settings-tab/input-custom-resolution.tsx

@@ -1,4 +1,7 @@
-import { customWidthAtom, useCustomWidthAtom } from "@/atoms/userSettingsAtom";
+import {
+  customWidthAtom,
+  useCustomWidthAtom,
+} from "@/atoms/user-settings-atom";
 import { useAtom, useAtomValue } from "jotai";
 import React from "react";
 import { translationAtom } from "@/atoms/translations-atom";

renderer/components/sidebar/settings-tab/input-tile-size.tsx

@@ -1,5 +1,5 @@
 import { translationAtom } from "@/atoms/translations-atom";
-import { tileSizeAtom } from "@/atoms/userSettingsAtom";
+import { tileSizeAtom } from "@/atoms/user-settings-atom";
 import { useAtom, useAtomValue } from "jotai";
 import React from "react";
 

renderer/components/sidebar/settings-tab/overwrite-toggle.tsx

@@ -1,5 +1,5 @@
 import { translationAtom } from "@/atoms/translations-atom";
-import { overwriteAtom } from "@/atoms/userSettingsAtom";
+import { overwriteAtom } from "@/atoms/user-settings-atom";
 import { useAtom, useAtomValue } from "jotai";
 import React, { useEffect } from "react";
 

renderer/components/sidebar/settings-tab/save-output-folder-toggle.tsx

@@ -2,7 +2,7 @@ import { translationAtom } from "@/atoms/translations-atom";
 import {
   savedOutputPathAtom,
   rememberOutputFolderAtom,
-} from "@/atoms/userSettingsAtom";
+} from "@/atoms/user-settings-atom";
 import { useAtom, useAtomValue } from "jotai";
 
 export function SaveOutputFolderToggle() {

renderer/components/sidebar/settings-tab/select-custom-models-folder.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import commands from "../../../common/commands";
+import commands from "@common/commands";
 import { useAtomValue } from "jotai";
 import { translationAtom } from "@/atoms/translations-atom";
 

renderer/components/sidebar/settings-tab/select-image-scale.tsx

@@ -1,5 +1,5 @@
 import { translationAtom } from "@/atoms/translations-atom";
-import { useCustomWidthAtom } from "@/atoms/userSettingsAtom";
+import { useCustomWidthAtom } from "@/atoms/user-settings-atom";
 import { useAtomValue } from "jotai";
 
 type ImageScaleSelectProps = {

renderer/components/sidebar/settings-tab/turn-off-notifications-toggle.tsx

@@ -1,5 +1,5 @@
 import { translationAtom } from "@/atoms/translations-atom";
-import { turnOffNotificationsAtom } from "@/atoms/userSettingsAtom";
+import { turnOffNotificationsAtom } from "@/atoms/user-settings-atom";
 import { useAtom, useAtomValue } from "jotai";
 
 const TurnOffNotificationsToggle = () => {

renderer/components/sidebar/upscayl-logo.tsx

@@ -1,4 +1,4 @@
-import UpscaylSVGLogo from "../icons/Logo";
+import UpscaylSVGLogo from "../icons/upscayl-logo-svg";
 import useTranslation from "../hooks/use-translation";
 
 const UpscaylLogo = () => {

renderer/components/sidebar/upscayl-tab/upscayl-steps.tsx

@@ -1,26 +1,24 @@
 import { useAtom, useAtomValue } from "jotai";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { themeChange } from "theme-change";
-import { TModelsList, modelsListAtom } from "../../../atoms/modelsListAtom";
+import { TModelsList, modelsListAtom } from "../../../atoms/models-list-atom";
 import useLogger from "../../hooks/use-logger";
 import {
-  noImageProcessingAtom,
   savedOutputPathAtom,
   progressAtom,
   rememberOutputFolderAtom,
   scaleAtom,
   customWidthAtom,
   useCustomWidthAtom,
-} from "../../../atoms/userSettingsAtom";
+} from "../../../atoms/user-settings-atom";
 import { FEATURE_FLAGS } from "@common/feature-flags";
-import getModelScale from "@common/check-model-scale";
 import ELECTRON_COMMANDS from "@common/commands";
 import Select from "react-select";
 import { cn } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
 import { translationAtom } from "@/atoms/translations-atom";
-import { SelectImageScale } from "@/components/settings-tab/select-image-scale";
+import { SelectImageScale } from "../settings-tab/select-image-scale";
 
 interface IProps {
   selectImageHandler: () => Promise<void>;
@@ -42,7 +40,7 @@ interface IProps {
   setGpuId: React.Dispatch<React.SetStateAction<string>>;
 }
 
-function LeftPaneImageSteps({
+function UpscaylSteps({
   selectImageHandler,
   selectFolderHandler,
   handleModelChange,
@@ -65,16 +63,12 @@ function LeftPaneImageSteps({
 
   const modelOptions = useAtomValue(modelsListAtom);
   const [scale, setScale] = useAtom(scaleAtom);
-  const noImageProcessing = useAtomValue(noImageProcessingAtom);
   const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
   const [progress, setProgress] = useAtom(progressAtom);
   const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
   const [open, setOpen] = React.useState(false);
-  const [customWidth, setCustomWidth] = useAtom(customWidthAtom);
-  const [useCustomWidth, setUseCustomWidth] = useAtom(useCustomWidthAtom);
-
-  const [targetWidth, setTargetWidth] = useState<number>(null);
-  const [targetHeight, setTargetHeight] = useState<number>(null);
+  const customWidth = useAtomValue(customWidthAtom);
+  const useCustomWidth = useAtomValue(useCustomWidthAtom);
 
   const logit = useLogger();
   const { toast } = useToast();
@@ -136,12 +130,7 @@ function LeftPaneImageSteps({
     logit("🔀 Setting model to", currentModel.value);
   }, [currentModel]);
 
-  useEffect(() => {
-    setTargetWidth(getUpscaleResolution().width);
-    setTargetHeight(getUpscaleResolution().height);
-  }, [dimensions.width, dimensions.height, doubleUpscayl, scale]);
-
-  const getUpscaleResolution = useCallback(() => {
+  const upscaylResolution = useMemo(() => {
     const newDimensions = {
       width: dimensions.width,
       height: dimensions.height,
@@ -335,7 +324,7 @@ function LeftPaneImageSteps({
             </span>
             {t("APP.SCALE_SELECTION.TO_TITLE")}
             <span className="font-bold">
-              {getUpscaleResolution().width}x{getUpscaleResolution().height}
+              {upscaylResolution.width}x{upscaylResolution.height}
             </span>
           </p>
         )}
@@ -366,4 +355,4 @@ function LeftPaneImageSteps({
   );
 }
 
-export default LeftPaneImageSteps;
+export default UpscaylSteps;

renderer/pages/index.tsx

@@ -2,19 +2,18 @@
 import { useState, useEffect } from "react";
 import ELECTRON_COMMANDS from "../../common/commands";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { modelsListAtom } from "../atoms/modelsListAtom";
+import { modelsListAtom } from "../atoms/models-list-atom";
 import {
   batchModeAtom,
   savedOutputPathAtom,
   progressAtom,
   rememberOutputFolderAtom,
-} from "../atoms/userSettingsAtom";
+} from "../atoms/user-settings-atom";
 import useLogger from "../components/hooks/use-logger";
-import { newsAtom, showNewsModalAtom } from "@/atoms/newsAtom";
-import matter from "gray-matter";
+import { newsAtom, showNewsModalAtom } from "@/atoms/news-atom";
 import { useToast } from "@/components/ui/use-toast";
 import { ToastAction } from "@/components/ui/toast";
-import UpscaylSVGLogo from "@/components/icons/Logo";
+import UpscaylSVGLogo from "@/components/icons/upscayl-logo-svg";
 import { translationAtom } from "@/atoms/translations-atom";
 import Sidebar from "@/components/sidebar";
 import MainContent from "@/components/main-content";