feat(ui): sonner toast implementation

app/(auth)/forgot-password/page.tsx

@@ -17,29 +17,23 @@ import { Terminal } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useServerAction } from "zsa-react";
 import { LoaderButton } from "@/components/loader-button";
-import { useToast } from "@/components/ui/use-toast";
 import { resetPasswordAction } from "./actions";
 import Balancer from "react-wrap-balancer";
 import Link from "next/link";
 import { Icons } from "@/components/icons";
 import { SparkleBg } from "@/components/sparkle-bg";
+import { toast } from "sonner";
 
 const registrationSchema = z.object({
   email: z.string().email(),
 });
 
 export default function ForgotPasswordPage() {
-  const { toast } = useToast();
-
   const { execute, isPending, isSuccess } = useServerAction(
     resetPasswordAction,
     {
       onError({ err }) {
-        toast({
-          title: "Something went wrong",
-          description: err.message,
-          variant: "destructive",
-        });
+        toast.error(err.message);
       },
     },
   );

app/(auth)/signin/page.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import { z } from "zod";
-
-import { buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
@@ -14,10 +12,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { cn } from "@/lib/utils";
 import { useServerAction } from "zsa-react";
 import Link from "next/link";
-import { useToast } from "@/components/ui/use-toast";
 import { signInAction } from "./actions";
 import { LoaderButton } from "@/components/loader-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -27,28 +23,20 @@ import { Separator } from "@/components/ui/separator";
 import Balancer from "react-wrap-balancer";
 import { SparkleBg } from "@/components/sparkle-bg";
 import { OAuthButton } from "@/components/oauth-button";
+import { toast } from "sonner";
 
 const registrationSchema = z.object({
   email: z.string().email(),
   password: z.string().min(8),
 });
 
 export default function SignInPage() {
-  const { toast } = useToast();
-
   const { execute, isPending, error, reset } = useServerAction(signInAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
     onSuccess() {
-      toast({
-        title: "Let's Go!",
-        description: "Enjoy your session",
-      });
+      toast.success("You're in! Enjoy your session");
     },
   });
 

app/(auth)/signup/page.tsx

@@ -16,7 +16,6 @@ import {
 import { useServerAction } from "zsa-react";
 import { signUpAction } from "./actions";
 import { LoaderButton } from "@/components/loader-button";
-import { useToast } from "@/components/ui/use-toast";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Terminal } from "lucide-react";
 import { Icons } from "@/components/icons";
@@ -25,6 +24,7 @@ import Link from "next/link";
 import Balancer from "react-wrap-balancer";
 import { SparkleBg } from "@/components/sparkle-bg";
 import { OAuthButton } from "@/components/oauth-button";
+import { toast } from "sonner";
 
 const registrationSchema = z
   .object({
@@ -38,15 +38,12 @@ const registrationSchema = z
   });
 
 export default function RegisterPage() {
-  const { toast } = useToast();
-
   const { execute, isPending, error } = useServerAction(signUpAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
+    },
+    onSuccess() {
+      toast.success("You're in! Enjoy your session");
     },
   });
 

app/bookmarks/components/bookmark-list.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useToast } from "@/components/ui/use-toast";
 import { Card, CardContent, CardDescription } from "@/components/ui/card";
 import Balancer from "react-wrap-balancer";
 import { deleteBookmarkAction } from "../bookmark";
@@ -29,6 +28,7 @@ import { BookmarksSearchBox } from "./bookmarks-search-box";
 import { BookmarksDisplayMenu } from "./bookmarks-display";
 import { BookmarkButton } from "./bookmark-button";
 import Image from "next/image";
+import { toast } from "sonner";
 
 export type Layout = "grid" | "rows";
 export type OrderBy = "date" | "readTime" | "title";
@@ -56,8 +56,6 @@ export default function BookmarksList({
   bookmarks: Bookmark[];
   userId: number;
 }) {
-  const { toast } = useToast();
-
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -203,19 +201,13 @@ export default function BookmarksList({
                             });
 
                             if (error) {
-                              toast({
-                                title: "Error",
-                                description: "Failed to delete bookmark",
-                                variant: "destructive",
-                              });
+                              toast.error("Failed to delete bookmark");
                               return;
                             }
 
-                            toast({
-                              title: "Bookmark deleted",
-                              description:
-                                "Bookmark has been successfully deleted",
-                            });
+                            toast.success(
+                              "Bookmark has been successfully deleted",
+                            );
                           }}
                         >
                           Continue

app/bookmarks/components/bookmarks-display.tsx

@@ -17,7 +17,7 @@ import {
 import { cn } from "@/lib/utils";
 import { Dispatch, SetStateAction, useState } from "react";
 import { Layout, OrderBy } from "./bookmark-list";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 
 export function BookmarksDisplayMenu({
   layout,
@@ -32,20 +32,15 @@ export function BookmarksDisplayMenu({
 }) {
   const [open, setOpen] = useState(false);
   const [openPopover, setOpenPopover] = useState(false);
-  const { toast } = useToast();
 
   const handleSetDefault = () => {
-    toast({
-      description: "Your current display settings have been set as default.",
-    });
+    toast.info("Your current display settings have been set as default.");
   };
 
   const handleResetToDefaults = () => {
     setLayout("grid");
     setOrderBy("date");
-    toast({
-      description: "Display settings have been reset to defaults.",
-    });
+    toast.info("Display settings have been reset to defaults.");
   };
 
   return (

app/bookmarks/components/create-bookmark-form.tsx

@@ -9,7 +9,7 @@ import {
   getUrlWithoutPaywall,
   validateMediumArticle,
 } from "@/app/article/actions/url";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { z } from "zod";
 import {
   Form,
@@ -32,16 +32,11 @@ const bookmarkSchema = z.object({
 });
 
 export function CreateBookmarkForm() {
-  const { toast } = useToast();
   const { user } = useAuth();
 
   const { execute } = useServerAction(createBookmarkAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
   });
 
@@ -79,20 +74,15 @@ export function CreateBookmarkForm() {
   async function onSubmit(values: z.infer<typeof bookmarkSchema>) {
     values.url = values.url.trim();
 
-    toast({
-      title: `Creating reating bookmark...`,
-    });
+    toast.loading("Creating bookmark...");
 
     const isValidMedium = await validateMediumArticle(values.url);
     if (!isValidMedium) {
       form.setError("url", {
         type: "manual",
         message: "The URL is not a valid Medium article.",
       });
-      toast({
-        description: "This URL is not a valid Medium article.",
-        variant: "destructive",
-      });
+      toast.error("This URL is not a valid Medium article.");
       return;
     }
 
@@ -102,22 +92,16 @@ export function CreateBookmarkForm() {
         type: "manual",
         message: "Failed to get article content",
       });
-      toast({
-        description: "Failed to get article content.",
-        variant: "destructive",
-      });
+      toast.error("Failed to get article content.");
       return;
     }
 
     if (!user) {
-      toast({
-        description: "You need to sign in to create a bookmark.",
-        variant: "destructive",
-      });
       form.setError("url", {
         type: "manual",
         message: "You need to sign in to create a bookmark.",
       });
+      toast.error("You need to sign in to create a bookmark.");
       return;
     }
 
@@ -139,9 +123,7 @@ export function CreateBookmarkForm() {
 
     execute(bookmarkContent);
 
-    toast({
-      description: "Bookmark has been successfully created.",
-    });
+    toast.success("Bookmark has been successfully created.");
   }
 
   return (

app/history/history-list.tsx

@@ -19,7 +19,7 @@ import {
   deleteAllReadingHistoryAction,
   deleteReadingHistoryByIdAction,
 } from "./history";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { useServerAction } from "zsa-react";
 import { LoaderButton } from "@/components/loader-button";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
@@ -43,7 +43,6 @@ export type ReadingHistory = {
 
 export function HistoryList({ historyLog }: { historyLog: ReadingHistory[] }) {
   const id = uuidv4();
-  const { toast } = useToast();
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -71,16 +70,10 @@ export function HistoryList({ historyLog }: { historyLog: ReadingHistory[] }) {
     reset: deleteByIdReset,
   } = useServerAction(deleteReadingHistoryByIdAction, {
     onError({ err }) {
-      toast({
-        title: "Something went wrong",
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
     onSuccess() {
-      toast({
-        description: "Successfully deleted reading history log",
-      });
+      toast.success("Successfully deleted reading history log");
     },
   });
 
@@ -91,15 +84,10 @@ export function HistoryList({ historyLog }: { historyLog: ReadingHistory[] }) {
     reset: deleteAllLogsReset,
   } = useServerAction(deleteAllReadingHistoryAction, {
     onError({ err }) {
-      toast({
-        description: err.message,
-        variant: "destructive",
-      });
+      toast.error(err.message);
     },
     onSuccess() {
-      toast({
-        description: "Successfully deleted reading history logs",
-      });
+      toast.success("Successfully deleted all reading history logs");
     },
   });
 

app/layout.tsx

@@ -3,10 +3,11 @@ import { cn } from "@/lib/utils";
 import { fontHeading, fontMono, fontSans } from "@/lib/fonts";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import { Toaster } from "@/components/ui/toaster";
+// import { Toaster } from "@/components/ui/toaster";
 import { siteConfig } from "@/app-config";
 import Script from "next/script";
 import type { Viewport } from "next";
+import { Toaster } from "@/components/ui/sonner";
 
 export const viewport: Viewport = {
   themeColor: [
@@ -96,7 +97,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           {children}
-          <Toaster />
+          <Toaster richColors />
         </ThemeProvider>
         <Script
           async