Écran référent : vraie page responsive, référent correctement calculé

Deux bugs sur l'écran référent (/mobile-referent) :

- Il était resté à l'étape maquette (`PhoneFrame`/`DesignNote`, cadre de
  téléphone à taille fixe) alors que la vue bénévole avait déjà été
  convertie en vraie page responsive. Repli sur `positions.data[0]` en
  l'absence de poste géré par le compte connecté : un référent qui
  n'est encore désigné sur aucun poste se voyait quand même affiché
  comme référent du premier poste de l'édition (« Accueil artistes »
  dans les données de démo) au lieu de voir qu'il n'en a aucun.

Réécriture de `MobileLeadPage.tsx` en page responsive (mobile d'abord,
`sm:` pour l'élargissement, comme `MobileVolunteerPage.tsx`) : plus de
maquette de téléphone, une carte par poste réellement géré
(`Position.lead_account_id === account.id`, sans repli), créneau en
cours ou à venir calculé sur l'heure réelle (nouveau hook partagé
`useNowMinutes`, extrait de la vue bénévole), équipe affectée avec
pointage présent/absent (toujours local à l'écran : le pointage sur
site reste hors périmètre, CLAUDE.md §5). État vide explicite si le
compte n'est référent d'aucun poste.

`PhoneFrame`/`DesignNote` n'avaient plus d'autre utilisateur : supprimés
avec leurs clés i18n devenues mortes.

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/MobileLeadPage.tsx

@@ -1,33 +1,63 @@
 import { useMemo, useState } from 'react';
 
+import type { ShiftRead } from '@/api/schema';
 import { useAssignments, usePositions, useShifts, useVolunteers } from '@/api/hooks';
 import { useAuth } from '@/auth/auth-context';
 import { ErrorNote, Loading } from '@/components/state';
-import { DesignNote, PhoneFrame } from '@/pages/mobile/PhoneFrame';
-import { hourRangeLabel } from '@/lib/time';
+import { hourRangeLabel, longDayLabel, naiveMinutes } from '@/lib/time';
+import { useNowMinutes } from '@/lib/useNowMinutes';
 import { t } from '@/i18n';
 import { cx } from '@/lib/cx';
 
+// Page réellement consultée par le référent (accueil de son rôle LEAD, cf.
+// `auth/roles.ts:homePath`) — page responsive (mobile d'abord, élargie à
+// partir de `sm:`), plus de maquette de téléphone. Un compte peut être
+// référent de plusieurs postes (`Position.lead_account_id`) : chacun a sa
+// propre carte, avec le créneau en cours ou à venir. Aucun repli vers « le
+// premier poste de l'édition » si le compte n'est référent d'aucun poste —
+// ce serait montrer un poste qui n'est pas le sien.
+//
+// Le pointage présent/absent reste local à l'écran (état React, jamais
+// envoyé au serveur) : le pointage sur site est hors périmètre (CLAUDE.md §5).
+
 type Presence = Record<string, 'present' | 'absent'>;
 
+/** Créneau à afficher pour un poste : celui en cours, sinon le prochain à
+ * venir, sinon (plus aucun à venir) le dernier passé. */
+function pickRelevantShift(shifts: ShiftRead[], nowMinutes: number): ShiftRead | null {
+  const sorted = [...shifts].sort(
+    (a, b) => naiveMinutes(a.starts_at) - naiveMinutes(b.starts_at),
+  );
+  const current = sorted.find(
+    (s) => naiveMinutes(s.starts_at) <= nowMinutes && nowMinutes < naiveMinutes(s.ends_at),
+  );
+  if (current) return current;
+  const next = sorted.find((s) => naiveMinutes(s.starts_at) > nowMinutes);
+  return next ?? sorted[sorted.length - 1] ?? null;
+}
+
 export function MobileLeadPage() {
   const { account } = useAuth();
   const positions = usePositions();
   const shifts = useShifts();
   const volunteers = useVolunteers();
+  const assignments = useAssignments();
+  const nowMinutes = useNowMinutes();
   const [presence, setPresence] = useState<Presence>({});
 
-  // Poste du référent connecté (repli : le premier, pour la démo coordination).
   const myPositions = (positions.data ?? []).filter(
     (p) => account && p.lead_account_id === account.id,
   );
-  const position = myPositions[0] ?? (positions.data ?? [])[0];
-  const positionShifts = useMemo(
-    () => (shifts.data ?? []).filter((s) => s.position_id === position?.id),
-    [shifts.data, position?.id],
-  );
-  const shift = positionShifts[Math.floor(positionShifts.length / 2)] ?? positionShifts[0];
-  const shiftAssignments = useAssignments(shift ? { shiftId: shift.id } : undefined);
+
+  const shiftsByPosition = useMemo(() => {
+    const map = new Map<string, ShiftRead[]>();
+    for (const s of shifts.data ?? []) {
+      const list = map.get(s.position_id) ?? [];
+      list.push(s);
+      map.set(s.position_id, list);
+    }
+    return map;
+  }, [shifts.data]);
 
   const volunteersById = useMemo(
     () => new Map((volunteers.data ?? []).map((v) => [v.id, v])),
@@ -35,120 +65,126 @@ export function MobileLeadPage() {
   );
 
   if (positions.isLoading || shifts.isLoading) return <Loading />;
-  const error = positions.error ?? shifts.error ?? volunteers.error;
+  const error = positions.error ?? shifts.error ?? volunteers.error ?? assignments.error;
   if (error) return <ErrorNote error={error} />;
-  if (!position || !shift) return null;
-
-  const team = (shiftAssignments.data ?? []).map((a) => {
-    const volunteer = volunteersById.get(a.volunteer_id);
-    return {
-      id: a.id,
-      name: volunteer ? `${volunteer.first_name} ${volunteer.last_name}` : a.volunteer_id,
-      initials: volunteer ? `${volunteer.first_name[0]}${volunteer.last_name[0]}` : '?',
-      phone: volunteer?.phone ?? '',
-      present: presence[a.id] === 'present',
-      absent: presence[a.id] === 'absent',
-    };
-  });
-
-  const presentCount = team.filter((m) => m.present).length;
-  const absentCount = team.filter((m) => m.absent).length;
 
   return (
-    <div className="flex flex-wrap items-start gap-[26px] p-6">
-      <PhoneFrame time={t('mobileLead.statusTime')}>
-        <div className="bg-ink px-4 pb-[15px] pt-3 text-cream">
-          <div className="font-mono text-[10px] text-yellow">{t('mobileLead.kicker')}</div>
-          <div className="mt-[5px] font-display text-[25px] font-black leading-tight tracking-tight">
-            {position.name.toUpperCase()}
-          </div>
-          {position.location ? (
-            <div className="font-display text-[13px] font-semibold opacity-80">{position.location}</div>
-          ) : null}
-          <div className="mt-3 flex items-stretch gap-2">
-            <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">
-              {t('mobileLead.inProgress', {
-                hours: hourRangeLabel(shift.starts_at, shift.ends_at),
-              })}
-            </div>
-            <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
-              {t('mobileLead.present', { present: presentCount, total: team.length })}
-            </div>
-          </div>
+    <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">
+        <div className="font-mono text-[10px] text-yellow">{t('mobileLead.kicker')}</div>
+        <div className="mt-[5px] font-display text-[28px] font-black leading-tight tracking-tight sm:text-[34px]">
+          {t('mobileLead.positionsCount', { count: myPositions.length })}
         </div>
+      </div>
 
-        {absentCount > 0 ? (
-          <div className="border-b-[3px] border-ink bg-hatch-orange px-[14px] py-[11px]">
-            <div className="font-display text-[15px] font-black leading-tight">
-              {t('mobileLead.absenceAlert', { count: absentCount })}
-            </div>
-            <button
-              type="button"
-              className="mt-[9px] min-h-[52px] w-full cursor-pointer border-[3px] border-ink bg-ink font-display text-[14px] font-black text-cream hover:bg-yellow hover:text-ink"
-            >
-              {t('mobileLead.requestBackup')}
-            </button>
+      <div className="flex flex-1 flex-col gap-[22px] p-4 sm:p-6">
+        {myPositions.length === 0 ? (
+          <div className="border-[3px] border-dashed border-ink p-4 font-mono text-[11px] leading-relaxed opacity-70">
+            {t('mobileLead.noPosition')}
           </div>
         ) : null}
+        {myPositions.map((position) => {
+          const shift = pickRelevantShift(shiftsByPosition.get(position.id) ?? [], nowMinutes);
+          const team = shift
+            ? (assignments.data ?? [])
+                .filter((a) => a.shift_id === shift.id)
+                .map((a) => {
+                  const volunteer = volunteersById.get(a.volunteer_id);
+                  return {
+                    id: a.id,
+                    name: volunteer ? `${volunteer.first_name} ${volunteer.last_name}` : a.volunteer_id,
+                    initials: volunteer ? `${volunteer.first_name[0]}${volunteer.last_name[0]}` : '?',
+                    phone: volunteer?.phone ?? '',
+                    present: presence[a.id] === 'present',
+                    absent: presence[a.id] === 'absent',
+                  };
+                })
+            : [];
+          const presentCount = team.filter((m) => m.present).length;
 
-        <div className="flex flex-col gap-[11px] px-[14px] pb-[26px] pt-[13px]">
-          <div className="font-display text-[12px] font-black uppercase tracking-widest">
-            {t('mobileLead.teamTitle')}
-          </div>
-          {team.map((member) => (
-            <div key={member.id} className="border-[3px] border-ink bg-paper shadow-brutal-md">
-              <div className="flex items-center gap-[10px] px-[11px] py-[10px]">
-                <span className="flex h-[38px] w-[38px] flex-none items-center justify-center border-[3px] border-ink bg-yellow font-display text-[13px] font-extrabold">
-                  {member.initials}
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span className="block font-display text-[17px] font-extrabold leading-tight">
-                    {member.name}
-                  </span>
-                  <span className="block font-mono text-[10.5px] opacity-65">
-                    {member.phone}
-                  </span>
-                </span>
-                {member.present ? (
-                  <span className="flex-none border-2 border-ink bg-green px-[7px] py-[5px] font-display text-[11px] font-extrabold text-white">
-                    {t('mobileLead.badgePresent')}
-                  </span>
+          return (
+            <div key={position.id} className="border-[3px] border-ink bg-paper shadow-brutal-lg">
+              <div className="bg-ink px-[14px] pb-[15px] pt-[11px] text-cream">
+                <div className="font-display text-[19px] font-black leading-tight tracking-tight">
+                  {position.name.toUpperCase()}
+                </div>
+                {position.location ? (
+                  <div className="font-display text-[13px] font-semibold opacity-80">
+                    {position.location}
+                  </div>
                 ) : null}
-                {member.absent ? (
-                  <span className="flex-none border-2 border-ink bg-orange px-[7px] py-[5px] font-display text-[11px] font-extrabold">
-                    {t('mobileLead.badgeAbsent')}
-                  </span>
+                {shift ? (
+                  <div className="mt-3 flex flex-wrap items-stretch gap-2">
+                    <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">
+                      {longDayLabel(shift.starts_at)} · {hourRangeLabel(shift.starts_at, shift.ends_at)}
+                    </div>
+                    <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
+                      {t('mobileLead.present', { present: presentCount, total: team.length })}
+                    </div>
+                  </div>
                 ) : null}
               </div>
-              <div className="grid grid-cols-2 border-t-[3px] border-ink">
-                <button
-                  type="button"
-                  onClick={() => setPresence((p) => ({ ...p, [member.id]: 'present' }))}
-                  className={cx(
-                    'min-h-[56px] cursor-pointer border-r-[3px] border-ink bg-cream font-display text-[15px] font-black hover:bg-green hover:text-white',
-                  )}
-                >
-                  {t('mobileLead.markPresent')}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setPresence((p) => ({ ...p, [member.id]: 'absent' }))}
-                  className="min-h-[56px] cursor-pointer bg-cream font-display text-[15px] font-black hover:bg-orange"
-                >
-                  {t('mobileLead.markAbsent')}
-                </button>
+
+              <div className="flex flex-col gap-[11px] px-[14px] pb-[18px] pt-[13px]">
+                {shift ? (
+                  team.map((member) => (
+                    <div key={member.id} className="border-[3px] border-ink bg-cream shadow-brutal-sm">
+                      <div className="flex items-center gap-[10px] px-[11px] py-[10px]">
+                        <span className="flex h-[38px] w-[38px] flex-none items-center justify-center border-[3px] border-ink bg-yellow font-display text-[13px] font-extrabold">
+                          {member.initials}
+                        </span>
+                        <span className="min-w-0 flex-1">
+                          <span className="block font-display text-[17px] font-extrabold leading-tight">
+                            {member.name}
+                          </span>
+                          <span className="block font-mono text-[10.5px] opacity-65">{member.phone}</span>
+                        </span>
+                        {member.present ? (
+                          <span className="flex-none border-2 border-ink bg-green px-[7px] py-[5px] font-display text-[11px] font-extrabold text-white">
+                            {t('mobileLead.badgePresent')}
+                          </span>
+                        ) : null}
+                        {member.absent ? (
+                          <span className="flex-none border-2 border-ink bg-orange px-[7px] py-[5px] font-display text-[11px] font-extrabold">
+                            {t('mobileLead.badgeAbsent')}
+                          </span>
+                        ) : null}
+                      </div>
+                      <div className="grid grid-cols-2 border-t-[3px] border-ink">
+                        <button
+                          type="button"
+                          onClick={() => setPresence((p) => ({ ...p, [member.id]: 'present' }))}
+                          className={cx(
+                            'min-h-[52px] cursor-pointer border-r-[3px] border-ink bg-paper font-display text-[14px] font-black hover:bg-green hover:text-white',
+                          )}
+                        >
+                          {t('mobileLead.markPresent')}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setPresence((p) => ({ ...p, [member.id]: 'absent' }))}
+                          className="min-h-[52px] cursor-pointer bg-paper font-display text-[14px] font-black hover:bg-orange"
+                        >
+                          {t('mobileLead.markAbsent')}
+                        </button>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="font-mono text-[11px] leading-relaxed opacity-70">
+                    {t('mobileLead.noShift')}
+                  </div>
+                )}
+                {shift && team.length === 0 ? (
+                  <div className="font-mono text-[11px] leading-relaxed opacity-70">
+                    {t('mobileLead.emptyTeam')}
+                  </div>
+                ) : null}
               </div>
             </div>
-          ))}
-          {team.length === 0 ? (
-            <div className="border-[3px] border-dashed border-ink p-[11px] font-mono text-[11px] leading-relaxed opacity-70">
-              {t('mobileLead.emptyTeam')}
-            </div>
-          ) : null}
-        </div>
-      </PhoneFrame>
-
-      <DesignNote>{t('mobileLead.designNote')}</DesignNote>
+          );
+        })}
+      </div>
     </div>
   );
 }

frontend/src/pages/MobileVolunteerPage.tsx

@@ -1,9 +1,10 @@
-import { Fragment, useEffect, useMemo, useState } from 'react';
+import { Fragment, useMemo } from 'react';
 
 import { useVolunteer, useVolunteerPlanning } from '@/api/hooks';
 import { useAuth } from '@/auth/auth-context';
 import { ErrorNote, Loading } from '@/components/state';
-import { hourRangeLabel, longDayLabel, naiveMinutes, nowNaiveMinutes } from '@/lib/time';
+import { hourRangeLabel, longDayLabel, naiveMinutes } from '@/lib/time';
+import { useNowMinutes } from '@/lib/useNowMinutes';
 import { t } from '@/i18n';
 
 // Page réellement consultée par le bénévole (accueil de son rôle, cf.
@@ -15,19 +16,6 @@ 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">

frontend/src/pages/mobile/PhoneFrame.tsx

@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { t } from '@/i18n';
-
-/** Maquette de téléphone (mêmes proportions que le design). */
-export function PhoneFrame({ time, children }: { time: string; children: ReactNode }) {
-  return (
-    <div className="flex-none rounded-[36px] border-[3px] border-ink bg-ink p-[9px] shadow-[9px_9px_0_rgba(20,17,14,0.22)]">
-      <div className="h-[772px] w-[376px] overflow-auto rounded-[27px] bg-cream">
-        <div className="flex justify-between bg-ink px-5 pt-[7px] font-mono text-[10px] font-medium text-cream">
-          <span>{time}</span>
-          <span>◗ ▮▮▮</span>
-        </div>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export function DesignNote({ children }: { children: ReactNode }) {
-  return (
-    <div className="min-w-[250px] max-w-[420px] flex-1 border-[3px] border-ink bg-paper p-[15px] shadow-brutal-lg">
-      <div className="mb-[9px] font-display text-[13px] font-black uppercase tracking-widest">
-        {t('design.noteTitle')}
-      </div>
-      <p className="font-display text-[12.5px] leading-relaxed">{children}</p>
-    </div>
-  );
-}