fix: actualizar dropdown de mensajes en tiempo real al recibir nuevo mensaje

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

resources/views/layouts/_partials/header.blade.php

@@ -112,7 +112,8 @@
 
                     @forelse($headerUnreadConversations as $msg)
                         <a class="dropdown-item d-flex align-items-center"
-                           href="{{ route('chat.show', $msg->sender) }}">
+                           href="{{ route('chat.show', $msg->sender) }}"
+                           data-sender-id="{{ $msg->sender->id }}">
                             <div class="dropdown-list-image mr-3">
                                 <img class="rounded-circle" width="40" height="40"
                                      style="object-fit:cover"
@@ -191,9 +192,41 @@ function waitForEcho(cb) {
 waitForEcho(() => {
     const authId = {{ auth()->id() }};
 
-    // Badge de mensajes
+    // Badge + dropdown de mensajes
     window.Echo.channel(`chat.${authId}`)
-        .listen('MessageSent', () => updateBadge('msg-badge', 1));
+        .listen('MessageSent', (e) => {
+            updateBadge('msg-badge', 1);
+
+            const list = document.querySelector('#messagesDropdown + .dropdown-list');
+            if (!list) return;
+
+            // Quitar el "sin mensajes nuevos" si existe
+            const empty = list.querySelector('.text-muted.py-3');
+            if (empty) empty.remove();
+
+            // Quitar entrada previa del mismo remitente si ya estaba
+            const existing = list.querySelector(`[data-sender-id="${e.sender.id}"]`);
+            if (existing) existing.remove();
+
+            // Insertar nueva entrada al tope (después del header)
+            const preview = e.body ? e.body : '📎 Archivo adjunto';
+            const item = document.createElement('a');
+            item.className = 'dropdown-item d-flex align-items-center';
+            item.href = `/chat/${e.sender.id}`;
+            item.dataset.senderId = e.sender.id;
+            item.innerHTML = `
+                <div class="dropdown-list-image mr-3">
+                    <img class="rounded-circle" width="40" height="40"
+                         style="object-fit:cover"
+                         src="${e.sender.avatar}" alt="">
+                    <div class="status-indicator bg-success"></div>
+                </div>
+                <div class="font-weight-bold overflow-hidden">
+                    <div class="text-truncate">${preview}</div>
+                    <div class="small text-gray-500">${e.sender.name} · ahora</div>
+                </div>`;
+            list.querySelector('.dropdown-header').insertAdjacentElement('afterend', item);
+        });
 
     // Badge de notificaciones
     window.Echo.channel(`notifications.${authId}`)