Componentes¶
Peças reutilizadas e como devem se comportar. O que está aqui é o contrato; o desenho detalhado está nos handoffs.
Cortina lateral¶
O contêiner de todo cadastro e edição. Ancorada à direita, empilhável, com header, corpo e footer fixos. Ver Padrões de interface.
| Token | Valor |
|---|---|
| Overlay | rgba(25,23,21,0.55) |
| Raio | 16px |
| Label | 10px, caixa alta |
| Input | 10px por 14px, raio 10px |
| Foco | #af8b61 |
| Altura mínima de aba | 360px |
Aviso e confirmação¶
| Componente | Para que |
|---|---|
KPToast |
Aviso passageiro |
KPPush |
Notificação |
useKPAlert |
Confirmação que interrompe |
Nunca alert() nem confirm() nativos.
Ícone¶
Componente Icon, com nomes canônicos. Não colar SVG na tela nem trazer biblioteca nova.
Cartão de conversa¶
Avatar, nome, prévia da última mensagem e o estado da conversa. O avatar cai nas iniciais quando a foto não está disponível, e esse fallback é silencioso por desenho.
Avatar nas iniciais pode ser defeito de servidor
A tela cai nas iniciais ao receber 404 da rota de foto, e 404 é também o que ela recebe quando o arquivo existe mas o servidor web não consegue lê-lo. Iniciais em toda a lista é sinal de problema de permissão, não de contatos sem foto. Ver Ambientes e deploy.
Bolha de mensagem¶
Uma bolha por mensagem, com o corpo correspondente ao tipo. Reação não é bolha: é linha discreta. Tratá-la como mensagem é o que produzia bolha vazia.
Player de áudio¶
Mostra a duração antes de tocar e o tempo corrente enquanto toca. Onde o navegador não sabe a duração de um Ogg sem cabeçalho, a tela mostra um travessão em vez de mentir um número.
Visualizador de anexo¶
Modal centralizado, em tela cheia, para PDF, imagem e vídeo. PDF usa o visualizador nativo do navegador num iframe: páginas e zoom de graça, enquanto uma biblioteca custaria cerca de 1 MB pelo mesmo resultado. Word e Excel continuam baixando.
Gravador de nota de voz¶
Aparece no composer quando não há texto escrito nem arquivo já anexado. Permite ouvir antes de enviar.
Gravação exige contexto seguro
O navegador só libera o microfone em HTTPS. Testar o gravador no dev em texto claro não funciona.
Seta de etapa comercial¶
Indicador numerado com a etapa nomeada. Sempre separado do estado da conversa: os dois são campos distintos e nunca aparecem no mesmo elemento.