(refactor): switched to sonner from normal toast

package-lock.json

@@ -27,10 +27,12 @@
         "clsx": "^2.1.1",
         "dotenv": "^16.4.5",
         "lucide-react": "^0.436.0",
+        "next-themes": "^0.4.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.54.2",
         "react-router-dom": "^7.1.3",
+        "sonner": "^2.0.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.24.1"
@@ -3346,6 +3348,16 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz",
+      "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -3953,6 +3965,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.1.tgz",
+      "integrity": "sha512-FRBphaehZ5tLdLcQ8g2WOIRE+Y7BCfWi5Zyd8bCvBjiW8TxxAyoWZIxS661Yz6TGPqFQ4VLzOF89WEYhfynSFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -29,10 +29,12 @@
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
     "lucide-react": "^0.436.0",
+    "next-themes": "^0.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.1.3",
+    "sonner": "^2.0.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.1"

src/App.tsx

@@ -6,7 +6,7 @@ import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Config, WebSocketMessage } from "@/types";
 import { sendStreamInfo } from "@/lib/utils";
-import { Toaster } from "@/components/ui/toaster";
+import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { check as checkAppUpdate } from "@tauri-apps/plugin-updater";
 import { isPermissionGranted, requestPermission, sendNotification } from "@tauri-apps/plugin-notification";

src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/pages/home.tsx

@@ -9,12 +9,11 @@ import { compareVersions, extractVersion, isInstalled, registerMacFiles } from "
 import { CircleCheck, TriangleAlert, CircleAlert, Settings, RefreshCcw, Loader2, PackagePlus, Bell } from "lucide-react";
 import { getPlatformInfo } from "@/lib/platform-utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { useToast } from "@/hooks/use-toast";
+import { toast } from "sonner"
 import { NotificationBadge } from "@/components/ui/notification-badge";
 import { check as checkAppUpdate } from "@tauri-apps/plugin-updater";
 
 export default function HomePage() {
-    const { toast } = useToast();
     const [isLoading, setIsLoading] = useState(true);
     const [isWindows, setIsWindows] = useState<boolean>(false)
     const [windowsVersion, setWindowsVersion] = useState<string | null>(null)
@@ -263,7 +262,7 @@ export default function HomePage() {
                         <TooltipTrigger>
                             <Button className="ml-3" size="icon" onClick={async () => {
                                 const result = await registerMacFiles();
-                                toast({ title: result.message, variant: result.success ? 'default' : 'destructive' });
+                                toast(result.message);
                             }}>
                                 <PackagePlus className="w-5 h-5"/>
                             </Button>

src/pages/settings.tsx

@@ -10,7 +10,7 @@ import { Input } from "@/components/ui/input";
 import { Config, PlatformInfo } from "@/types";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useToast } from "@/hooks/use-toast";
+import { toast } from "sonner"
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getPlatformInfo } from "@/lib/platform-utils";
@@ -25,7 +25,6 @@ const settingsFormSchema = z.object({
 })
 
 export default function SettingsPage() {
-    const { toast } = useToast();
     const { setTheme } = useTheme();
     const [platformInfo, setPlatformInfo] = useState<PlatformInfo | null>(null);
     const [appConfig, setAppConfig] = useState<Config | null>(null);
@@ -87,15 +86,10 @@ export default function SettingsPage() {
             });
             setAppConfig(updatedConfig);
             setIsFormDirty(false);
-            toast({
+            toast("Settings updated");
-                title: "Settings updated"
-            });
         } catch (error) {
             console.error("Failed to update config:", error);
-            toast({
+            toast("Failed to update settings");
-                title: "Failed to update settings",
-                variant: "destructive"
-            });
         }
     }
 
@@ -105,15 +99,10 @@ export default function SettingsPage() {
             setAppConfig(config);
             settingsForm.reset({ port: config.port, theme: config.theme });
             setIsFormDirty(false);
-            toast({
+            toast("Settings reset to default");
-                title: "Using default settings"
-            });
         } catch (error) {
             console.error("Failed to reset config:", error);
-            toast({
+            toast("Failed to reset settings");
-                title: "Failed to reset settings",
-                variant: "destructive"
-            });
         }
     }