decision/docs/chantiers/acte-certification/UX-lecteur.md

# Le lecteur d'un document — note de conception (lot U)

> Demande d'Yvv du 2026-11-02 : « la page est trop longue, trop fournie et on ne comprend pas tout
> de suite » ; l'ordonnancement répété est « nul » ; distinguer les natures des modules (les
> textes, l'inertie, l'ordonnancement) ; pas de redondance entre les consoles sous l'article et
> celles du panneau ; le choix entre déplier sur place et ouvrir à droite doit être logique.
> Écrite avant le code. Elle tranche ; ce qu'Yvv devrait regarder est en fin de note.

## Ce que montraient les captures d'avant

`/tmp/ld-u-shots/avant/` (base neuve, Monnaie libre et groupe d'essai, bureau et téléphone) :

- **6 300 px de haut sur bureau.** Trois articles en vigueur, puis **sept blocs « Ordre des
  articles · … »** dans le texte en vigueur, dont cinq pour des sections qui n'y ont aucun article :
  chaque bloc redit la liste des articles de sa section. Puis trente lignes de propositions.
- **Sur téléphone, le premier écran ne montre aucun article** : fil d'Ariane, titre, barre du
  module titre, résumé, faits, aperçus sur deux lignes, langues.
- **Les mêmes mots pour des choses différentes** : « Propositions » est un geste sous l'article
  (qui ouvre le panneau), un onglet du panneau, et le titre de la liste du bas. « Proposer » est un
  onglet, « Proposer une modification » un geste, « Proposer un autre ordre » un troisième.
- **Le panneau a des onglets qui ne sont pas frères** : le panier (tout le document), les versions
  d'un article, un formulaire, les détails d'une version, les réglages du groupe.
- Les trois natures ne se distinguaient que par le fond du bloc d'ordre (le lavis d'eau) et par
  la ligne « inertie 3 / 5 · moyenne » écrite partout en toutes lettres.

## La règle : sur place, ou à droite

**Sur place** (on déplie, sous ce qu'on regarde) : **ce qui se lit et se décide sur ce qu'on a
sous les yeux**. Le vote d'une version, ses autres versions, son inertie, et l'ordre d'une section
(les poignées apparaissent sur les articles mêmes).

**À droite** (un panneau, une feuille sur téléphone) : **ce qui s'écrit, ou travaille sur
plusieurs modules, ou se consulte à côté du texte**. Proposer (un article, un titre), le panier,
les détails d'une version (coquilles, traductions, objections, historique), les réglages de la
formule.

Pourquoi : déplier garde l'œil sur le texte qu'on juge et ne cache rien du reste ; le panneau
donne la place d'écrire et de comparer sans perdre la page. Un geste qui agit sur un seul module
et tient en quelques lignes ne mérite pas une fenêtre ; un formulaire ou une vue d'ensemble ne
tient pas dans un accordéon.

**Le vote d'une version se déplie là où la version se lit** : un texte en vigueur sous lui ; une
proposition d'article dans « Propositions en cours » ; une version du titre sous le titre ; un
ordre à la fin de sa section. Un seul vote déplié à la fois, toujours dans l'URL (`?vote=`).

## Les consoles : avant, après

| Fonction | Avant | Après (un nom, un endroit) |
|---|---|---|
| Voter une version | « Le vote » sous l'article (déplié) | **« Le vote »**, déplié sous la version |
| Les autres versions d'un article | « Propositions » sous l'article → onglet « Propositions » du panneau | **dans « Le vote »**, « Autres versions » : chacune ouvre son propre vote, là où elle se lit |
| Proposer un autre texte | « Proposer une modification » → onglet « Proposer » | **« Proposer une modification »** → panneau « Proposer » |
| Proposer un nouvel article | bouton en bas → onglet « Proposer » | inchangé |
| Proposer un autre titre | « Proposer un autre titre » → onglet « Proposer » | inchangé (panneau : on écrit) |
| Proposer un autre ordre | bloc d'ordre → « Proposer un autre ordre » → onglet « Proposer » (une liste répétée) | **« Réordonner »**, à la fin de la section : les poignées sur les articles mêmes, puis on vote |
| Voir les ordres proposés | une ligne parmi les articles, dans la liste du bas | **dans « Le vote » de l'ordre**, à la fin de la section |
| Changer l'inertie | dans « Le vote » | inchangé |
| Voter en lot | « Voter en lot » (en-tête), « Voter cette section » (liste) → onglet « Panier » | inchangé : deux portes, un seul panier |
| Coquilles, traductions, objections, historique | lien dans « Le vote » → onglet « Détails » | inchangé → panneau « Détails » |
| Réglages de la formule | lien en-tête et lien dans « Le vote » → onglet « Réglages » | inchangé → panneau « Réglages » |
| La liste du bas | « Propositions en cours » | inchangé, le seul endroit qui porte ce nom |

Le panneau perd ses onglets : il montre **une chose à la fois**, nommée en tête (« Panier »,
« Proposer », « Détails », « Réglages »), avec sa croix. Une ancienne adresse
`?onglet=propositions` déplie le vote de l'article, sans panneau.

## Les natures des modules

Un document se lit en **sections** ; une section contient des **articles** ; chaque module porte
une **inertie** ; chaque section a un **ordre** ; le document a un **titre**. Chaque nature a sa
voix, discrète, prise dans le design existant (sans bordure, arrondis, quatre ambiances) :

- **Texte** (l'article, son titre et son corps) : la lecture. Titre en petites capitales d'eau,
  corps en Literata. C'est le seul gros caractère de la page.
- **Section** : son nom en Literata italique, couleur d'encre douce. On sait où l'on est, sans
  numéro.
- **Inertie** : **cinq crans** dessinés, à l'horizontale (▮▮▮▯▯), à côté de « inertie 3 / 5 ·
  moyenne ». Le niveau d'eau (le vote) est vertical ; les crans (le poids du texte) horizontaux :
  deux formes qu'on ne confond pas. Les crans suivent l'inertie partout : sous l'article, sous le
  titre, sur la ligne d'ordre, dans le vote, dans la liste.
- **Ordonnancement** : la **poignée** (six points). Elle marque la ligne d'ordre qui ferme une
  section, puis apparaît sur chaque article quand on réordonne. Le mot est « Ordre de la
  section » là où la section est sous les yeux ; « Ordre des articles · <section> » ailleurs
  (panier, messages), où il faut la nommer.
- **Titre du document** : une ligne sous le titre, de la même voix que la ligne d'ordre (petite,
  Nunito, crans, état), avec « Le vote » et « Proposer un autre titre ».
- **Proposition seed** (lot S, `seedProposal`) : proposée au départ pour amorcer le vote, pas en
  vigueur. Marque « proposition seed » en lavis d'eau, niveau d'eau visible, jamais le corps nu
  d'un texte en vigueur. **Quand aucun article n'est en vigueur**, le texte en vigueur, vide, laisse
  sa place aux Propositions seed, en entier, chacune avec son vote : on sait par où commencer. Elles
  ne sont pas répétées dans la liste du bas.
- **Vote simulé** (lot V, `vote.simulated`) : les boutons de vote apparaissent partout comme si le
  vote était ouvert, avec la marque « vote simulé » à côté. Ton vote s'affiche aussitôt, avec son
  état (`myVoteState` : enregistré, en attente, simulé), et les voix en attente à côté des totaux
  (`tallyPending`).

## Une page courte, lisible d'un coup d'œil

Ce qu'on voit d'abord, dans l'ordre : le titre du document et sa ligne de module ; le résumé ; une
ligne de faits et d'outils (articles en vigueur, propositions en cours, « Voter en lot »,
« Réglages de la formule ») ; la lecture (en vigueur, aperçus, langue). Puis le texte.

Ce qui est replié par défaut :

- **Le vote** de chaque version, et dedans la formule et le changement d'inertie (comme avant).
- **L'ordre d'une section** : une seule ligne à sa fin, jamais la liste. Il n'apparaît que pour une
  section d'au moins deux articles, **à la fin de la section là où elle se lit** : dans le texte en
  vigueur si elle y a un article, sinon à la fin de sa section dans « Propositions en cours ». La
  liste des articles ne se lit qu'en réordonnant, ou dans le vote d'un ordre proposé (ses
  déplacements marqués).
- **Les sections de « Propositions en cours »** : une ligne par section, son nom, le nombre
  d'articles proposés et, en petit, le niveau d'eau de chacun (on voit où le soutien monte sans
  rien ouvrir). On déplie une section d'un geste ; « Tout déplier » les ouvre toutes ; un filtre
  (bien cotées, les miennes) ou un vote déplié par l'URL ouvre la section qui le contient.

## Réordonner une section

À la fin de la section, « Réordonner » : les articles de la section (ceux en vigueur et ceux
seulement proposés, marqués « proposé ») se replient sur leur titre, une poignée devant chacun.

- **Au glisser** : on prend la poignée, on dépose à la nouvelle place.
- **Au clavier** : chaque article est un bouton ; les flèches haut et bas le déplacent, le focus
  le suit, la nouvelle place est annoncée (« « … » en place 2 sur 3 »).
- **Sans glisser** : un clic sur un article le choisit, un clic sur un autre le met à sa place ; ou
  ses flèches monter / descendre (cibles de 44 px sur téléphone).

Puis **« Proposer cet ordre »** : l'ordre part au vote et son vote se déplie aussitôt, au même
endroit, avec « Pour » et « Contre ». Si l'ordre formé est l'ordre en vigueur, le bouton reste
éteint et le dit ; s'il est déjà proposé, on vote celui-là au lieu d'en créer un double.
« Annuler » rend la section telle qu'elle se lisait.

Routes inchangées (ADR 0009) : `POST /api/units/{id}/order` pour proposer, le vote d'une version
pour voter.

## Combien de oui pour passer, combien de non pour bloquer

Yvv, 2026-11-02 : « combien il faut de oui pour passer et combien de non pour maintenir
l'opposition ». Le serveur le dit (ADR 0013 : `yesNeeded`, `noNeeded`, `quorum`) ; l'écran le
répète sans rien calculer (`needOf`, `web/src/lib/labels.ts`), le quorum en infobulle, jamais en
titre :

| Cas | Sous l'article déplié | En bref, dans la liste |
|---|---|---|
| aucun vote | « 9 oui sur 12 votants pour passer » | « 9 oui sur 12 » |
| des votes, des « non » la tiennent | « 11 oui pour passer · 4 non pour bloquer » | « passe à 11 oui · bloquée à 4 non » |
| sous le quorum, les absents la tiennent (`noNeeded` = 0) | « 9 oui pour passer · le quorum la bloque » | « passe à 9 oui » |

Cette ligne remplace « Seuil : R voix pour » sous l'article (R à la participation du moment
induisait en erreur dès qu'un « non » arrivait) ; R reste dans « La formule du seuil ». « Il
manque N voix pour. » reste : c'est `yesNeeded − pour`.

## Le quorum d'un article

Visible seulement quand le serveur le permet (`canSetQuorum` : l'auteur de la première
version, avant le premier vote ; un administrateur pour un texte du seed), dans le vote déplié,
sous l'inertie : un champ nombre, le défaut du cran rappelé, « Revenir au défaut (n) ». Les
refus du serveur sont dits dans les mots de la personne : hors bornes (400), un vote déjà là
(409), pas l'auteur (403). Les bornes restent au serveur : l'écran ne les recalcule pas.

## Ce qu'Yvv devrait regarder

- Les sections de « Propositions en cours » **repliées par défaut** : la page tient en un écran
  et demi, mais une proposition demande un geste de plus pour être vue.
- Le panneau **sans onglets** : on ne passe plus des détails au panier d'un clic dans le panneau ;
  on ferme, puis on ouvre l'autre.
- Les ordres et les titres proposés **ne sont plus des lignes** de « Propositions en cours » : ils
  se lisent et se votent à leur module (le panier les garde).
- Quand rien n'est en vigueur, les Propositions seed **en tête, en entier**.
- La ligne d'ordre, ses gestes discrets comme ceux d'un article (au survol sur bureau, toujours
  visibles sur téléphone) : elle ne crie plus, mais « Réordonner » se trouve au survol.
- Le mot court dans la liste : « passe à 11 oui · bloquée à 4 non ».