Adaptando las listas de WhatsApp para traer íconos a Volt

Te contamos una mejora pequeña pero importante en Volt: ahora puedes personalizar tus listas con íconos de emoji. 🎉

Lo que empezó como una idea de UX divertida (ayudar a los usuarios a reconocer y expresar sus listas más fácilmente) nos llevó a explorar algunas técnicas creativas de codificación por dentro.

Codificar el emoji en el nombre de la lista

Para que todo fuera simple, liviano y compatible entre dispositivos (sobre todo con WhatsApp en el celular), decidimos incluir el emoji directamente en el nombre de la lista.

Un carácter invisible especial funciona como marca para indicar dónde empieza el emoji, así Volt lo muestra correctamente y WhatsApp también puede mostrarlo en la app nativa.

Ocultar el emoji cuando se archiva una lista

Cuando archivas una lista, su ícono de emoji se convierte en el emoji 📥 (bandeja de entrada). No queríamos llenar la interfaz de emojis.

Pero aquí está el truco: el emoji original no desaparece. Solo queda oculto, guardado de forma invisible con caracteres Unicode.

Usamos un esquema de codificación binaria:

• \u200B (espacio de ancho cero) representa 0
• \u200C (no unión de ancho cero) representa 1

Así podemos guardar y luego recuperar el emoji original, mientras mostramos solo el ícono de archivo. El resultado es una diferencia visual sutil pero satisfactoria entre listas activas y archivadas.

Bonus: una sorpresa con ZWJ 🧩

Durante el desarrollo nos topamos con un bug complicado.
Al principio usábamos el Zero Width Joiner (ZWJ) como marca invisible para señalar dónde empieza el ícono. Funcionaba bien, hasta que probamos con emojis que también usan ZWJ internamente para formar emojis compuestos (como los de familia o las variantes de género).

¿El resultado? Algunos íconos se partían y se veían mal.

Para resolverlo, cambiamos la marca invisible por el siguiente carácter invisible, \u200E (Left-to-Right Mark), que marca el límite del emoji sin interferir con los emojis basados en ZWJ. Es una de esas lecciones de emojis que solo aprendes por las malas.

Por qué importa

Los detalles de diseño pequeños como este hacen una gran diferencia.
Al mostrar un emoji expresivo cuando la lista está activa y un ícono minimalista de bandeja cuando está archivada, Volt se siente más intuitivo y más cercano.

Es un detalle pequeño. ¡Pero hace que la experiencia se sienta más personal, más pulida y más viva!