feat: sonner toast

cspell.config.yaml

@@ -1,4 +1,4 @@
-version: "0.2"
+version: '0.2'
 ignorePaths: []
 dictionaryDefinitions: []
 dictionaries: []
@@ -18,8 +18,9 @@ words:
   - ollama
   - risu
   - roleplay
-  - Seraphina
+  - seraphina
   - sonarjs
+  - sonner
   - sqlocal
   - virtua
   - xsai

package.json

@@ -32,6 +32,7 @@
     "react-markdown": "^9.0.3",
     "react-router-dom": "^7.1.3",
     "remark-gfm": "^4.0.0",
+    "sonner": "^1.7.3",
     "sqlocal": "^0.13.0",
     "uuid": "^11.0.5",
     "virtua": "^0.39.3"

src/components/sidebar.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@iconify/react'
 import { Avatar, Box, Flex, IconButton, ScrollArea, Tooltip } from '@radix-ui/themes'
 import { useMatch } from 'react-router-dom'
+import { toast } from 'sonner'
 import { v7 } from 'uuid'
 
 import { useCharacters, useUpdateCharacters } from '../context/characters'
@@ -39,6 +40,8 @@ export const Sidebar = () => {
           name: json.data.name,
         })
 
+      toast.success(`${json.data.name} has been created`)
+
       void updateCharacters()
     }
   }

src/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import { Icon } from '@iconify/react'
+import { Toaster as SonnerToaster } from 'sonner'
+
+import { useThemeAppearance } from '../../hooks/use-theme'
+
+type ToasterProps = React.ComponentProps<typeof SonnerToaster>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const [theme] = useThemeAppearance()
+
+  /** @see {@link https://sonner.emilkowal.ski/styling} */
+  return (
+    <SonnerToaster
+      icons={{
+        error: <Icon icon="heroicons:exclamation-circle" inline />,
+        info: <Icon icon="heroicons:information-circle" inline />,
+        success: <Icon icon="heroicons:check-circle" inline />,
+        warning: <Icon icon="heroicons:exclamation-circle" inline />,
+        // loading
+      }}
+      theme={theme}
+      toastOptions={{
+        classNames: {
+          actionButton: 'rt-reset rt-BaseButton rt-r-size-2 rt-variant-solid rt-Button',
+          cancelButton: 'rt-reset rt-BaseButton rt-r-size-2 rt-variant-soft rt-Button',
+          description: 'rt-Text rt-r-size-2 rt-r-mt-2',
+          title: 'rt-Text rt-r-size-2 rt-r-lt-start',
+          toast: 'rt-BaseDialogContent rt-AlertDialogContent rt-Flex rt-r-ai-center rt-r-gap-2 rt-r-size-2 rt-r-max-w',
+        },
+        style: { overflow: 'hidden' },
+        unstyled: true,
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/pages/_app.tsx

@@ -3,11 +3,13 @@ import { Outlet } from 'react-router-dom'
 
 import { Sidebar } from '../components/sidebar'
 import { Theme } from '../components/theme'
+import { Toaster } from '../components/ui/sonner'
 import { Context } from '../context'
 
 const App = () => (
   <Context>
     <Theme>
+      <Toaster />
       <Flex gap="2">
         <Sidebar />
         <Box height="100vh" width="100%">