feat: refonte mobile de la section Configurations #114

docs/ISSUES_TODOLIST.md

@@ -262,6 +262,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | 2026-09-23 | BUG-071 (complément E2E) | Test | `tests/e2e/config-mobile.spec.js` (nouveau), `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-071 (complément E2E)** : spec Playwright mobile (convention `mobile-editor.spec.js` : `test.skip` hors viewport ≤768px, donc inactive sur le projet `chromium-desktop` du CI). Vérifié en local sur l'instance de test (port 2029, auth désactivée) : hamburger → sommaire, sélection → scroll + actif + repli, 0 débordement horizontal à 393px (3/3 `chromium-mobile`, 3 ignorés en desktop) ; suite `mobile-editor.spec.js` intacte (3/3). | 🟢 corrigé (en attente vérif utilisateur) |
 | 2026-09-23 | BUG-072 | Correction | `frontend/js/viewer.js`, `frontend/style.css`, `tests/frontend/image-viewer.test.mjs`, `tests/e2e/image-viewer.spec.js`, `scripts/run-e2e-local.ps1` (nouveau), `package.json`, `AGENTS.md`, `README.md`, `README.fr.md`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-072** : dans la visionneuse d'images (#108-D), le plein écran (lightbox) et le panneau « Métadonnées » étaient perdus dès qu'on changeait d'image avec ←/→ (ou la pellicule), car `openFile` → `renderFile` recrée entièrement `renderImageViewer`. (1) **Persistance** : état module `_imageViewerState { lightbox, meta }` restauré à chaque rendu ; un drapeau `_imageViewerNavPending` posé par `go()` et le clic de vignette indique à `renderFile` que le rendu suivant est une navigation image→image (pas de réinitialisation) — toute autre ouverture repart à zéro. (2) **Panneau latéral** : `.image-meta-panel` déplacé dans un nouveau `.image-viewer-body` en flex row, à droite de `.image-stage` (`border-left`, `width:280px; max-width:40%`, défilement vertical) au lieu d'une bande sous la pellicule ; la règle lightbox ne masque plus que la pellicule. Boutons stables `image-btn-lightbox`/`image-btn-metadata` + `aria-pressed`, `Escape` resynchronise l'état. Tests statiques `image-viewer.test.mjs` (+2) et E2E Playwright (+1). **Diagnostic E2E** : `npm run test:e2e` bloquait car `bash` résout vers WSL (HS, Ubuntu `Stopped`, `HCS_E_CONNECTION_TIMEOUT`) et git-bash est bloqué par App Control → lanceur PowerShell ajouté. Vérifié : `image-viewer.spec.js` 4/4, **suite `chromium-desktop` complète 103 passed / 6 skipped (10,3 min)** via `scripts/run-e2e-local.ps1`, `image-viewer.test.mjs` 12/12, unit 10/10, validate-imports 40 modules. | 🟢 corrigé (en attente vérif utilisateur) |
 | 2026-09-23 | BUG-073 | Correction | `frontend/style.css`, `tests/frontend/mobile-toolbar.test.mjs` (nouveau), `tests/e2e/mobile-toolbar.spec.js` (nouveau), `.gitea/workflows/ci.yml`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-073** : en mobile (≤768px), la barre fixe `#mobile-toolbar` (64px + safe-area) recouvrait le bas de tous les documents/pages — fin de contenu inaccessible. (1) **Cause** : la règle de clearance du bloc `@media (max-width: 768px)` ciblait `.main-layout`, classe absente de `index.html` (vrai conteneur : `.main-body`) → sélecteur mort, zéro dégagement ; règle sœur morte `.editor-modal.active ~ .main-layout { padding-bottom: 0 }` supprimée (overlay plein écran / nécessaire en édition inline). (2) **Correctif** : `.main-body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)) }`, reset `body.reading-mode .main-body { padding-bottom: 0 }` (barre masquée en mode lecture), `body.np-active .content-area` ramené de `calc(64px+safe+76px)` à `76px` (dégagement dock seul — géométrie totale identique, pas de double comptage avec `.main-body`). Tests : `mobile-toolbar.test.mjs` (7 statiques, ajouté au CI), E2E `mobile-toolbar.spec.js` (géométrie + scroll fin de `ANALYSE_REVIEW.md`, skip hors viewport ≤768). Vérifié : `mobile-toolbar` 7/7, JSDOM 14 suites 0 échec, **E2E `chromium-mobile` BUG-073 2/2 + régressions mobile-editor/config-mobile 6/6**, **suite `chromium-desktop` complète 106 passed / 9 skipped (11,4 min)**, pytest 1302 passed / 6 skipped, ruff/mypy 0, validate-imports 40 modules, unit 11/11. | 🟢 corrigé (en attente vérif utilisateur) |
+| 2026-09-24 | #114 | Feature | `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`, `docs/features/settings-mobile-114.md` (nouvelle), `docs/ROADMAP.md`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **#114 — Configuration, refonte mobile-responsive (≤768px)**. (1) **Drawer sommaire** : `#config-nav` en panneau `position: fixed` (`min(320px, 88vw)`, z-index 40) sous backdrop `#config-modal.config-toc-open::before` (z-index 35) ; bouton `#config-toc-close` ; backdrop/Échap ferment le drawer d'abord puis la modale ; `_setConfigNav` bascule la classe + conserve le `display` inline de reset. (2) **Modale plein écran** : `100dvh` + `padding: 0`, `border-radius: 0`. (3) **Tactile** : boutons/liens ≥44px, inputs/selects `16px` + `min-height: 44px` (anti-zoom iOS, scopé `#config-modal`), rangée `.config-actions-row` sticky column + safe-area, formulaires 1 colonne, MFA 1 colonne + code full-width, wrap webhook/token/share/diag/avatar/webauthn. (4) **Dettes HTML/i18n** : `.config-actions-row` replacée dans `#cfg-backend-settings` (`</section>` orphelin supprimé), id dupliqué `cfg-partages-publics` retiré du `<h2>`, `#plugins-settings-container` supprimé, doublons `.config-btn-add` + règle morte `.mfa-recovery-input` purgés, `#mt-explorer` → `data-i18n="settings.explorer"` ; i18n : clés mortes `settings.{backend,backend_hint,restart_badge,save,plugins}` supprimées, `settings.explorer` + `config.toc_close` ajoutées, `settings.tabs` FR = « Onglets ». Vérifié : `config-mobile.test.mjs` 27/27 (au CI), unit 11/11, validate-imports 40 modules, pytest 1302 passed / 6 skipped, ruff/mypy 0, E2E `chromium-mobile` 5/5. | ✅ livré (en attente vérif utilisateur) |
 
 ---
 

docs/ROADMAP.md

@@ -1,6 +1,6 @@
 # ObsiGate — Roadmap
 
-> **Version :** 2.22.1 | **Dernière mise à jour :** 2026-09-23
+> **Version :** 2.23.0 | **Dernière mise à jour :** 2026-09-24
 > **Ce fichier ne contient que le travail à venir** (🔵 En cours + ⚪ Backlog) et un index compact
 > vers les fonctionnalités livrées.
 > - **Méthode de livraison à appliquer pour toute tâche : [DELIVERY_WORKFLOW.md](./DELIVERY_WORKFLOW.md)**
@@ -40,6 +40,8 @@
   - [ ] **Signature de code Windows** : non retenue (pas de certificat) — alternatives : livrer non signé, SignPath.io (OSS gratuit), Certum OSS, Azure Trusted Signing, certificat EV
   - [ ] Exécuter les 6 tests E2E **manuels** — protocole documenté : [DESKTOP_E2E_CHECKLIST.md](./DESKTOP_E2E_CHECKLIST.md)
 
+---
+
 ## ⚪ Backlog — Priorité 4 (P4)
 
 ### 73. Synchronisation multi-appareils — Obsidian Sync compatible
@@ -186,6 +188,7 @@
 | 111 | Visionneuse d'images — navigation fluide : image ajustée au cadre, navigation en place (cache annuaire + préchargement), pellicule persistante, flèches latérales au survol | 2.20.0 | [features/image-navigation-111.md](./features/image-navigation-111.md) |
 | 112 | En-tête allégé & compte en sidebar — version dans le menu Options, retrait utilisateur/déconnexion du header, section compte en bas de la sidebar, pellicule d'images défilable (molette + flèches) | 2.21.0 | [features/header-user-sidebar-112.md](./features/header-user-sidebar-112.md) |
 | 113 | Configuration — ordre naturel des sections (Profil 1er, À propos dernier, TOC = page) & avatar utilisateur (import PNG/JPG/WEBP, persistance serveur, cercle sidebar) | 2.22.0 | [features/settings-order-avatar-113.md](./features/settings-order-avatar-113.md) |
+| 114 | Configuration — refonte mobile-responsive (modale plein écran 100dvh, sommaire en drawer coulissant, cibles tactiles ≥ 44 px, inputs 16 px anti-zoom, sauvegarde sticky, MFA 1 colonne, purge i18n/HTML) | 2.23.0 | [features/settings-mobile-114.md](./features/settings-mobile-114.md) |
 
 ---
 
@@ -193,7 +196,7 @@
 
 | Priorité | Items | Effort total estimé |
 |---|---|---|
-| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–113, #92 | ~131 jours réalisés |
+| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–114, #92 | ~133 jours réalisés |
 | 🔵 P2 restant | #77 Desktop : signature de code (non retenue), 6 tests E2E **manuels** ([protocole](./DESKTOP_E2E_CHECKLIST.md)) | ~0,5-1 jour |
 | ⚪ P4 restant | #73 Sync (6-8j) | 6-8 jours |
 | ⚪ P0/P1 restant | #85, #87 Refonte architecturale, CI/CD (BUG-035 → BUG-040 corrigés, #86 livré) | ~11-17 jours |

docs/features/settings-mobile-114.md

@@ -0,0 +1,172 @@
+# #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.