Add toast and add shadcn theme vars

electron/commands/batch-upscayl.ts

@@ -86,7 +86,6 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
 
   setStopped(false);
   let failed = false;
-  let isAlpha = false;
 
   const onData = (data: any) => {
     if (!mainWindow) return;
@@ -95,14 +94,11 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
       COMMAND.FOLDER_UPSCAYL_PROGRESS,
       data.toString(),
     );
-    if (data.includes("Error") || data.includes("failed")) {
+    if ((data as string).includes("Error")) {
-      logit("❌ INVALID GPU OR INVALID FILES IN FOLDER - FAILED");
+      logit("❌ ", data);
       failed = true;
       upscayl.kill();
     }
-    if (data.includes("has alpha channel")) {
-      isAlpha = true;
-    }
   };
   const onError = (data: any) => {
     if (!mainWindow) return;
@@ -116,7 +112,7 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
     mainWindow &&
       mainWindow.webContents.send(
         COMMAND.UPSCAYL_ERROR,
-        "Error upscaling image. Error: " + data,
+        `Error upscaling image! ${data}`,
       );
     return;
   };

package-lock.json

@@ -1,17 +1,18 @@
 {
   "name": "upscayl",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "upscayl",
-      "version": "2.10.0",
+      "version": "2.11.0",
       "license": "AGPL-3.0",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-toast": "^1.1.5",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",
@@ -1582,6 +1583,32 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -1896,6 +1923,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -2002,6 +2063,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",

package.json

@@ -226,6 +226,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",

renderer/components/settings-tab/ResetSettings.tsx

@@ -5,13 +5,12 @@ export function ResetSettings() {
     <div className="flex flex-col items-start gap-2">
       <p className="text-sm font-medium">RESET UPSCAYL</p>
       <button
-        className="btn-primary btn"
+        className="btn btn-primary"
         onClick={async () => {
           localStorage.clear();
-          alert(
+          alert("Upscayl has been reset. Please restart the app.");
-            "Upscayl has been reset. Please close this window and open Upscayl again."
+        }}
-          );
+      >
-        }}>
         RESET UPSCAYL
       </button>
     </div>

renderer/components/ui/toast.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <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]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <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 hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

renderer/components/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

renderer/components/ui/use-toast.ts

@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

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

@@ -16,6 +16,7 @@ import getModelScale from "@common/check-model-scale";
 import COMMAND from "@common/commands";
 import Select from "react-select";
 import { cn } from "@/lib/utils";
+import { useToast } from "@/components/ui/use-toast";
 
 interface IProps {
   selectImageHandler: () => Promise<void>;
@@ -70,6 +71,7 @@ function LeftPaneImageSteps({
   const [targetHeight, setTargetHeight] = useState<number>(null);
 
   const { logit } = useLog();
+  const { toast } = useToast();
 
   const outputHandler = async () => {
     var path = await window.electron.invoke(COMMAND.SELECT_FOLDER);
@@ -320,7 +322,10 @@ function LeftPaneImageSteps({
           className="btn btn-accent"
           onClick={
             progress.length > 0 || !outputPath
-              ? () => alert("Please select an output folder first")
+              ? () =>
+                  toast({
+                    description: "Please select an output folder first",
+                  })
               : upscaylHandler
           }
         >

renderer/pages/_app.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { AppProps } from "next/app";
 import { Provider } from "jotai";
 import "react-tooltip/dist/react-tooltip.css";
+import { Toaster } from "@/components/ui/toaster";
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
@@ -12,6 +13,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
       </Head>
       <Provider>
         <Component {...pageProps} data-theme="upscayl" />
+        <Toaster />
       </Provider>
     </>
   );

renderer/pages/index.tsx

@@ -42,6 +42,8 @@ import { newsAtom, showNewsModalAtom } from "@/atoms/newsAtom";
 import matter from "gray-matter";
 import { PanelLeftCloseIcon, PanelRightCloseIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useToast } from "@/components/ui/use-toast";
+import { ToastAction } from "@/components/ui/toast";
 
 const Home = () => {
   const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
@@ -93,6 +95,7 @@ const Home = () => {
   const useCustomWidth = useAtomValue(useCustomWidthAtom);
 
   const { logit } = useLog();
+  const { toast } = useToast();
 
   const handleMouseMoveCompare = (e: React.MouseEvent) => {
     const { left, top, height, width } =
@@ -117,23 +120,40 @@ const Home = () => {
   // ELECTRON EVENT LISTENERS
   useEffect(() => {
     const handleErrors = (data: string) => {
-      if (data.includes("invalid gpu")) {
+      if (data.includes("Invalid GPU")) {
-        alert(
+        toast({
-          "Error. Please make sure you have a Vulkan compatible GPU (Most modern GPUs support Vulkan). Upscayl does not work with CPU or iGPU sadly.",
+          title: "GPU Error",
-        );
+          description: `GPU error occurred. Please read the wiki for troubleshooting! ${data})`,
+          action: (
+            <a href="https://github.com/upscayl/upscayl/wiki/" target="_blank">
+              <ToastAction altText="Open Wiki">Troubleshoot</ToastAction>
+            </a>
+          ),
+        });
         resetImagePaths();
-      } else if (data.includes("failed")) {
+      } else if (data.includes("write") || data.includes("read")) {
         if (batchMode) return;
-        alert(
+        toast({
-          data.includes("encode")
+          title: "Read/Write Error",
-            ? `ENCODING ERROR: ${data}. For troubleshooting, please read the Upscayl Wiki.`
+          description: `Make sure that the path is correct and you have proper read/write permissions (${data})`,
-            : `DECODING ERROR: ${data}. Additional Info: This image is possibly corrupt or not supported by Upscayl, or your GPU drivers are acting funny (PLEASE READ THE UPSCAYL WIKI). You could try converting the image into another format and upscaling again. Also make sure that the output path is correct and you have the proper write permissions for the directory. If not, then unfortunately there's not much we can do to help, sorry.`,
+          action: (
-        );
+            <a href="https://github.com/upscayl/upscayl/wiki/" target="_blank">
+              <ToastAction altText="Open Wiki">Troubleshoot</ToastAction>
+            </a>
+          ),
+        });
+        resetImagePaths();
+      } else if (data.includes("tile size")) {
+        toast({
+          title: "Error",
+          description: `The tile size is wrong. Please change the tile size in the settings or set to 0 (${data})`,
+        });
         resetImagePaths();
       } else if (data.includes("uncaughtException")) {
-        alert(
+        toast({
-          "Upscayl encountered an error. Possibly, the upscayl binary failed to execute the commands properly. Try checking the logs to see if you get any information. You can post an issue on Upscayl's GitHub repository for more help.",
+          title: "Exception Error",
-        );
+          description: `Upscayl encountered an error. Possibly, the upscayl binary failed to execute the commands properly. Try checking the logs to see if you get any information. You can post an issue on Upscayl's GitHub repository for more help.`,
+        });
         resetImagePaths();
       }
     };
@@ -148,7 +168,7 @@ const Home = () => {
     );
     // LOG
     window.electron.on(COMMAND.LOG, (_, data: string) => {
-      logit(`🐞 BACKEND REPORTED: `, data);
+      logit(`𝌖 BACKEND REPORTED: `, data);
     });
     // SCALING AND CONVERTING
     window.electron.on(COMMAND.SCALING_AND_CONVERTING, (_, data: string) => {
@@ -156,7 +176,10 @@ const Home = () => {
     });
     // UPSCAYL ERROR
     window.electron.on(COMMAND.UPSCAYL_ERROR, (_, data: string) => {
-      alert(data);
+      toast({
+        title: "Error",
+        description: data,
+      });
       resetImagePaths();
     });
     // UPSCAYL PROGRESS
@@ -312,7 +335,11 @@ const Home = () => {
       const extension = path.toLocaleLowerCase().split(".").pop();
       logit("🔤 Extension: ", extension);
       if (!allowedFileTypes.includes(extension.toLowerCase())) {
-        alert("Please select an image");
+        toast({
+          title: "Invalid Image",
+          description:
+            "Please select an image with a valid extension like PNG, JPG, JPEG, or WEBP.",
+        });
         resetImagePaths();
       }
     } else {
@@ -397,7 +424,10 @@ const Home = () => {
       e.dataTransfer.files.length === 0
     ) {
       logit("👎 No valid files dropped");
-      alert("Please drag and drop an image");
+      toast({
+        title: "Invalid Image",
+        description: "Please drag and drop an image",
+      });
       return;
     }
     const type = e.dataTransfer.items[0].type;
@@ -409,7 +439,10 @@ const Home = () => {
       !allowedFileTypes.includes(extension.toLowerCase())
     ) {
       logit("🚫 Invalid file dropped");
-      alert("Please drag and drop an image");
+      toast({
+        title: "Invalid Image",
+        description: "Please drag and drop an image",
+      });
     } else {
       logit("🖼 Setting image path: ", filePath);
       setImagePath(filePath);
@@ -435,7 +468,10 @@ const Home = () => {
       !type.includes("image") &&
       !allowedFileTypes.includes(extension.toLowerCase())
     ) {
-      alert("Please drag and drop an image");
+      toast({
+        title: "Invalid Image",
+        description: "Please drag and drop an image",
+      });
     } else {
       setImagePath(filePath);
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
@@ -501,7 +537,10 @@ const Home = () => {
         logit("🏁 UPSCAYL");
       }
     } else {
-      alert(`Please select an image to upscale`);
+      toast({
+        title: "No image selected",
+        description: "Please select an image to upscale",
+      });
       logit("🚫 No valid image selected");
     }
   };

renderer/styles/globals.css

@@ -239,11 +239,11 @@
 }
 
 /* SHADCN CHANGES */
-/* @tailwind base;
+@tailwind base;
-  @tailwind components;
+@tailwind components;
-  @tailwind utilities;
+@tailwind utilities;
 
-  @layer base {
+@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
@@ -305,13 +305,13 @@
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
-  }
+}
 
-  @layer base {
+@layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-  } */
+}