feat: barre d'outils de lecture epinglee, coloration syntaxique des fichiers de code et avatars predefinis (#115, #117, BUG-078)

frontend/js/config.js

@@ -2534,6 +2534,7 @@ function initProfile() {
   var overlayBtn = document.getElementById('profile-avatar-overlay');
   var previewBox = document.getElementById('profile-avatar-preview');
   var removeBtn = document.getElementById('profile-avatar-remove');
+  var presetsBox = document.getElementById('profile-avatar-presets');
   if (!avatarField || !avatarInput || !chooseBtn) return;
 
   // The avatar only exists on a real account — hide it when auth is off.
@@ -2554,6 +2555,59 @@ function initProfile() {
     })
     .catch(function () { /* non-bloquant */ });
 
+  // ── Preset avatars (#117) ────────────────────────────────────────
+  var PRESET_STORAGE_KEY = 'obsigate-avatar-preset';
+  function markActivePreset(name) {
+    if (!presetsBox) return;
+    presetsBox.querySelectorAll('.profile-avatar-preset').forEach(function (btn) {
+      var on = !!name && btn.getAttribute('data-avatar') === name;
+      btn.classList.toggle('active', on);
+      btn.setAttribute('aria-checked', on ? 'true' : 'false');
+    });
+  }
+  function clearActivePreset() {
+    try { localStorage.removeItem(PRESET_STORAGE_KEY); } catch (e) { /* ignore */ }
+    markActivePreset(null);
+  }
+  function rememberActivePreset(name) {
+    try { localStorage.setItem(PRESET_STORAGE_KEY, name); } catch (e) { /* ignore */ }
+    markActivePreset(name);
+  }
+  var savedPreset = null;
+  try { savedPreset = localStorage.getItem(PRESET_STORAGE_KEY); } catch (e) { /* ignore */ }
+  markActivePreset(savedPreset);
+
+  if (presetsBox) {
+    presetsBox.querySelectorAll('.profile-avatar-preset').forEach(function (btn) {
+      btn.addEventListener('click', async function () {
+        var preset = btn.getAttribute('data-avatar');
+        if (!preset) return;
+        _profileAvatarError(null);
+        var all = presetsBox.querySelectorAll('.profile-avatar-preset');
+        all.forEach(function (b) { b.disabled = true; });
+        try {
+          // Load the bundled image, then reuse the upload pipeline (center-crop
+          // + 256 px JPEG) so it stores exactly like an imported picture.
+          var res = await fetch('/static/icons/avatar/' + encodeURIComponent(preset), { credentials: 'include' });
+          if (!res.ok) throw new Error('HTTP ' + res.status);
+          var blob = await res.blob();
+          var dataUrl = await _resizeAvatarFile(blob);
+          var user = await _patchProfileAvatar(dataUrl);
+          AuthManager.updateCachedUser(user);
+          _renderProfileAvatar(user.avatar || dataUrl);
+          AuthManager.renderUserSection();
+          rememberActivePreset(preset);
+          showToast(t('config.avatar_updated'), 'success');
+        } catch (err) {
+          _profileAvatarError('config.avatar_upload_failed');
+          console.error('Avatar preset failed:', err);
+        } finally {
+          all.forEach(function (b) { b.disabled = false; });
+        }
+      });
+    });
+  }
+
   function openPicker() {
     _profileAvatarError(null);
     avatarInput.click();
@@ -2587,6 +2641,7 @@ function initProfile() {
       AuthManager.updateCachedUser(user);
       _renderProfileAvatar(user.avatar || dataUrl);
       AuthManager.renderUserSection();
+      clearActivePreset();               // an imported photo is not a preset
       showToast(t('config.avatar_updated'), 'success');
     } catch (err) {
       _profileAvatarError('config.avatar_upload_failed');
@@ -2605,6 +2660,7 @@ function initProfile() {
         AuthManager.updateCachedUser(user);
         _renderProfileAvatar(null);
         AuthManager.renderUserSection();
+        clearActivePreset();
         showToast(t('config.avatar_removed'), 'success');
       } catch (err) {
         _profileAvatarError('config.avatar_upload_failed');

frontend/js/themes.js

@@ -598,6 +598,17 @@ function applyTheme(themeKey, mode) {
   // Notify other components of theme change
   try {
     root.setAttribute('data-theme', mode);
+    // Syntax highlighting follows the light/dark mode (BUG-078): the theme
+    // *key* is not a mode, so toggling the sheets by key used to disable both
+    // and strip every code block of its colours. Sepia/high-contrast reuse the
+    // light palette.
+    var darkSheet = document.getElementById('hljs-theme-dark');
+    var lightSheet = document.getElementById('hljs-theme-light');
+    if (darkSheet && lightSheet) {
+      var isDark = mode === 'dark';
+      darkSheet.disabled = !isDark;
+      lightSheet.disabled = isDark;
+    }
     document.dispatchEvent(new CustomEvent('themechange', { detail: { theme: themeKey, mode: mode } }));
   } catch(e) {}
 }

frontend/js/ui.js

@@ -137,14 +137,26 @@ export const RightSidebarManager = {
 // ---------------------------------------------------------------------------
 // Theme
 // ---------------------------------------------------------------------------
+const _THEME_MODES = ["dark", "light", "high-contrast", "sepia"];
+
 export function initTheme() {
-  const saved = localStorage.getItem("obsigate-theme") || "dark";
-  applyTheme(saved);
+  // The theme engine (themes.js) owns the CSS variables and the theme *key*;
+  // the <html data-theme> attribute must carry the *mode* (dark/light/…). Read
+  // the persisted mode here so the first paint and the highlight.js stylesheet
+  // are right before the async theme init runs (BUG-078).
+  let mode = "dark";
+  try { mode = localStorage.getItem("obsigate-theme-mode") || "dark"; } catch (e) { /* ignore */ }
+  applyTheme(mode);
 }
 
 export function applyTheme(theme) {
-  document.documentElement.setAttribute("data-theme", theme);
-  localStorage.setItem("obsigate-theme", theme);
+  let mode = theme;
+  if (_THEME_MODES.indexOf(mode) === -1) {
+    // Callers may pass a theme key (legacy): fall back to the persisted mode.
+    try { mode = localStorage.getItem("obsigate-theme-mode") || "dark"; } catch (e) { mode = "dark"; }
+  }
+  const isDark = mode === "dark";
+  document.documentElement.setAttribute("data-theme", mode);
 
   // Update theme button icon and label
   const themeBtn = document.getElementById("theme-toggle");
@@ -152,23 +164,23 @@ export function applyTheme(theme) {
   if (themeBtn && themeLabel) {
     const icon = themeBtn.querySelector("i");
     if (icon) {
-      icon.setAttribute("data-lucide", theme === "dark" ? "moon" : "sun");
+      icon.setAttribute("data-lucide", isDark ? "moon" : "sun");
     }
-    themeLabel.textContent = theme === "dark" ? t('theme.dark') : t('theme.light');
+    themeLabel.textContent = isDark ? t('theme.dark') : t('theme.light');
     safeCreateIcons();
   }
 
-  // Swap highlight.js theme
+  // Swap highlight.js theme — keyed on the mode, not the theme key (BUG-078).
   const darkSheet = document.getElementById("hljs-theme-dark");
   const lightSheet = document.getElementById("hljs-theme-light");
   if (darkSheet && lightSheet) {
-    darkSheet.disabled = theme !== "dark";
-    lightSheet.disabled = theme !== "light";
+    darkSheet.disabled = !isDark;
+    lightSheet.disabled = isDark;
   }
 
   // Update Mermaid theme for newly rendered diagrams
   import('./mermaid-viewer.js').then(function(m) {
-    m.updateMermaidTheme(theme === 'dark');
+    m.updateMermaidTheme(isDark);
   }).catch(function() {});
 }
 

frontend/js/viewer.js

@@ -1418,7 +1418,12 @@ export function renderFile(data) {
   // Assemble
   area.innerHTML = "";
   area.appendChild(breadcrumb);
-  area.appendChild(el("div", { class: "file-header" }, [el("div", { class: "file-title" }, [document.createTextNode(data.title)]), tagsDiv, el("div", { class: "file-actions" }, fileActions)]));
+  area.appendChild(el("div", { class: "file-header" }, [el("div", { class: "file-title" }, [document.createTextNode(data.title)]), tagsDiv]));
+  // #115 — the action bar is a direct child of the scroll container (wrapped in
+  // `.file-toolbar`) so it can stay pinned while long documents scroll; nested
+  // inside `.file-header` it would stop sticking as soon as the header left the
+  // viewport.
+  area.appendChild(el("div", { class: "file-toolbar" }, [el("div", { class: "file-actions" }, fileActions)]));
   if (fmSection) area.appendChild(fmSection);
   area.appendChild(mdDiv);
   area.appendChild(rawDiv);