From d4531da9be27094b585acaaf47394511f657c2f6 Mon Sep 17 00:00:00 2001 From: Yvv Date: Mon, 2 Nov 2026 05:50:02 +0100 Subject: [PATCH 1/9] =?UTF-8?q?Lot=20U=20:=20note=20de=20conception=20du?= =?UTF-8?q?=20lecteur=20(sur=20place=20ou=20=C3=A0=20droite,=20consoles,?= =?UTF-8?q?=20natures=20des=20modules,=20page=20courte)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- .../acte-certification/UX-lecteur.md | 143 ++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 docs/chantiers/acte-certification/UX-lecteur.md diff --git a/docs/chantiers/acte-certification/UX-lecteur.md b/docs/chantiers/acte-certification/UX-lecteur.md new file mode 100644 index 0000000..2929588 --- /dev/null +++ b/docs/chantiers/acte-certification/UX-lecteur.md @@ -0,0 +1,143 @@ +# 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 ·
» 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. + +## 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**. From 0a63bd7876df14cf59b6ffb618d4224365af890d Mon Sep 17 00:00:00 2001 From: Yvv Date: Tue, 3 Nov 2026 07:34:49 +0100 Subject: [PATCH 2/9] =?UTF-8?q?Lot=20U,=20travail=20en=20cours=20:=20ic?= =?UTF-8?q?=C3=B4ne=20poign=C3=A9e,=20crans=20dessin=C3=A9s=20(Crans),=20c?= =?UTF-8?q?hamps=20annonc=C3=A9s=20de=20S=20et=20V,=20canCast=20et=20byCha?= =?UTF-8?q?in?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- web/src/lib/components/Crans.svelte | 42 +++++++++++++++++++++++++++++ web/src/lib/components/Icon.svelte | 4 ++- web/src/lib/types.ts | 17 ++++++++++++ web/src/lib/vote.ts | 15 ++++++++++- 4 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 web/src/lib/components/Crans.svelte diff --git a/web/src/lib/components/Crans.svelte b/web/src/lib/components/Crans.svelte new file mode 100644 index 0000000..cc0d1c5 --- /dev/null +++ b/web/src/lib/components/Crans.svelte @@ -0,0 +1,42 @@ + + + + + {#if short}{full}{:else}{full}{/if} + + + diff --git a/web/src/lib/components/Icon.svelte b/web/src/lib/components/Icon.svelte index 35446b1..398640d 100644 --- a/web/src/lib/components/Icon.svelte +++ b/web/src/lib/components/Icon.svelte @@ -1,6 +1,6 @@

{t('basket.title')}

+ +

{t('basket.intro')}

{#if access && !access.open}

{t(access.reason === 'chain_off' ? 'vote.chain.off' : 'vote.members')}

@@ -216,11 +217,6 @@ display: grid; gap: 0.9rem; } - h3 { - font-family: var(--font-text); - font-weight: 500; - font-size: 1.4rem; - } .closed { font-weight: 700; color: var(--ink-soft); diff --git a/web/src/lib/components/DeepList.svelte b/web/src/lib/components/DeepList.svelte index 107c39b..e54ce40 100644 --- a/web/src/lib/components/DeepList.svelte +++ b/web/src/lib/components/DeepList.svelte @@ -1,52 +1,67 @@ -{#snippet module(p: Proposal)} - {#if p.kind === 'title'}{t('module.title.name')}{/if} - {#each orderNote(p) as note (note)}{note}{/each} +{#snippet need(p: Proposal)} + {@const n = needOf(p)} + {#if n}{n.short}{/if} {/snippet} {#snippet marks(p: Proposal)} @@ -85,97 +100,219 @@ {#if p.mine}{t('deep.mine')}{/if} {/snippet} +{#if sections.length && !all} +
+ +
+{/if} +
    - {#each articles as a, i (a.unit.id)} - {@const unit = a.unit} - {@const best = a.versions[0]} - {#if sectionLabel(unit.section) && unit.section !== articles[i - 1]?.unit.section} -
  • - {sectionLabel(unit.section)} - {#if onsection && unit.section} - {@const key = unit.section} + {#each sections as s, i (keyOf(s))} + {@const open = isOpen(s)} + {@const label = sectionLabel(s.key) ?? (s.key ? s.key : t('deep.section.none'))} +
  • +
    + + {#if onsection && s.key && s.articles.length} + {@const key = s.key} {/if} -
  • - {/if} - {#if best && a.versions.length === 1} -
  • - - {#if vote === best.id}
    {@render fold(unit, best)}
    {/if} -
  • - {:else if best} - {@const open = isOpen(a)} - {@const title = headline(a)} - {@const told = toldApart(a)} -
  • - - -
  • - {/if} + + {#if open} +
    + {#if s.order?.id !== reordering} +
      + {#each s.articles as a (a.unit.id)} + {@const unit = a.unit} + {@const best = a.versions[0]} + {#if best && a.versions.length === 1} +
    • + + {#if vote === best.id}
      {@render fold(unit, best)}
      {/if} +
    • + {:else if best} + {@const vopen = isVersionsOpen(a)} + {@const title = headline(a)} + {@const told = toldApart(a)} +
    • + + +
    • + {/if} + {/each} +
    + {/if} + {#if s.order}{@render order(s.order)}{/if} +
    + {/if} + {:else}
  • {t('deep.none')}
  • {/each}
diff --git a/web/src/lib/components/DocPanel.svelte b/web/src/lib/components/DocPanel.svelte index ab013f1..8ea4289 100644 --- a/web/src/lib/components/DocPanel.svelte +++ b/web/src/lib/components/DocPanel.svelte @@ -1,30 +1,28 @@ -