L'avatar

Ce qu'il fallait traiter

L'avatar affichait une image, trois tailles et des initiales. Trois manques sautaient aux yeux dès qu'on l'utilisait pour de vrai.

Une image met du temps, échoue parfois, et manque souvent. Les trois cas doivent se ressembler à l'écran, sinon une liste de participants se réorganise sous les yeux pendant qu'elle charge.

Six personnes, six pastilles identiques. Rien ne distinguait deux « AK » dans une même liste.

Aucune pile. Chaque application réécrivait son empilement de participants.

La teinte vient du nom

<Avatar name="Aya Koffi" />   // toujours la même couleur, partout

Un hachage minuscule sur le nom, modulo six teintes sémantiques. Déterministe : la même personne garde sa couleur d'un écran à l'autre et d'une session à l'autre, ce qui la rend reconnaissable avant même qu'on lise son nom.

La fonction est volontairement triviale — h * 31 + code — parce qu'elle tourne pour chaque avatar d'une liste qui peut en compter des centaines. Un hachage cryptographique y coûterait mille fois plus pour un résultat visuellement identique. Le résultat est mémoïsé sur le nom.

tint force la couleur quand l'application en a une à elle.

Les initiales

Première et dernière partie du nom, pas les deux premières :

Nom	Initiales	Pourquoi
Jean-Baptiste Kouassi Mbella	JM	c'est le nom de famille qui distingue
Marie de la Tour	MT	les particules sont écartées
Aya	AY	un seul mot se replie sur ses lettres

Rien ne saute pendant le chargement

Le repli n'est pas une alternative à l'image : il est toujours peint, dessous. C'est lui qui tient la place, et il reste si l'image échoue. Aucune bascule, donc aucun saut de mise en page.

L'image se fond par-dessus avec un très léger rapprochement d'échelle. Pendant l'attente, le repli respire — assez pour dire « ça arrive », pas assez pour attirer l'œil dans une liste de cinquante.

Le nom n'est jamais dans l'alt : il est annoncé une seule fois par un texte masqué, statut compris. Un alt le répéterait aux lecteurs d'écran.

Le groupe

<AvatarGroup max={4} spreadOnHover>
  {equipe.map((p) => <Avatar key={p.id} name={p.nom} src={p.photo} />)}
</AvatarGroup>

Le groupe impose taille, forme et variante à ses enfants par contexte — sans quoi chaque avatar d'une pile répéterait les mêmes props — et chaque enfant peut reprendre la main.

Au-delà de max, le reste est résumé par un compteur. Sans limite, une réunion de quarante personnes déborde de sa ligne et n'apprend plus rien : au-delà de cinq visages, on ne lit plus des gens, on lit une foule.

Deux détails qui décident du résultat

L'ordre d'empilement. Mettre le premier avatar devant semble logique, et c'est un piège : chaque suivant est alors masqué à gauche, précisément là où commence la lecture. « AK » devenait « K ». Chaque avatar recouvre donc le précédent — l'ordre de peinture naturel — et chacun garde au moins sa première initiale.

Le liseré. Sans un contour de la couleur du fond, deux teintes voisines se fondent l'une dans l'autre et la pile devient une tache. Son épaisseur suit la taille : deux pixels fixes disparaissent sur un avatar de 4,5 rem.

Le chevauchement par défaut est d'un quart. À un tiers, la seconde initiale était déjà rognée — mesuré à l'écran, pas supposé.

Les variantes

Prop	Valeurs
variant	soft (défaut), solid, outline
shape	circle, rounded, square
size	xs, sm, md, lg, xl
status	online, busy, away, offline
tint	six teintes sémantiques, ou dérivée du nom
ring	un liseré qui détache du fond
onPress	rend l'avatar actionnable — un menu de compte

Tout repose sur une seule variable, --sia-avatar-tint, posée par une classe et consommée par les trois variantes. Changer de variante ne redéfinit donc jamais la couleur : c'est ce qui permet à une teinte dérivée du nom de survivre à soft, solid et outline sans tripler les règles.

Les formes ont un rayon proportionnel à la taille : un carré arrondi de 2 rem et un de 5 rem n'ont pas la même courbure apparente à rayon fixe.

Un défaut trouvé en chemin : le repli n'héritait pas de la courbure du parent. L'ombre interne de la variante outline dessinait donc un cadre carré que le masque circulaire rognait — il n'en restait que deux fragments verticaux. Visible seulement à fort grossissement.

Prévu

AppShell posera cet avatar dans son en-tête de compte.