prettier

frontend/components/ui/sonner.tsx

@@ -1,60 +1,65 @@
-"use client"
+'use client';
 
-import {useEffect, useRef} from "react"
-import {CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon,} from "lucide-react"
-import {useTheme} from "next-themes"
-import {Toaster as Sonner, type ToasterProps, useSonner} from "sonner"
-import {useBellRing} from "@/contexts/bell-ring-context"
+import { useEffect, useRef } from 'react';
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, type ToasterProps, useSonner } from 'sonner';
+import { useBellRing } from '@/contexts/bell-ring-context';
 
 /**
  * Toast 观察器组件
  * 监听 toast 事件并触发铃铛响铃动画
  */
 function ToastObserver() {
-  const { toasts } = useSonner()
-  const { triggerRing } = useBellRing()
-  const prevToastCountRef = useRef(0)
+  const { toasts } = useSonner();
+  const { triggerRing } = useBellRing();
+  const prevToastCountRef = useRef(0);
 
   useEffect(() => {
     // 当 toast 数量增加时触发响铃
     if (toasts.length > prevToastCountRef.current) {
-      triggerRing()
+      triggerRing();
     }
-    prevToastCountRef.current = toasts.length
-  }, [toasts.length, triggerRing])
+    prevToastCountRef.current = toasts.length;
+  }, [toasts.length, triggerRing]);
 
-  return null
+  return null;
 }
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = 'system' } = useTheme();
 
   return (
     <>
       <ToastObserver />
       <Sonner
-        theme={theme as ToasterProps["theme"]}
-        className="toaster group"
+        theme={theme as ToasterProps['theme']}
+        className='toaster group'
         icons={{
-          success: <CircleCheckIcon className="size-4" />,
-          info: <InfoIcon className="size-4" />,
-          warning: <TriangleAlertIcon className="size-4" />,
-          error: <OctagonXIcon className="size-4" />,
-          loading: <Loader2Icon className="size-4 animate-spin" />,
+          success: <CircleCheckIcon className='size-4' />,
+          info: <InfoIcon className='size-4' />,
+          warning: <TriangleAlertIcon className='size-4' />,
+          error: <OctagonXIcon className='size-4' />,
+          loading: <Loader2Icon className='size-4 animate-spin' />,
         }}
         style={
           {
-            "--normal-bg": "var(--popover)",
-            "--normal-text": "var(--popover-foreground)",
-            "--normal-border": "var(--border)",
-            "--border-radius": "var(--radius)",
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+            '--border-radius': 'var(--radius)',
           } as React.CSSProperties
         }
         {...props}
       />
     </>
-  )
-}
-
-export { Toaster }
+  );
+};
 
+export { Toaster };