Add toast and add shadcn theme vars

2024-11-27 17:00:52 +01:00 · 2024-04-21 19:34:59 +05:30 · 2024-04-21 19:34:59 +05:30 · c2a10ca0d4
commit c2a10ca0d4
parent ecbb48acdc
11 changed files with 577 additions and 99 deletions
--- a/electron/commands/batch-upscayl.ts
+++ b/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")) {
-      logit("❌ INVALID GPU OR INVALID FILES IN FOLDER - FAILED");
+    if ((data as string).includes("Error")) {
+      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;
  };
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/renderer/components/settings-tab/ResetSettings.tsx
+++ b/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(
-            "Upscayl has been reset. Please close this window and open Upscayl again."
-          );
-        }}>
+          alert("Upscayl has been reset. Please restart the app.");
+        }}
+      >
        RESET UPSCAYL
      </button>
    </div>
--- a/renderer/components/ui/toast.tsx
+++ b/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,
+}
--- a/renderer/components/ui/toaster.tsx
+++ b/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>
+  )
+}
--- a/renderer/components/ui/use-toast.ts
+++ b/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 }
--- a/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx
+++ b/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
          }
        >
--- a/renderer/pages/_app.tsx
+++ b/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>
    </>
  );
--- a/renderer/pages/index.tsx
+++ b/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")) {
-        alert(
-          "Error. Please make sure you have a Vulkan compatible GPU (Most modern GPUs support Vulkan). Upscayl does not work with CPU or iGPU sadly.",
-        );
+      if (data.includes("Invalid GPU")) {
+        toast({
+          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(
-          data.includes("encode")
-            ? `ENCODING ERROR: ${data}. For troubleshooting, please read the Upscayl Wiki.`
-            : `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.`,
-        );
+        toast({
+          title: "Read/Write Error",
+          description: `Make sure that the path is correct and you have proper read/write permissions (${data})`,
+          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(
-          "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.",
-        );
+        toast({
+          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");
    }
  };
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@ -239,79 +239,79 @@
 }

 /* SHADCN CHANGES */
-/* @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 84% 4.9%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;

-      --card: 0 0% 100%;
-      --card-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;

-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;

-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;

-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;

-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;

-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;

-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;

-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-      --ring: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;

-      --radius: 0.5rem;
-    }
-
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
-
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
-
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
-
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
-
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
-
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
-
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
-
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
-
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
+    --radius: 0.5rem;
  }

-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  } */
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}