Vue bénévole mobile : responsable, téléphone et repère « maintenant »

La vue bénévole reprenait les infos essentielles (poste, jour, horaire,
lieu) mais affichait un badge de validation factice (« TU ES ATTENDU
SUR CE CRÉNEAU ») sans plus-value, sans jamais donner le nom ni le
téléphone du référent du poste à contacter — pourtant déjà modélisés
(`Position.lead_account_id`) depuis la gestion des référents.

Un compte VOLUNTEER n'a pas accès à `positions`/`shifts` (403, cf. § 2
matrice des accès) : ces infos ne pouvaient donc pas être jointes côté
front à partir des listes existantes. Nouvel endpoint dédié et
minimal, réservé à la lecture du planning propre du bénévole :

  GET /editions/{id}/volunteers/{vid}/planning

Renvoie, par affectation : poste, lieu, et référent (nom + téléphone,
`null` si le poste n'a pas de référent ou si son compte n'est pas
rattaché à une fiche bénévole) — sans exposer la liste complète des
postes/créneaux de l'édition. Tests : accès (soi-même / autre
bénévole 403 / COORD+LEAD), présence/absence du référent, tri par
heure de début.

Front : retrait du badge de validation, ajout des lignes responsable/
téléphone par créneau, et un repère horizontal « MAINTENANT » qui se
positionne dans la liste triée des créneaux selon l'heure réelle (juste
avant le prochain créneau à venir) pour situer le bénévole dans son
planning.

Non inclus dans ce commit (édités en parallèle par l'utilisateur,
laissés en l'état) : backend/app/seed.py, frontend/tailwind.config.js.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017uUsRg7XzopkCPWimwg9ZM

frontend/src/pages/MobileVolunteerPage.tsx

@@ -1,10 +1,9 @@
-import { useMemo } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 
-import { ApiError } from '@/api';
-import { useAssignments, usePositions, useShifts, useVolunteer } from '@/api/hooks';
+import { useVolunteer, useVolunteerPlanning } from '@/api/hooks';
 import { useAuth } from '@/auth/auth-context';
 import { ErrorNote, Loading } from '@/components/state';
-import { hourRangeLabel, hoursBetween, longDayLabel, naiveMinutes } from '@/lib/time';
+import { hourRangeLabel, longDayLabel, naiveMinutes, nowNaiveMinutes } from '@/lib/time';
 import { t } from '@/i18n';
 
 // Page réellement consultée par le bénévole (accueil de son rôle, cf.
@@ -16,24 +15,45 @@ import { t } from '@/i18n';
 // de gris clair, lisibilité plein soleil), cibles tactiles ≥ 52 px de haut,
 // une seule action par créneau.
 
+// Rafraîchit « maintenant » assez souvent pour que le repère bouge de façon
+// perceptible sans re-rendre à outrance.
+const NOW_REFRESH_MS = 30_000;
+
+function useNowMinutes(): number {
+  const [minutes, setMinutes] = useState(() => nowNaiveMinutes());
+  useEffect(() => {
+    const id = setInterval(() => setMinutes(nowNaiveMinutes()), NOW_REFRESH_MS);
+    return () => clearInterval(id);
+  }, []);
+  return minutes;
+}
+
+function NowLine() {
+  return (
+    <div className="flex items-center gap-2 px-1" aria-hidden="true">
+      <div className="h-[3px] flex-1 bg-orange" />
+      <div className="bg-orange px-[7px] py-[3px] font-mono text-[10px] font-bold text-white">
+        {t('mobileVol.now')}
+      </div>
+      <div className="h-[3px] flex-1 bg-orange" />
+    </div>
+  );
+}
+
 export function MobileVolunteerPage() {
   const { account } = useAuth();
   const volunteerId = account?.volunteer_id ?? null;
 
   const meVolunteer = useVolunteer(volunteerId);
-  const assignments = useAssignments(volunteerId ? { volunteerId } : undefined, {
-    enabled: Boolean(volunteerId),
-  });
-  const shifts = useShifts();
-  const positions = usePositions();
-
-  const shiftsById = useMemo(
-    () => new Map((shifts.data ?? []).map((s) => [s.id, s])),
-    [shifts.data],
-  );
-  const positionsById = useMemo(
-    () => new Map((positions.data ?? []).map((p) => [p.id, p])),
-    [positions.data],
+  const planning = useVolunteerPlanning(volunteerId);
+  const nowMinutes = useNowMinutes();
+  // Hooks appelés inconditionnellement avant les retours anticipés ci-dessous.
+  const slots = useMemo(
+    () =>
+      [...(planning.data ?? [])].sort(
+        (a, b) => naiveMinutes(a.starts_at) - naiveMinutes(b.starts_at),
+      ),
+    [planning.data],
   );
 
   if (!volunteerId) {
@@ -45,32 +65,23 @@ export function MobileVolunteerPage() {
       </div>
     );
   }
-  if (assignments.isLoading) return <Loading />;
-  if (assignments.error) return <ErrorNote error={assignments.error} />;
+  if (planning.isLoading) return <Loading />;
+  if (planning.error) return <ErrorNote error={planning.error} />;
 
   const firstName = meVolunteer.data?.first_name ?? account?.email.split('@')[0] ?? '';
-  // shifts / positions peuvent être refusés (403) à un bénévole côté back-end réel :
-  // on affiche alors les créneaux sans détail plutôt que de tomber en erreur.
-  const detailsUnavailable =
-    (shifts.error instanceof ApiError && shifts.error.status === 403) ||
-    (positions.error instanceof ApiError && positions.error.status === 403);
-
-  const slots = (assignments.data ?? [])
-    .map((a) => ({ assignment: a, shift: shiftsById.get(a.shift_id) ?? null }))
-    .sort((a, b) => {
-      const av = a.shift ? naiveMinutes(a.shift.starts_at) : 0;
-      const bv = b.shift ? naiveMinutes(b.shift.starts_at) : 0;
-      return av - bv;
-    });
 
   const totalHours =
     Math.round(
-      slots.reduce(
-        (sum, s) => sum + (s.shift ? hoursBetween(s.shift.starts_at, s.shift.ends_at) : 0),
-        0,
-      ) * 10,
+      slots.reduce((sum, s) => sum + (naiveMinutes(s.ends_at) - naiveMinutes(s.starts_at)) / 60, 0) *
+        10,
     ) / 10;
 
+  // Le repère « maintenant » se place juste avant le premier créneau pas
+  // encore commencé (le prochain à venir) ; en fin de liste si tous sont déjà
+  // passés.
+  const nowIndex = slots.findIndex((s) => naiveMinutes(s.starts_at) > nowMinutes);
+  const nowInsertAt = nowIndex === -1 ? slots.length : nowIndex;
+
   return (
     <div className="mx-auto flex w-full max-w-[640px] flex-1 flex-col">
       <div className="bg-ink px-4 py-5 text-cream sm:px-6 sm:py-7">
@@ -82,52 +93,49 @@ export function MobileVolunteerPage() {
           <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">
             {t('mobileVol.slots', { count: slots.length })}
           </div>
-          {!detailsUnavailable ? (
-            <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
-              {t('mobileVol.hours', { count: totalHours })}
-            </div>
-          ) : null}
+          <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
+            {t('mobileVol.hours', { count: totalHours })}
+          </div>
         </div>
       </div>
 
       <div className="flex flex-1 flex-col gap-[14px] p-4 sm:p-6">
-        {detailsUnavailable ? (
-          <div className="border-2 border-dashed border-ink bg-yellow-soft p-3 font-mono text-[10px] leading-relaxed">
-            {t('mobileVol.detailsUnavailable')}
-          </div>
-        ) : null}
-        {slots.map(({ assignment, shift }) => {
-          const position = shift ? positionsById.get(shift.position_id) : undefined;
-          return (
-            <div key={assignment.id} className="border-[3px] border-ink bg-paper shadow-brutal-lg">
-              {shift ? (
-                <div className="flex items-baseline gap-2 bg-ink px-[11px] py-2 text-cream">
-                  <span className="font-display text-[15px] font-black">
-                    {longDayLabel(shift.starts_at)}
-                  </span>
-                  <span className="ml-auto font-mono text-[16px] font-bold text-yellow">
-                    {hourRangeLabel(shift.starts_at, shift.ends_at)}
-                  </span>
-                </div>
-              ) : null}
+        {slots.map((entry, i) => (
+          <Fragment key={entry.assignment_id}>
+            {i === nowInsertAt ? <NowLine /> : null}
+            <div className="border-[3px] border-ink bg-paper shadow-brutal-lg">
+              <div className="flex items-baseline gap-2 bg-ink px-[11px] py-2 text-cream">
+                <span className="font-display text-[15px] font-black">
+                  {longDayLabel(entry.starts_at)}
+                </span>
+                <span className="ml-auto font-mono text-[16px] font-bold text-yellow">
+                  {hourRangeLabel(entry.starts_at, entry.ends_at)}
+                </span>
+              </div>
               <div className="p-[11px]">
-                {position ? (
-                  <div className="font-display text-[23px] font-black leading-tight tracking-tight">
-                    {position.name.toUpperCase()}
-                  </div>
-                ) : null}
-                {position?.location ? (
-                  <div className="mt-[9px] border-t-2 border-ink pt-[9px] font-mono text-[12px]">
-                    {t('mobileVol.location', { location: position.location })}
-                  </div>
-                ) : null}
-                <div className="mt-[11px] flex min-h-[52px] items-center justify-center border-[3px] border-ink bg-green font-display text-[15px] font-black text-white">
-                  {t('mobileVol.slotAssigned')}
+                <div className="font-display text-[23px] font-black leading-tight tracking-tight">
+                  {entry.position_name.toUpperCase()}
                 </div>
+                {entry.position_location ? (
+                  <div className="mt-[9px] border-t-2 border-ink pt-[9px] font-mono text-[12px]">
+                    {t('mobileVol.location', { location: entry.position_location })}
+                  </div>
+                ) : null}
+                {entry.referent_name ? (
+                  <div className="mt-[9px] font-mono text-[12px]">
+                    {t('mobileVol.referent', { name: entry.referent_name })}
+                  </div>
+                ) : null}
+                {entry.referent_phone ? (
+                  <div className="mt-[3px] font-mono text-[12px]">
+                    {t('mobileVol.phone', { phone: entry.referent_phone })}
+                  </div>
+                ) : null}
               </div>
             </div>
-          );
-        })}
+          </Fragment>
+        ))}
+        {nowInsertAt === slots.length && slots.length > 0 ? <NowLine /> : null}
         {slots.length === 0 ? (
           <div className="border-[3px] border-dashed border-ink p-4 font-mono text-[11px] leading-relaxed opacity-70">
             {t('mobileVol.noSlots')}