Uma caixa de e-mail com pastas, estado de não lida, seleção múltipla com ações em lote, pesquisa, painel de leitura, estados vazios e navegação pelo teclado.
Uma caixa de entrada em três painéis: pastas, lista de conversas e mensagem. Ela segue a própria largura, não a da janela: no tablet as pastas viram um select acima da lista, e no celular a lista e a mensagem se revezam na tela. Teste cada largura com o seletor acima da visualização.
minimal · light · #3fa34d
Caixa de entrada
8 conversas, 3 não lidas
↑↓ navegar · X selecionar · Enter abrir
Guia da marca, versão 3
Design
MC
Marina Costamarina@lumen.studio · para mim
09:41
Oi! Os novos tokens de cor e a escala tipográfica que combinamos na terça estão na pasta compartilhada, junto com as versões do logo para fundo escuro.
A principal mudança em relação à versão 2 é o destaque: escurecemos um tom para os links passarem de 4,5:1 nos cards coloridos. Você consegue revisar as telas do checkout até sexta?
Não lidas. As conversas não lidas têm remetente e assunto em negrito e uma barra na cor de destaque. Abrir uma conversa marca como lida, e as contagens das pastas se atualizam.
Seleção. Cada linha tem uma caixa de seleção, e a que fica acima da lista seleciona todas as linhas visíveis (mostra um traço quando só parte está marcada). A barra de ferramentas age sobre a seleção: Arquivar, Excluir e Marcar como lida ou não lida. Em Arquivo e Lixeira, Arquivar vira Mover para a caixa de entrada.
Desfazer. Mover conversas mostra um toast com um botão Desfazer, que devolve tudo para onde estava.
Pesquisa. O campo filtra a pasta atual por remetente, assunto e prévia enquanto você digita, sem ligar para acentos ("julia" encontra "Júlia"). Quando nada combina, um estado vazio avisa e oferece limpar a pesquisa.
Painel de leitura. Com espaço para os dois painéis, a primeira conversa já começa aberta, e arquivar ou excluir a conversa aberta abre a seguinte. A mensagem mostra remetente, data e texto, com as mesmas ações numa barra e uma caixa de resposta que não deixa enviar vazio.
Escrever. Escrever (na coluna das pastas, ou acima da lista em telas menores) abre uma mensagem nova no painel de leitura; ela confere o e-mail do destinatário e se a mensagem não está vazia.
Pastas vazias. A caixa de entrada vazia diz que está tudo em dia; Arquivo e Lixeira dizem o que vai parar ali.
A lista usa um único ponto de Tab: Tab entra na lista uma vez, na última linha visitada. ↑ e ↓ passam de linha em linha, Home e End vão para as pontas, X seleciona a linha em foco e Enter abre. Com teclado e espaço sobrando, as teclas aparecem abaixo da lista, ligadas a ela por aria-describedby; em telas de toque e no celular a dica some. A linha em foco ganha o anel de foco do estilo.
As linhas não lidas começam com um "não lida" oculto, para o leitor de tela anunciar o estado e não só o negrito. A conversa aberta tem aria-current.
Cada caixa de seleção leva o nome da conversa ("Selecionar Marina Costa: Guia da marca, versão 3"), e os botões de ícone das barras têm nome e tooltip.
Quando linhas somem (arquivadas ou excluídas), o foco vai para o título da pasta em vez de se perder. No celular, abrir uma mensagem leva o foco ao assunto, e Voltar devolve o foco à linha.
A contagem de selecionadas e os toasts são anunciados por regiões dinâmicas (live regions).
A aba Código mostra a tela inteira em um arquivo, com @camaleo/react e lucide-react como únicas dependências. As mensagens são dados fixos e a pasta de cada uma fica no estado local; troque os dois pela sua API. O hook useWidth no topo é o que faz o layout seguir a própria caixa, então ele também funciona dentro de um painel redimensionável.