Merge remote-tracking branch 'origin/t/v3' into t/v3

renderer/components/error-fallback.tsx

@@ -4,15 +4,15 @@ import { FallbackProps } from "react-error-boundary";
 
 function ErrorFallback({ error }: FallbackProps) {
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center overflow-hidden bg-base-300">
+    <div className="bg-base-300 flex h-screen w-screen flex-col items-center justify-center overflow-hidden">
       <div className="flex flex-col items-center justify-center gap-2">
         <SkullIcon className="h-10 w-10" />
-        <p className="max-w-lg text-balance text-center text-lg font-semibold">
+        <p className="max-w-lg text-center text-lg font-semibold text-balance">
           {error?.message
-            ? `An error "${error.message}" occurred on server.`
+            ? `An error "${error.message}" occurred in the app.`
             : "An error occurred in the app."}{" "}
         </p>
-        <p className="mb-2 max-w-sm text-balance text-center">
+        <p className="mb-2 max-w-sm text-center text-balance">
           Please check the console for more information by pressing F12 or
           Ctrl/⌘+Option+I.
         </p>

renderer/components/main-content/slider-view.tsx

@@ -35,33 +35,37 @@ const SliderView = ({
             src={"file:///" + sanitizedImagePath}
             alt={t("APP.SLIDER.ORIGINAL_TITLE")}
             onMouseMove={handleMouseMove}
-            style={{
-              objectFit: "contain",
-              backgroundPosition: "0% 0%",
-              transformOrigin: backgroundPosition,
-            }}
-            className={`h-full w-full bg-linear-to-br from-base-300 to-base-100 transition-transform group-hover:scale-[${zoomAmount}%]`}
+            style={
+              {
+                objectFit: "contain",
+                backgroundPosition: "0% 0%",
+                transformOrigin: backgroundPosition,
+                "--zoom-amount": zoomAmount,
+              } as React.CSSProperties
+            }
+            className="from-base-300 to-base-100 h-full w-full bg-gradient-to-br transition-transform group-hover:scale-[var(--zoom-amount)]"
           />
         </>
       }
       itemTwo={
         <>
-          <p className="absolute bottom-1 right-1 rounded-md bg-black p-1 text-sm font-medium text-white opacity-30">
+          <p className="absolute right-1 bottom-1 rounded-md bg-black p-1 text-sm font-medium text-white opacity-30">
             {t("APP.SLIDER.UPSCAYLED_TITLE")}
           </p>
           <img
             /* USE REGEX TO GET THE FILENAME AND ENCODE IT INTO PROPER FORM IN ORDER TO AVOID ERRORS DUE TO SPECIAL CHARACTERS */
             src={"file:///" + sanitizedUpscaledImagePath}
             alt={t("APP.SLIDER.UPSCAYLED_TITLE")}
-            style={{
-              objectFit: "contain",
-              backgroundPosition: "0% 0%",
-              transformOrigin: backgroundPosition,
-            }}
+            style={
+              {
+                objectFit: "contain",
+                backgroundPosition: "0% 0%",
+                transformOrigin: backgroundPosition,
+                "--zoom-amount": zoomAmount,
+              } as React.CSSProperties
+            }
             onMouseMove={handleMouseMove}
-            className={`h-full w-full bg-linear-to-br from-base-300 to-base-100 transition-transform group-hover:scale-[${
-              zoomAmount || "100%"
-            }%]`}
+            className="from-base-300 to-base-100 h-full w-full bg-gradient-to-br transition-transform group-hover:scale-[var(--zoom-amount)]"
           />
         </>
       }

renderer/components/sidebar/upscayl-tab/select-model-dialog.tsx

@@ -57,7 +57,7 @@ const SelectModelDialog = () => {
           <DialogHeader>
             <DialogTitle>{t("APP.MODEL_SELECTION.DESCRIPTION")}</DialogTitle>
           </DialogHeader>
-          <ScrollArea className="max-h-150 pr-4">
+          <ScrollArea className="max-h-[150] pr-4">
             <div className="flex flex-col gap-4">
               {Object.entries(MODELS).map((modelData) => {
                 const modelId = modelData[0] as ModelId;

renderer/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
       className,
     )}
     {...props}
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
+      "ring-offset-background group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:ring-ring group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "text-foreground/50 hover:text-foreground absolute top-2 right-2 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-2 focus:outline-none group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className,
     )}
     toast-close=""

renderer/main.tsx

@@ -17,7 +17,7 @@ createRoot(document.getElementById("root")!).render(
           <App />
           <Toaster />
           <Tooltip
-            className="bg-secondary! z-999 max-w-sm wrap-break-word"
+            className="bg-secondary! z-[999] max-w-sm wrap-break-word"
             id="tooltip"
           />
         </PostHogProviderWrapper>