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

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

@@ -7,31 +7,57 @@
   let { status = "offline", size = "md" }: Props = $props();
 
   const sizeClasses = {
-    sm: "w-2 h-2",
-    md: "w-3 h-3",
-    lg: "w-4 h-4",
+    sm: "w-3 h-3",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
   };
 
   const statusConfig = {
     online: {
       color: "bg-success",
-      label: "Online",
+      borderColor: "border-success",
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
+        <circle cx="12" cy="12" r="10" fill="#10b981"/>
+        <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>`,
+      label: "🟢 Online",
     },
     offline: {
       color: "bg-base-300",
-      label: "Offline",
+      borderColor: "border-base-300",
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
+        <circle cx="12" cy="12" r="10" fill="#9ca3af"/>
+        <path d="M8 8l8 8M16 8l-8 8" stroke="white" stroke-width="2" stroke-linecap="round"/>
+      </svg>`,
+      label: "⚫ Offline",
     },
     ausente: {
       color: "bg-warning",
-      label: "Ausente",
+      borderColor: "border-warning",
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
+        <circle cx="12" cy="12" r="10" fill="#f59e0b"/>
+        <circle cx="12" cy="6" r="1.5" fill="white"/>
+        <path d="M12 10v4" stroke="white" stroke-width="2" stroke-linecap="round"/>
+      </svg>`,
+      label: "🟡 Ausente",
     },
     externo: {
       color: "bg-info",
-      label: "Externo",
+      borderColor: "border-info",
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
+        <circle cx="12" cy="12" r="10" fill="#3b82f6"/>
+        <path d="M8 12h8M12 8v8" stroke="white" stroke-width="2" stroke-linecap="round"/>
+      </svg>`,
+      label: "🔵 Externo",
     },
     em_reuniao: {
       color: "bg-error",
-      label: "Em Reunião",
+      borderColor: "border-error",
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
+        <circle cx="12" cy="12" r="10" fill="#ef4444"/>
+        <rect x="8" y="8" width="8" height="8" fill="white" rx="1"/>
+      </svg>`,
+      label: "🔴 Em Reunião",
     },
   };
 
@@ -39,8 +65,11 @@
 </script>
 
 <div
-  class={`${sizeClasses[size]} ${config.color} rounded-full`}
+  class={`${sizeClasses[size]} rounded-full relative flex items-center justify-center`}
+  style="box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 2px solid white;"
   title={config.label}
   aria-label={config.label}
-></div>
+>
+  {@html config.icon}
+</div>