Front : les indications d'usage passent en bulle d'aide (icône « ? »)

Les explications sur comment utiliser un écran (grille des besoins, vue
bénévoles, artistes, import, disponibilités, créneaux types, seuils,
notification par email…) étaient affichées en permanence dans la page,
prenant de la place pour un contenu qu'on ne lit qu'une fois. Elles passent
dans une bulle affichée au survol (ou au focus clavier/tactile) d'un petit
repère « ? » posé à côté du titre ou du champ concerné.

- `HelpTip` (frontend/src/components/ui.tsx) : nouveau composant partagé,
  cohérent avec le design (bordures franches, pas d'arrondi) ; `side`
  ('top'/'bottom') pour éviter que la bulle ne sorte du cadre visible selon
  que le repère est en haut ou en bas de son conteneur.
- Appliqué à GrillePage, VolunteerViewPage, ConfigArtists, ConfigVolunteers
  (import, ajout manuel, disponibilités), ConfigGrid, ConfigRules, ConfigMail.
- Aucun texte déplacé n'a changé : mêmes clés i18n, seul l'endroit où elles
  s'affichent change.

Laissé en l'état (pas des indications d'usage mais des messages d'état) :
bannières identifiants de démo, liens de connexion en dev, états vides, et
la description des rôles (contenu propre des cartes, pas un mode d'emploi).

Vérifié : typecheck, lint, build, smoke (7 routes) OK.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017uUsRg7XzopkCPWimwg9ZM
This commit is contained in:
AdamThomas
2026-09-15 20:03:41 +02:00
co-authored by Claude Sonnet 5
parent 897a76ca6d
commit fb6e26eddb
8 changed files with 90 additions and 75 deletions
+4 -4
View File
@@ -9,7 +9,7 @@ import {
} from '@/api/hooks';
import type { ArtistRead } from '@/api/schema';
import { ErrorNote, Loading } from '@/components/state';
import { Panel, PanelHeader } from '@/components/ui';
import { HelpTip, Panel, PanelHeader } from '@/components/ui';
import { t } from '@/i18n';
import { longDayLabel } from '@/lib/time';
@@ -62,9 +62,9 @@ export function ConfigArtists() {
<div className="max-h-[calc(100vh-118px)] min-h-0 flex-1 overflow-auto p-4">
<div className="mb-[14px] flex flex-wrap items-stretch gap-3">
<div className="flex flex-1 flex-col justify-center gap-1 border-[3px] border-ink bg-paper p-[14px] shadow-brutal-lg">
<span className="font-display text-[15px] font-black">{t('config.artists.title')}</span>
<span className="font-mono text-[10px] leading-relaxed opacity-70">
{t('config.artists.hint')}
<span className="flex items-center gap-[7px] font-display text-[15px] font-black">
{t('config.artists.title')}
<HelpTip text={t('config.artists.hint')} side="bottom" />
</span>
</div>
<div className="flex-none border-[3px] border-ink bg-paper px-[14px] py-3 shadow-brutal-lg">