From 9fb094f505909baf0aa35c124c9dd0af358e2601 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Thu, 24 Sep 2026 08:43:12 -0400 Subject: [PATCH] feat: refonte mobile de la section Configurations #114 --- CHANGELOG.md | 32 ++- README.fr.md | 6 +- README.md | 6 +- VERSION | 2 +- desktop/Cargo.lock | 2 +- desktop/Cargo.toml | 2 +- desktop/tauri.conf.json | 2 +- docs/ISSUES_TODOLIST.md | 1 + docs/ROADMAP.md | 7 +- docs/features/settings-mobile-114.md | 172 ++++++++++++++ frontend/index.html | 47 ++-- frontend/js/config.js | 44 +++- frontend/locales/en.json | 9 +- frontend/locales/fr.json | 9 +- frontend/style.css | 310 ++++++++++++++++++++++---- package.json | 2 +- tests/e2e/config-mobile.spec.js | 81 ++++++- tests/frontend/config-mobile.test.mjs | 151 ++++++++++++- 18 files changed, 784 insertions(+), 101 deletions(-) create mode 100644 docs/features/settings-mobile-114.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 9213f7a..e0f4bdb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ Format basé sur [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/), et [Semantic Versioning](https://semver.org/spec/v2.0.0.html). > **En cours de développement** : les changements à venir sont listés dans la section -> [Unreleased](#unreleased). La dernière version livrée est **2.22.1**. +> [Unreleased](#unreleased). La dernière version livrée est **2.23.0**. --- @@ -14,6 +14,36 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html). --- +## [2.23.0] — 2026-09-24 + +### Ajouté + +- **#114 — Configuration, refonte mobile-responsive.** La page « Configurations » + est désormais pensée pour le tactile (≤ 768 px) : modale **plein écran** + (`100dvh`, safe-area), sommaire en **drawer coulissant** gauche + (`position: fixed`, largeur `min(320px, 88vw)`) avec fond assombri + (`#config-modal.config-toc-open::before`) et bouton de fermeture + `#config-toc-close` (tap sur le backdrop ou Échap ferme le drawer d'abord, + puis la modale) ; formulaires sur **une colonne** ; tous les boutons + (save/secondary/danger/add/sm/hamburger/fermer) et liens du sommaire en cibles + **≥ 44 px** ; champs et selects en **16 px + min-height 44 px** (anti-zoom + iOS) ; rangée « Sauvegarder / Réindexer / Réinitialiser » **sticky** en bas de + sa section avec safe-area ; MFA (codes de secours en 1 colonne, champ de code + full-width et wrap des rangées d'action) ; débordements webhook/token/share + corrigés. Dettes HTML/i18n de l'audit incluses : `.config-actions-row` replacée + dans `#cfg-backend-settings` (+ `` orphelin supprimé), id dupliqué + `cfg-partages-publics` retiré du `

`, conteneur mort + `#plugins-settings-container` supprimé, libellé `#mt-explorer` i18n + (`settings.explorer`), doublons `.config-btn-add` et règle morte + `.mfa-recovery-input` purgés ; i18n : clés mortes `settings.backend`, + `settings.backend_hint`, `settings.restart_badge`, `settings.save`, + `settings.plugins` supprimées, `config.toc_close` ajoutée, `settings.tabs` FR + corrigé (« Onglets »). Tests : `config-mobile.test.mjs` étendu (27, au CI) + + E2E `config-mobile.spec.js` (5, projet `chromium-mobile`). Fiche : + [docs/features/settings-mobile-114.md](./docs/features/settings-mobile-114.md). + +--- + ## [2.22.1] — 2026-09-23 ### Corrigé diff --git a/README.fr.md b/README.fr.md index 2397435..b28933a 100644 --- a/README.fr.md +++ b/README.fr.md @@ -4,7 +4,7 @@ **Porte d'entrée web ultra-léger pour vos vaults Obsidian** — Accédez, naviguez et recherchez dans toutes vos notes Obsidian depuis n'importe quel appareil via une interface web moderne et responsive. -[![Version](https://img.shields.io/badge/Version-2.22.1-blue.svg)]() +[![Version](https://img.shields.io/badge/Version-2.23.0-blue.svg)]() [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/) [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/) @@ -975,8 +975,8 @@ Ce projet est sous licence **MIT** — voir le fichier [LICENSE](LICENSE) pour l ## 📝 Changelog -Consultez le [CHANGELOG.md](./CHANGELOG.md) pour l'historique complet de toutes les versions (v1.0.0 → v2.22.1). +Consultez le [CHANGELOG.md](./CHANGELOG.md) pour l'historique complet de toutes les versions (v1.0.0 → v2.23.0). --- -*Projet : ObsiGate | Version : 2.22.1 | Dernière mise à jour : Septembre 2026* +*Projet : ObsiGate | Version : 2.23.0 | Dernière mise à jour : Septembre 2026* diff --git a/README.md b/README.md index 56e75c1..d118ae9 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ **Ultra-light web gateway for your Obsidian vaults** — Access, browse, and search all your Obsidian notes from any device via a modern, responsive web interface. -[![Version](https://img.shields.io/badge/Version-2.22.1-blue.svg)]() +[![Version](https://img.shields.io/badge/Version-2.23.0-blue.svg)]() [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/) [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/) @@ -1150,8 +1150,8 @@ This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) ## 📝 Changelog -See [CHANGELOG.md](./CHANGELOG.md) for the complete version history (v1.0.0 → v2.22.1). +See [CHANGELOG.md](./CHANGELOG.md) for the complete version history (v1.0.0 → v2.23.0). --- -*Project: ObsiGate | Version: 2.22.1 | Last updated: September 2026* +*Project: ObsiGate | Version: 2.23.0 | Last updated: September 2026* diff --git a/VERSION b/VERSION index d93847f..e9763f6 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2.22.1 +2.23.0 diff --git a/desktop/Cargo.lock b/desktop/Cargo.lock index e277934..65a1c34 100644 --- a/desktop/Cargo.lock +++ b/desktop/Cargo.lock @@ -2626,7 +2626,7 @@ dependencies = [ [[package]] name = "obsigate-desktop" -version = "2.22.1" +version = "2.23.0" dependencies = [ "chrono", "env_logger", diff --git a/desktop/Cargo.toml b/desktop/Cargo.toml index 0bab0a6..810f21a 100644 --- a/desktop/Cargo.toml +++ b/desktop/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "obsigate-desktop" -version = "2.22.1" +version = "2.23.0" description = "ObsiGate Desktop — Porte d'entrée native pour vos vaults Obsidian" authors = ["Bruno Charest"] edition = "2021" diff --git a/desktop/tauri.conf.json b/desktop/tauri.conf.json index 816103b..83f1dbb 100644 --- a/desktop/tauri.conf.json +++ b/desktop/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://raw.githubusercontent.com/nicedoc/obsigate/main/desktop/tauri.conf.schema.json", "productName": "ObsiGate", - "version": "2.22.1", + "version": "2.23.0", "identifier": "com.obsigate.desktop", "build": { "frontendDist": "../frontend", diff --git a/docs/ISSUES_TODOLIST.md b/docs/ISSUES_TODOLIST.md index f686467..1a54339 100644 --- a/docs/ISSUES_TODOLIST.md +++ b/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` (`` orphelin supprimé), id dupliqué `cfg-partages-publics` retiré du `

`, `#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) | --- diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index ec0b8de..c09886a 100644 --- a/docs/ROADMAP.md +++ b/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 | diff --git a/docs/features/settings-mobile-114.md b/docs/features/settings-mobile-114.md new file mode 100644 index 0000000..0c5a74f --- /dev/null +++ b/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) ; `` orphelin supprimé. +- Id dupliqué **`cfg-partages-publics`** retiré du `

` (l'id reste sur la + `
`, 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 + `` (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. diff --git a/frontend/index.html b/frontend/index.html index 452af72..c8544fa 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1551,6 +1551,17 @@