💬 Sistema de Mensagens — Histórico de Conversas e UI de Chat

[YnotMax]

💬 Sistema de Mensagens — Histórico de Conversas e UI de Chat

Resumo

Transforma a caixa de entrada linear em uma interface de chat moderna com histórico por conversa, no padrão universal de apps de mensagens (WhatsApp, Messenger, Slack), mantendo a identidade visual neo-brutalista do Match Tech.

---

Motivação

O sistema anterior mostrava apenas as mensagens recebidas, sem histórico de conversa com o remetente. O usuário ao responder não conseguia ver o contexto da mensagem original, tornando a comunicação difícil de acompanhar. A terminologia "Sinal" também era subjetiva e pouco clara para novos usuários.

---

O que mudou

🏗️ Arquitetura — Camada de Dados

messageRepository.ts — refatorado com novos métodos:

• makeConversationId(uidA, uidB) — gera um ID determinístico [uid1, uid2].sort().join('_'), garantindo que ambos os usuários compartilhem a mesma thread, independente de quem iniciou.
• subscribeToConversations(userId) — substitui subscribeToInbox. Executa duas queries Firestore paralelas em tempo real (mensagens enviadas + recebidas), mescla e agrupa localmente por conversa.
• subscribeToThread(conversationId) — escuta em tempo real todas as mensagens de uma conversa específica, ordenadas cronologicamente.
• markConversationAsRead(conversationId, userId) — marca em batch todas as mensagens não lidas de uma conversa como lidas.
• subscribeToInbox e subscribeToUnreadCount mantidos para retrocompatibilidade com o badge da navbar.

messages.types.ts — novo tipo Conversation:

interface Conversation {
  id: string;           // "[uid1]_[uid2]" determinístico
  partnerId: string;
  partnerName: string;
  lastMessage: string;
  lastMessageAt: Timestamp | null;
  unreadCount: number;
  messages: Message[];
}

Sem migração de banco de dados. A coleção messages permanece igual. O conversationId é adicionado a novas mensagens e o agrupamento é feito no client.

---

🎨 UI — Novos Componentes

ConversationList.tsx (novo)

• Painel esquerdo com lista de conversas ativas
• Badge de mensagens não lidas por conversa
• Timestamp relativo (hora se hoje, data se anterior)
• Estado de loading com skeleton e estado vazio com CTA para Descobrir
• Destaque visual (fundo neo-lime) na conversa ativa

ChatThread.tsx (novo)

• Painel direito com histórico de mensagens em ordem cronológica
• Balões diferenciados: neo-lime (suas mensagens, à direita) / branco (recebidas, à esquerda)
• Separadores de data (HOJE / ONTEM / DD/MM/AAAA)
• Confirmação de leitura estilo WhatsApp: ✓ (enviado) / ✓✓ (lido, em verde)
• Auto-scroll para a mensagem mais recente
• Textarea auto-expansível com Enter para enviar e Shift+Enter para quebra de linha
• Botão de exclusão com modal de confirmação
• Botão "Voltar" para navegação mobile

EmptyChat.tsx (novo)

• Placeholder exibido no desktop quando nenhuma conversa está selecionada
• CTA linkando para /discover

---

📄 Páginas Modificadas

MessagesPage.tsx — reescrita completa:

• Layout de duas colunas no desktop (lista à esquerda, thread à direita)
• Layout de coluna única no mobile com navegação entre lista e thread
• Suporte a URL param ?with=userId — abre diretamente a conversa com aquele usuário (usado pelo fluxo de Descoberta)
• Marca a conversa como lida automaticamente ao abri-la

SendMessageModal.tsx — atualizado:

• Após envio bem-sucedido, redireciona para /messages?with={receiverId} para o usuário ver a thread iniciada

---

✏️ Copy / UX

• Substituição da terminologia "Sinal" por "Mensagem" em toda a interface:
  • MANDAR SINAL 💬 → MANDAR MENSAGEM 💬
  • Mandar Sinal_ → Enviar Mensagem_
  • ENVIAR SINAL ⚡ → ENVIAR MENSAGEM ⚡
  • Sinal enviado com sucesso! → Mensagem enviada com sucesso!
  • um sinal direto para cá → uma mensagem direta para cá

---

Fluxo completo após as mudanças

[Discover] → Clicar "MANDAR MENSAGEM 💬"
    → Modal abre para escrever a primeira mensagem
    → Ao enviar → redireciona para /messages?with={userId}
    → Thread aberta com histórico completo
    → Resposta enviada inline na própria thread ✓

---

Arquivos alterados

Arquivo	Tipo
src/features/messages/components/ChatThread.tsx	✨ Novo
src/features/messages/components/ConversationList.tsx	✨ Novo
src/features/messages/components/EmptyChat.tsx	✨ Novo
src/features/messages/model/messages.types.ts	🔧 Modificado
src/infrastructure/firebase/messageRepository.ts	🔧 Modificado
src/features/messages/pages/MessagesPage.tsx	🔧 Modificado
src/features/messages/components/SendMessageModal.tsx	🔧 Modificado
src/features/discover/pages/DiscoverPage.tsx	🔧 Modificado
src/features/discover/components/ProfilesGrid.tsx	🔧 Modificado
src/shared/components/ui/ProfileCard.tsx	🔧 Modificado

---

Checklist

• Typecheck (tsc --noEmit) passando sem erros
• Testes (vitest run) — 22/22 passando
• ESLint sem warnings
• Sem migração de dados necessária
• Retrocompatibilidade com badge de não lidas na navbar mantida
• Responsivo: desktop (2 colunas) e mobile (1 coluna com navegação)

---

Issues relacionadas

• Resolve: sistema de mensagens sem histórico de conversa
• Relacionado ao fluxo de contato iniciado na tela de Descoberta (/discover)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
match-tech	Ready	Preview, Comment	Jun 16, 2026 7:23am

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 75a62e53-de8c-4ce4-bdd4-68d12a11a3c0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch tony

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}