feat: enhance Toaster component with rich colors and add message event handling in SocketProvider

src/App.tsx

@@ -45,7 +45,7 @@ function App() {
       <AuthProvider>
         <SocketProvider>
           <AppRoutes />
-          <Toaster />
+          <Toaster richColors />
         </SocketProvider>
       </AuthProvider>
     </ThemeProvider>

src/contexts/SocketContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
 import { io, Socket } from 'socket.io-client'
+import { toast } from 'sonner'
 import { useAuth } from './AuthContext'
 import { authEvents, AUTH_EVENTS } from '../lib/events'
 
@@ -50,6 +51,19 @@ export function SocketProvider({ children }: SocketProviderProps) {
       setIsReconnecting(false)
     })
 
+    // Listen for message events
+    newSocket.on('user_message', (data) => {
+      toast.info(`Message from ${data.from_user_name}`, {
+        description: data.message,
+      })
+    })
+
+    newSocket.on('broadcast_message', (data) => {
+      toast.warning(`Broadcast from ${data.from_user_name}`, {
+        description: data.message,
+      })
+    })
+
     return newSocket
   }, [user])