refactor: remove outdated avatar and chat update documentation files; streamline project structure for improved maintainability

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

@@ -6,6 +6,7 @@
   import MessageList from "./MessageList.svelte";
   import MessageInput from "./MessageInput.svelte";
   import UserStatusBadge from "./UserStatusBadge.svelte";
+  import UserAvatar from "./UserAvatar.svelte";
   import ScheduleMessageModal from "./ScheduleMessageModal.svelte";
 
   interface Props {
@@ -19,8 +20,17 @@
   const conversas = useQuery(api.chat.listarConversas, {});
 
   const conversa = $derived(() => {
-    if (!conversas) return null;
-    return conversas.find((c: any) => c._id === conversaId);
+    console.log("🔍 [ChatWindow] Buscando conversa ID:", conversaId);
+    console.log("📋 [ChatWindow] Conversas disponíveis:", conversas?.data);
+    
+    if (!conversas?.data || !Array.isArray(conversas.data)) {
+      console.log("⚠️ [ChatWindow] conversas.data não é um array ou está vazio");
+      return null;
+    }
+    
+    const encontrada = conversas.data.find((c: any) => c._id === conversaId);
+    console.log("✅ [ChatWindow] Conversa encontrada:", encontrada);
+    return encontrada;
   });
 
   function getNomeConversa(): string {
@@ -89,11 +99,20 @@
 
     <!-- Avatar e Info -->
     <div class="relative flex-shrink-0">
-      <div
-        class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-xl"
-      >
-        {getAvatarConversa()}
-      </div>
+      {#if conversa() && conversa()?.tipo === "individual" && conversa()?.outroUsuario}
+        <UserAvatar
+          avatar={conversa()?.outroUsuario?.avatar}
+          fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl}
+          nome={conversa()?.outroUsuario?.nome || "Usuário"}
+          size="md"
+        />
+      {:else}
+        <div
+          class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-xl"
+        >
+          {getAvatarConversa()}
+        </div>
+      {/if}
       {#if getStatusConversa()}
         <div class="absolute bottom-0 right-0">
           <UserStatusBadge status={getStatusConversa()} size="sm" />
@@ -122,27 +141,28 @@
 
     <!-- Botões de ação -->
     <div class="flex items-center gap-1">
-      <!-- Botão Agendar -->
+      <!-- Botão Agendar MODERNO -->
       <button
         type="button"
-        class="btn btn-ghost btn-sm btn-circle"
+        class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
+        style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2);"
         onclick={() => (showScheduleModal = true)}
         aria-label="Agendar mensagem"
         title="Agendar mensagem"
       >
+        <div class="absolute inset-0 bg-purple-500/0 group-hover:bg-purple-500/10 transition-colors duration-300"></div>
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          fill="none"
           viewBox="0 0 24 24"
-          stroke-width="1.5"
+          fill="none"
           stroke="currentColor"
-          class="w-5 h-5"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-5 h-5 text-purple-500 relative z-10 group-hover:scale-110 transition-transform"
         >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-          />
+          <circle cx="12" cy="12" r="10"/>
+          <polyline points="12 6 12 12 16 14"/>
         </svg>
       </button>
     </div>