refactor: enhance chat components and improve user interaction

- Refactored Sidebar, ChatList, ChatWindow, and NewConversationModal components for better readability and maintainability.
- Updated user data handling to utilize the latest API responses, ensuring accurate display of user statuses and notifications.
- Improved modal interactions and user feedback mechanisms across chat components.
- Cleaned up unused code and optimized state management for a smoother user experience.

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

@@ -1,27 +1,18 @@
 <script lang="ts">
-  import { page } from "$app/state";
-  import { goto } from "$app/navigation";
-  import logo from "$lib/assets/logo_governo_PE.png";
-  import type { Snippet } from "svelte";
-  import { loginModalStore } from "$lib/stores/loginModal.svelte";
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import NotificationBell from "$lib/components/chat/NotificationBell.svelte";
-  import ChatWidget from "$lib/components/chat/ChatWidget.svelte";
-  import PresenceManager from "$lib/components/chat/PresenceManager.svelte";
-  import { getAvatarUrl } from "$lib/utils/avatarGenerator";
-  import {
-    Menu,
-    User,
-    Home,
-    UserPlus,
-    XCircle,
-    LogIn,
-    Tag,
-    Plus,
-    Check,
-  } from "lucide-svelte";
-  import { authClient } from "$lib/auth";
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import logo from '$lib/assets/logo_governo_PE.png';
+	import type { Snippet } from 'svelte';
+	import { loginModalStore } from '$lib/stores/loginModal.svelte';
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import NotificationBell from '$lib/components/chat/NotificationBell.svelte';
+	import ChatWidget from '$lib/components/chat/ChatWidget.svelte';
+	import PresenceManager from '$lib/components/chat/PresenceManager.svelte';
+	import { getAvatarUrl } from '$lib/utils/avatarGenerator';
+	import { Menu, User, Home, UserPlus, XCircle, LogIn, Tag, Plus, Check } from 'lucide-svelte';
+	import { authClient } from '$lib/auth';
+	import { resolve } from '$app/paths';
 
 	let { children }: { children: Snippet } = $props();
 
@@ -45,7 +36,7 @@
 	// Função para gerar classes do menu ativo
 	function getMenuClasses(isActive: boolean) {
 		const baseClasses =
-      "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
+			'group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105';
 
 		if (isActive) {
 			return `${baseClasses} border-primary bg-primary text-white shadow-lg scale-105`;
@@ -57,7 +48,7 @@
 	// Função para gerar classes do botão "Solicitar Acesso"
 	function getSolicitarClasses(isActive: boolean) {
 		const baseClasses =
-      "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
+			'group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105';
 
 		if (isActive) {
 			return `${baseClasses} border-success bg-success text-white shadow-lg scale-105`;
@@ -67,49 +58,49 @@
 	}
 
 	const setores = [
-    { nome: "Recursos Humanos", link: "/recursos-humanos" },
-    { nome: "Financeiro", link: "/financeiro" },
-    { nome: "Controladoria", link: "/controladoria" },
-    { nome: "Licitações", link: "/licitacoes" },
-    { nome: "Compras", link: "/compras" },
-    { nome: "Jurídico", link: "/juridico" },
-    { nome: "Comunicação", link: "/comunicacao" },
-    { nome: "Programas Esportivos", link: "/programas-esportivos" },
-    { nome: "Secretaria Executiva", link: "/secretaria-executiva" },
+		{ nome: 'Recursos Humanos', link: '/recursos-humanos' as const },
+		{ nome: 'Financeiro', link: '/financeiro' as const },
+		{ nome: 'Controladoria', link: '/controladoria' as const },
+		{ nome: 'Licitações', link: '/licitacoes' as const },
+		{ nome: 'Compras', link: '/compras' as const },
+		{ nome: 'Jurídico', link: '/juridico' as const },
+		{ nome: 'Comunicação', link: '/comunicacao' as const },
+		{ nome: 'Programas Esportivos', link: '/programas-esportivos' as const },
+		{ nome: 'Secretaria Executiva', link: '/secretaria-executiva' as const },
 		{
-      nome: "Secretaria de Gestão de Pessoas",
-      link: "/gestao-pessoas",
+			nome: 'Secretaria de Gestão de Pessoas',
+			link: '/gestao-pessoas' as const
 		},
-    { nome: "Tecnologia da Informação", link: "/ti" },
+		{ nome: 'Tecnologia da Informação', link: '/ti' as const }
 	];
 
 	let showAboutModal = $state(false);
-  let matricula = $state("");
-  let senha = $state("");
-  let erroLogin = $state("");
+	let matricula = $state('');
+	let senha = $state('');
+	let erroLogin = $state('');
 	let carregandoLogin = $state(false);
 
 	// Sincronizar com o store global
 	$effect(() => {
 		if (loginModalStore.showModal && !matricula && !senha) {
-      matricula = "";
-      senha = "";
-      erroLogin = "";
+			matricula = '';
+			senha = '';
+			erroLogin = '';
 		}
 	});
 
 	function openLoginModal() {
 		loginModalStore.open();
-    matricula = "";
-    senha = "";
-    erroLogin = "";
+		matricula = '';
+		senha = '';
+		erroLogin = '';
 	}
 
 	function closeLoginModal() {
 		loginModalStore.close();
-    matricula = "";
-    senha = "";
-    erroLogin = "";
+		matricula = '';
+		senha = '';
+		erroLogin = '';
 	}
 
 	function openAboutModal() {
@@ -122,7 +113,7 @@
 
 	async function handleLogin(e: Event) {
 		e.preventDefault();
-    erroLogin = "";
+		erroLogin = '';
 		carregandoLogin = true;
 
 		// const browserInfo = await getBrowserInfo();
@@ -132,115 +123,110 @@
 			{
 				onError: (ctx) => {
 					alert(ctx.error.message);
-        },
-      },
+				}
+			}
 		);
 
 		if (result.data) {
 			closeLoginModal();
-      goto("/");
+			goto(resolve('/'));
 		} else {
-      erroLogin = "Erro ao fazer login";
+			erroLogin = 'Erro ao fazer login';
 		}
+		carregandoLogin = false;
 	}
 
 	async function handleLogout() {
 		const result = await authClient.signOut();
 		if (result.error) {
-      console.error("Sign out error:", result.error);
+			console.error('Sign out error:', result.error);
 		}
-    goto("/");
+		goto(resolve('/'));
 	}
 </script>
 
 <!-- Header Fixo acima de tudo -->
 <div
-  class="navbar bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm shadow-lg border-b border-primary/10 px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24"
+	class="navbar from-primary/30 via-primary/20 to-primary/30 border-primary/10 fixed top-0 right-0 left-0 z-50 min-h-24 border-b bg-linear-to-r px-6 shadow-lg backdrop-blur-sm lg:px-8"
 >
 	<div class="flex-none lg:hidden">
 		<label
 			for="my-drawer-3"
-      class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden cursor-pointer group transition-all duration-300 hover:scale-105"
+			class="group relative flex h-14 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
 			style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
 			aria-label="Abrir menu"
 		>
 			<!-- Efeito de brilho no hover -->
 			<div
-        class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+				class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
 			></div>
 
 			<!-- Ícone de menu hambúrguer -->
 			<Menu
-        class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
+				class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
 				style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
 				strokeWidth={2.5}
 			/>
 		</label>
 	</div>
-  <div class="flex-1 flex items-center gap-4 lg:gap-6">
+	<div class="flex flex-1 items-center gap-4 lg:gap-6">
 		<!-- Logo MODERNO do Governo -->
 		<div class="avatar">
 			<div
-        class="w-16 lg:w-20 rounded-2xl shadow-xl p-2 relative overflow-hidden group transition-all duration-300 hover:scale-105"
+				class="group relative w-16 overflow-hidden rounded-2xl p-2 shadow-xl transition-all duration-300 hover:scale-105 lg:w-20"
 				style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
 			>
 				<!-- Efeito de brilho no hover -->
 				<div
-          class="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+					class="from-primary/5 absolute inset-0 bg-linear-to-br to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
 				></div>
 
 				<!-- Logo -->
 				<img
 					src={logo}
 					alt="Logo do Governo de PE"
-          class="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-105"
+					class="relative z-10 h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
 					style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));"
 				/>
 
 				<!-- Brilho sutil no canto -->
 				<div
-          class="absolute top-0 right-0 w-8 h-8 bg-linear-to-br from-white/40 to-transparent rounded-bl-full opacity-70"
+					class="absolute top-0 right-0 h-8 w-8 rounded-bl-full bg-linear-to-br from-white/40 to-transparent opacity-70"
 				></div>
 			</div>
 		</div>
 		<div class="flex flex-col">
-      <h1 class="text-xl lg:text-3xl font-bold text-primary tracking-tight">
-        SGSE
-      </h1>
+			<h1 class="text-primary text-xl font-bold tracking-tight lg:text-3xl">SGSE</h1>
 			<p
-        class="text-xs lg:text-base text-base-content/80 hidden sm:block font-medium leading-tight"
+				class="text-base-content/80 hidden text-xs leading-tight font-medium sm:block lg:text-base"
 			>
 				Sistema de Gerenciamento da<br class="lg:hidden" /> Secretaria de Esportes
 			</p>
 		</div>
 	</div>
-  <div class="flex-none flex items-center gap-4 ml-auto">
+	<div class="ml-auto flex flex-none items-center gap-4">
 		{#if currentUser.data}
 			<!-- Sino de notificações no canto superior direito -->
 			<div class="relative">
 				<NotificationBell />
 			</div>
 
-      <div class="hidden lg:flex flex-col items-end mr-2">
-        <span class="text-sm font-semibold text-primary"
-          >{currentUser.data.nome}</span
-        >
-        <span class="text-xs text-base-content/60"
-          >{currentUser.data.role?.nome}</span
-        >
+			<div class="mr-2 hidden flex-col items-end lg:flex">
+				<span class="text-primary text-sm font-semibold">{currentUser.data.nome}</span>
+				<span class="text-base-content/60 text-xs">{currentUser.data.role?.nome}</span>
 			</div>
 			<div class="dropdown dropdown-end">
 				<!-- Botão de Perfil ULTRA MODERNO -->
 				<button
 					type="button"
 					tabindex="0"
-          class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
+					class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
 					style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
 					aria-label="Menu do usuário"
 				>
 					<!-- Efeito de brilho no hover -->
 					<div
-            class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+						class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
 					></div>
 
 					<!-- Anel de pulso sutil -->
@@ -253,62 +239,58 @@
 					{#if avatarUrlDoUsuario()}
 						<img
 							src={avatarUrlDoUsuario()}
-              alt={currentUser.data?.nome || "Usuário"}
-              class="w-full h-full object-cover relative z-10"
+							alt={currentUser.data?.nome || 'Usuário'}
+							class="relative z-10 h-full w-full object-cover"
 						/>
 					{:else}
 						<!-- Ícone de usuário moderno (fallback) -->
 						<User
-              class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
+							class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
 							style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
 						/>
 					{/if}
 
 					<!-- Badge de status online -->
 					<div
-            class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg z-20"
+						class="bg-success absolute top-1 right-1 z-20 h-3 w-3 rounded-full border-2 border-white shadow-lg"
 						style="animation: pulse-dot 2s ease-in-out infinite;"
 					></div>
 				</button>
 				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 				<ul
 					tabindex="0"
-          class="dropdown-content z-1 menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4 border border-primary/20"
+					class="dropdown-content menu bg-base-100 rounded-box border-primary/20 z-1 mt-4 w-52 border p-2 shadow-xl"
 				>
 					<li class="menu-title">
 						<span class="text-primary font-bold">{currentUser.data?.nome}</span>
 					</li>
-          <li><a href="/perfil">Meu Perfil</a></li>
-          <li><a href="/alterar-senha">Alterar Senha</a></li>
+					<li><a href={resolve('/perfil')}>Meu Perfil</a></li>
+					<li><a href={resolve('/alterar-senha')}>Alterar Senha</a></li>
 					<div class="divider my-0"></div>
 					<li>
-            <button type="button" onclick={handleLogout} class="text-error"
-              >Sair</button
-            >
+						<button type="button" onclick={handleLogout} class="text-error">Sair</button>
 					</li>
 				</ul>
 			</div>
 		{:else}
 			<button
 				type="button"
-        class="btn btn-lg shadow-2xl hover:shadow-primary/30 transition-all duration-500 hover:scale-110 group relative overflow-hidden border-0 bg-linear-to-br from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70"
+				class="btn btn-lg hover:shadow-primary/30 group from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70 relative overflow-hidden border-0 bg-linear-to-br shadow-2xl transition-all duration-500 hover:scale-110"
 				style="width: 4rem; height: 4rem; border-radius: 9999px;"
 				onclick={() => openLoginModal()}
 				aria-label="Login"
 			>
 				<!-- Efeito de brilho animado -->
 				<div
-          class="absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"
+					class="absolute inset-0 -translate-x-full bg-linear-to-r from-transparent via-white/30 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
 				></div>
 
 				<!-- Anel pulsante de fundo -->
-        <div
-          class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"
-        ></div>
+				<div class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"></div>
 
 				<!-- Ícone de login premium -->
 				<User
-          class="h-8 w-8 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
+					class="relative z-10 h-8 w-8 text-white transition-all duration-500 group-hover:scale-110"
 					style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
 					strokeWidth={2.5}
 				/>
@@ -319,10 +301,7 @@
 
 <div class="drawer lg:drawer-open" style="margin-top: 96px;">
 	<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
-  <div
-    class="drawer-content flex flex-col lg:ml-72"
-    style="min-height: calc(100vh - 96px);"
-  >
+	<div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 96px);">
 		<!-- Page content -->
 		<div class="flex-1 overflow-y-auto">
 			{@render children?.()}
@@ -330,7 +309,7 @@
 
 		<!-- Footer -->
 		<footer
-      class="footer footer-center bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner shrink-0"
+			class="footer footer-center from-primary/30 via-primary/20 to-primary/30 text-base-content border-primary/20 shrink-0 border-t-2 bg-linear-to-r p-6 shadow-inner backdrop-blur-sm"
 		>
 			<div class="grid grid-flow-col gap-6 text-sm font-medium">
 				<button
@@ -339,69 +318,63 @@
 					onclick={() => openAboutModal()}>Sobre</button
 				>
 				<span class="text-base-content/30">•</span>
-        <a href="/" class="link link-hover hover:text-primary transition-colors"
+				<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
 					>Contato</a
 				>
 				<span class="text-base-content/30">•</span>
-        <a href="/" class="link link-hover hover:text-primary transition-colors"
+				<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
 					>Suporte</a
 				>
 				<span class="text-base-content/30">•</span>
-        <a href="/" class="link link-hover hover:text-primary transition-colors"
+				<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
 					>Privacidade</a
 				>
 			</div>
-      <div class="flex items-center gap-3 mt-2">
+			<div class="mt-2 flex items-center gap-3">
 				<div class="avatar">
 					<div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
-            <img src={logo} alt="Logo" class="w-full h-full object-contain" />
+						<img src={logo} alt="Logo" class="h-full w-full object-contain" />
 					</div>
 				</div>
 				<div class="text-left">
-          <p class="text-xs font-bold text-primary">
-            Governo do Estado de Pernambuco
-          </p>
-          <p class="text-xs text-base-content/70">Secretaria de Esportes</p>
+					<p class="text-primary text-xs font-bold">Governo do Estado de Pernambuco</p>
+					<p class="text-base-content/70 text-xs">Secretaria de Esportes</p>
 				</div>
 			</div>
-      <p class="text-xs text-base-content/60 mt-2">
+			<p class="text-base-content/60 mt-2 text-xs">
 				© {new Date().getFullYear()} - Todos os direitos reservados
 			</p>
 		</footer>
 	</div>
-  <div class="drawer-side z-40 fixed" style="margin-top: 96px;">
-    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
-    ></label>
+	<div class="drawer-side fixed z-40" style="margin-top: 96px;">
+		<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
 		<div
-      class="menu bg-linear-to-b from-primary/25 to-primary/15 backdrop-blur-sm w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto border-r-2 border-primary/20 shadow-xl"
+			class="menu from-primary/25 to-primary/15 border-primary/20 flex h-[calc(100vh-96px)] w-72 flex-col gap-2 overflow-y-auto border-r-2 bg-linear-to-b p-4 shadow-xl backdrop-blur-sm"
 		>
 			<!-- Sidebar menu items -->
 			<ul class="flex flex-col gap-2">
 				<li class="rounded-xl">
-          <a href="/" class={getMenuClasses(currentPath === "/")}>
-            <Home
-              class="h-5 w-5 group-hover:scale-110 transition-transform"
-              strokeWidth={2}
-            />
+					<a href={resolve('/')} class={getMenuClasses(currentPath === '/')}>
+						<Home class="h-5 w-5 transition-transform group-hover:scale-110" strokeWidth={2} />
 						<span>Dashboard</span>
 					</a>
 				</li>
-        {#each setores as s}
+				{#each setores as s (s.link)}
 					{@const isActive = currentPath.startsWith(s.link)}
 					<li class="rounded-xl">
 						<a
-              href={s.link}
-              aria-current={isActive ? "page" : undefined}
+							href={resolve(s.link)}
+							aria-current={isActive ? 'page' : undefined}
 							class={getMenuClasses(isActive)}
 						>
 							<span>{s.nome}</span>
 						</a>
 					</li>
 				{/each}
-        <li class="rounded-xl mt-auto">
+				<li class="mt-auto rounded-xl">
 					<a
-            href="/solicitar-acesso"
-            class={getSolicitarClasses(currentPath === "/solicitar-acesso")}
+						href={resolve('/solicitar-acesso')}
+						class={getSolicitarClasses(currentPath === '/solicitar-acesso')}
 					>
 						<UserPlus class="h-5 w-5" strokeWidth={2} />
 						<span>Solicitar acesso</span>
@@ -415,31 +388,29 @@
 <!-- Modal de Login -->
 {#if loginModalStore.showModal}
 	<dialog class="modal modal-open">
-    <div class="modal-box relative overflow-hidden bg-base-100 max-w-md">
+		<div class="modal-box bg-base-100 relative max-w-md overflow-hidden">
 			<button
 				type="button"
-        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
 				onclick={closeLoginModal}
 			>
 				✕
 			</button>
 
 			<div class="p-4">
-        <div class="text-center mb-6">
+				<div class="mb-6 text-center">
 					<div class="avatar mb-4">
-            <div class="w-20 rounded-lg bg-primary/10 p-3">
-              <img src={logo} alt="Logo" class="w-full h-full object-contain" />
+						<div class="bg-primary/10 w-20 rounded-lg p-3">
+							<img src={logo} alt="Logo" class="h-full w-full object-contain" />
 						</div>
 					</div>
-          <h3 class="font-bold text-3xl text-primary">Login</h3>
-          <p class="text-sm text-base-content/60 mt-2">
-            Acesse o sistema com suas credenciais
-          </p>
+					<h3 class="text-primary text-3xl font-bold">Login</h3>
+					<p class="text-base-content/60 mt-2 text-sm">Acesse o sistema com suas credenciais</p>
 				</div>
 
 				{#if erroLogin}
 					<div class="alert alert-error mb-4">
-            <XCircle class="stroke-current shrink-0 h-6 w-6" strokeWidth={2} />
+						<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
 						<span>{erroLogin}</span>
 					</div>
 				{/if}
@@ -474,11 +445,7 @@
 						/>
 					</div>
 					<div class="form-control mt-6">
-            <button
-              type="submit"
-              class="btn btn-primary w-full"
-              disabled={carregandoLogin}
-            >
+						<button type="submit" class="btn btn-primary w-full" disabled={carregandoLogin}>
 							{#if carregandoLogin}
 								<span class="loading loading-spinner loading-sm"></span>
 								Entrando...
@@ -488,17 +455,17 @@
 							{/if}
 						</button>
 					</div>
-          <div class="text-center mt-4 space-y-2">
+					<div class="mt-4 space-y-2 text-center">
 						<a
-              href="/solicitar-acesso"
-              class="link link-primary text-sm block"
+							href={resolve('/solicitar-acesso')}
+							class="link link-primary block text-sm"
 							onclick={closeLoginModal}
 						>
 							Não tem acesso? Solicite aqui
 						</a>
 						<a
-              href="/esqueci-senha"
-              class="link link-secondary text-sm block"
+							href={resolve('/esqueci-senha')}
+							class="link link-secondary block text-sm"
 							onclick={closeLoginModal}
 						>
 							Esqueceu sua senha?
@@ -506,16 +473,14 @@
 					</div>
 				</form>
 
-        <div class="divider text-xs text-base-content/40">
-          Credenciais de teste
-        </div>
-        <div class="bg-base-200 p-3 rounded-lg text-xs">
-          <p class="font-semibold mb-1">Admin:</p>
+				<div class="divider text-base-content/40 text-xs">Credenciais de teste</div>
+				<div class="bg-base-200 rounded-lg p-3 text-xs">
+					<p class="mb-1 font-semibold">Admin:</p>
 					<p>
-            Matrícula: <code class="bg-base-300 px-2 py-1 rounded">0000</code>
+						Matrícula: <code class="bg-base-300 rounded px-2 py-1">0000</code>
 					</p>
 					<p>
-            Senha: <code class="bg-base-300 px-2 py-1 rounded">Admin@123</code>
+						Senha: <code class="bg-base-300 rounded px-2 py-1">Admin@123</code>
 					</p>
 				</div>
 			</div>
@@ -532,31 +497,27 @@
 {#if showAboutModal}
 	<dialog class="modal modal-open">
 		<div
-      class="modal-box max-w-2xl relative overflow-hidden bg-linear-to-br from-base-100 to-base-200"
+			class="modal-box from-base-100 to-base-200 relative max-w-2xl overflow-hidden bg-linear-to-br"
 		>
 			<button
 				type="button"
-        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
 				onclick={closeAboutModal}
 			>
 				✕
 			</button>
 
-      <div class="text-center space-y-6 py-4">
+			<div class="space-y-6 py-4 text-center">
 				<!-- Logo e Título -->
 				<div class="flex flex-col items-center gap-4">
 					<div class="avatar">
 						<div class="w-24 rounded-xl bg-white p-3 shadow-lg">
-              <img
-                src={logo}
-                alt="Logo SGSE"
-                class="w-full h-full object-contain"
-              />
+							<img src={logo} alt="Logo SGSE" class="h-full w-full object-contain" />
 						</div>
 					</div>
 					<div>
-            <h3 class="text-3xl font-bold text-primary mb-2">SGSE</h3>
-            <p class="text-lg font-semibold text-base-content/80">
+						<h3 class="text-primary mb-2 text-3xl font-bold">SGSE</h3>
+						<p class="text-base-content/80 text-lg font-semibold">
 							Sistema de Gerenciamento da<br />Secretaria de Esportes
 						</p>
 					</div>
@@ -566,12 +527,12 @@
 				<div class="divider"></div>
 
 				<!-- Informações de Versão -->
-        <div class="bg-primary/10 rounded-xl p-6 space-y-3">
+				<div class="bg-primary/10 space-y-3 rounded-xl p-6">
 					<div class="flex items-center justify-center gap-2">
-            <Tag class="h-5 w-5 text-primary" strokeWidth={2} />
-            <p class="text-sm font-medium text-base-content/70">Versão</p>
+						<Tag class="text-primary h-5 w-5" strokeWidth={2} />
+						<p class="text-base-content/70 text-sm font-medium">Versão</p>
 					</div>
-          <p class="text-2xl font-bold text-primary">1.0 26_2025</p>
+					<p class="text-primary text-2xl font-bold">1.0 26_2025</p>
 					<div class="badge badge-warning badge-lg gap-2">
 						<Plus class="h-4 w-4" strokeWidth={2} />
 						Em Desenvolvimento
@@ -580,12 +541,8 @@
 
 				<!-- Desenvolvido por -->
 				<div class="space-y-2">
-          <p class="text-sm font-medium text-base-content/60">
-            Desenvolvido por
-          </p>
-          <p class="text-lg font-bold text-primary">
-            Secretaria de Esportes de Pernambuco
-          </p>
+					<p class="text-base-content/60 text-sm font-medium">Desenvolvido por</p>
+					<p class="text-primary text-lg font-bold">Secretaria de Esportes de Pernambuco</p>
 				</div>
 
 				<!-- Divider -->
@@ -594,12 +551,12 @@
 				<!-- Informações Adicionais -->
 				<div class="grid grid-cols-2 gap-4 text-sm">
 					<div class="bg-base-200 rounded-lg p-3">
-            <p class="font-semibold text-primary">Governo</p>
-            <p class="text-xs text-base-content/70">Estado de Pernambuco</p>
+						<p class="text-primary font-semibold">Governo</p>
+						<p class="text-base-content/70 text-xs">Estado de Pernambuco</p>
 					</div>
 					<div class="bg-base-200 rounded-lg p-3">
-            <p class="font-semibold text-primary">Ano</p>
-            <p class="text-xs text-base-content/70">2025</p>
+						<p class="text-primary font-semibold">Ano</p>
+						<p class="text-base-content/70 text-xs">2025</p>
 					</div>
 				</div>
 
@@ -607,7 +564,7 @@
 				<div class="pt-4">
 					<button
 						type="button"
-            class="btn btn-primary btn-lg w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-all duration-300"
+						class="btn btn-primary btn-lg mx-auto w-full max-w-xs shadow-lg transition-all duration-300 hover:shadow-xl"
 						onclick={closeAboutModal}
 					>
 						<Check class="h-6 w-6" strokeWidth={2} />
@@ -621,7 +578,7 @@
 			onclick={closeAboutModal}
 			role="button"
 			tabindex="0"
-      onkeydown={(e) => e.key === "Escape" && closeAboutModal()}
+			onkeydown={(e) => e.key === 'Escape' && closeAboutModal()}
 		></div>
 	</dialog>
 {/if}

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

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { abrirConversa } from "$lib/stores/chatStore";
-  import { formatDistanceToNow } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import UserAvatar from "./UserAvatar.svelte";
-  import NewConversationModal from "./NewConversationModal.svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { abrirConversa } from '$lib/stores/chatStore';
+	import UserStatusBadge from './UserStatusBadge.svelte';
+	import UserAvatar from './UserAvatar.svelte';
+	import NewConversationModal from './NewConversationModal.svelte';
+	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
 	const client = useConvexClient();
 
@@ -19,138 +18,102 @@
 	// Buscar conversas (grupos e salas de reunião)
 	const conversas = useQuery(api.chat.listarConversas, {});
 
-  let searchQuery = $state("");
-  let activeTab = $state<"usuarios" | "conversas">("usuarios");
-
-  // Debug: monitorar carregamento de dados
-  $effect(() => {
-    console.log(
-      "📊 [ChatList] Usuários carregados:",
-      usuarios?.data?.length || 0,
-    );
-    console.log(
-      "👤 [ChatList] Meu perfil:",
-      meuPerfil?.data?.nome || "Carregando...",
-    );
-    console.log(
-      "🆔 [ChatList] Meu ID:",
-      meuPerfil?.data?._id || "Não encontrado",
-    );
-    if (usuarios?.data) {
-      const meuId = meuPerfil?.data?._id;
-      const meusDadosNaLista = usuarios.data.find((u: any) => u._id === meuId);
-      if (meusDadosNaLista) {
-        console.warn(
-          "⚠️ [ChatList] ATENÇÃO: Meu usuário está na lista do backend!",
-          meusDadosNaLista.nome,
-        );
-      }
-    }
-  });
+	let searchQuery = $state('');
+	let activeTab = $state<'usuarios' | 'conversas'>('usuarios');
 
 	const usuariosFiltrados = $derived.by(() => {
 		if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
 
 		// Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos
 		if (!meuPerfil?.data) {
-      console.log("⏳ [ChatList] Aguardando perfil do usuário...");
+			console.log('⏳ [ChatList] Aguardando perfil do usuário...');
 			return [];
 		}
 
 		const meuId = meuPerfil.data._id;
 
 		// Filtrar o próprio usuário da lista (filtro de segurança no frontend)
-    let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuId);
+		let listaFiltrada = usuarios.data.filter((u) => u._id !== meuId);
 
 		// Log se ainda estiver na lista após filtro (não deveria acontecer)
-    const aindaNaLista = listaFiltrada.find((u: any) => u._id === meuId);
+		const aindaNaLista = listaFiltrada.find((u) => u._id === meuId);
 		if (aindaNaLista) {
-      console.error(
-        "❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!",
-      );
+			console.error('❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!');
 		}
 
 		// Aplicar busca por nome/email/matrícula
 		if (searchQuery.trim()) {
 			const query = searchQuery.toLowerCase();
 			listaFiltrada = listaFiltrada.filter(
-        (u: any) =>
+				(u) =>
 					u.nome?.toLowerCase().includes(query) ||
 					u.email?.toLowerCase().includes(query) ||
-          u.matricula?.toLowerCase().includes(query),
+					u.matricula?.toLowerCase().includes(query)
 			);
 		}
 
 		// Ordenar: Online primeiro, depois por nome
-    return listaFiltrada.sort((a: any, b: any) => {
+		return listaFiltrada.sort((a, b) => {
 			const statusOrder = {
 				online: 0,
 				ausente: 1,
 				externo: 2,
 				em_reuniao: 3,
-        offline: 4,
+				offline: 4
 			};
-      const statusA =
-        statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
-      const statusB =
-        statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
+			const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
+			const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
 
 			if (statusA !== statusB) return statusA - statusB;
 			return a.nome.localeCompare(b.nome);
 		});
 	});
 
-  function formatarTempo(timestamp: number | undefined): string {
-    if (!timestamp) return "";
-    try {
-      return formatDistanceToNow(new Date(timestamp), {
-        addSuffix: true,
-        locale: ptBR,
-      });
-    } catch {
-      return "";
-    }
-  }
-
 	let processando = $state(false);
 	let showNewConversationModal = $state(false);
 
-  async function handleClickUsuario(usuario: any) {
+	async function handleClickUsuario(usuario: {
+		_id: Id<'usuarios'>;
+		nome: string;
+		email: string;
+		matricula: string | undefined;
+		avatar: string | undefined;
+		fotoPerfil: Id<'_storage'> | undefined;
+		fotoPerfilUrl: string | null;
+		statusPresenca: 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao';
+		statusMensagem: string | undefined;
+		ultimaAtividade: number | undefined;
+	}) {
 		if (processando) {
-      console.log("⏳ Já está processando uma ação, aguarde...");
+			console.log('⏳ Já está processando uma ação, aguarde...');
 			return;
 		}
 
 		try {
 			processando = true;
-      console.log("🔄 Clicou no usuário:", usuario.nome, "ID:", usuario._id);
+			console.log('🔄 Clicou no usuário:', usuario.nome, 'ID:', usuario._id);
 
 			// Criar ou buscar conversa individual com este usuário
-      console.log("📞 Chamando mutation criarOuBuscarConversaIndividual...");
-      const conversaId = await client.mutation(
-        api.chat.criarOuBuscarConversaIndividual,
-        {
-          outroUsuarioId: usuario._id,
-        },
-      );
+			console.log('📞 Chamando mutation criarOuBuscarConversaIndividual...');
+			const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
+				outroUsuarioId: usuario._id
+			});
 
-      console.log("✅ Conversa criada/encontrada. ID:", conversaId);
+			console.log('✅ Conversa criada/encontrada. ID:', conversaId);
 
 			// Abrir a conversa
-      console.log("📂 Abrindo conversa...");
-      abrirConversa(conversaId as any);
+			console.log('📂 Abrindo conversa...');
+			abrirConversa(conversaId);
 
-      console.log("✅ Conversa aberta com sucesso!");
+			console.log('✅ Conversa aberta com sucesso!');
 		} catch (error) {
-      console.error("❌ Erro ao abrir conversa:", error);
-      console.error("Detalhes do erro:", {
+			console.error('❌ Erro ao abrir conversa:', error);
+			console.error('Detalhes do erro:', {
 				message: error instanceof Error ? error.message : String(error),
 				stack: error instanceof Error ? error.stack : undefined,
-        usuario: usuario,
+				usuario: usuario
 			});
-      alert(
-        `Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`,
-      );
+			alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
 		} finally {
 			processando = false;
 		}
@@ -158,51 +121,47 @@
 
 	function getStatusLabel(status: string | undefined): string {
 		const labels: Record<string, string> = {
-      online: "Online",
-      offline: "Offline",
-      ausente: "Ausente",
-      externo: "Externo",
-      em_reuniao: "Em Reunião",
+			online: 'Online',
+			offline: 'Offline',
+			ausente: 'Ausente',
+			externo: 'Externo',
+			em_reuniao: 'Em Reunião'
 		};
-    return labels[status || "offline"] || "Offline";
+		return labels[status || 'offline'] || 'Offline';
 	}
 
 	// Filtrar conversas por tipo e busca
 	const conversasFiltradas = $derived(() => {
 		if (!conversas?.data) return [];
 
-    let lista = conversas.data.filter(
-      (c: any) => c.tipo === "grupo" || c.tipo === "sala_reuniao",
-    );
+		let lista = conversas.data.filter((c) => c.tipo === 'grupo' || c.tipo === 'sala_reuniao');
 
 		// Aplicar busca
 		if (searchQuery.trim()) {
 			const query = searchQuery.toLowerCase();
-      lista = lista.filter((c: any) => c.nome?.toLowerCase().includes(query));
+			lista = lista.filter((c) => c.nome?.toLowerCase().includes(query));
 		}
 
 		return lista;
 	});
 
-  function handleClickConversa(conversa: any) {
+	function handleClickConversa(conversa: Doc<'conversas'>) {
 		if (processando) return;
 		try {
 			processando = true;
 			abrirConversa(conversa._id);
 		} catch (error) {
-      console.error("Erro ao abrir conversa:", error);
-      alert(
-        `Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`,
-      );
+			console.error('Erro ao abrir conversa:', error);
+			alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
 		} finally {
 			processando = false;
 		}
 	}
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex h-full flex-col">
 	<!-- Search bar -->
-  <div class="p-4 border-b border-base-300">
+	<div class="border-base-300 border-b p-4">
 		<div class="relative">
 			<input
 				type="text"
@@ -216,7 +175,7 @@
 				viewBox="0 0 24 24"
 				stroke-width="1.5"
 				stroke="currentColor"
-        class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50"
+				class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2"
 			>
 				<path
 					stroke-linecap="round"
@@ -228,27 +187,27 @@
 	</div>
 
 	<!-- Tabs e Título -->
-  <div class="border-b border-base-300 bg-base-200">
+	<div class="border-base-300 bg-base-200 border-b">
 		<!-- Tabs -->
 		<div class="tabs tabs-boxed p-2">
 			<button
 				type="button"
-        class={`tab flex-1 ${activeTab === "usuarios" ? "tab-active" : ""}`}
-        onclick={() => (activeTab = "usuarios")}
+				class={`tab flex-1 ${activeTab === 'usuarios' ? 'tab-active' : ''}`}
+				onclick={() => (activeTab = 'usuarios')}
 			>
 				👥 Usuários ({usuariosFiltrados.length})
 			</button>
 			<button
 				type="button"
-        class={`tab flex-1 ${activeTab === "conversas" ? "tab-active" : ""}`}
-        onclick={() => (activeTab = "conversas")}
+				class={`tab flex-1 ${activeTab === 'conversas' ? 'tab-active' : ''}`}
+				onclick={() => (activeTab = 'conversas')}
 			>
 				💬 Conversas ({conversasFiltradas().length})
 			</button>
 		</div>
 
 		<!-- Botão Nova Conversa -->
-    <div class="px-4 pb-2 flex justify-end">
+		<div class="flex justify-end px-4 pb-2">
 			<button
 				type="button"
 				class="btn btn-primary btn-sm"
@@ -262,13 +221,9 @@
 					viewBox="0 0 24 24"
 					stroke-width="2"
 					stroke="currentColor"
-          class="w-4 h-4 mr-1"
+					class="mr-1 h-4 w-4"
 				>
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M12 4.5v15m7.5-7.5h-15"
-          />
+					<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 				</svg>
 				Nova Conversa
 			</button>
@@ -277,21 +232,21 @@
 
 	<!-- Lista de conteúdo -->
 	<div class="flex-1 overflow-y-auto">
-    {#if activeTab === "usuarios"}
+		{#if activeTab === 'usuarios'}
 			<!-- Lista de usuários -->
 			{#if usuarios?.data && usuariosFiltrados.length > 0}
 				{#each usuariosFiltrados as usuario (usuario._id)}
 					<button
 						type="button"
-            class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando
-              ? 'opacity-50 cursor-wait'
+						class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
+							? 'cursor-wait opacity-50'
 							: 'cursor-pointer'}"
 						onclick={() => handleClickUsuario(usuario)}
 						disabled={processando}
 					>
 						<!-- Ícone de mensagem -->
 						<div
-              class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110"
+							class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110"
 							style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);"
 						>
 							<svg
@@ -302,11 +257,9 @@
 								stroke-width="2"
 								stroke-linecap="round"
 								stroke-linejoin="round"
-                class="w-5 h-5 text-primary"
+								class="text-primary h-5 w-5"
 							>
-                <path
-                  d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
-                />
+								<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
 								<path d="M9 10h.01M15 10h.01" />
 							</svg>
 						</div>
@@ -320,23 +273,19 @@
 								size="md"
 							/>
 							<!-- Status badge -->
-              <div class="absolute bottom-0 right-0">
-                <UserStatusBadge
-                  status={usuario.statusPresenca || "offline"}
-                  size="sm"
-                />
+							<div class="absolute right-0 bottom-0">
+								<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
 							</div>
 						</div>
 
 						<!-- Conteúdo -->
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center justify-between mb-1">
-                <p class="font-semibold text-base-content truncate">
+						<div class="min-w-0 flex-1">
+							<div class="mb-1 flex items-center justify-between">
+								<p class="text-base-content truncate font-semibold">
 									{usuario.nome}
 								</p>
 								<span
-                  class="text-xs px-2 py-0.5 rounded-full {usuario.statusPresenca ===
-                  'online'
+									class="rounded-full px-2 py-0.5 text-xs {usuario.statusPresenca === 'online'
 										? 'bg-success/20 text-success'
 										: usuario.statusPresenca === 'ausente'
 											? 'bg-warning/20 text-warning'
@@ -348,7 +297,7 @@
 								</span>
 							</div>
 							<div class="flex items-center gap-2">
-                <p class="text-sm text-base-content/70 truncate">
+								<p class="text-base-content/70 truncate text-sm">
 									{usuario.statusMensagem || usuario.email}
 								</p>
 							</div>
@@ -357,21 +306,19 @@
 				{/each}
 			{:else if !usuarios?.data}
 				<!-- Loading -->
-        <div class="flex items-center justify-center h-full">
+				<div class="flex h-full items-center justify-center">
 					<span class="loading loading-spinner loading-lg"></span>
 				</div>
 			{:else}
 				<!-- Nenhum usuário encontrado -->
-        <div
-          class="flex flex-col items-center justify-center h-full text-center px-4"
-        >
+				<div class="flex h-full flex-col items-center justify-center px-4 text-center">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
-            class="w-16 h-16 text-base-content/30 mb-4"
+						class="text-base-content/30 mb-4 h-16 w-16"
 					>
 						<path
 							stroke-linecap="round"
@@ -388,27 +335,27 @@
 				{#each conversasFiltradas() as conversa (conversa._id)}
 					<button
 						type="button"
-            class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando
-              ? 'opacity-50 cursor-wait'
+						class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
+							? 'cursor-wait opacity-50'
 							: 'cursor-pointer'}"
 						onclick={() => handleClickConversa(conversa)}
 						disabled={processando}
 					>
 						<!-- Ícone de grupo/sala -->
 						<div
-              class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 {conversa.tipo ===
+							class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110 {conversa.tipo ===
 							'sala_reuniao'
-                ? 'bg-linear-to-br from-blue-500/20 to-purple-500/20 border border-blue-300/30'
-                : 'bg-linear-to-br from-primary/20 to-secondary/20 border border-primary/30'}"
+								? 'border border-blue-300/30 bg-linear-to-br from-blue-500/20 to-purple-500/20'
+								: 'from-primary/20 to-secondary/20 border-primary/30 border bg-linear-to-br'}"
 						>
-              {#if conversa.tipo === "sala_reuniao"}
+							{#if conversa.tipo === 'sala_reuniao'}
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
 									fill="none"
 									viewBox="0 0 24 24"
 									stroke-width="2"
 									stroke="currentColor"
-                  class="w-5 h-5 text-blue-500"
+									class="h-5 w-5 text-blue-500"
 								>
 									<path
 										stroke-linecap="round"
@@ -423,7 +370,7 @@
 									viewBox="0 0 24 24"
 									stroke-width="2"
 									stroke="currentColor"
-                  class="w-5 h-5 text-primary"
+									class="text-primary h-5 w-5"
 								>
 									<path
 										stroke-linecap="round"
@@ -435,37 +382,30 @@
 						</div>
 
 						<!-- Conteúdo -->
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center justify-between mb-1">
-                <p class="font-semibold text-base-content truncate">
+						<div class="min-w-0 flex-1">
+							<div class="mb-1 flex items-center justify-between">
+								<p class="text-base-content truncate font-semibold">
 									{conversa.nome ||
-                    (conversa.tipo === "sala_reuniao"
-                      ? "Sala sem nome"
-                      : "Grupo sem nome")}
+										(conversa.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome')}
 								</p>
 								{#if conversa.naoLidas > 0}
-                  <span class="badge badge-primary badge-sm"
-                    >{conversa.naoLidas}</span
-                  >
+									<span class="badge badge-primary badge-sm">{conversa.naoLidas}</span>
 								{/if}
 							</div>
 							<div class="flex items-center gap-2">
 								<span
-                  class="text-xs px-2 py-0.5 rounded-full {conversa.tipo ===
-                  'sala_reuniao'
+									class="rounded-full px-2 py-0.5 text-xs {conversa.tipo === 'sala_reuniao'
 										? 'bg-blue-500/20 text-blue-500'
 										: 'bg-primary/20 text-primary'}"
 								>
-                  {conversa.tipo === "sala_reuniao"
-                    ? "👑 Sala de Reunião"
-                    : "👥 Grupo"}
+									{conversa.tipo === 'sala_reuniao' ? '👑 Sala de Reunião' : '👥 Grupo'}
 								</span>
 								{#if conversa.participantesInfo}
-                  <span class="text-xs text-base-content/50">
-                    {conversa.participantesInfo.length} participante{conversa
-                      .participantesInfo.length !== 1
-                      ? "s"
-                      : ""}
+									<span class="text-base-content/50 text-xs">
+										{conversa.participantesInfo.length} participante{conversa.participantesInfo
+											.length !== 1
+											? 's'
+											: ''}
 									</span>
 								{/if}
 							</div>
@@ -474,21 +414,19 @@
 				{/each}
 			{:else if !conversas?.data}
 				<!-- Loading -->
-        <div class="flex items-center justify-center h-full">
+				<div class="flex h-full items-center justify-center">
 					<span class="loading loading-spinner loading-lg"></span>
 				</div>
 			{:else}
 				<!-- Nenhuma conversa encontrada -->
-        <div
-          class="flex flex-col items-center justify-center h-full text-center px-4"
-        >
+				<div class="flex h-full flex-col items-center justify-center px-4 text-center">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
-            class="w-16 h-16 text-base-content/30 mb-4"
+						class="text-base-content/30 mb-4 h-16 w-16"
 					>
 						<path
 							stroke-linecap="round"
@@ -496,12 +434,8 @@
 							d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
 						/>
 					</svg>
-          <p class="text-base-content/70 font-medium mb-2">
-            Nenhuma conversa encontrada
-          </p>
-          <p class="text-sm text-base-content/50">
-            Crie um grupo ou sala de reunião para começar
-          </p>
+					<p class="text-base-content/70 mb-2 font-medium">Nenhuma conversa encontrada</p>
+					<p class="text-base-content/50 text-sm">Crie um grupo ou sala de reunião para começar</p>
 				</div>
 			{/if}
 		{/if}

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

@@ -1,25 +1,16 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { voltarParaLista } from "$lib/stores/chatStore";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  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";
-  import SalaReuniaoManager from "./SalaReuniaoManager.svelte";
-  import { getAvatarUrl } from "$lib/utils/avatarGenerator";
-  import {
-    Bell,
-    X,
-    ArrowLeft,
-    LogOut,
-    MoreVertical,
-    Users,
-    Clock,
-    XCircle,
-  } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { voltarParaLista } from '$lib/stores/chatStore';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	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';
+	import SalaReuniaoManager from './SalaReuniaoManager.svelte';
+	import { getAvatarUrl } from '$lib/utils/avatarGenerator';
+	import { Bell, X, ArrowLeft, LogOut, MoreVertical, Users, Clock, XCircle } from 'lucide-svelte';
 
 	interface Props {
 		conversaId: string;
@@ -38,67 +29,54 @@
 
 	const conversas = useQuery(api.chat.listarConversas, {});
 	const isAdmin = useQuery(api.chat.verificarSeEhAdmin, {
-    conversaId: conversaId as Id<"conversas">,
+		conversaId: conversaId as Id<'conversas'>
 	});
 
 	const conversa = $derived(() => {
-    console.log("🔍 [ChatWindow] Buscando conversa ID:", conversaId);
-    console.log("📋 [ChatWindow] Conversas disponíveis:", conversas?.data);
+		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",
-      );
+			console.log('⚠️ [ChatWindow] conversas.data não é um array ou está vazio');
 			return null;
 		}
 
-    const encontrada = conversas.data.find(
-      (c: { _id: string }) => c._id === conversaId,
-    );
-    console.log("✅ [ChatWindow] Conversa encontrada:", encontrada);
+		const encontrada = conversas.data.find((c: { _id: string }) => c._id === conversaId);
+		console.log('✅ [ChatWindow] Conversa encontrada:', encontrada);
 		return encontrada;
 	});
 
 	function getNomeConversa(): string {
 		const c = conversa();
-    if (!c) return "Carregando...";
-    if (c.tipo === "grupo" || c.tipo === "sala_reuniao") {
-      return (
-        c.nome ||
-        (c.tipo === "sala_reuniao" ? "Sala sem nome" : "Grupo sem nome")
-      );
+		if (!c) return 'Carregando...';
+		if (c.tipo === 'grupo' || c.tipo === 'sala_reuniao') {
+			return c.nome || (c.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome');
 		}
-    return c.outroUsuario?.nome || "Usuário";
+		return c.outroUsuario?.nome || 'Usuário';
 	}
 
 	function getAvatarConversa(): string {
 		const c = conversa();
-    if (!c) return "💬";
-    if (c.tipo === "grupo") {
-      return c.avatar || "👥";
+		if (!c) return '💬';
+		if (c.tipo === 'grupo') {
+			return c.avatar || '👥';
 		}
 		if (c.outroUsuario?.avatar) {
 			return c.outroUsuario.avatar;
 		}
-    return "👤";
+		return '👤';
 	}
 
-  function getStatusConversa():
-    | "online"
-    | "offline"
-    | "ausente"
-    | "externo"
-    | "em_reuniao"
-    | null {
+	function getStatusConversa(): 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao' | null {
 		const c = conversa();
-    if (c && c.tipo === "individual" && c.outroUsuario) {
+		if (c && c.tipo === 'individual' && c.outroUsuario) {
 			return (
 				(c.outroUsuario.statusPresenca as
-          | "online"
-          | "offline"
-          | "ausente"
-          | "externo"
-          | "em_reuniao") || "offline"
+					| 'online'
+					| 'offline'
+					| 'ausente'
+					| 'externo'
+					| 'em_reuniao') || 'offline'
 			);
 		}
 		return null;
@@ -106,7 +84,7 @@
 
 	function getStatusMensagem(): string | null {
 		const c = conversa();
-    if (c && c.tipo === "individual" && c.outroUsuario) {
+		if (c && c.tipo === 'individual' && c.outroUsuario) {
 			return c.outroUsuario.statusMensagem || null;
 		}
 		return null;
@@ -114,145 +92,139 @@
 
 	async function handleSairGrupoOuSala() {
 		const c = conversa();
-    if (!c || (c.tipo !== "grupo" && c.tipo !== "sala_reuniao")) return;
+		if (!c || (c.tipo !== 'grupo' && c.tipo !== 'sala_reuniao')) return;
 
-    const tipoTexto = c.tipo === "sala_reuniao" ? "sala de reunião" : "grupo";
-    if (
-      !confirm(
-        `Tem certeza que deseja sair da ${tipoTexto} "${c.nome || "Sem nome"}"?`,
-      )
-    ) {
+		const tipoTexto = c.tipo === 'sala_reuniao' ? 'sala de reunião' : 'grupo';
+		if (!confirm(`Tem certeza que deseja sair da ${tipoTexto} "${c.nome || 'Sem nome'}"?`)) {
 			return;
 		}
 
 		try {
 			const resultado = await client.mutation(api.chat.sairGrupoOuSala, {
-        conversaId: conversaId as Id<"conversas">,
+				conversaId: conversaId as Id<'conversas'>
 			});
 
 			if (resultado.sucesso) {
 				voltarParaLista();
 			} else {
-        alert(resultado.erro || "Erro ao sair da conversa");
+				alert(resultado.erro || 'Erro ao sair da conversa');
 			}
 		} catch (error) {
-      console.error("Erro ao sair da conversa:", error);
-      const errorMessage =
-        error instanceof Error ? error.message : "Erro ao sair da conversa";
+			console.error('Erro ao sair da conversa:', error);
+			const errorMessage = error instanceof Error ? error.message : 'Erro ao sair da conversa';
 			alert(errorMessage);
 		}
 	}
+
+	function handleDocumentClick() {
+		if (showAdminMenu) showAdminMenu = false;
+	}
 </script>
 
-<div class="flex flex-col h-full" onclick={() => (showAdminMenu = false)}>
+<svelte:window onclick={handleDocumentClick} />
+
+<div class="flex h-full flex-col">
 	<!-- Header -->
-  <div
-    class="flex items-center gap-3 px-4 py-3 border-b border-base-300 bg-base-200"
-    onclick={(e) => e.stopPropagation()}
-  >
+	<div class="border-base-300 bg-base-200 flex items-center gap-3 border-b px-4 py-3">
 		<!-- Botão Voltar -->
 		<button
 			type="button"
-      class="btn btn-ghost btn-sm btn-circle hover:bg-primary/20 transition-all duration-200 hover:scale-110"
+			class="btn btn-circle hover:bg-primary/20 transition-all duration-200 hover:scale-110"
 			onclick={voltarParaLista}
 			aria-label="Voltar"
 			title="Voltar para lista de conversas"
 		>
-      <ArrowLeft class="w-6 h-6 text-primary" strokeWidth={2.5} />
+			<ArrowLeft class="text-primary h-6 w-6" />
 		</button>
 
 		<!-- Avatar e Info -->
 		<div class="relative shrink-0">
-      {#if conversa() && conversa()?.tipo === "individual" && conversa()?.outroUsuario}
+			{#if conversa() && conversa()?.tipo === 'individual' && conversa()?.outroUsuario}
 				<UserAvatar
 					avatar={conversa()?.outroUsuario?.avatar}
 					fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl}
-          nome={conversa()?.outroUsuario?.nome || "Usuário"}
+					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"
-        >
+				<div class="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-full text-xl">
 					{getAvatarConversa()}
 				</div>
 			{/if}
 			{#if getStatusConversa()}
-        <div class="absolute bottom-0 right-0">
+				<div class="absolute right-0 bottom-0">
 					<UserStatusBadge status={getStatusConversa()} size="sm" />
 				</div>
 			{/if}
 		</div>
 
-    <div class="flex-1 min-w-0">
-      <p class="font-semibold text-base-content truncate">
+		<div class="min-w-0 flex-1">
+			<p class="text-base-content truncate font-semibold">
 				{getNomeConversa()}
 			</p>
 			{#if getStatusMensagem()}
-        <p class="text-xs text-base-content/60 truncate">
+				<p class="text-base-content/60 truncate text-xs">
 					{getStatusMensagem()}
 				</p>
 			{:else if getStatusConversa()}
-        <p class="text-xs text-base-content/60">
-          {getStatusConversa() === "online"
-            ? "Online"
-            : getStatusConversa() === "ausente"
-              ? "Ausente"
-              : getStatusConversa() === "em_reuniao"
-                ? "Em reunião"
-                : getStatusConversa() === "externo"
-                  ? "Externo"
-                  : "Offline"}
+				<p class="text-base-content/60 text-xs">
+					{getStatusConversa() === 'online'
+						? 'Online'
+						: getStatusConversa() === 'ausente'
+							? 'Ausente'
+							: getStatusConversa() === 'em_reuniao'
+								? 'Em reunião'
+								: getStatusConversa() === 'externo'
+									? 'Externo'
+									: 'Offline'}
 				</p>
-      {:else if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")}
-        <div class="flex items-center gap-2 mt-1">
-          <p class="text-xs text-base-content/60">
+			{:else if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')}
+				<div class="mt-1 flex items-center gap-2">
+					<p class="text-base-content/60 text-xs">
 						{conversa()?.participantesInfo?.length || 0}
-            {conversa()?.participantesInfo?.length === 1
-              ? "participante"
-              : "participantes"}
+						{conversa()?.participantesInfo?.length === 1 ? 'participante' : 'participantes'}
 					</p>
 					{#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0}
 						<div class="flex items-center gap-2">
 							<div class="flex -space-x-2">
 								{#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)}
 									<div
-                    class="relative w-5 h-5 rounded-full border-2 border-base-200 overflow-hidden bg-base-200"
+										class="border-base-200 bg-base-200 relative h-5 w-5 overflow-hidden rounded-full border-2"
 										title={participante.nome}
 									>
 										{#if participante.fotoPerfilUrl}
 											<img
 												src={participante.fotoPerfilUrl}
 												alt={participante.nome}
-                        class="w-full h-full object-cover"
+												class="h-full w-full object-cover"
 											/>
 										{:else if participante.avatar}
 											<img
 												src={getAvatarUrl(participante.avatar)}
 												alt={participante.nome}
-                        class="w-full h-full object-cover"
+												class="h-full w-full object-cover"
 											/>
 										{:else}
 											<img
 												src={getAvatarUrl(participante.nome)}
 												alt={participante.nome}
-                        class="w-full h-full object-cover"
+												class="h-full w-full object-cover"
 											/>
 										{/if}
 									</div>
 								{/each}
 								{#if conversa()?.participantesInfo.length > 5}
 									<div
-                    class="w-5 h-5 rounded-full border-2 border-base-200 bg-base-300 flex items-center justify-center text-[8px] font-semibold text-base-content/70"
+										class="border-base-200 bg-base-300 text-base-content/70 flex h-5 w-5 items-center justify-center rounded-full border-2 text-[8px] font-semibold"
 										title={`+${conversa()?.participantesInfo.length - 5} mais`}
 									>
 										+{conversa()?.participantesInfo.length - 5}
 									</div>
 								{/if}
 							</div>
-              {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
+							{#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
 								<span
-                  class="text-[10px] text-primary font-semibold ml-1 whitespace-nowrap"
+									class="text-primary ml-1 text-[10px] font-semibold whitespace-nowrap"
 									title="Você é administrador desta sala">• Admin</span
 								>
 							{/if}
@@ -265,10 +237,10 @@
 		<!-- Botões de ação -->
 		<div class="flex items-center gap-1">
 			<!-- Botão Sair (apenas para grupos e salas de reunião) -->
-      {#if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")}
+			{#if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')}
 				<button
 					type="button"
-          class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
+					class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
 					style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
 					onclick={(e) => {
 						e.stopPropagation();
@@ -278,21 +250,21 @@
 					title="Sair da conversa"
 				>
 					<div
-            class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/10 transition-colors duration-300"
+						class="absolute inset-0 bg-red-500/0 transition-colors duration-300 group-hover:bg-red-500/10"
 					></div>
 					<LogOut
-            class="w-5 h-5 text-red-500 relative z-10 group-hover:scale-110 transition-transform"
+						class="relative z-10 h-5 w-5 text-red-500 transition-transform group-hover:scale-110"
 						strokeWidth={2}
 					/>
 				</button>
 			{/if}
 
 			<!-- Botão Menu Administrativo (apenas para salas de reunião e apenas para admins) -->
-      {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
-        <div class="relative admin-menu-container">
+			{#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
+				<div class="admin-menu-container relative">
 					<button
 						type="button"
-            class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
+						class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
 						style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2);"
 						onclick={(e) => {
 							e.stopPropagation();
@@ -302,84 +274,78 @@
 						title="Recursos administrativos"
 					>
 						<div
-              class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors duration-300"
+							class="absolute inset-0 bg-blue-500/0 transition-colors duration-300 group-hover:bg-blue-500/10"
 						></div>
 						<MoreVertical
-              class="w-5 h-5 text-blue-500 relative z-10 group-hover:scale-110 transition-transform"
+							class="relative z-10 h-5 w-5 text-blue-500 transition-transform group-hover:scale-110"
 							strokeWidth={2}
 						/>
 					</button>
 					{#if showAdminMenu}
 						<ul
-              class="absolute right-0 top-full mt-2 bg-base-100 rounded-lg shadow-xl border border-base-300 w-56 z-[100] overflow-hidden"
-              onclick={(e) => e.stopPropagation()}
+							class="bg-base-100 border-base-300 absolute top-full right-0 z-[100] mt-2 w-56 overflow-hidden rounded-lg border shadow-xl"
 						>
 							<li>
 								<button
 									type="button"
-                  class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2"
+									class="hover:bg-base-200 flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
 									onclick={(e) => {
 										e.stopPropagation();
 										showSalaManager = true;
 										showAdminMenu = false;
 									}}
 								>
-                  <Users class="w-4 h-4" strokeWidth={2} />
+									<Users class="h-4 w-4" strokeWidth={2} />
 									Gerenciar Participantes
 								</button>
 							</li>
 							<li>
 								<button
 									type="button"
-                  class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2"
+									class="hover:bg-base-200 flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
 									onclick={(e) => {
 										e.stopPropagation();
 										showNotificacaoModal = true;
 										showAdminMenu = false;
 									}}
 								>
-                  <Bell class="w-4 h-4" strokeWidth={2} />
+									<Bell class="h-4 w-4" strokeWidth={2} />
 									Enviar Notificação
 								</button>
 							</li>
 							<li>
 								<button
 									type="button"
-                  class="w-full text-left px-4 py-3 hover:bg-error/10 transition-colors flex items-center gap-2 text-error"
+									class="hover:bg-error/10 text-error flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
 									onclick={(e) => {
 										e.stopPropagation();
 										(async () => {
 											if (
 												!confirm(
-                          "Tem certeza que deseja encerrar esta reunião? Todos os participantes serão removidos.",
+													'Tem certeza que deseja encerrar esta reunião? Todos os participantes serão removidos.'
 												)
 											)
 												return;
 											try {
-                        const resultado = await client.mutation(
-                          api.chat.encerrarReuniao,
-                          {
-                            conversaId: conversaId as Id<"conversas">,
-                          },
-                        );
+												const resultado = await client.mutation(api.chat.encerrarReuniao, {
+													conversaId: conversaId as Id<'conversas'>
+												});
 												if (resultado.sucesso) {
-                          alert("Reunião encerrada com sucesso!");
+													alert('Reunião encerrada com sucesso!');
 													voltarParaLista();
 												} else {
-                          alert(resultado.erro || "Erro ao encerrar reunião");
+													alert(resultado.erro || 'Erro ao encerrar reunião');
 												}
 											} catch (error) {
 												const errorMessage =
-                          error instanceof Error
-                            ? error.message
-                            : "Erro ao encerrar reunião";
+													error instanceof Error ? error.message : 'Erro ao encerrar reunião';
 												alert(errorMessage);
 											}
 											showAdminMenu = false;
 										})();
 									}}
 								>
-                  <XCircle class="w-4 h-4" strokeWidth={2} />
+									<XCircle class="h-4 w-4" strokeWidth={2} />
 									Encerrar Reunião
 								</button>
 							</li>
@@ -391,17 +357,17 @@
 			<!-- Botão Agendar MODERNO -->
 			<button
 				type="button"
-        class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
+				class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
 				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"
+					class="absolute inset-0 bg-purple-500/0 transition-colors duration-300 group-hover:bg-purple-500/10"
 				></div>
 				<Clock
-          class="w-5 h-5 text-purple-500 relative z-10 group-hover:scale-110 transition-transform"
+					class="relative z-10 h-5 w-5 text-purple-500 transition-transform group-hover:scale-110"
 					strokeWidth={2}
 				/>
 			</button>
@@ -409,46 +375,43 @@
 	</div>
 
 	<!-- Mensagens -->
-  <div class="flex-1 overflow-hidden min-h-0">
-    <MessageList conversaId={conversaId as Id<"conversas">} />
+	<div class="min-h-0 flex-1 overflow-hidden">
+		<MessageList conversaId={conversaId as Id<'conversas'>} />
 	</div>
 
 	<!-- Input -->
-  <div class="border-t border-base-300 shrink-0">
-    <MessageInput conversaId={conversaId as Id<"conversas">} />
+	<div class="border-base-300 shrink-0 border-t">
+		<MessageInput conversaId={conversaId as Id<'conversas'>} />
 	</div>
 </div>
 
 <!-- Modal de Agendamento -->
 {#if showScheduleModal}
 	<ScheduleMessageModal
-    conversaId={conversaId as Id<"conversas">}
+		conversaId={conversaId as Id<'conversas'>}
 		onClose={() => (showScheduleModal = false)}
 	/>
 {/if}
 
 <!-- Modal de Gerenciamento de Sala -->
-{#if showSalaManager && conversa()?.tipo === "sala_reuniao"}
+{#if showSalaManager && conversa()?.tipo === 'sala_reuniao'}
 	<SalaReuniaoManager
-    conversaId={conversaId as Id<"conversas">}
+		conversaId={conversaId as Id<'conversas'>}
 		isAdmin={isAdmin?.data ?? false}
 		onClose={() => (showSalaManager = false)}
 	/>
 {/if}
 
 <!-- Modal de Enviar Notificação -->
-{#if showNotificacaoModal && conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
+{#if showNotificacaoModal && conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
 	<dialog
 		class="modal modal-open"
-    onclick={(e) =>
-      e.target === e.currentTarget && (showNotificacaoModal = false)}
+		onclick={(e) => e.target === e.currentTarget && (showNotificacaoModal = false)}
 	>
 		<div class="modal-box max-w-md" onclick={(e) => e.stopPropagation()}>
-      <div
-        class="flex items-center justify-between px-6 py-4 border-b border-base-300"
-      >
-        <h2 class="text-xl font-semibold flex items-center gap-2">
-          <Bell class="w-5 h-5 text-primary" />
+			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+				<h2 class="flex items-center gap-2 text-xl font-semibold">
+					<Bell class="text-primary h-5 w-5" />
 					Enviar Notificação
 				</h2>
 				<button
@@ -456,7 +419,7 @@
 					class="btn btn-ghost btn-sm btn-circle"
 					onclick={() => (showNotificacaoModal = false)}
 				>
-          <X class="w-5 h-5" />
+					<X class="h-5 w-5" />
 				</button>
 			</div>
 			<div class="p-6">
@@ -464,35 +427,30 @@
 					onsubmit={async (e) => {
 						e.preventDefault();
 						const formData = new FormData(e.currentTarget);
-            const titulo = formData.get("titulo") as string;
-            const mensagem = formData.get("mensagem") as string;
+						const titulo = formData.get('titulo') as string;
+						const mensagem = formData.get('mensagem') as string;
 
 						if (!titulo.trim() || !mensagem.trim()) {
-              alert("Preencha todos os campos");
+							alert('Preencha todos os campos');
 							return;
 						}
 
 						try {
-              const resultado = await client.mutation(
-                api.chat.enviarNotificacaoReuniao,
-                {
-                  conversaId: conversaId as Id<"conversas">,
+							const resultado = await client.mutation(api.chat.enviarNotificacaoReuniao, {
+								conversaId: conversaId as Id<'conversas'>,
 								titulo: titulo.trim(),
-                  mensagem: mensagem.trim(),
-                },
-              );
+								mensagem: mensagem.trim()
+							});
 
 							if (resultado.sucesso) {
-                alert("Notificação enviada com sucesso!");
+								alert('Notificação enviada com sucesso!');
 								showNotificacaoModal = false;
 							} else {
-                alert(resultado.erro || "Erro ao enviar notificação");
+								alert(resultado.erro || 'Erro ao enviar notificação');
 							}
 						} catch (error) {
 							const errorMessage =
-                error instanceof Error
-                  ? error.message
-                  : "Erro ao enviar notificação";
+								error instanceof Error ? error.message : 'Erro ao enviar notificação';
 							alert(errorMessage);
 						}
 					}}
@@ -529,17 +487,13 @@
 						>
 							Cancelar
 						</button>
-            <button type="submit" class="btn btn-primary flex-1">
-              Enviar
-            </button>
+						<button type="submit" class="btn btn-primary flex-1"> Enviar </button>
 					</div>
 				</form>
 			</div>
 		</div>
 		<form method="dialog" class="modal-backdrop">
-      <button type="button" onclick={() => (showNotificacaoModal = false)}
-        >fechar</button
-      >
+			<button type="button" onclick={() => (showNotificacaoModal = false)}>fechar</button>
 		</form>
 	</dialog>
 {/if}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { abrirConversa } from "$lib/stores/chatStore";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import UserAvatar from "./UserAvatar.svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { abrirConversa } from '$lib/stores/chatStore';
+	import UserStatusBadge from './UserStatusBadge.svelte';
+	import UserAvatar from './UserAvatar.svelte';
 	import {
 		MessageSquare,
 		User,
@@ -13,8 +13,9 @@
 		Search,
 		ChevronRight,
 		Plus,
-    UserX,
-  } from "lucide-svelte";
+		UserX
+	} from 'lucide-svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
 	interface Props {
 		onClose: () => void;
@@ -28,11 +29,11 @@
 	// Usuário atual
 	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  let activeTab = $state<"individual" | "grupo" | "sala_reuniao">("individual");
-  let searchQuery = $state("");
-  let selectedUsers = $state<string[]>([]);
-  let groupName = $state("");
-  let salaReuniaoName = $state("");
+	let activeTab = $state<'individual' | 'grupo' | 'sala_reuniao'>('individual');
+	let searchQuery = $state('');
+	let selectedUsers = $state<Id<'usuarios'>[]>([]);
+	let groupName = $state('');
+	let salaReuniaoName = $state('');
 	let loading = $state(false);
 
 	const usuariosFiltrados = $derived(() => {
@@ -40,39 +41,37 @@
 
 		// Filtrar o próprio usuário
 		const meuId = currentUser?.data?._id || meuPerfil?.data?._id;
-    let lista = usuarios.data.filter((u: any) => u._id !== meuId);
+		let lista = usuarios.data.filter((u) => u._id !== meuId);
 
 		// Aplicar busca
 		if (searchQuery.trim()) {
 			const query = searchQuery.toLowerCase();
 			lista = lista.filter(
-        (u: any) =>
+				(u) =>
 					u.nome?.toLowerCase().includes(query) ||
 					u.email?.toLowerCase().includes(query) ||
-          u.matricula?.toLowerCase().includes(query),
+					u.matricula?.toLowerCase().includes(query)
 			);
 		}
 
 		// Ordenar: online primeiro, depois por nome
-    return lista.sort((a: any, b: any) => {
+		return lista.sort((a, b) => {
 			const statusOrder = {
 				online: 0,
 				ausente: 1,
 				externo: 2,
 				em_reuniao: 3,
-        offline: 4,
+				offline: 4
 			};
-      const statusA =
-        statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
-      const statusB =
-        statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
+			const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
+			const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
 
 			if (statusA !== statusB) return statusA - statusB;
-      return (a.nome || "").localeCompare(b.nome || "");
+			return (a.nome || '').localeCompare(b.nome || '');
 		});
 	});
 
-  function toggleUserSelection(userId: string) {
+	function toggleUserSelection(userId: Id<'usuarios'>) {
 		if (selectedUsers.includes(userId)) {
 			selectedUsers = selectedUsers.filter((id) => id !== userId);
 		} else {
@@ -80,18 +79,18 @@
 		}
 	}
 
-  async function handleCriarIndividual(userId: string) {
+	async function handleCriarIndividual(userId: Id<'usuarios'>) {
 		try {
 			loading = true;
 			const conversaId = await client.mutation(api.chat.criarConversa, {
-        tipo: "individual",
-        participantes: [userId as any],
+				tipo: 'individual',
+				participantes: [userId]
 			});
 			abrirConversa(conversaId);
 			onClose();
 		} catch (error) {
-      console.error("Erro ao criar conversa:", error);
-      alert("Erro ao criar conversa");
+			console.error('Erro ao criar conversa:', error);
+			alert('Erro ao criar conversa');
 		} finally {
 			loading = false;
 		}
@@ -99,29 +98,27 @@
 
 	async function handleCriarGrupo() {
 		if (selectedUsers.length < 2) {
-      alert("Selecione pelo menos 2 participantes");
+			alert('Selecione pelo menos 2 participantes');
 			return;
 		}
 
 		if (!groupName.trim()) {
-      alert("Digite um nome para o grupo");
+			alert('Digite um nome para o grupo');
 			return;
 		}
 
 		try {
 			loading = true;
 			const conversaId = await client.mutation(api.chat.criarConversa, {
-        tipo: "grupo",
-        participantes: selectedUsers as any,
-        nome: groupName.trim(),
+				tipo: 'grupo',
+				participantes: selectedUsers,
+				nome: groupName.trim()
 			});
 			abrirConversa(conversaId);
 			onClose();
-    } catch (error: any) {
-      console.error("Erro ao criar grupo:", error);
-      const mensagem =
-        error?.message || error?.data || "Erro desconhecido ao criar grupo";
-      alert(`Erro ao criar grupo: ${mensagem}`);
+		} catch (error) {
+			console.error('Erro ao criar grupo:', error);
+			alert('Erro ao criar grupo');
 		} finally {
 			loading = false;
 		}
@@ -129,12 +126,12 @@
 
 	async function handleCriarSalaReuniao() {
 		if (selectedUsers.length < 1) {
-      alert("Selecione pelo menos 1 participante");
+			alert('Selecione pelo menos 1 participante');
 			return;
 		}
 
 		if (!salaReuniaoName.trim()) {
-      alert("Digite um nome para a sala de reunião");
+			alert('Digite um nome para a sala de reunião');
 			return;
 		}
 
@@ -142,168 +139,147 @@
 			loading = true;
 			const conversaId = await client.mutation(api.chat.criarSalaReuniao, {
 				nome: salaReuniaoName.trim(),
-        participantes: selectedUsers as any,
+				participantes: selectedUsers
 			});
 			abrirConversa(conversaId);
 			onClose();
-    } catch (error: any) {
-      console.error("Erro ao criar sala de reunião:", error);
-      const mensagem =
-        error?.message ||
-        error?.data ||
-        "Erro desconhecido ao criar sala de reunião";
-      alert(`Erro ao criar sala de reunião: ${mensagem}`);
+		} catch (error) {
+			console.error('Erro ao criar sala de reunião:', error);
+			alert('Erro ao criar sala de reunião');
 		} finally {
 			loading = false;
 		}
 	}
 </script>
 
-<dialog
-  class="modal modal-open"
-  onclick={(e) => e.target === e.currentTarget && onClose()}
->
-  <div
-    class="modal-box max-w-2xl max-h-[85vh] flex flex-col p-0"
-    onclick={(e) => e.stopPropagation()}
-  >
+<dialog class="modal modal-open">
+	<div class="modal-box flex max-h-[85vh] max-w-2xl flex-col p-0">
 		<!-- Header -->
-    <div
-      class="flex items-center justify-between px-6 py-4 border-b border-base-300"
-    >
-      <h2 class="text-2xl font-bold flex items-center gap-2">
-        <MessageSquare class="w-6 h-6 text-primary" />
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<h2 class="flex items-center gap-2 text-2xl font-bold">
+				<MessageSquare class="text-primary h-6 w-6" />
 				Nova Conversa
 			</h2>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
 			</button>
 		</div>
 
 		<!-- Tabs melhoradas -->
-    <div class="tabs tabs-boxed p-4 bg-base-200/50">
+		<div class="tabs tabs-boxed bg-base-200/50 p-4">
 			<button
 				type="button"
 				class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "individual"
-            ? "tab-active bg-primary text-primary-content font-semibold"
-            : "hover:bg-base-300"
+					activeTab === 'individual'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
 				}`}
 				onclick={() => {
-          activeTab = "individual";
+					activeTab = 'individual';
 					selectedUsers = [];
-          searchQuery = "";
+					searchQuery = '';
 				}}
 			>
-        <User class="w-4 h-4" />
+				<User class="h-4 w-4" />
 				Individual
 			</button>
 			<button
 				type="button"
 				class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "grupo"
-            ? "tab-active bg-primary text-primary-content font-semibold"
-            : "hover:bg-base-300"
+					activeTab === 'grupo'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
 				}`}
 				onclick={() => {
-          activeTab = "grupo";
+					activeTab = 'grupo';
 					selectedUsers = [];
-          searchQuery = "";
+					searchQuery = '';
 				}}
 			>
-        <Users class="w-4 h-4" />
+				<Users class="h-4 w-4" />
 				Grupo
 			</button>
 			<button
 				type="button"
 				class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "sala_reuniao"
-            ? "tab-active bg-primary text-primary-content font-semibold"
-            : "hover:bg-base-300"
+					activeTab === 'sala_reuniao'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
 				}`}
 				onclick={() => {
-          activeTab = "sala_reuniao";
+					activeTab = 'sala_reuniao';
 					selectedUsers = [];
-          searchQuery = "";
+					searchQuery = '';
 				}}
 			>
-        <Video class="w-4 h-4" />
+				<Video class="h-4 w-4" />
 				Sala de Reunião
 			</button>
 		</div>
 
 		<!-- Content -->
 		<div class="flex-1 overflow-y-auto px-6 py-4">
-      {#if activeTab === "grupo"}
+			{#if activeTab === 'grupo'}
 				<!-- Criar Grupo -->
 				<div class="mb-4">
-          <label class="label pb-2">
+					<div class="label pb-2">
 						<span class="label-text font-semibold">Nome do Grupo</span>
-          </label>
+					</div>
 					<input
 						type="text"
 						placeholder="Digite o nome do grupo..."
-            class="input input-bordered w-full focus:input-primary transition-colors"
+						class="input input-bordered focus:input-primary w-full transition-colors"
 						bind:value={groupName}
 						maxlength="50"
 					/>
 				</div>
 
 				<div class="mb-3">
-          <label class="label pb-2">
+					<div class="label pb-2">
 						<span class="label-text font-semibold">
 							Participantes {selectedUsers.length > 0
-                ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? "s" : ""})`
-                : ""}
+								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
+								: ''}
 						</span>
-          </label>
 					</div>
-      {:else if activeTab === "sala_reuniao"}
+				</div>
+			{:else if activeTab === 'sala_reuniao'}
 				<!-- Criar Sala de Reunião -->
 				<div class="mb-4">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">Nome da Sala de Reunião</span
+					<div class="label pb-2">
+						<span class="label-text font-semibold">Nome da Sala de Reunião</span>
+						<span class="label-text-alt text-primary font-medium">👑 Você será o administrador</span
 						>
-            <span class="label-text-alt text-primary font-medium"
-              >👑 Você será o administrador</span
-            >
-          </label>
+					</div>
 					<input
 						type="text"
 						placeholder="Digite o nome da sala de reunião..."
-            class="input input-bordered w-full focus:input-primary transition-colors"
+						class="input input-bordered focus:input-primary w-full transition-colors"
 						bind:value={salaReuniaoName}
 						maxlength="50"
 					/>
 				</div>
 
 				<div class="mb-3">
-          <label class="label pb-2">
+					<div class="label pb-2">
 						<span class="label-text font-semibold">
 							Participantes {selectedUsers.length > 0
-                ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? "s" : ""})`
-                : ""}
+								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
+								: ''}
 						</span>
-          </label>
+					</div>
 				</div>
 			{/if}
 
 			<!-- Search melhorado -->
-      <div class="mb-4 relative">
+			<div class="relative mb-4">
 				<input
 					type="text"
 					placeholder="Buscar usuários por nome, email ou matrícula..."
-          class="input input-bordered w-full pl-10 focus:input-primary transition-colors"
+					class="input input-bordered focus:input-primary w-full pl-10 transition-colors"
 					bind:value={searchQuery}
 				/>
-        <Search
-          class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40"
-        />
+				<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
 			</div>
 
 			<!-- Lista de usuários -->
@@ -313,14 +289,14 @@
 						{@const isSelected = selectedUsers.includes(usuario._id)}
 						<button
 							type="button"
-              class={`w-full text-left px-4 py-3 rounded-xl border-2 transition-all duration-200 flex items-center gap-3 ${
+							class={`flex w-full items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition-all duration-200 ${
 								isSelected
-                  ? "border-primary bg-primary/10 shadow-md scale-[1.02]"
-                  : "border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm"
-              } ${loading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+									? 'border-primary bg-primary/10 scale-[1.02] shadow-md'
+									: 'border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm'
+							} ${loading ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
 							onclick={() => {
 								if (loading) return;
-                if (activeTab === "individual") {
+								if (activeTab === 'individual') {
 									handleCriarIndividual(usuario._id);
 								} else {
 									toggleUserSelection(usuario._id);
@@ -336,29 +312,23 @@
 									nome={usuario.nome}
 									size="md"
 								/>
-                <div class="absolute -bottom-1 -right-1">
-                  <UserStatusBadge
-                    status={usuario.statusPresenca || "offline"}
-                    size="sm"
-                  />
+								<div class="absolute -right-1 -bottom-1">
+									<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
 								</div>
 							</div>
 
 							<!-- Info -->
-              <div class="flex-1 min-w-0">
-                <p class="font-semibold text-base-content truncate">
+							<div class="min-w-0 flex-1">
+								<p class="text-base-content truncate font-semibold">
 									{usuario.nome}
 								</p>
-                <p class="text-sm text-base-content/60 truncate">
-                  {usuario.setor ||
-                    usuario.email ||
-                    usuario.matricula ||
-                    "Sem informações"}
+								<p class="text-base-content/60 truncate text-sm">
+									{usuario.setor || usuario.email || usuario.matricula || 'Sem informações'}
 								</p>
 							</div>
 
 							<!-- Checkbox melhorado (para grupo e sala de reunião) -->
-              {#if activeTab === "grupo" || activeTab === "sala_reuniao"}
+							{#if activeTab === 'grupo' || activeTab === 'sala_reuniao'}
 								<div class="shrink-0">
 									<input
 										type="checkbox"
@@ -369,28 +339,23 @@
 								</div>
 							{:else}
 								<!-- Ícone de seta para individual -->
-                <ChevronRight class="w-5 h-5 text-base-content/40" />
+								<ChevronRight class="text-base-content/40 h-5 w-5" />
 							{/if}
 						</button>
 					{/each}
 				{:else if !usuarios?.data}
 					<div class="flex flex-col items-center justify-center py-12">
-            <span class="loading loading-spinner loading-lg text-primary"
-            ></span>
-            <p class="mt-4 text-base-content/60">Carregando usuários...</p>
+						<span class="loading loading-spinner loading-lg text-primary"></span>
+						<p class="text-base-content/60 mt-4">Carregando usuários...</p>
 					</div>
 				{:else}
-          <div
-            class="flex flex-col items-center justify-center py-12 text-center"
-          >
-            <UserX class="w-16 h-16 text-base-content/30 mb-4" />
+					<div class="flex flex-col items-center justify-center py-12 text-center">
+						<UserX class="text-base-content/30 mb-4 h-16 w-16" />
 						<p class="text-base-content/70 font-medium">
-              {searchQuery.trim()
-                ? "Nenhum usuário encontrado"
-                : "Nenhum usuário disponível"}
+							{searchQuery.trim() ? 'Nenhum usuário encontrado' : 'Nenhum usuário disponível'}
 						</p>
 						{#if searchQuery.trim()}
-              <p class="text-sm text-base-content/50 mt-2">
+							<p class="text-base-content/50 mt-2 text-sm">
 								Tente buscar por nome, email ou matrícula
 							</p>
 						{/if}
@@ -400,11 +365,11 @@
 		</div>
 
 		<!-- Footer (para grupo e sala de reunião) -->
-    {#if activeTab === "grupo"}
-      <div class="px-6 py-4 border-t border-base-300 bg-base-200/50">
+		{#if activeTab === 'grupo'}
+			<div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
 				<button
 					type="button"
-          class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
+					class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
 					onclick={handleCriarGrupo}
 					disabled={loading || selectedUsers.length < 2 || !groupName.trim()}
 				>
@@ -412,36 +377,34 @@
 						<span class="loading loading-spinner"></span>
 						Criando grupo...
 					{:else}
-            <Plus class="w-5 h-5" />
+						<Plus class="h-5 w-5" />
 						Criar Grupo
 					{/if}
 				</button>
-        {#if selectedUsers.length < 2 && activeTab === "grupo"}
-          <p class="text-xs text-base-content/50 text-center mt-2">
+				{#if selectedUsers.length < 2 && activeTab === 'grupo'}
+					<p class="text-base-content/50 mt-2 text-center text-xs">
 						Selecione pelo menos 2 participantes
 					</p>
 				{/if}
 			</div>
-    {:else if activeTab === "sala_reuniao"}
-      <div class="px-6 py-4 border-t border-base-300 bg-base-200/50">
+		{:else if activeTab === 'sala_reuniao'}
+			<div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
 				<button
 					type="button"
-          class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
+					class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
 					onclick={handleCriarSalaReuniao}
-          disabled={loading ||
-            selectedUsers.length < 1 ||
-            !salaReuniaoName.trim()}
+					disabled={loading || selectedUsers.length < 1 || !salaReuniaoName.trim()}
 				>
 					{#if loading}
 						<span class="loading loading-spinner"></span>
 						Criando sala...
 					{:else}
-            <Plus class="w-5 h-5" />
+						<Plus class="h-5 w-5" />
 						Criar Sala de Reunião
 					{/if}
 				</button>
-        {#if selectedUsers.length < 1 && activeTab === "sala_reuniao"}
-          <p class="text-xs text-base-content/50 text-center mt-2">
+				{#if selectedUsers.length < 1 && activeTab === 'sala_reuniao'}
+					<p class="text-base-content/50 mt-2 text-center text-xs">
 						Selecione pelo menos 1 participante
 					</p>
 				{/if}

apps/web/src/lib/components/ti/AlertConfigModal.svelte

@@ -1,24 +1,20 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
 	let { onClose }: { onClose: () => void } = $props();
 
 	const client = useConvexClient();
-  const alertasQuery = useQuery(api.monitoramento.listarAlertas, {});
-  const alertas = $derived.by(() => {
-    if (!alertasQuery) return [];
-    // O useQuery pode retornar o array diretamente ou em .data
-    if (Array.isArray(alertasQuery)) return alertasQuery;
-    return alertasQuery.data ?? [];
-  });
+	const alertas = useQuery(api.monitoramento.listarAlertas, {});
+
+	$inspect(alertas);
 
 	// Estado para novo alerta
-  let editingAlertId = $state<Id<"alertConfigurations"> | null>(null);
-  let metricName = $state("cpuUsage");
+	let editingAlertId = $state<Id<'alertConfigurations'> | null>(null);
+	let metricName = $state('cpuUsage');
 	let threshold = $state(80);
-  let operator = $state<">" | "<" | ">=" | "<=" | "==">(">");
+	let operator = $state<'>' | '<' | '>=' | '<=' | '=='>('>');
 	let enabled = $state(true);
 	let notifyByEmail = $state(false);
 	let notifyByChat = $state(true);
@@ -26,29 +22,29 @@
 	let showForm = $state(false);
 
 	const metricOptions = [
-    { value: "cpuUsage", label: "Uso de CPU (%)" },
-    { value: "memoryUsage", label: "Uso de Memória (%)" },
-    { value: "networkLatency", label: "Latência de Rede (ms)" },
-    { value: "storageUsed", label: "Armazenamento Usado (%)" },
-    { value: "usuariosOnline", label: "Usuários Online" },
-    { value: "mensagensPorMinuto", label: "Mensagens por Minuto" },
-    { value: "tempoRespostaMedio", label: "Tempo de Resposta (ms)" },
-    { value: "errosCount", label: "Contagem de Erros" },
+		{ value: 'cpuUsage', label: 'Uso de CPU (%)' },
+		{ value: 'memoryUsage', label: 'Uso de Memória (%)' },
+		{ value: 'networkLatency', label: 'Latência de Rede (ms)' },
+		{ value: 'storageUsed', label: 'Armazenamento Usado (%)' },
+		{ value: 'usuariosOnline', label: 'Usuários Online' },
+		{ value: 'mensagensPorMinuto', label: 'Mensagens por Minuto' },
+		{ value: 'tempoRespostaMedio', label: 'Tempo de Resposta (ms)' },
+		{ value: 'errosCount', label: 'Contagem de Erros' }
 	];
 
 	const operatorOptions = [
-    { value: ">", label: "Maior que (>)" },
-    { value: ">=", label: "Maior ou igual (≥)" },
-    { value: "<", label: "Menor que (<)" },
-    { value: "<=", label: "Menor ou igual (≤)" },
-    { value: "==", label: "Igual a (=)" },
+		{ value: '>', label: 'Maior que (>)' },
+		{ value: '>=', label: 'Maior ou igual (≥)' },
+		{ value: '<', label: 'Menor que (<)' },
+		{ value: '<=', label: 'Menor ou igual (≤)' },
+		{ value: '==', label: 'Igual a (=)' }
 	];
 
 	function resetForm() {
 		editingAlertId = null;
-    metricName = "cpuUsage";
+		metricName = 'cpuUsage';
 		threshold = 80;
-    operator = ">";
+		operator = '>';
 		enabled = true;
 		notifyByEmail = false;
 		notifyByChat = true;
@@ -76,33 +72,31 @@
 				operator,
 				enabled,
 				notifyByEmail,
-        notifyByChat,
+				notifyByChat
 			});
 
 			resetForm();
 		} catch (error) {
-      console.error("Erro ao salvar alerta:", error);
-      alert("Erro ao salvar alerta. Tente novamente.");
+			console.error('Erro ao salvar alerta:', error);
+			alert('Erro ao salvar alerta. Tente novamente.');
 		} finally {
 			saving = false;
 		}
 	}
 
-  async function deleteAlert(alertId: Id<"alertConfigurations">) {
-    if (!confirm("Tem certeza que deseja deletar este alerta?")) return;
+	async function deleteAlert(alertId: Id<'alertConfigurations'>) {
+		if (!confirm('Tem certeza que deseja deletar este alerta?')) return;
 
 		try {
 			await client.mutation(api.monitoramento.deletarAlerta, { alertId });
 		} catch (error) {
-      console.error("Erro ao deletar alerta:", error);
-      alert("Erro ao deletar alerta. Tente novamente.");
+			console.error('Erro ao deletar alerta:', error);
+			alert('Erro ao deletar alerta. Tente novamente.');
 		}
 	}
 
 	function getMetricLabel(metricName: string): string {
-    return (
-      metricOptions.find((m) => m.value === metricName)?.label || metricName
-    );
+		return metricOptions.find((m) => m.value === metricName)?.label || metricName;
 	}
 
 	function getOperatorLabel(op: string): string {
@@ -111,29 +105,23 @@
 </script>
 
 <dialog class="modal modal-open">
-  <div class="modal-box max-w-4xl bg-linear-to-br from-base-100 to-base-200">
+	<div class="modal-box from-base-100 to-base-200 max-w-4xl bg-linear-to-br">
 		<button
 			type="button"
-      class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+			class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
 			onclick={onClose}
 		>
 			✕
 		</button>
 
-    <h3 class="font-bold text-3xl text-primary mb-2">
-      ⚙️ Configuração de Alertas
-    </h3>
+		<h3 class="text-primary mb-2 text-3xl font-bold">⚙️ Configuração de Alertas</h3>
 		<p class="text-base-content/60 mb-6">
 			Configure alertas personalizados para monitoramento do sistema
 		</p>
 
 		<!-- Botão Novo Alerta -->
 		{#if !showForm}
-      <button
-        type="button"
-        class="btn btn-primary mb-6"
-        onclick={() => (showForm = true)}
-      >
+			<button type="button" class="btn btn-primary mb-6" onclick={() => (showForm = true)}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="h-5 w-5"
@@ -154,13 +142,13 @@
 
 		<!-- Formulário de Alerta -->
 		{#if showForm}
-      <div class="card bg-base-100 shadow-xl mb-6 border-2 border-primary/20">
+			<div class="card bg-base-100 border-primary/20 mb-6 border-2 shadow-xl">
 				<div class="card-body">
 					<h4 class="card-title text-xl">
-            {editingAlertId ? "Editar Alerta" : "Novo Alerta"}
+						{editingAlertId ? 'Editar Alerta' : 'Novo Alerta'}
 					</h4>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+					<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
 						<!-- Métrica -->
 						<div class="form-control">
 							<label class="label" for="metric">
@@ -171,7 +159,7 @@
 								class="select select-bordered select-primary"
 								bind:value={metricName}
 							>
-                {#each metricOptions as option}
+								{#each metricOptions as option (option.value)}
 									<option value={option.value}>{option.label}</option>
 								{/each}
 							</select>
@@ -187,7 +175,7 @@
 								class="select select-bordered select-primary"
 								bind:value={operator}
 							>
-                {#each operatorOptions as option}
+								{#each operatorOptions as option (option.value)}
 									<option value={option.value}>{option.label}</option>
 								{/each}
 							</select>
@@ -212,11 +200,7 @@
 						<div class="form-control">
 							<label class="label cursor-pointer justify-start gap-4">
 								<span class="label-text font-semibold">Alerta Ativo</span>
-                <input
-                  type="checkbox"
-                  class="toggle toggle-primary"
-                  bind:checked={enabled}
-                />
+								<input type="checkbox" class="toggle toggle-primary" bind:checked={enabled} />
 							</label>
 						</div>
 					</div>
@@ -233,7 +217,7 @@
 							<span class="label-text">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 inline mr-2"
+									class="mr-2 inline h-5 w-5"
 									fill="none"
 									viewBox="0 0 24 24"
 									stroke="currentColor"
@@ -258,7 +242,7 @@
 							<span class="label-text">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 inline mr-2"
+									class="mr-2 inline h-5 w-5"
 									fill="none"
 									viewBox="0 0 24 24"
 									stroke="currentColor"
@@ -281,7 +265,7 @@
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
 							viewBox="0 0 24 24"
-              class="stroke-current shrink-0 w-6 h-6"
+							class="h-6 w-6 shrink-0 stroke-current"
 						>
 							<path
 								stroke-linecap="round"
@@ -301,13 +285,8 @@
 					</div>
 
 					<!-- Botões -->
-          <div class="card-actions justify-end mt-4">
-            <button
-              type="button"
-              class="btn btn-ghost"
-              onclick={resetForm}
-              disabled={saving}
-            >
+					<div class="card-actions mt-4 justify-end">
+						<button type="button" class="btn btn-ghost" onclick={resetForm} disabled={saving}>
 							Cancelar
 						</button>
 						<button
@@ -345,9 +324,9 @@
 		<!-- Lista de Alertas -->
 		<div class="divider">Alertas Configurados</div>
 
-    {#if alertas.length > 0}
+		{#if alertas.data && alertas.data.length > 0}
 			<div class="overflow-x-auto">
-        <table class="table table-zebra">
+				<table class="table-zebra table">
 					<thead>
 						<tr>
 							<th>Métrica</th>
@@ -358,8 +337,8 @@
 						</tr>
 					</thead>
 					<tbody>
-            {#each alertas as alerta}
-              <tr class={!alerta.enabled ? "opacity-50" : ""}>
+						{#each alertas.data as alerta (alerta._id)}
+							<tr class={!alerta.enabled ? 'opacity-50' : ''}>
 								<td>
 									<div class="font-semibold">
 										{getMetricLabel(alerta.metricName)}
@@ -423,6 +402,7 @@
 								<td>
 									<div class="flex gap-2">
 										<button
+											title="Editar Alerta"
 											type="button"
 											class="btn btn-ghost btn-xs"
 											onclick={() => editAlert(alerta)}
@@ -443,6 +423,7 @@
 											</svg>
 										</button>
 										<button
+											title="Deletar Alerta"
 											type="button"
 											class="btn btn-ghost btn-xs text-error"
 											onclick={() => deleteAlert(alerta._id)}
@@ -475,7 +456,7 @@
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
-          class="stroke-info shrink-0 w-6 h-6"
+					class="stroke-info h-6 w-6 shrink-0"
 				>
 					<path
 						stroke-linecap="round"
@@ -484,9 +465,7 @@
 						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 					></path>
 				</svg>
-        <span
-          >Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span
-        >
+				<span>Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span>
 			</div>
 		{/if}
 

packages/backend/convex/monitoramento.ts

@@ -139,25 +139,6 @@ export const configurarAlerta = mutation({
  */
 export const listarAlertas = query({
 	args: {},
-	returns: v.array(
-		v.object({
-			_id: v.id('alertConfigurations'),
-			metricName: v.string(),
-			threshold: v.number(),
-			operator: v.union(
-				v.literal('>'),
-				v.literal('<'),
-				v.literal('>='),
-				v.literal('<='),
-				v.literal('==')
-			),
-			enabled: v.boolean(),
-			notifyByEmail: v.boolean(),
-			notifyByChat: v.boolean(),
-			createdBy: v.id('usuarios'),
-			lastModified: v.number()
-		})
-	),
 	handler: async (ctx) => {
 		const alertas = await ctx.db.query('alertConfigurations').collect();
 		return alertas;