173 lines
8.9 KiB
Markdown
173 lines
8.9 KiB
Markdown
# #114 — Configuration — refonte mobile-responsive de la section Settings
|
||
|
||
> **Statut :** 🟢 · **Impact :** 🟡 · **Zone :** frontend (mobile, ≤ 768 px)
|
||
> **Fichiers :** `frontend/index.html`, `frontend/js/config.js`, `frontend/style.css`,
|
||
> `frontend/locales/{fr,en}.json`, `tests/frontend/config-mobile.test.mjs`,
|
||
> `tests/e2e/config-mobile.spec.js`.
|
||
|
||
## Contexte
|
||
|
||
La page **Configurations** (`#config-modal`) était utilisable en mobile seulement
|
||
partiellement (correctifs BUG-071) : le sommaire s'ouvrait en bloc haut, la modale
|
||
n'était pas plein écran, les cibles tactiles étaient sous 44 px, le clavier virtuel
|
||
iOS zoomait les champs, la rangée « Sauvegarder » disparaissait au scroll et plusieurs
|
||
dettes HTML/i18n étaient restées en place.
|
||
|
||
## Ce qui a été livré
|
||
|
||
### A. Sommaire en drawer coulissant
|
||
|
||
- `#config-nav` devient un **panneau coulissant gauche** (`position: fixed`,
|
||
`width: min(320px, 88vw)`, `z-index: 40`) sous un fond assombri
|
||
(`#config-modal.config-toc-open::before`, `z-index: 35`).
|
||
- Ouverture/fermeture pilotée par la classe **`.config-toc-open`** sur `#config-modal`
|
||
(JS `_setConfigNav`) + un `display` inline conservé pour le contrat de reset.
|
||
- Bouton **`#config-toc-close`** (classe `.help-toc-close`, `aria-label`
|
||
`config.toc_close`) dans l'en-tête du drawer ; visible uniquement dans le drawer
|
||
de la config (masqué sur desktop où la nav est toujours visible).
|
||
- **Backdrop** : un tap hors du drawer ferme d'abord le drawer, pas la modale
|
||
(`e.target === modal` → `config-toc-open` présent → `_setConfigNav(false)`).
|
||
- **Échap** : ferme le drawer d'abord, puis la modale.
|
||
- Fermeture de la modale (`closeConfigModal`) nettoie toujours la classe
|
||
`config-toc-open` et le `display` inline (aucun fond ne subsiste).
|
||
- Animation `config-toc-slide-in` (translateX) à l'ouverture.
|
||
|
||
### B. Modale plein écran
|
||
|
||
- `#config-modal` : `padding: 0`, `.editor-container` en `100vw × 100dvh`
|
||
(`100dvh` = hauteur du viewport dynamique, tient compte de la barre du navigateur
|
||
mobile), `border-radius: 0`, `border: none`.
|
||
- Le contenu (`#config-scroll`) garde son scroll propre ; le sous-bloc
|
||
`.config-content` reçoit un `padding-bottom: 80 px` pour ne jamais passer sous la
|
||
rangée sticky.
|
||
|
||
### C. Cibles tactiles ≥ 44 px & anti-zoom iOS
|
||
|
||
- **Champs** : `.config-input`, `.config-select`, `.help-nav-search`,
|
||
`.profile-field .config-input/.config-select` → `min-height: 44px` +
|
||
`font-size: 16px` (**anti-zoom iOS** : un `font-size < 16px` déclenche le zoom
|
||
automatique au focus). La règle est **scoppée `#config-modal`** pour ne pas écraser
|
||
`.mfa-code-input` (qui a sa propre typographie).
|
||
- **Boutons** : `.config-btn-save`, `.config-btn-secondary`, `.config-btn-primary`,
|
||
`.config-btn-danger`, `.config-btn-add`, `.config-btn-sm`, `.mfa-link-btn`,
|
||
`.theme-action-btn`, `.profile-avatar-actions .config-btn-secondary`,
|
||
`.editor-btn` (fermer), `#config-hamburger`, `#config-toc-close`,
|
||
`.help-search-clear` → `min-height/min-width: 44px`.
|
||
- **Liens du sommaire** : `.help-nav-link` → `min-height: 44px` (ligne tactile
|
||
confortable).
|
||
- `.help-hamburger` passe de 36 px à **44 px** en mobile (règle partagée avec le
|
||
modal d'aide).
|
||
|
||
### D. Rangée « Sauvegarder » sticky
|
||
|
||
- `.config-actions-row` (dans `#cfg-backend-settings`) → `position: sticky;
|
||
bottom: 0`, empilée verticalement (`flex-direction: column`), boutons pleine
|
||
largeur 44 px, fond opaque + bordure, `padding-bottom` avec
|
||
`env(safe-area-inset-bottom)` (barre home iOS).
|
||
- La rangée reste visible pendant le scroll de la section backend ; le
|
||
`padding-bottom: 80px` de `.config-content` garantit qu'elle ne masque jamais les
|
||
derniers contrôles.
|
||
|
||
### E. Formulaires 1 colonne & grilles
|
||
|
||
- `.config-row` → 1 colonne (`grid-template-columns: 1fr`), `.config-input--num`
|
||
pleine largeur, `text-align: left`.
|
||
- `.ai-default-grid` / `.ai-provider-fields` → 1 colonne.
|
||
- Add-rows (`.config-add-row`, `.config-add-pattern`) → wrap + largeurs inline
|
||
(`180/140/100px`) neutralisées (`width: auto !important`).
|
||
- Items webhook/token/share → wrap ; URLs/méta sur leur propre ligne
|
||
(`overflow-wrap: anywhere`) ; boutons de suppression 44 px.
|
||
- `.hidden-files-add-row` → wrap, input pleine largeur.
|
||
- `.config-diag-row` → wrap.
|
||
- `.profile-avatar-row` → wrap ; `.profile-form` → `max-width: 100%`.
|
||
- `.webauthn-key-item` → wrap ; `.webauthn-key-label` → pleine largeur.
|
||
- `.theme-grid` reste en `auto-fill minmax(160px, 1fr)` (déjà responsive).
|
||
|
||
### F. MFA & sécurité
|
||
|
||
- `.mfa-recovery-list` → **1 colonne** en mobile (2 colonnes illisibles à 360 px).
|
||
- `.mfa-verify-section`, `.mfa-recovery-actions`, `.mfa-disable-actions` → wrap ;
|
||
champs/boutons enfants en pleine largeur.
|
||
- `.mfa-code-input` → `width: 100%`, `max-width: 320px`, `letter-spacing: 6px`
|
||
(au lieu de 12 px qui débordait), `min-height: 52px`.
|
||
- `.mfa-secret-code` → `word-break: break-all` (secret TOTP long).
|
||
- `.mfa-code-input-group` → wrap.
|
||
- Règle morte **`.mfa-recovery-input`** supprimée (auth.js utilise
|
||
`mfa-code-input recovery-input`).
|
||
|
||
### G. Dettes HTML corrigées
|
||
|
||
- `.config-actions-row` (Sauvegarder / Réindexer / Réinitialiser) déplacée
|
||
**dans** `#cfg-backend-settings` (elle était hors de toute section → le sticky
|
||
n'avait pas de conteneur de scroll fiable) ; `</section>` orphelin supprimé.
|
||
- Id dupliqué **`cfg-partages-publics`** retiré du `<h2>` (l'id reste sur la
|
||
`<section>`, cf. #113).
|
||
- Conteneur mort **`#plugins-settings-container`** supprimé (le rendu réel est
|
||
`#cfg-plugins` via `plugins.js`).
|
||
- Sections plugins/about ré-indentées.
|
||
- **`#mt-explorer`** : libellé brut `settings.search` remplacé par
|
||
`<span data-i18n="settings.explorer">` (i18n correct, FR « Explorateur » / EN
|
||
« Files »).
|
||
- Doublons CSS **`.config-btn-add`** (3 définitions) réduits à la définition de
|
||
référence.
|
||
|
||
### H. i18n FR/EN
|
||
|
||
- **Purge des clés mortes** (aucune référence HTML/JS/tests/backend) :
|
||
`settings.backend`, `settings.backend_hint`, `settings.restart_badge`,
|
||
`settings.save`, `settings.plugins`.
|
||
- **Ajouts** : `settings.explorer` (FR « Explorateur » / EN « Files »),
|
||
`config.toc_close` (FR « Fermer le sommaire » / EN « Close contents »).
|
||
- **Correctif** : `settings.tabs` en FR était le mot anglais « Tabs » →
|
||
**« Onglets »** (EN reste « Tabs »).
|
||
- Clés vivantes conservées : `settings.reindex`, `settings.no_restart_badge`,
|
||
`settings.backend_section`, `settings.security`, `settings.search`,
|
||
`settings.tabs`, `settings.search_placeholder`.
|
||
|
||
## Tests
|
||
|
||
### Statics — `tests/frontend/config-mobile.test.mjs` (27, au CI)
|
||
|
||
- BUG-071a–e (hamburger, toggle JS, grilles/wrap, ancres mortes,
|
||
`data-i18n-attr` multi-paires) — conservés et adaptés au drawer.
|
||
- **#114a** : `#config-toc-close` présent + i18n ; `_setConfigNav` bascule
|
||
`.config-toc-open` ; backdrop `::before` (z-index 35) ; `.help-toc-close`
|
||
masqué sur desktop / visible dans le drawer ; Échap et backdrop ferment le
|
||
drawer d'abord ; `closeConfigModal` nettoie la classe.
|
||
- **#114b** : modale `100dvh` + `padding: 0` ; inputs/selects `16px` +
|
||
`44px` ; boutons `44px` ; rangée sticky (`position: sticky` +
|
||
`flex-direction: column` + safe-area) ; MFA 1 colonne + wrap + code
|
||
full-width ; `.config-actions-row` bien dans `#cfg-backend-settings`.
|
||
- **#114i18n** : clés mortes purgées ; `settings.explorer` FR/EN ;
|
||
`settings.tabs` FR = « Onglets » ; `#mt-explorer` porte
|
||
`data-i18n="settings.explorer"` ; `#plugins-settings-container` absent.
|
||
|
||
### E2E — `tests/e2e/config-mobile.spec.js` (5, projet `chromium-mobile`)
|
||
|
||
1. Hamburger → drawer `position: fixed` + classe `config-toc-open` sur la modale.
|
||
2. Bouton `#config-toc-close` et tap backdrop ferment le drawer **sans** fermer la
|
||
modale.
|
||
3. Sélection d'une section → scroll doux + lien actif + repli du drawer.
|
||
4. Modale plein écran (largeur/hauteur ≈ viewport) + `#config-hamburger`,
|
||
`#config-close` et `#cfg-save-backend` ≥ 44 px.
|
||
5. Aucun débordement horizontal à 393 px (sections IA / tokens / webhooks /
|
||
partages).
|
||
|
||
## Détails d'implémentation notables
|
||
|
||
- **Spécificité CSS** : les règles `#config-modal #config-nav` (2 ids) priment sur
|
||
les règles génériques `.help-nav` / `body .help-nav` qui masquent la nav en
|
||
mobile — pas besoin de `!important`.
|
||
- **Backdrop = pseudo-élément** : les clics sur `::before` sont attribués à
|
||
l'élément or (`#config-modal`), donc le handler `e.target === modal` existant
|
||
fonctionne sans node supplémentaire.
|
||
- **Contrat de reset conservé** : `configNavOnOpen.style.display = ''` à
|
||
l'ouverture (test statique BUG-071b) — le CSS reprend la main (drawer masqué par
|
||
défaut sur mobile).
|
||
- **`100dvh` avec repli `100vh`** : les navigateurs sans support `dvh` gardent le
|
||
comportement précédent.
|
||
- La règle `.help-hamburger { display: inline-flex }` du bloc mobile du modal
|
||
d'aide est **partagée** (44 px) ; le drawer de la config double avec
|
||
`#config-modal .help-hamburger` pour rester robuste à un réordonnancement des
|
||
règles.
|