Base : titres de section à la charte, puces de 36 px et 44 px au doigt, relevé des onglets (t_8f5dbd3b) #1707

Merged

hermes-fusion merged 1 commit from hermes/base-clarte-onglets into main 2026-10-15 07:40:03 +02:00

Conversation 2 Commits 1 Files changed 12 +116 -42

hermes-bot commented 2026-10-15 07:32:45 +02:00

Collaborator

• Copy link
• Copy Markdown

Carte t_8f5dbd3b, point 2 : la clarté générale, corrigée dans la base src/lib/base/ d'abord.

Verdict : les titres de section ont une vraie hiérarchie (17 px, précision dessous). Puces, menus et recherche font 36 px, et 44 px au doigt. Les en-têtes triables font 24 px. Aucune fonction retirée, aucune valeur en dur.

Changé (12 fichiers, +116/-42) :

• lib/base/TitreSection.svelte (nouveau), adopté par Accueil (8 titres), Vidéos (4) et Consommation (1). Le texte reste identique et le nom accessible des sections ne change pas.
• lib/base/styles.js : PUCE, ACTION, BOUTON en h-9 avec pointer-coarse:min-h-11 ; PUCE_ICONE en w-9 avec pointer-coarse:min-w-11. C'est un plancher : Actualiser du téléphone garde ses 56 px.
• lib/base/BarreOutils.svelte : le menu « Classer » passe de sm à default, la recherche à h-9 avec le plancher tactile. lib/base/EnTeteTriable.svelte : min-h-6.
• CHARTE-UI.md (en-tête de section, hauteur des boutons), README de la base.
• Bancs : tests/base-clarte.test.js (nouveau ; 3 tests rouges sur main, verts après). tests/cadre-barre-bas-tactile.test.js suit la nouvelle largeur de PUCE_ICONE.

Preuve

• npx vitest run : 30 fichiers, 224 tests, 0 échec.
• npm run build : code 0, dist/index.html présent, app.js 147 Ko, dist/ 918 Ko.
• test_charte_ui, test_charte_svelte, test_charte_mise_en_page et garde-habillage : code 0.
• test_homogeneite : code 0 (44 relevés, 0 écart nouveau, 0 capture changée).
• Navigateur : 24 rendus avant et 24 après (6 onglets × 1 440 / 390 px × clair / sombre). Les captures sont en commentaire. Chaque planche a été lue à l'œil : pas de chevauchement, pas de texte nouvellement coupé, page à 390 px de large partout.

Coût mesuré : les pages s'allongent de 12 à 300 px, selon le nombre de puces au téléphone.

Relevé du tour des onglets Svelte en service (t_8f5dbd3b, 15/10)

Méthode : Chromium sans tête et aperçu du front (apercu.py) sur les données figées de tests/, heure figée au 13/10 à 16 h 12. Six onglets (Accueil, Calendrier, Processus avec Consommation, Vidéos, Atelier, Analytique) en quatre configurations : 1 440 et 390 px, clair et sombre (24 rendus). Script de mesure : débordement, textes tronqués sans infobulle, cibles sous 24 et 44 px, signatures de bouton, tailles et graisses, couleurs de texte hors jetons, anglais, jargon, dates ISO. Chaque capture a aussi été lue à l'œil (vision).

Corrigé dans la base (cette PR)

Onglet	Défaut	Mesure avant	Après
Accueil, Vidéos, Consommation	Titres de section faits main, 14 px (taille du corps), précision collée sur la même ligne : pas de hiérarchie	13 h2 en 14px/600 ; l'Analytique titre en 17 px	TitreSection : 17px/600, précision sur sa ligne en 13 px secondaire
Tous	Puces, actions et boutons de la base trop bas (charte §1 et §5 bis : 36 px)	32 px	36 px
Tous, téléphone	Cibles au doigt sous 44 px	Accueil 4, Calendrier 33, Processus 25, Vidéos 19, Atelier 45, Analytique 42	0, 11, 5, 0, 3, 34 (voir plus bas pour le reste)
Processus, Vidéos, Analytique	Menu « Classer » plus bas que les puces voisines (size="sm")	32 px à côté de 36	36 px, 44 au doigt
Processus, Vidéos, Calendrier	Champ de recherche plus bas que les puces	32 px	36 px, 44 au doigt
Processus, Vidéos	En-têtes de tableau triables sous la cible minimale (WCAG 2.5.8)	19 px de haut	24 px ; cibles sous 24 px : Processus 13 -> 7, Vidéos 36 -> 27

Corrigé dans la PR #1705 (points de rupture morts)

Onglet	Défaut	Avant	Après
Atelier	Visionneuse étroite	512 px à 1 440	1 024 px
Atelier	Cartes de chaîne sur une colonne	1 colonne de 1 392 px	3 colonnes de 451 px
Processus (Consommation)	Colonne « Passes »	masquée à toutes les largeurs	visible dès 760 px
Atelier (revue)	Grilles d'images, aide clavier	3 colonnes jusqu'à 1 024 px, aide jamais montrée	4 puis 6 colonnes, aide à la souris

Mesuré, sans défaut

• Aucun débordement horizontal : page à 1 440 et 390 px de large dans les 24 rendus.
• Aucune couleur de texte hors des jetons de la charte (relevé de chaque texte visible, comparé aux jetons résolus).
• Aucun texte anglais d'interface.

Reste à faire, hors de la base (le porteur de chaque onglet décide)

Onglet	Défaut	Mesure
Atelier	Codes de ticket affichés en clair comme libellés (charte : « jamais un code nu ») et « pid » visible	16 codes STUD-… visibles
Atelier	Textes tronqués sans infobulle au téléphone (titres d'épisode, « 6 créneaux à Mika le… », raisons de blocage)	10
Atelier	Trois tailles de titre h3 mêlées	21, 14 et 13 px
Atelier	Une date ISO visible sur une carte de chaîne (« bloqué · 2026-10-18 »)	1
Accueil	Titres de vidéo tronqués sans infobulle dans « Ce qui sort » au téléphone	3
Accueil, Processus	Erreur technique montrée telle quelle : « Consommation Claude non relue (HTTP 404) », « équivalent au tarif de l'API »	2 onglets
Accueil	Deux chiffres voisins se contredisent sans explication : « Créneaux vides, 7 jours : 3 » et « 2 créneaux vides cette semaine »	vu sur capture
Accueil	« Pour atteindre 100 % » (titre de carte, SemaineAccueil) en 13 px gris, plus discret que ses propres lignes	13px/500
Vidéos	Libellé de chiffre tronqué au téléphone (« Demand… »)	1
Calendrier	Cases d'événement à 27 px au téléphone (sous 44)	11
Tous	Recherche en 14 px au téléphone : iOS zoome à la saisie (charte : --text-input, 16 px). Il faut un utilitaire text-input dans le thème	non mesuré sur iPhone

Non mesuré

La page servie du 132 (la barre latérale du cadre n'est pas dans l'aperçu), la Consommation avec des données (l'aperçu ne sert pas /api/conso), les menus déroulants ouverts, un vrai téléphone.

Carte t_8f5dbd3b, point 2 : la clarté générale, corrigée dans la base `src/lib/base/` d'abord. **Verdict** : les titres de section ont une vraie hiérarchie (17 px, précision dessous). Puces, menus et recherche font 36 px, et 44 px au doigt. Les en-têtes triables font 24 px. Aucune fonction retirée, aucune valeur en dur. **Changé** (12 fichiers, +116/-42) : - `lib/base/TitreSection.svelte` (nouveau), adopté par Accueil (8 titres), Vidéos (4) et Consommation (1). Le texte reste identique et le nom accessible des sections ne change pas. - `lib/base/styles.js` : `PUCE`, `ACTION`, `BOUTON` en `h-9` avec `pointer-coarse:min-h-11` ; `PUCE_ICONE` en `w-9` avec `pointer-coarse:min-w-11`. C'est un plancher : Actualiser du téléphone garde ses 56 px. - `lib/base/BarreOutils.svelte` : le menu « Classer » passe de `sm` à `default`, la recherche à `h-9` avec le plancher tactile. `lib/base/EnTeteTriable.svelte` : `min-h-6`. - CHARTE-UI.md (en-tête de section, hauteur des boutons), README de la base. - Bancs : `tests/base-clarte.test.js` (nouveau ; 3 tests rouges sur main, verts après). `tests/cadre-barre-bas-tactile.test.js` suit la nouvelle largeur de `PUCE_ICONE`. **Preuve** - `npx vitest run` : 30 fichiers, 224 tests, 0 échec. - `npm run build` : code 0, `dist/index.html` présent, `app.js` 147 Ko, `dist/` 918 Ko. - test_charte_ui, test_charte_svelte, test_charte_mise_en_page et garde-habillage : code 0. - test_homogeneite : code 0 (44 relevés, 0 écart nouveau, 0 capture changée). - Navigateur : 24 rendus avant et 24 après (6 onglets × 1 440 / 390 px × clair / sombre). Les captures sont en commentaire. Chaque planche a été lue à l'œil : pas de chevauchement, pas de texte nouvellement coupé, page à 390 px de large partout. Coût mesuré : les pages s'allongent de 12 à 300 px, selon le nombre de puces au téléphone. ## Relevé du tour des onglets Svelte en service (t_8f5dbd3b, 15/10) Méthode : Chromium sans tête et aperçu du front (`apercu.py`) sur les données figées de `tests/`, heure figée au 13/10 à 16 h 12. Six onglets (Accueil, Calendrier, Processus avec Consommation, Vidéos, Atelier, Analytique) en quatre configurations : 1 440 et 390 px, clair et sombre (24 rendus). Script de mesure : débordement, textes tronqués sans infobulle, cibles sous 24 et 44 px, signatures de bouton, tailles et graisses, couleurs de texte hors jetons, anglais, jargon, dates ISO. Chaque capture a aussi été lue à l'œil (vision). ### Corrigé dans la base (cette PR) | Onglet | Défaut | Mesure avant | Après | |---|---|---|---| | Accueil, Vidéos, Consommation | Titres de section faits main, 14 px (taille du corps), précision collée sur la même ligne : pas de hiérarchie | 13 `h2` en 14px/600 ; l'Analytique titre en 17 px | `TitreSection` : 17px/600, précision sur sa ligne en 13 px secondaire | | Tous | Puces, actions et boutons de la base trop bas (charte §1 et §5 bis : 36 px) | 32 px | 36 px | | Tous, téléphone | Cibles au doigt sous 44 px | Accueil 4, Calendrier 33, Processus 25, Vidéos 19, Atelier 45, Analytique 42 | 0, 11, 5, 0, 3, 34 (voir plus bas pour le reste) | | Processus, Vidéos, Analytique | Menu « Classer » plus bas que les puces voisines (`size="sm"`) | 32 px à côté de 36 | 36 px, 44 au doigt | | Processus, Vidéos, Calendrier | Champ de recherche plus bas que les puces | 32 px | 36 px, 44 au doigt | | Processus, Vidéos | En-têtes de tableau triables sous la cible minimale (WCAG 2.5.8) | 19 px de haut | 24 px ; cibles sous 24 px : Processus 13 -> 7, Vidéos 36 -> 27 | ### Corrigé dans la PR #1705 (points de rupture morts) | Onglet | Défaut | Avant | Après | |---|---|---|---| | Atelier | Visionneuse étroite | 512 px à 1 440 | 1 024 px | | Atelier | Cartes de chaîne sur une colonne | 1 colonne de 1 392 px | 3 colonnes de 451 px | | Processus (Consommation) | Colonne « Passes » | masquée à toutes les largeurs | visible dès 760 px | | Atelier (revue) | Grilles d'images, aide clavier | 3 colonnes jusqu'à 1 024 px, aide jamais montrée | 4 puis 6 colonnes, aide à la souris | ### Mesuré, sans défaut - Aucun débordement horizontal : page à 1 440 et 390 px de large dans les 24 rendus. - Aucune couleur de texte hors des jetons de la charte (relevé de chaque texte visible, comparé aux jetons résolus). - Aucun texte anglais d'interface. ### Reste à faire, hors de la base (le porteur de chaque onglet décide) | Onglet | Défaut | Mesure | |---|---|---| | Atelier | Codes de ticket affichés en clair comme libellés (charte : « jamais un code nu ») et « pid » visible | 16 codes `STUD-…` visibles | | Atelier | Textes tronqués sans infobulle au téléphone (titres d'épisode, « 6 créneaux à Mika le… », raisons de blocage) | 10 | | Atelier | Trois tailles de titre `h3` mêlées | 21, 14 et 13 px | | Atelier | Une date ISO visible sur une carte de chaîne (« bloqué · 2026-10-18 ») | 1 | | Accueil | Titres de vidéo tronqués sans infobulle dans « Ce qui sort » au téléphone | 3 | | Accueil, Processus | Erreur technique montrée telle quelle : « Consommation Claude non relue (HTTP 404) », « équivalent au tarif de l'API » | 2 onglets | | Accueil | Deux chiffres voisins se contredisent sans explication : « Créneaux vides, 7 jours : 3 » et « 2 créneaux vides cette semaine » | vu sur capture | | Accueil | « Pour atteindre 100 % » (titre de carte, `SemaineAccueil`) en 13 px gris, plus discret que ses propres lignes | 13px/500 | | Vidéos | Libellé de chiffre tronqué au téléphone (« Demand… ») | 1 | | Calendrier | Cases d'événement à 27 px au téléphone (sous 44) | 11 | | Tous | Recherche en 14 px au téléphone : iOS zoome à la saisie (charte : `--text-input`, 16 px). Il faut un utilitaire `text-input` dans le thème | non mesuré sur iPhone | ### Non mesuré La page servie du 132 (la barre latérale du cadre n'est pas dans l'aperçu), la Consommation avec des données (l'aperçu ne sert pas `/api/conso`), les menus déroulants ouverts, un vrai téléphone.

accueil-bureau.png

523 KiB

accueil-tel.png

587 KiB

calendrier-bureau.png

386 KiB

calendrier-tel.png

534 KiB

processus-bureau.png

488 KiB

processus-tel.png

528 KiB

videos-bureau.png

536 KiB

videos-tel.png

574 KiB

atelier-bureau.png

409 KiB

atelier-tel.png

493 KiB

analytique-bureau.png

341 KiB

analytique-tel.png

444 KiB

hermes-bot added 1 commit 2026-10-15 07:32:46 +02:00

Base : titres de section à la charte, puces de 36 px et 44 px au doigt ... a84ec67ba8

Cause, mesurée au tour des six onglets Svelte en service (Chromium, 1 440
et 390 px, clair et sombre) :
- treize titres de section étaient faits main, en 14 px (la taille du
  corps), avec leur précision collée sur la même ligne (Accueil, Vidéos,
  Consommation) ; l'Analytique titrait en 17 px ;
- les puces, actions et boutons de la base faisaient 32 px (la charte et
  YouTube Studio : 36 px), 32 px au doigt aussi. 19 à 45 cibles par
  onglet restaient sous 44 px au téléphone ;
- le menu « Classer » (taille « sm ») et la recherche faisaient 32 px à
  côté des puces ; les en-têtes triables mesuraient 19 px de haut.

Remède, dans la base :
- nouveau composant TitreSection (17 px gras, précision dessous en
  secondaire, dans le même h2), adopté par l'Accueil, Vidéos et
  Consommation ;
- PUCE, ACTION, BOUTON : h-9, et un plancher pointer-coarse:min-h-11
  (PUCE_ICONE : w-9, min-w-11) ; menu « Classer » et recherche à la même
  hauteur ;
- EnTeteTriable : min-h-6.

Mesuré après, au téléphone : sous 44 px, Accueil 4 -> 0, Vidéos 19 -> 0,
Processus 25 -> 5, Atelier 45 -> 3, Calendrier 33 -> 11 (cases du
calendrier). Aucun débordement, page à 390 px de large partout.
Garde : tests/base-clarte.test.js (rouge sur main). Le banc du bouton
Actualiser suit la nouvelle largeur de PUCE_ICONE.

hermes-bot commented 2026-10-15 07:32:53 +02:00

Author

Collaborator

• Copy link
• Copy Markdown

Captures avant / après, par onglet (Chromium sans tête, aperçu du front, données figées de tests/).

• <onglet>-bureau : 1 440 px, en sombre (haut) et en clair (bas). Avant à gauche, après à droite. Le haut de la page (1 500 px) est réduit de moitié.
• <onglet>-tel : 390 px, sombre puis clair, avant et après côte à côte (1 700 px du haut de la page).
  Vérifié à l'œil (vision) sur chaque planche : les titres de section se détachent, la barre d'outils a une seule hauteur, rien ne chevauche. Aucun texte n'est nouvellement coupé. Les rangées de puces du téléphone défilent dans leur cadre (overflow-x: auto) : la page reste à 390 px.

accueil-bureau.png

accueil-tel.png

calendrier-bureau.png

calendrier-tel.png

processus-bureau.png

processus-tel.png

videos-bureau.png

videos-tel.png

atelier-bureau.png

atelier-tel.png

analytique-bureau.png

analytique-tel.png

Captures avant / après, par onglet (Chromium sans tête, aperçu du front, données figées de `tests/`). - `<onglet>-bureau` : 1 440 px, en sombre (haut) et en clair (bas). Avant à gauche, après à droite. Le haut de la page (1 500 px) est réduit de moitié. - `<onglet>-tel` : 390 px, sombre puis clair, avant et après côte à côte (1 700 px du haut de la page). Vérifié à l'œil (vision) sur chaque planche : les titres de section se détachent, la barre d'outils a une seule hauteur, rien ne chevauche. Aucun texte n'est nouvellement coupé. Les rangées de puces du téléphone défilent dans leur cadre (`overflow-x: auto`) : la page reste à 390 px. accueil-bureau.png  accueil-tel.png  calendrier-bureau.png  calendrier-tel.png  processus-bureau.png  processus-tel.png  videos-bureau.png  videos-tel.png  atelier-bureau.png  atelier-tel.png  analytique-bureau.png  analytique-tel.png 

hermes-fusion merged commit cee8d763cf into main 2026-10-15 07:40:03 +02:00

hermes-fusion deleted branch hermes/base-clarte-onglets 2026-10-15 07:40:03 +02:00

hermes-fusion commented 2026-10-15 07:40:03 +02:00

Collaborator

• Copy link
• Copy Markdown

Fusionnée automatiquement par fusion-auto (forge) : CI verte (Rust et Front Svelte), PR relue (étiquette relu), sans conflit.

Fusionnée automatiquement par `fusion-auto` (forge) : CI verte (Rust et Front Svelte), PR relue (étiquette `relu`), sans conflit.

hermes-fusion referenced this pull request from a commit 2026-10-15 07:40:05 +02:00

Merge pull request 'Base : titres de section à la charte, puces de 36 px et 44 px au doigt, relevé des onglets (t_8f5dbd3b)' (#1707) from hermes/base-clarte-onglets into main

hermes-bot referenced this pull request from a commit 2026-10-16 18:07:42 +02:00

feat(web): add Tavily as web search/extract/crawl backend (#1731)

hermes-bot referenced this pull request from a commit 2026-10-17 04:24:51 +02:00

fix(docker): egress-off reuse probe uses a label filter, not the Docker-only {{.Label}} template (#99213)

hermes-bot referenced this pull request from a commit 2026-10-17 13:20:03 +02:00

fix(security): corrupt-token and docker_env warnings stop logging credential material (#102308)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

ci-rouge

La CI de la PR est rouge : pas de fusion automatique

  

conflit

La PR est en conflit avec main : à rebaser

  

operateur

Cas sensible : seul l operateur fusionne

  

relu

Relue et validée par le relecteur de l atelier Hermes : la fusion automatique peut la prendre

No labels

ci-rouge

conflit

operateur

relu

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

foXaCe/studio!1707

No description provided.