From 7b4dd57f1fb93a9eff57d3534cc7abeeab3289c2 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sun, 27 Jul 2025 14:23:13 +0200
Subject: [PATCH] feat: enhance Toaster component with rich colors and add
 message event handling in SocketProvider

---
 src/App.tsx                    |  2 +-
 src/contexts/SocketContext.tsx | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index f8dab89..37103fc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,7 +45,7 @@ function App() {
       <AuthProvider>
         <SocketProvider>
           <AppRoutes />
-          <Toaster />
+          <Toaster richColors />
         </SocketProvider>
       </AuthProvider>
     </ThemeProvider>
diff --git a/src/contexts/SocketContext.tsx b/src/contexts/SocketContext.tsx
index 25bcb46..9ca8c24 100644
--- a/src/contexts/SocketContext.tsx
+++ b/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])