feat: mise en place de la messagerie [#17]

Front-End/src/components/ProfileSelector.js

@@ -3,6 +3,7 @@ import { LogOut } from 'lucide-react';
 import { disconnect } from '@/app/actions/authAction';
 import { getGravatarUrl } from '@/utils/gravatar';
 import { useEstablishment } from '@/context/EstablishmentContext';
+import { useChatConnection } from '@/context/ChatConnectionContext';
 import DropdownMenu from '@/components/DropdownMenu';
 import { usePopup } from '@/context/PopupContext';
 import { getRightStr } from '@/utils/rights';
@@ -20,6 +21,7 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
     setSelectedEstablishmentEvaluationFrequency,
     setSelectedEstablishmentTotalCapacity,
   } = useEstablishment();
+  const { isConnected, connectionStatus } = useChatConnection();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const { showPopup } = usePopup();
 
@@ -60,6 +62,36 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
     (est) => est.role_id === selectedRoleId
   );
 
+  // Fonction pour obtenir la couleur de la bulle de statut
+  const getStatusColor = () => {
+    switch (connectionStatus) {
+      case 'connected':
+        return 'bg-green-500';
+      case 'connecting':
+        return 'bg-yellow-500';
+      case 'error':
+        return 'bg-red-500';
+      case 'disconnected':
+      default:
+        return 'bg-gray-400';
+    }
+  };
+
+  // Fonction pour obtenir le titre de la bulle de statut
+  const getStatusTitle = () => {
+    switch (connectionStatus) {
+      case 'connected':
+        return 'Chat connecté';
+      case 'connecting':
+        return 'Connexion au chat...';
+      case 'error':
+        return 'Erreur de connexion au chat';
+      case 'disconnected':
+      default:
+        return 'Chat déconnecté';
+    }
+  };
+
   // Suppression du tronquage JS, on utilise uniquement CSS
   const isSingleRole = establishments && establishments.length === 1;
 
@@ -68,13 +100,20 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
       <DropdownMenu
         buttonContent={
           <div className="h-16 flex items-center gap-2 cursor-pointer px-4 bg-white">
-            <Image
-              src={getGravatarUrl(user?.email)}
-              alt="Profile"
-              className="w-8 h-8 rounded-full mr-2"
-              width={32}
-              height={32}
-            />
+            <div className="relative">
+              <Image
+                src={getGravatarUrl(user?.email)}
+                alt="Profile"
+                className="w-10 h-10 rounded-full object-cover shadow-md"
+                width={32}
+                height={32}
+              />
+              {/* Bulle de statut de connexion au chat */}
+              <div
+                className={`absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5  rounded-full border-2 border-white ${getStatusColor()}`}
+                title={getStatusTitle()}
+              />
+            </div>
             <div className="flex-1 min-w-0">
               <div
                 className="font-bold text-left truncate max-w-full"