Improve toasts and font loading

Made-with: Cursor

components/ui/sonner.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon, XIcon } from "lucide-react"
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const theme = "light"
@@ -10,7 +10,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
       theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      className="toaster group toast-close-tr"
+      closeButton
+      closeButtonAriaLabel="关闭通知"
       icons={{
         success: (
           <CircleCheckIcon className="size-4" />
@@ -27,6 +29,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
         loading: (
           <Loader2Icon className="size-4 animate-spin" />
         ),
+        close: <XIcon className="size-3.5" aria-hidden />,
       }}
       style={
         {