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

frontend/js/auth.js

@@ -1,7 +1,7 @@
 /* ObsiGate — Authentication: API helper, AuthManager, login form, AdminPanel */
 import { state } from './state.js';
 import { safeCreateIcons, escapeHtml } from './utils.js';
-import { showToast, closeHeaderMenu } from './ui.js';
+import { showToast, closeHeaderMenu, closeMobileSidebar } from './ui.js';
 import { t, getLocale, setLocale } from './i18n.js';
 import { showWelcome } from './viewer.js';
 
@@ -13,6 +13,15 @@ window.handleLogout = () => {
   AuthManager.logout();
 };
 
+/** Two-letter initials for the sidebar account avatar (#112). */
+function userInitials(name) {
+  const parts = String(name || "").trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return "?";
+  const first = parts[0][0] || "";
+  const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+  return (first + last).toUpperCase() || "?";
+}
+
 // ---------------------------------------------------------------------------
 // API helpers
 // ---------------------------------------------------------------------------
@@ -323,22 +332,46 @@ const AuthManager = {
     const app = document.getElementById("app");
     if (login) login.classList.add("hidden");
     if (app) app.classList.remove("hidden");
-    this.renderUserMenu();
+    this.renderUserSection();
   },
 
-  renderUserMenu() {
+  /**
+   * Render the account block pinned at the bottom of the sidebar (#112) —
+   * the user identity/logout no longer live in the header.
+   */
+  renderUserSection() {
     const user = this.getUser();
-    const userMenu = document.getElementById("user-menu");
-    if (!userMenu) return;
+    const section = document.getElementById("sidebar-user");
     if (!user || !this._authEnabled) {
-      userMenu.innerHTML = "";
+      if (section) section.hidden = true;
       return;
     }
-    userMenu.innerHTML = '<span class="user-display-name">' + (user.display_name || user.username) + "</span>" + '<button class="btn-logout" id="logout-btn" title="' + t('auth.logout_title') + '" onclick="window.handleLogout()"><i data-lucide="log-out" style="width:14px;height:14px"></i></button>';
+    if (!section) return;
+
+    const name = user.display_name || user.username || "";
+    const nameEl = document.getElementById("sidebar-user-name");
+    if (nameEl) nameEl.textContent = name;
+    const roleEl = document.getElementById("sidebar-user-role");
+    if (roleEl) roleEl.textContent = user.role === "admin" ? t("sidebar.user_role_admin") : t("sidebar.user_role_user");
+    const avatarEl = document.getElementById("sidebar-user-avatar");
+    if (avatarEl) avatarEl.textContent = userInitials(name);
+    section.hidden = false;
     safeCreateIcons();
 
-    const logoutBtn = document.getElementById("logout-btn");
-    if (logoutBtn) logoutBtn.addEventListener("click", () => AuthManager.logout());
+    const logoutBtn = document.getElementById("sidebar-user-logout");
+    if (logoutBtn && !logoutBtn._obsigateBound) {
+      logoutBtn._obsigateBound = true;
+      logoutBtn.addEventListener("click", () => this.logout());
+    }
+    const profileBtn = document.getElementById("sidebar-user-profile");
+    if (profileBtn && !profileBtn._obsigateBound) {
+      profileBtn._obsigateBound = true;
+      profileBtn.addEventListener("click", () => {
+        closeMobileSidebar();
+        const trigger = document.getElementById("profile-open-btn");
+        if (trigger) trigger.click();
+      });
+    }
 
     const adminRow = document.getElementById("admin-menu-row");
     if (adminRow) {
@@ -355,6 +388,9 @@ const AuthManager = {
     }
   },
 
+  // Backwards-compatible alias (older callers/tests may use this name).
+  renderUserMenu() { this.renderUserSection(); },
+
   // ── Initialization ──────────────────────────────────────────────
 
   async checkAuthStatus() {

frontend/js/viewer.js

@@ -700,8 +700,26 @@ export function renderImageViewer(area, data) {
   container.appendChild(body);
 
   // ── Thumbnail filmstrip (navigation) ───────────────────────────────────
-  const strip = el("div", { class: "image-nav-strip", hidden: true });
-  container.appendChild(strip);
+  // #112 — the film scrolls with the mouse wheel and two translucent edge
+  // arrows; the scrollable strip is wrapped so the arrows stay fixed.
+  const navWrap = el("div", { class: "image-nav", hidden: true });
+  const strip = el("div", { class: "image-nav-strip" });
+  const stripPrev = el("button", {
+    class: "image-strip-arrow image-strip-arrow-prev",
+    type: "button",
+    title: t("viewer.image_strip_prev"),
+    "aria-label": t("viewer.image_strip_prev"),
+  }, [icon("chevron-left", 20)]);
+  const stripNext = el("button", {
+    class: "image-strip-arrow image-strip-arrow-next",
+    type: "button",
+    title: t("viewer.image_strip_next"),
+    "aria-label": t("viewer.image_strip_next"),
+  }, [icon("chevron-right", 20)]);
+  navWrap.appendChild(strip);
+  navWrap.appendChild(stripPrev);
+  navWrap.appendChild(stripNext);
+  container.appendChild(navWrap);
 
   let scale = 1;
   let tx = 0;
@@ -807,8 +825,8 @@ export function renderImageViewer(area, data) {
   };
 
   const renderStrip = () => {
-    if (siblings.length < 2) { strip.hidden = true; return; }
-    strip.hidden = false;
+    if (siblings.length < 2) { navWrap.hidden = true; return; }
+    navWrap.hidden = false;
     strip.innerHTML = "";
     thumbs = siblings.map((s, i) => {
       const thumb = el("img", {
@@ -826,6 +844,20 @@ export function renderImageViewer(area, data) {
     updateStripActive();
   };
 
+  // #112 — scroll the film with the wheel (vertical → horizontal) and the
+  // two overlay arrows; the active image never changes, only the strip view.
+  const scrollStrip = (dir) => {
+    strip.scrollBy({ left: dir * Math.max(140, strip.clientWidth * 0.8), behavior: "smooth" });
+  };
+  stripPrev.addEventListener("click", () => scrollStrip(-1));
+  stripNext.addEventListener("click", () => scrollStrip(1));
+  strip.addEventListener("wheel", (e) => {
+    if (strip.scrollWidth <= strip.clientWidth) return;
+    const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
+    strip.scrollLeft += delta;
+    e.preventDefault();
+  }, { passive: false });
+
   (async () => {
     try {
       const dir = currentPath.includes("/") ? currentPath.slice(0, currentPath.lastIndexOf("/")) : "";