feat: enhance chat components with improved accessibility features, including ARIA attributes for search and user status, and implement message length validation and file type checks in message input handling
This commit is contained in:
@@ -25,7 +25,8 @@
|
||||
XCircle,
|
||||
Phone,
|
||||
Video,
|
||||
ChevronDown
|
||||
ChevronDown,
|
||||
Search
|
||||
} from 'lucide-svelte';
|
||||
|
||||
//import { Bell, X, ArrowLeft, LogOut, MoreVertical, Users, Clock, XCircle } from 'lucide-svelte';
|
||||
@@ -46,6 +47,11 @@
|
||||
let showNotificacaoModal = $state(false);
|
||||
let iniciandoChamada = $state(false);
|
||||
let chamadaAtiva = $state<Id<'chamadas'> | null>(null);
|
||||
let showSearch = $state(false);
|
||||
let searchQuery = $state('');
|
||||
let searchResults = $state<Array<any>>([]);
|
||||
let searching = $state(false);
|
||||
let selectedSearchResult = $state<number>(-1);
|
||||
|
||||
// Estados para modal de erro
|
||||
let showErrorModal = $state(false);
|
||||
@@ -276,6 +282,7 @@
|
||||
fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl}
|
||||
nome={conversa()?.outroUsuario?.nome || 'Usuário'}
|
||||
size="md"
|
||||
userId={conversa()?.outroUsuario?._id}
|
||||
/>
|
||||
{:else}
|
||||
<div class="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-full text-xl">
|
||||
@@ -361,6 +368,32 @@
|
||||
|
||||
<!-- Botões de ação -->
|
||||
<div class="flex items-center gap-1">
|
||||
<!-- Botão de Busca -->
|
||||
<button
|
||||
type="button"
|
||||
class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
|
||||
style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2);"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
showSearch = !showSearch;
|
||||
if (!showSearch) {
|
||||
searchQuery = '';
|
||||
searchResults = [];
|
||||
}
|
||||
}}
|
||||
aria-label="Buscar mensagens"
|
||||
title="Buscar mensagens"
|
||||
aria-expanded={showSearch}
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-green-500/0 transition-colors duration-300 group-hover:bg-green-500/10"
|
||||
></div>
|
||||
<Search
|
||||
class="relative z-10 h-5 w-5 text-green-500 transition-transform group-hover:scale-110"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Botões de Chamada -->
|
||||
{#if !chamadaAtual && !chamadaAtiva}
|
||||
<div class="dropdown dropdown-end">
|
||||
@@ -596,6 +629,110 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de Busca (quando ativa) -->
|
||||
{#if showSearch}
|
||||
<div
|
||||
class="border-base-300 bg-base-200 flex items-center gap-2 border-b px-4 py-2"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Search class="text-base-content/50 h-4 w-4" strokeWidth={2} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar mensagens nesta conversa..."
|
||||
class="input input-sm input-bordered flex-1"
|
||||
bind:value={searchQuery}
|
||||
onkeydown={handleSearchKeyDown}
|
||||
aria-label="Buscar mensagens"
|
||||
aria-describedby="search-results-info"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-ghost"
|
||||
onclick={() => {
|
||||
showSearch = false;
|
||||
searchQuery = '';
|
||||
searchResults = [];
|
||||
}}
|
||||
aria-label="Fechar busca"
|
||||
>
|
||||
<X class="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Resultados da Busca -->
|
||||
{#if searchQuery.trim().length >= 2}
|
||||
<div
|
||||
class="border-base-300 bg-base-200 max-h-64 overflow-y-auto border-b"
|
||||
role="listbox"
|
||||
aria-label="Resultados da busca"
|
||||
id="search-results"
|
||||
>
|
||||
{#if searching}
|
||||
<div class="flex items-center justify-center p-4">
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
<span class="text-base-content/50 ml-2 text-sm">Buscando...</span>
|
||||
</div>
|
||||
{:else if searchResults.length > 0}
|
||||
<p id="search-results-info" class="sr-only">
|
||||
{searchResults.length} resultado{searchResults.length !== 1 ? 's' : ''} encontrado{searchResults.length !== 1
|
||||
? 's'
|
||||
: ''}
|
||||
</p>
|
||||
{#each searchResults as resultado, index (resultado._id)}
|
||||
<button
|
||||
type="button"
|
||||
class="hover:bg-base-300 flex w-full items-start gap-3 px-4 py-3 text-left transition-colors {index ===
|
||||
selectedSearchResult
|
||||
? 'bg-primary/10'
|
||||
: ''}"
|
||||
onclick={() => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('scrollToMessage', {
|
||||
detail: { mensagemId: resultado._id }
|
||||
})
|
||||
);
|
||||
showSearch = false;
|
||||
searchQuery = '';
|
||||
}}
|
||||
role="option"
|
||||
aria-selected={index === selectedSearchResult}
|
||||
aria-label="Mensagem de {resultado.remetente?.nome || 'Usuário'}"
|
||||
>
|
||||
<div class="bg-primary/20 flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full">
|
||||
{#if resultado.remetente?.fotoPerfilUrl}
|
||||
<img
|
||||
src={resultado.remetente.fotoPerfilUrl}
|
||||
alt={resultado.remetente.nome}
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<span class="text-xs font-semibold">
|
||||
{resultado.remetente?.nome?.charAt(0).toUpperCase() || 'U'}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-base-content mb-1 text-xs font-semibold">
|
||||
{resultado.remetente?.nome || 'Usuário'}
|
||||
</p>
|
||||
<p class="text-base-content/70 line-clamp-2 text-xs">
|
||||
{resultado.conteudo}
|
||||
</p>
|
||||
<p class="text-base-content/50 mt-1 text-xs">
|
||||
{new Date(resultado.enviadaEm).toLocaleString('pt-BR')}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{:else if searchQuery.trim().length >= 2}
|
||||
<div class="p-4 text-center">
|
||||
<p class="text-base-content/50 text-sm">Nenhuma mensagem encontrada</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Mensagens -->
|
||||
<div class="min-h-0 flex-1 overflow-hidden">
|
||||
<MessageList conversaId={conversaId as Id<'conversas'>} />
|
||||
|
||||
Reference in New Issue
Block a user