feat: en-tete allege, compte utilisateur en sidebar et pellicule d'images defilable (molette + fleches) #112

2026-09-23 21:06:41 -04:00
parent b926f01b85
commit a726ad8511
21 changed files with 563 additions and 53 deletions
@@ -0,0 +1,69 @@
+# #112 — En-tête allégé & compte en sidebar
+
+> **Version livrée :** 2.21.0 · **Statut :** 🟢 · **Impact :** 🟡
+> **Zone :** frontend (`index.html`, `frontend/js/auth.js`, `frontend/js/viewer.js`,
+> `frontend/style.css`, i18n FR/EN) + CI (`.gitea/workflows/ci.yml`).
+
+## Contexte
+
+Le header concentrait plusieurs éléments redondants ou peu lisibles :
+
+- la **version** était affichée en permanence à côté du bouton Options ;
+- un **bouton de déconnexion** et le **nom de l'utilisateur** occupaient la zone
+  droite du header, sans regroupement logique ;
+- la pellicule de miniatures de la visionneuse d'images ne pouvait être
+  parcourue qu'au glisser (pas de molette horizontale ni de flèches dédiées).
+
+## Ce qui a été livré
+
+### A. Header allégé
+
+- **Version déplacée** du header vers le menu **Options** : nouvelle ligne
+  non-interactive « Version » (`#version-badge` conservé pour `populateVersions`).
+- **Suppression** du bloc `#user-menu` (nom + bouton « sign out ») et de la
+  ligne « Déconnexion » du menu Options. Le header droit ne garde que l'indicateur
+  hors-ligne, le contexte vault et le bouton Options.
+
+### B. Section compte en bas de la sidebar
+
+- Nouveau bloc `#sidebar-user` épinglé au bas de la sidebar (`flex-shrink: 0`,
+  bordure supérieure), à la manière d'un site web professionnel :
+  - initiales dans un **avatar** circulaire (dégradé d'accent) ;
+  - **nom** (`#sidebar-user-name`, classe `.user-display-name` conservée pour la
+    réutilisation par la collaboration) et **rôle** localisé
+    (Administrateur / Utilisateur) ;
+  - **bouton déconnexion** (`#sidebar-user-logout`) ;
+  - clic sur l'identité → **Profil** (ouvre la section `#cfg-profile`).
+- `AuthManager.renderUserSection()` peuple le bloc ; il reste masqué quand
+  l'authentification est désactivée (`#sidebar-user[hidden]`). `renderUserMenu()`
+  est conservé comme alias rétro-compatible.
+- La règle mobile qui masquait `.user-display-name` est limitée au header
+  (`.header-right .user-display-name`) pour que le nom reste visible dans la
+  sidebar mobile.
+
+### C. Pellicule d'images défilable (#112, complément de #111)
+
+- Nouveau conteneur `.image-nav` autour de la pellicule, avec deux **flèches
+  translucides** fixes (`.image-strip-arrow-prev/next`) révélées au survol.
+- **Molette** au-dessus de la pellicule → défilement horizontal
+  (`strip.scrollLeft += deltaY`), conversion des deltas verticaux.
+- Les flèches font défiler d'une « page » (`strip.scrollBy`, défilement doux).
+
+## Tests
+
+- `tests/frontend/unit.test.mjs` (+1) : header nettoyé (plus de `#user-menu`,
+  `#logout-btn`, ni version dans `.header-right`), version dans le menu Options,
+  présence de `#sidebar-user`, styles `.sidebar-user`/`.menu-list-version`, clés
+  i18n FR/EN.
+- `tests/frontend/image-viewer.test.mjs` (+1) : wrapper `.image-nav`, flèches de
+  pellicule, molette et `scrollBy`.
+- `tests/e2e/header-sidebar.spec.js` (nouveau) : test header/version exécuté
+  partout ; test compte en sidebar conditionné à l'auth (skip sinon).
+- CI : `image-viewer.test.mjs` ajouté au job `lint` (il n'y était pas depuis #108).
+
+## Limitations connues
+
+- La section compte n'apparaît que si l'authentification est activée.
+- `doLogoutFallback` (script inline supprimé avec la ligne du menu) reste appelé
+  par la section Profil uniquement en repli ; `window.handleLogout` est toujours
+  défini par `auth.js`, donc le repli n'est jamais atteint.