Afficher la photo du bénévole sur son écran et sur l'écran référent

Photo transmise via le formulaire public (Volunteer.photo) : nouveau
composant partagé VolunteerAvatar (photo si disponible, sinon repli sur
le carré d'initiales existant, même gabarit dans les deux cas).

- Écran bénévole (VolunteerHomeView) : photo dans le bandeau d'accueil,
  à côté du message de bienvenue.
- Écran référent (MobileLeadPage) : photo devant le nom de chaque membre
  de l'équipe, à la place du carré d'initiales.

GET .../volunteers/{id}/photo n'était accessible qu'à COORDINATION/
RÉFÉRENT ; ouvert aussi à l'intéressé lui-même (même garde que
get_volunteer), sinon l'écran bénévole ne pouvait jamais charger sa
propre photo.

Vérifié : pytest (274 passés, dont le nouveau test d'accès à sa propre
photo), ruff, tsc --noEmit, eslint, vite build, smoke — tous verts.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
AdamThomas
2026-09-21 21:10:04 +02:00
co-authored by Claude Sonnet 5
parent 82088f3b0c
commit 111d1e5c4b
5 changed files with 90 additions and 9 deletions
@@ -0,0 +1,43 @@
import { useVolunteerPhotoUrl } from '@/api/hooks';
import { cx } from '@/lib/cx';
/**
* Photo du bénévole (formulaire public, voir `app/api/forms.py`) si
* disponible, sinon repli sur un carré d'initiales — même gabarit dans les
* deux cas pour ne jamais faire sauter la mise en page. `className` fixe la
* taille (ex. `h-[38px] w-[38px] text-[13px]`).
*/
export function VolunteerAvatar({
volunteerId,
hasPhoto,
initials,
className,
}: {
volunteerId: string;
hasPhoto: boolean;
initials: string;
className?: string;
}) {
const photoUrl = useVolunteerPhotoUrl(volunteerId, hasPhoto);
if (photoUrl) {
return (
<img
src={photoUrl}
alt=""
className={cx('flex-none border-[3px] border-ink object-cover', className)}
/>
);
}
return (
<span
className={cx(
'flex flex-none items-center justify-center border-[3px] border-ink bg-yellow font-display font-extrabold text-ink',
className,
)}
>
{initials}
</span>
);
}