diff --git a/renderer/atoms/logAtom.ts b/renderer/atoms/log-atom.ts similarity index 100% rename from renderer/atoms/logAtom.ts rename to renderer/atoms/log-atom.ts diff --git a/renderer/atoms/modelsListAtom.ts b/renderer/atoms/models-list-atom.ts similarity index 100% rename from renderer/atoms/modelsListAtom.ts rename to renderer/atoms/models-list-atom.ts diff --git a/renderer/atoms/newsAtom.ts b/renderer/atoms/news-atom.ts similarity index 100% rename from renderer/atoms/newsAtom.ts rename to renderer/atoms/news-atom.ts diff --git a/renderer/atoms/userSettingsAtom.ts b/renderer/atoms/user-settings-atom.ts similarity index 100% rename from renderer/atoms/userSettingsAtom.ts rename to renderer/atoms/user-settings-atom.ts diff --git a/renderer/components/Footer.tsx b/renderer/components/Footer.tsx index 3f03a9e..664456e 100644 --- a/renderer/components/Footer.tsx +++ b/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"; diff --git a/renderer/components/Header.tsx b/renderer/components/Header.tsx index b90daa0..1a9b82d 100644 --- a/renderer/components/Header.tsx +++ b/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"; diff --git a/renderer/components/hooks/use-logger.tsx b/renderer/components/hooks/use-logger.ts similarity index 88% rename from renderer/components/hooks/use-logger.tsx rename to renderer/components/hooks/use-logger.ts index 8148665..0b5d7ca 100644 --- a/renderer/components/hooks/use-logger.tsx +++ b/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"; diff --git a/renderer/components/icons/SidebarClosed.tsx b/renderer/components/icons/sidebar-closed-svg.tsx similarity index 100% rename from renderer/components/icons/SidebarClosed.tsx rename to renderer/components/icons/sidebar-closed-svg.tsx diff --git a/renderer/components/icons/SidebarOpened.tsx b/renderer/components/icons/sidebar-opened-svg.tsx similarity index 100% rename from renderer/components/icons/SidebarOpened.tsx rename to renderer/components/icons/sidebar-opened-svg.tsx diff --git a/renderer/components/icons/Spinner.tsx b/renderer/components/icons/spinner-svg.tsx similarity index 91% rename from renderer/components/icons/Spinner.tsx rename to renderer/components/icons/spinner-svg.tsx index 7e71d5d..e6490ec 100644 --- a/renderer/components/icons/Spinner.tsx +++ b/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" + > + fill="currentColor" + > + fill="currentColor" + > + fill="currentColor" + > + fill="currentColor" + > + fill="currentColor" + > + fill="currentColor" + > + fill="currentColor" + > void; resetImagePaths: () => void; - hideZoomOptions?: boolean; }) => { const [openSidebar, setOpenSidebar] = useState(false); const [viewType, setViewType] = useAtom(viewTypeAtom); diff --git a/renderer/components/main-content/image-viewer.tsx b/renderer/components/main-content/image-viewer.tsx index d912f1c..63154b2 100644 --- a/renderer/components/main-content/image-viewer.tsx +++ b/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 = ({ diff --git a/renderer/components/main-content/index.tsx b/renderer/components/main-content/index.tsx index 28bfa05..62859b4 100644 --- a/renderer/components/main-content/index.tsx +++ b/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 && ( - + )} 0 - } /> {/* SHOW SELECTED IMAGE */} diff --git a/renderer/components/upscayl-tab/view/RightPaneInfo.tsx b/renderer/components/main-content/instructions-card.tsx similarity index 91% rename from renderer/components/upscayl-tab/view/RightPaneInfo.tsx rename to renderer/components/main-content/instructions-card.tsx index d40189d..0283035 100644 --- a/renderer/components/upscayl-tab/view/RightPaneInfo.tsx +++ b/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; diff --git a/renderer/components/main-content/progress-bar.tsx b/renderer/components/main-content/progress-bar.tsx index 95a3bad..6d354f8 100644 --- a/renderer/components/main-content/progress-bar.tsx +++ b/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"; diff --git a/renderer/components/upscayl-tab/view/ResetButton.tsx b/renderer/components/main-content/reset-button.tsx similarity index 100% rename from renderer/components/upscayl-tab/view/ResetButton.tsx rename to renderer/components/main-content/reset-button.tsx diff --git a/renderer/components/NewsModal.tsx b/renderer/components/news-modal.tsx similarity index 97% rename from renderer/components/NewsModal.tsx rename to renderer/components/news-modal.tsx index 7c8b12f..51efc7f 100644 --- a/renderer/components/NewsModal.tsx +++ b/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"; diff --git a/renderer/components/sidebar/index.tsx b/renderer/components/sidebar/index.tsx index 01b8107..3ac82d2 100644 --- a/renderer/components/sidebar/index.tsx +++ b/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 = ({ {selectedTab === 0 && ( - { diff --git a/renderer/components/sidebar/upscayl-logo.tsx b/renderer/components/sidebar/upscayl-logo.tsx index 5c242b2..35ba71a 100644 --- a/renderer/components/sidebar/upscayl-logo.tsx +++ b/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 = () => { diff --git a/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx b/renderer/components/sidebar/upscayl-tab/upscayl-steps.tsx similarity index 91% rename from renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx rename to renderer/components/sidebar/upscayl-tab/upscayl-steps.tsx index 19da97c..77d4287 100644 --- a/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx +++ b/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; @@ -42,7 +40,7 @@ interface IProps { setGpuId: React.Dispatch>; } -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(null); - const [targetHeight, setTargetHeight] = useState(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({ {t("APP.SCALE_SELECTION.TO_TITLE")} - {getUpscaleResolution().width}x{getUpscaleResolution().height} + {upscaylResolution.width}x{upscaylResolution.height}

)} @@ -366,4 +355,4 @@ function LeftPaneImageSteps({ ); } -export default LeftPaneImageSteps; +export default UpscaylSteps; diff --git a/renderer/components/UpscaylCloudModal.tsx b/renderer/components/upscayl-cloud-modal.tsx similarity index 100% rename from renderer/components/UpscaylCloudModal.tsx rename to renderer/components/upscayl-cloud-modal.tsx diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx index 187d524..df055dc 100644 --- a/renderer/pages/index.tsx +++ b/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";