fix: update dependencies and improve chat component structure

- Updated `lucide-svelte` dependency to version 0.552.0 across multiple files for consistency.
- Refactored chat components to enhance structure and readability, including adjustments to the Sidebar, ChatList, and MessageInput components.
- Improved notification handling in chat components to ensure better user experience and responsiveness.
- Added type safety enhancements in various components to ensure better integration with backend data models.

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

@@ -4,6 +4,7 @@
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import UserAvatar from "./UserAvatar.svelte";
   import UserStatusBadge from "./UserStatusBadge.svelte";
+  import { X, Users, UserPlus, ArrowUp, ArrowDown, Trash2, Search } from "lucide-svelte";
 
   interface Props {
     conversaId: Id<"conversas">;
@@ -151,19 +152,15 @@
   }
 </script>
 
-<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={(e) => {
-  if (e.target === e.currentTarget) {
-    onClose();
-  }
-}}>
-  <div
-    class="bg-base-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col m-4"
-    onclick={(e) => e.stopPropagation()}
-  >
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+  <div class="modal-box max-w-2xl max-h-[80vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
     <!-- Header -->
     <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
       <div>
-        <h2 class="text-xl font-semibold">Gerenciar Sala de Reunião</h2>
+        <h2 class="text-xl font-semibold flex items-center gap-2">
+          <Users class="w-5 h-5 text-primary" />
+          Gerenciar Sala de Reunião
+        </h2>
         <p class="text-sm text-base-content/60">{conversa()?.nome || "Sem nome"}</p>
       </div>
       <button
@@ -172,16 +169,7 @@
         onclick={onClose}
         aria-label="Fechar"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-5 h-5"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-        </svg>
+        <X class="w-5 h-5" />
       </button>
     </div>
 
@@ -190,16 +178,18 @@
       <div class="tabs tabs-boxed p-4">
         <button
           type="button"
-          class={`tab ${activeTab === "participantes" ? "tab-active" : ""}`}
+          class={`tab flex items-center gap-2 ${activeTab === "participantes" ? "tab-active" : ""}`}
           onclick={() => (activeTab = "participantes")}
         >
+          <Users class="w-4 h-4" />
           Participantes
         </button>
         <button
           type="button"
-          class={`tab ${activeTab === "adicionar" ? "tab-active" : ""}`}
+          class={`tab flex items-center gap-2 ${activeTab === "adicionar" ? "tab-active" : ""}`}
           onclick={() => (activeTab = "adicionar")}
         >
+          <UserPlus class="w-4 h-4" />
           Adicionar Participante
         </button>
       </div>
@@ -209,7 +199,9 @@
     {#if error}
       <div class="mx-6 mt-2 alert alert-error">
         <span>{error}</span>
-        <button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>✕</button>
+        <button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>
+          <X class="w-4 h-4" />
+        </button>
       </div>
     {/if}
 
@@ -269,7 +261,7 @@
                         {#if isLoading && loading?.includes("rebaixar")}
                           <span class="loading loading-spinner loading-xs"></span>
                         {:else}
-                          ⬇️
+                          <ArrowDown class="w-4 h-4" />
                         {/if}
                       </button>
                     {:else}
@@ -283,7 +275,7 @@
                         {#if isLoading && loading?.includes("promover")}
                           <span class="loading loading-spinner loading-xs"></span>
                         {:else}
-                          ⬆️
+                          <ArrowUp class="w-4 h-4" />
                         {/if}
                       </button>
                     {/if}
@@ -297,7 +289,7 @@
                       {#if isLoading && loading?.includes("remover")}
                         <span class="loading loading-spinner loading-xs"></span>
                       {:else}
-                        ✕
+                        <Trash2 class="w-4 h-4" />
                       {/if}
                     </button>
                   </div>
@@ -312,13 +304,14 @@
         </div>
       {:else if activeTab === "adicionar" && isAdmin}
         <!-- Adicionar Participante -->
-        <div class="mb-4">
+        <div class="mb-4 relative">
           <input
             type="text"
             placeholder="Buscar usuários..."
-            class="input input-bordered w-full"
+            class="input input-bordered w-full pl-10"
             bind:value={searchQuery}
           />
+          <Search class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40" />
         </div>
 
         <div class="space-y-2">
@@ -356,7 +349,7 @@
                 {#if isLoading}
                   <span class="loading loading-spinner loading-sm"></span>
                 {:else}
-                  <span class="text-primary">+</span>
+                  <UserPlus class="w-5 h-5 text-primary" />
                 {/if}
               </button>
             {/each}
@@ -376,5 +369,8 @@
       </button>
     </div>
   </div>
-</div>
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" onclick={onClose}>fechar</button>
+  </form>
+</dialog>