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>