feat: enhance ErrorModal and chat components with new features and improvements

- Refactored ErrorModal to utilize a dialog element for better accessibility and user experience, including a close button with an icon.
- Updated chat components to improve participant display and message read status, enhancing user engagement and clarity.
- Introduced loading indicators for user and conversation data in SalaReuniaoManager to improve responsiveness during data fetching.
- Enhanced message handling in MessageList to indicate whether messages have been read, providing users with better feedback on message status.
- Improved overall structure and styling across various components for consistency and maintainability.

apps/web/src/lib/components/ErrorModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AlertCircle } from "lucide-svelte";
+  import { AlertCircle, X } from "lucide-svelte";
   
   interface Props {
     open: boolean;
@@ -16,28 +16,67 @@
     details,
     onClose,
   }: Props = $props();
+
+  let modalRef: HTMLDialogElement;
+
+  function handleClose() {
+    open = false;
+    onClose();
+  }
+
+  $effect(() => {
+    if (open && modalRef) {
+      modalRef.showModal();
+    } else if (!open && modalRef) {
+      modalRef.close();
+    }
+  });
 </script>
 
 {#if open}
-  <div class="modal modal-open">
-    <div class="modal-box">
-      <h3 class="font-bold text-lg text-error mb-4 flex items-center gap-2">
-        <AlertCircle class="h-6 w-6" strokeWidth={2} />
-        {title}
-      </h3>
-      <p class="py-4 text-base-content">{message}</p>
-      {#if details}
-        <div class="bg-base-200 rounded-lg p-3 mb-4">
-          <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
-        </div>
-      {/if}
-      <div class="modal-action">
-        <button class="btn btn-primary" onclick={() => { open = false; onClose(); }}>
+  <dialog 
+    bind:this={modalRef} 
+    class="modal" 
+    onclick={(e) => e.target === e.currentTarget && handleClose()}
+  >
+    <div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
+          <AlertCircle class="w-5 h-5" strokeWidth={2} />
+          {title}
+        </h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-circle"
+          onclick={handleClose}
+          aria-label="Fechar"
+        >
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="px-6 py-6">
+        <p class="text-base-content mb-4">{message}</p>
+        {#if details}
+          <div class="bg-base-200 rounded-lg p-4 mb-4">
+            <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Footer -->
+      <div class="modal-action px-6 pb-6">
+        <button class="btn btn-primary" onclick={handleClose}>
           Fechar
         </button>
       </div>
     </div>
-    <div class="modal-backdrop" onclick={() => { open = false; onClose(); }}></div>
-  </div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button type="button" onclick={handleClose}>fechar</button>
+    </form>
+  </dialog>
 {/if}