feat: enhance push notification management and error handling

- Implemented error handling for unhandled promise rejections related to message channels, improving stability during push notification operations.
- Updated the PushNotificationManager component to manage push subscription registration with timeouts, preventing application hangs.
- Enhanced the sidebar and chat components to display user avatars, improving user experience and visual consistency.
- Refactored email processing logic to support scheduled email sending, integrating new backend functionalities for better email management.
- Improved overall error handling and logging across components to reduce console spam and enhance debugging capabilities.

apps/web/src/lib/components/chat/ChatWidget.svelte

@@ -12,6 +12,8 @@
   import { api } from "@sgse-app/backend/convex/_generated/api";
   import ChatList from "./ChatList.svelte";
   import ChatWindow from "./ChatWindow.svelte";
+  import { authStore } from "$lib/stores/auth.svelte";
+  import { getAvatarUrl } from "$lib/utils/avatarGenerator";
 
   const count = useQuery(api.chat.contarNotificacoesNaoLidas, {});
 
@@ -19,6 +21,22 @@
   let isMinimized = $state(false);
   let activeConversation = $state<string | null>(null);
 
+  // Função para obter a URL do avatar/foto do usuário logado
+  const avatarUrlDoUsuario = $derived(() => {
+    const usuario = authStore.usuario;
+    if (!usuario) return null;
+    
+    // Prioridade: fotoPerfilUrl > avatar > fallback com nome
+    if (usuario.fotoPerfilUrl) {
+      return usuario.fotoPerfilUrl;
+    }
+    if (usuario.avatar) {
+      return getAvatarUrl(usuario.avatar);
+    }
+    // Fallback: gerar avatar baseado no nome
+    return getAvatarUrl(usuario.nome);
+  });
+
   // Posição do widget (arrastável)
   let position = $state({ x: 0, y: 0 });
   let isDragging = $state(false);
@@ -259,25 +277,34 @@
       <!-- Efeitos de fundo animados -->
       <div class="absolute inset-0 opacity-30" style="background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 50%);"></div>
       <div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
-      <!-- Título com ícone moderno 3D -->
+      <!-- Título com avatar/foto do usuário logado -->
       <h2 class="text-xl font-bold flex items-center gap-3 relative z-10">
-        <!-- Ícone de chat com efeito glassmorphism -->
-        <div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.2) inset;">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="w-5 h-5"
-            style="filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));"
-          >
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-            <line x1="9" y1="10" x2="15" y2="10"/>
-            <line x1="9" y1="14" x2="13" y2="14"/>
-          </svg>
+        <!-- Avatar/Foto do usuário logado com efeito glassmorphism -->
+        <div class="relative flex items-center justify-center w-10 h-10 rounded-xl overflow-hidden" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.2) inset;">
+          {#if avatarUrlDoUsuario()}
+            <img
+              src={avatarUrlDoUsuario()}
+              alt={authStore.usuario?.nome || "Usuário"}
+              class="w-full h-full object-cover"
+            />
+          {:else}
+            <!-- Fallback: ícone de chat genérico -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="w-5 h-5"
+              style="filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));"
+            >
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              <line x1="9" y1="10" x2="15" y2="10"/>
+              <line x1="9" y1="14" x2="13" y2="14"/>
+            </svg>
+          {/if}
         </div>
         <span class="tracking-wide font-extrabold" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3); letter-spacing: 0.02em;">Mensagens</span>
       </h2>