Adaptando as listas do WhatsApp para trazer ícones ao Volt

Temos uma melhoria pequena, mas importante, no Volt: agora você pode personalizar suas listas com ícones de emoji. 🎉

O que começou como uma ideia divertida de UX (ajudar os usuários a reconhecer e expressar suas listas com mais facilidade) nos levou a explorar algumas técnicas criativas de codificação por baixo dos panos.

Codificando o emoji no nome da lista

Para manter tudo simples, leve e compatível entre aparelhos (principalmente com o WhatsApp no celular), decidimos colocar o emoji direto no nome da lista.

Um caractere invisível especial funciona como marcador de onde o emoji começa, assim o Volt o exibe corretamente e o WhatsApp também consegue exibi-lo no app nativo.

Escondendo o emoji quando uma lista é arquivada

Quando uma lista é arquivada, o ícone de emoji vira o emoji 📥 (caixa de entrada). Não queríamos poluir a interface com vários emojis.

Mas tem um truque: o emoji original não some. Ele só fica escondido, guardado de forma invisível com caracteres Unicode.

Usamos um esquema de codificação binária:

• \u200B (espaço de largura zero) representa 0
• \u200C (não agregador de largura zero) representa 1

Assim conseguimos guardar e depois recuperar o emoji original, mostrando só o ícone de arquivo enquanto isso. O resultado é uma diferença visual sutil, mas satisfatória, entre listas ativas e arquivadas.

Bônus: uma surpresa com ZWJ 🧩

Durante o desenvolvimento, demos de cara com um bug complicado.
No começo, usávamos o Zero Width Joiner (ZWJ) como marcador invisível de onde o ícone começa. Funcionava bem, até testarmos emojis que também usam ZWJ internamente para formar emojis compostos (como os de família ou as variações de gênero).

O resultado? Alguns ícones se quebravam e apareciam errado.

Para resolver, trocamos o marcador invisível pelo próximo caractere invisível, \u200E (Left-to-Right Mark), que indica o limite do emoji sem interferir nos emojis baseados em ZWJ. É uma daquelas lições sobre emojis que você só aprende apanhando.

Por que isso importa

Pequenos detalhes de design como esse fazem muita diferença.
Ao mostrar um emoji expressivo quando a lista está ativa e um ícone minimalista de caixa de entrada quando está arquivada, o Volt fica mais intuitivo e mais próximo.

É um detalhe pequeno. Mas deixa a experiência mais pessoal, mais caprichada e mais viva!