feat(ToastProvider): migrate to 'sonner' for stacked, animated toasts (#1032)

* feat(ToastProvider): migrate to 'sonner' for animated, accessible toasts

* feat(ToastProvider): restrict swipe to right only to match previous behavior

Author: sukvvon

package.json

@@ -43,7 +43,6 @@
     "@octokit/graphql": "^9.0.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
@@ -110,6 +109,7 @@
     "react-instantsearch": "^7.29.0",
     "remove-markdown": "^0.6.3",
     "resend": "^6.10.0",
+    "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
     "tailwind-merge": "^3.5.0",
     "tar-stream": "^3.1.8",

pnpm-lock.yaml

@@ -1,16 +1,11 @@
 import * as React from 'react'
-import * as Toast from '@radix-ui/react-toast'
+import { Toaster, toast } from 'sonner'
+import { useTheme } from '~/components/ThemeProvider'
 
 type ToastOptions = {
   durationMs?: number
 }
 
-type ToastItem = {
-  id: string
-  content: React.ReactNode
-  durationMs: number
-}
-
 type ToastContextValue = {
   notify: (content: React.ReactNode, options?: ToastOptions) => string
 }
@@ -30,46 +25,39 @@ export function ToastProvider({
 }: {
   children: React.ReactNode
 }): React.ReactElement {
-  const [toasts, setToasts] = React.useState<ToastItem[]>([])
+  const { resolvedTheme } = useTheme()
 
   const notify = React.useCallback(
     (content: React.ReactNode, options?: ToastOptions) => {
-      const id = Math.random().toString(36).slice(2)
-      const durationMs = options?.durationMs ?? 2500
-      setToasts((prev) => [...prev, { id, content, durationMs }])
-      return id
+      const id = toast(content, { duration: options?.durationMs ?? 2500 })
+      return String(id)
     },
     [],
   )
 
-  const removeToast = React.useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
-
   const contextValue = React.useMemo<ToastContextValue>(
     () => ({ notify }),
     [notify],
   )
 
   return (
     <ToastContext.Provider value={contextValue}>
-      <Toast.Provider swipeDirection="right">
-        {children}
-        {toasts.map((t) => (
-          <Toast.Root
-            key={t.id}
-            defaultOpen
-            duration={t.durationMs}
-            onOpenChange={(open) => {
-              if (!open) removeToast(t.id)
-            }}
-            className="relative z-[60] rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 shadow-lg outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50"
-          >
-            <div className="flex items-start gap-2">{t.content}</div>
-          </Toast.Root>
-        ))}
-        <Toast.Viewport className="fixed bottom-4 right-4 z-[60] flex max-h-screen w-96 flex-col gap-2 p-0 outline-none" />
-      </Toast.Provider>
+      {children}
+      <Toaster
+        theme={resolvedTheme}
+        position="bottom-right"
+        swipeDirections={['right']}
+        offset={16}
+        gap={8}
+        toastOptions={{
+          unstyled: true,
+          classNames: {
+            toast:
+              'relative w-96 rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 shadow-lg outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50',
+            content: 'flex items-start gap-2',
+          },
+        }}
+      />
     </ToastContext.Provider>
   )
 }