From fb6e26eddbeeb09bc530a0b64214a0ec6e0018eb Mon Sep 17 00:00:00 2001 From: AdamThomas Date: Tue, 15 Sep 2026 20:03:41 +0200 Subject: [PATCH] =?UTF-8?q?Front=20:=20les=20indications=20d'usage=20passe?= =?UTF-8?q?nt=20en=20bulle=20d'aide=20(ic=C3=B4ne=20=C2=AB=20=3F=20=C2=BB)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_017uUsRg7XzopkCPWimwg9ZM --- frontend/src/components/ui.tsx | 35 ++++++++++++ frontend/src/pages/GrillePage.tsx | 8 ++- frontend/src/pages/VolunteerViewPage.tsx | 11 ++-- frontend/src/pages/config/ConfigArtists.tsx | 8 +-- frontend/src/pages/config/ConfigGrid.tsx | 9 ++-- frontend/src/pages/config/ConfigMail.tsx | 23 ++++---- frontend/src/pages/config/ConfigRules.tsx | 17 +++--- .../src/pages/config/ConfigVolunteers.tsx | 54 +++++++++---------- 8 files changed, 90 insertions(+), 75 deletions(-) diff --git a/frontend/src/components/ui.tsx b/frontend/src/components/ui.tsx index ee691d4..76c0531 100644 --- a/frontend/src/components/ui.tsx +++ b/frontend/src/components/ui.tsx @@ -182,6 +182,41 @@ export function StatCard({ ); } +/** + * Petit repère « ? » : au survol (ou au focus clavier/tactile), affiche + * `text` dans une bulle. Sert à sortir les indications d'usage du flux de la + * page plutôt que de les y afficher en permanence. + */ +export function HelpTip({ + text, + side = 'top', + className, +}: { + text: string; + side?: 'top' | 'bottom'; + className?: string; +}) { + return ( + + + + {text} + + + ); +} + export function FieldLabel({ children }: { children: ReactNode }) { return ( diff --git a/frontend/src/pages/GrillePage.tsx b/frontend/src/pages/GrillePage.tsx index b8afdf2..10a935c 100644 --- a/frontend/src/pages/GrillePage.tsx +++ b/frontend/src/pages/GrillePage.tsx @@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'; import { useMatrix, useRunSolver } from '@/api/hooks'; import type { MatrixPosition, MatrixShift, PositionCategory } from '@/api/schema'; -import { Chip } from '@/components/ui'; +import { Chip, HelpTip } from '@/components/ui'; import { EmptyNote, ErrorNote, Loading } from '@/components/state'; import { AssignmentPanel } from '@/pages/grille/AssignmentPanel'; import { categoryLabel, columnWidthPx, latticeFromMatrix, type LatticeColumn } from '@/lib/planning'; @@ -132,8 +132,9 @@ export function GrillePage() {
-
+
{t('grille.positionsCount', { count: matrix.data.positions.length })} +
{shownDays.map((day) => (
))}
-
- {t('grille.footnote')} -