feat: add sonner for notifications and update theme handling in Toaster component

src/App.tsx

@@ -6,17 +6,19 @@ import { SocketProvider } from '@/contexts/SocketContext'
 import { AccountPage } from '@/pages/AccountPage'
 import { ActivityPage } from '@/pages/ActivityPage'
 import { AdminUsersPage } from '@/pages/AdminUsersPage'
-import AdminSoundsPage from '@/pages/AdminSoundsPage'
+import { AdminSoundsPage } from '@/pages/AdminSoundsPage'
 import { DashboardPage } from '@/pages/DashboardPage'
 import { LoginPage } from '@/pages/LoginPage'
 import { RegisterPage } from '@/pages/RegisterPage'
-import SoundboardPage from '@/pages/SoundboardPage'
+import { SoundboardPage } from '@/pages/SoundboardPage'
 import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router'
 import { ThemeProvider } from './components/ThemeProvider'
+import { Toaster } from 'sonner'
 
 function App() {
   return (
     <ThemeProvider defaultTheme="dark" storageKey="theme">
+      <Toaster />
       <AuthProvider>
         <SocketProvider>
           <Router>

src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/pages/AdminSoundsPage.tsx

@@ -46,7 +46,7 @@ interface NormalizationStats {
   size_difference: number;
 }
 
-export default function AdminSoundsPage() {
+export function AdminSoundsPage() {
   const [sounds, setSounds] = useState<Sound[]>([]);
   const [scanStats, setScanStats] = useState<ScanStats | null>(null);
   const [normalizationStats, setNormalizationStats] = useState<NormalizationStats | null>(null);

src/pages/SoundboardPage.tsx

@@ -68,7 +68,7 @@ const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, isPlaying }) => {
   );
 };
 
-export default function SoundboardPage() {
+export function SoundboardPage() {
   const [sounds, setSounds] = useState<Sound[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);