# #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.