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');