ObsiGate/docs/features/header-user-sidebar-112.md

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