feat: visionneuse d'images - navigation fluide, image ajustee au cadre, fleches laterales et pellicule persistante #111

docs/ROADMAP.md

@@ -1,6 +1,6 @@
 # ObsiGate — Roadmap
 
-> **Version :** 2.19.2 | **Dernière mise à jour :** 2026-09-23
+> **Version :** 2.20.0 | **Dernière mise à jour :** 2026-09-23
 > **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,8 +40,6 @@
   - [ ] **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
@@ -185,6 +183,7 @@
 | 108 | Support complet des images — arborescence, visionneuse (zoom/pan/navigation/miniatures), indexation nom+métadonnées, `media_types.py`, filtre `ext:`, SVG sandbox | 2.17.0 | [features/image-support.md](./features/image-support.md) |
 | 109 | Support audio & vidéo — lecteurs HTML5 intégrés, streaming HTTP Range (`/api/media`), fallback codec/taille | 2.18.0 | [features/media-viewers-109.md](./features/media-viewers-109.md) |
 | 110 | Lecteur média persistant « Now Playing » — élément partagé téléporté (inline ⇄ dock), Media Session, mini-vidéo PiP, mobile, reprise | 2.19.0 | [features/media-viewers-109.md](./features/media-viewers-109.md) |
+| 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) |
 
 ---
 
@@ -192,7 +191,7 @@
 
 | Priorité | Items | Effort total estimé |
 |---|---|---|
-| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–110, #92 | ~130 jours réalisés |
+| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–111, #92 | ~130 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/image-navigation-111.md

@@ -0,0 +1,80 @@
+# #111 — Visionneuse d'images : navigation fluide
+
+> **Version livrée :** 2.20.0 · **Statut :** 🟢 · **Impact :** 🟡
+> **Zone :** frontend (`frontend/js/viewer.js`, `frontend/style.css`, i18n FR/EN).
+> **Améliore :** [#108](./image-support.md) (visionneuse livrée en 2.17.0).
+
+## Contexte
+
+La visionneuse d'images de #108 fonctionnait mais restait perfectible sur l'usage
+quotidien :
+
+- certaines images s'affichaient **plus grandes que le cadre** de présentation ;
+- changer d'image (←/→, flèches, vignette) appelait `openFile` → `renderFile` →
+  `renderImageViewer`, soit **un rechargement complet** de la vue **et** un
+  nouvel appel `/api/browse` à *chaque* image — sensible dès qu'un dossier en
+  contient beaucoup ;
+- la **pellicule de miniatures disparaissait** le temps du re-rendu ;
+- aucune zone de clic latérale ne permettait de changer d'image.
+
+## Ce qui a été livré
+
+### A. Ajustement au cadre
+
+- La zone de contenu devient un conteneur **flex** dédié à la visionneuse
+  (`.content-area:has(> .image-viewer-container) { padding: 0; overflow: hidden }`) :
+  plus de défilement de page, la visionneuse occupe tout l'espace disponible.
+- `.image-stage` gagne `min-height: 0`, un `padding` de 16 px (cadre) et
+  `box-sizing: border-box` ; `.image-main` conserve `max-width/height: 100%`
+  avec `width/height: auto`. L'image est donc **toujours redimensionnée dans
+  l'espace disponible**, y compris quand le panneau « Métadonnées » s'ouvre
+  (la scène se réduit, l'image suit).
+
+### B. Navigation « en place » (performance)
+
+- `renderImageViewer` ne se contente plus de rendre une image : il gère un état
+  mutable (`currentPath`, `currentTitle`, `imgUrl`, `currentMeta`) et expose
+  `showSibling(index)` qui **remplace le `src` du `<img>`** sans reconstruire le
+  DOM. Les flèches, le clavier ←/→ et les miniatures passent tous par là.
+- Conséquences : plus de `openFile`, plus de re-rendu, **plus de refetch du
+  fichier ni de `/api/browse`** à chaque image.
+- **Cache annuaire** `_imageDirCache` (`Map`, TTL 15 s) : la liste des images
+  d'un dossier n'est récupérée qu'une fois par courte fenêtre.
+- **Préchargement** des images voisines (`new Image()`), avec un `Set` pour
+  éviter les doublons.
+
+### C. Pellicule persistante
+
+- La pellicule de miniatures n'est plus recréée à chaque navigation ; la
+  vignette active est simplement re-marquée (`.active`) et **amenée dans la vue
+  par défilement horizontal du film uniquement** (jamais la page).
+- Miniatures en `loading="lazy"` + `decoding="async"`.
+
+### D. Flèches latérales translucides
+
+- Deux boutons superposés `.image-nav-arrow` (prev/next) longent les bords du
+  cadre, avec une icône `chevron` et une ombre portée pour rester lisibles sur
+  toute image.
+- Opacité quasi nulle au repos, révélée au **survol du cadre** (`0.4`) puis du
+  bouton (`1`, avec dégradé sombre). Toujours visibles (opacité moyenne) sur les
+  appareils tactiles (`@media (hover: none)`).
+- Le `pointerdown`/`dblclick` des flèches n'est pas propagé à la scène : le
+  pan (glisser) et le double-clic de réinitialisation du zoom restent intacts.
+- Un **compteur** `n / total` est ajouté à la barre d'outils.
+
+## Tests
+
+- `tests/frontend/image-viewer.test.mjs` : helpers purs inchangés + vérifications
+  statiques de la navigation en place (`showSibling`, absence de
+  `_imageViewerNavPending`, cache annuaire), des flèches et du CSS
+  (`:has(> .image-viewer-container)`, `max-width/height`, `opacity`).
+- `tests/e2e/image-viewer.spec.js` (+1) : image contenue dans le cadre, flèche
+  superposée révélée au survol, titre mis à jour **sans recréer le conteneur**
+  (marqueur `data-inplace`), pellicule toujours visible et compteur affiché.
+
+## Limitations connues
+
+- Le cache annuaire a un TTL court : une image ajoutée puis ouverte dans les
+  quelques secondes peut ne pas apparaître tout de suite dans la pellicule.
+- Les flèches latérales n'apparaissent pas en mode lightbox plein écran
+  (navigation clavier ←/→ et pellicule masquée conservées).