Rework contenus-edit: auto-save, OverType toolbar, dynamic sidebar links

- Auto-save: new autosave.js with 1.5s debounce, watches all forms with data-autosave, POSTs to form action with Accept: application/json, shows saving/saved/error status indicator - All action handlers (page.php, apropos.php, form-help.php) now detect JSON Accept header and return {success, csrf_token} or {error} responses - OverType toolbar enabled (toolbar:true) on all three markdown editors (page, about_page, form_help) - Sidebar links: replaced fixed erg_site_url / source_code_url rows with dynamic sidebar_links array of {label, url} objects. Add/remove via JS. Fallback migration reads legacy keys if sidebar_links is empty. - Updated AboutController and about.php template to render dynamic links - Updated apropos.css: unified .apropos-toc-link replacing .apropos-toc-erg and .apropos-toc-source - New CSS: autosave-status states, sidebar-link-row layout - Removed all Enregistrer + Annuler buttons — auto-save and h1 back-arrow make them redundant
2026-06-25 16:19:19 +02:00 · 2026-06-09 17:10:49 +02:00
parent a45a2c9ac4
commit c4a550f9d1
13 changed files with 441 additions and 93 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -23,3 +23,4 @@

 - [x] Formulaire étudiant : préciser "un seul contact" dans le label, mise à jour du hint pour le format le plus court (site sans https://www., insta/mastodon avec @), adaptation de l'affichage public pour supporter ces formats courts (liens automatiques pour @pseudo → Instagram, @pseudo@instance → Mastodon, domaine nu → https://)
 - [x] Déplacer "Contact visible" du Backoffice vers "Informations du TFE" dans le formulaire admin edit, renommer "Identité" → "Informations du TFE" dans le récapitulatif admin
+- [x] Rework contenus-edit: auto-save (debounce 1.5s) sur tous les formulaires (page, form-help, contacts, sidebar links), toolbar OverType sur tous les éditeurs markdown, sidebar links dynamiques (add/remove) remplaçant les 2 liens fixes erg_site_url/source_code_url par un seul key sidebar_links avec fallback de migration
--- a/app/public/admin/actions/apropos.php
+++ b/app/public/admin/actions/apropos.php
@@ -1,25 +1,45 @@
 <?php
 /**
- * Save handler for apropos contacts.
- * Structure: groups[] with role, each having entries[] of {text, url, email}.
+ * Save handler for apropos contacts, sidebar links, and URL-based keys.
+ * Supports:
+ *   - contacts: groups[] with role, each having entries[] of {text, url, email}
+ *   - sidebar_links: links[] of {label, url}
+ *   - Legacy URL keys: erg_site_url, source_code_url (single url field)
 */
 require_once __DIR__ . "/../../../bootstrap.php";
 require_once __DIR__ . '/../../../src/AdminAuth.php';
 error_log('[apropos.php] ENTRY | method=' . $_SERVER['REQUEST_METHOD'] . ' | key=' . ($_POST['apropos_key'] ?? 'none') . ' | post_keys=' . implode(',', array_keys($_POST)));
 AdminAuth::requireLogin();

+$isAjax = !empty($_SERVER['HTTP_ACCEPT']) && str_contains($_SERVER['HTTP_ACCEPT'], 'application/json');
+
 // CSRF check
 if (!isset($_POST['csrf_token']) || !isset($_SESSION['csrf_token']) ||
    !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
+    if ($isAjax) {
+        http_response_code(403);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => 'Erreur de sécurité : token invalide.']);
+    } else {
        die("Erreur de sécurité : token invalide.");
+    }
+    exit;
 }

 $urlKeys  = ['erg_site_url', 'source_code_url'];
 $groupKeys = ['contacts'];
-$allowedKeys = array_merge($urlKeys, $groupKeys);
+$linkListKeys = ['sidebar_links'];
+$allowedKeys = array_merge($urlKeys, $groupKeys, $linkListKeys);
 $aproposKey  = $_POST['apropos_key'] ?? '';
 if (!in_array($aproposKey, $allowedKeys)) {
+    if ($isAjax) {
+        http_response_code(400);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => 'Clé invalide.']);
+    } else {
        die("Clé invalide.");
+    }
+    exit;
 }

 require_once __DIR__ . '/../../../src/Database.php';
@@ -30,12 +50,40 @@ try {
    $db = new Database();

    if (in_array($aproposKey, $urlKeys)) {
-        // ── URL-based keys (sidebar links) ──
+        // ── URL-based keys (legacy sidebar links) ──
        $url = trim($_POST['url'] ?? '');
        if ($url !== '' && !filter_var($url, FILTER_VALIDATE_URL)) {
+            if ($isAjax) {
+                http_response_code(400);
+                header('Content-Type: application/json');
+                echo json_encode(['error' => 'URL invalide.']);
+            } else {
                die("URL invalide.");
            }
+            exit;
+        }
        $db->saveAproposContent($aproposKey, $url);
+    } elseif (in_array($aproposKey, $linkListKeys)) {
+        // ── Sidebar links list ──
+        $links = $_POST['links'] ?? [];
+        $cleaned = [];
+        foreach ($links as $link) {
+            $label = trim($link['label'] ?? '');
+            $url   = trim($link['url'] ?? '');
+            if ($label === '') continue;
+            if ($url !== '' && !filter_var($url, FILTER_VALIDATE_URL)) {
+                if ($isAjax) {
+                    http_response_code(400);
+                    header('Content-Type: application/json');
+                    echo json_encode(['error' => 'URL invalide: ' . htmlspecialchars($label)]);
+                } else {
+                    die("URL invalide: " . htmlspecialchars($label));
+                }
+                exit;
+            }
+            $cleaned[] = ['label' => $label, 'url' => $url];
+        }
+        $db->saveAproposContent($aproposKey, $cleaned);
    } else {
        // ── Group-based keys (contacts) ──
        $groups = $_POST['groups'] ?? [];
@@ -61,18 +109,43 @@ try {
        }

        if (empty($cleaned)) {
+            if ($isAjax) {
+                http_response_code(400);
+                header('Content-Type: application/json');
+                echo json_encode(['error' => 'Au moins un groupe avec des entrées est requis.']);
+            } else {
                die("Au moins un groupe avec des entrées est requis.");
            }
+            exit;
+        }

        $db->saveAproposContent($aproposKey, $cleaned);
    }

    AdminLogger::make()->logAproposEdit($aproposKey);
+
+    if ($isAjax) {
+        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
+        header('Content-Type: application/json');
+        echo json_encode([
+            'success' => true,
+            'csrf_token' => $_SESSION['csrf_token'],
+        ]);
+    } else {
        App::flash('success', "Contenu « $aproposKey » mis à jour avec succès.");
+        header('Location: /admin/contenus.php');
+    }
 } catch (Exception $e) {
    ErrorHandler::log('apropos', $e);
-    die('Erreur lors de la sauvegarde : ' . htmlspecialchars(ErrorHandler::userMessage($e)));
+    $msg = 'Erreur lors de la sauvegarde : ' . htmlspecialchars(ErrorHandler::userMessage($e));
+    if ($isAjax) {
+        http_response_code(500);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => $msg]);
+    } else {
+        die($msg);
+    }
+    exit;
 }

-header('Location: /admin/contenus.php');
 exit;
--- a/app/public/admin/actions/form-help.php
+++ b/app/public/admin/actions/form-help.php
@@ -2,14 +2,23 @@
 /**
 * Save handler for form help blocks (student-facing explanatory text shown
 * in the /partage share-link submission form).
+ * Supports both regular form POST and AJAX auto-save requests.
 */
 require_once __DIR__ . '/../../../bootstrap.php';
 require_once __DIR__ . '/../../../src/AdminAuth.php';
 error_log('[form-help.php] ENTRY | method=' . $_SERVER['REQUEST_METHOD'] . ' | key=' . ($_POST['form_help_key'] ?? 'none') . ' | post_keys=' . implode(',', array_keys($_POST)));
 AdminAuth::requireLogin();

+$isAjax = !empty($_SERVER['HTTP_ACCEPT']) && str_contains($_SERVER['HTTP_ACCEPT'], 'application/json');
+
 if (!isset($_POST['csrf_token'], $_SESSION['csrf_token'])
    || !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
+    if ($isAjax) {
+        http_response_code(403);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => 'Erreur de sécurité : token invalide.']);
+        exit;
+    }
    App::flash('error', 'Erreur de sécurité : token invalide.');
    header('Location: /admin/contenus.php');
    exit;
@@ -24,6 +33,12 @@ require_once APP_ROOT . '/src/ErrorHandler.php';
 $db = new Database();

 if (!in_array($key, Database::FORM_HELP_KEYS, true)) {
+    if ($isAjax) {
+        http_response_code(400);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => 'Clé de bloc invalide.']);
+        exit;
+    }
    App::flash('error', 'Clé de bloc invalide.');
    header('Location: /admin/contenus.php');
    exit;
@@ -32,10 +47,27 @@ if (!in_array($key, Database::FORM_HELP_KEYS, true)) {
 try {
    $db->setFormHelpBlock($key, $content);
    AdminLogger::make()->logFormStructureEdit($key);
+
+    if ($isAjax) {
+        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
+        header('Content-Type: application/json');
+        echo json_encode([
+            'success' => true,
+            'csrf_token' => $_SESSION['csrf_token'],
+        ]);
+        exit;
+    }
    App::flash('success', 'Bloc « ' . htmlspecialchars($key) . ' » mis à jour.');
 } catch (Exception $e) {
    ErrorHandler::log('form_help', $e);
-    App::flash('error', 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e));
+    $msg = 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e);
+    if ($isAjax) {
+        http_response_code(500);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => $msg]);
+        exit;
+    }
+    App::flash('error', $msg);
 }

 $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
--- a/app/public/admin/actions/page.php
+++ b/app/public/admin/actions/page.php
@@ -1,14 +1,23 @@
 <?php
 /**
 * Save handler for static page content (Markdown).
+ * Supports both regular form POST and AJAX auto-save requests.
 */
 require_once __DIR__ . '/../../../bootstrap.php';
 require_once __DIR__ . '/../../../src/AdminAuth.php';
 error_log('[page.php] ENTRY | method=' . $_SERVER['REQUEST_METHOD'] . ' | slug=' . ($_POST['slug'] ?? 'none') . ' | post_keys=' . implode(',', array_keys($_POST)));
 AdminAuth::requireLogin();

+$isAjax = !empty($_SERVER['HTTP_ACCEPT']) && str_contains($_SERVER['HTTP_ACCEPT'], 'application/json');
+
 if (!isset($_POST['csrf_token'], $_SESSION['csrf_token'])
    || !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
+    if ($isAjax) {
+        http_response_code(403);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => 'Erreur de sécurité : token invalide.']);
+        exit;
+    }
    App::flash('error', 'Erreur de sécurité : token invalide.');
    header('Location: /admin/contenus.php');
    exit;
@@ -19,6 +28,12 @@ $slug         = $_POST['slug'] ?? '';
 $content      = $_POST['content'] ?? '';

 if (!in_array($slug, $allowedSlugs, true)) {
+    if ($isAjax) {
+        http_response_code(400);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => 'Slug de page invalide.']);
+        exit;
+    }
    App::flash('error', 'Slug de page invalide.');
    header('Location: /admin/contenus.php');
    exit;
@@ -32,10 +47,27 @@ $db = new Database();
 try {
    $db->savePage($slug, $content);
    AdminLogger::make()->logPageEdit($slug);
+
+    if ($isAjax) {
+        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
+        header('Content-Type: application/json');
+        echo json_encode([
+            'success' => true,
+            'csrf_token' => $_SESSION['csrf_token'],
+        ]);
+        exit;
+    }
    App::flash('success', 'Page « ' . htmlspecialchars($slug) . ' » mise à jour.');
 } catch (Exception $e) {
    ErrorHandler::log('page', $e);
-    App::flash('error', 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e));
+    $msg = 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e);
+    if ($isAjax) {
+        http_response_code(500);
+        header('Content-Type: application/json');
+        echo json_encode(['error' => $msg]);
+        exit;
+    }
+    App::flash('error', $msg);
 }

 $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
--- a/app/public/admin/contenus-edit.php
+++ b/app/public/admin/contenus-edit.php
@@ -44,8 +44,19 @@ try {
            $editType = 'about_page';
            $aboutContacts = $db->getAproposContent('contacts');
            $aboutContacts = is_array($aboutContacts) ? $aboutContacts : [];
+            $sidebarLinks  = $db->getAproposContent('sidebar_links');
+            $sidebarLinks  = is_array($sidebarLinks) ? $sidebarLinks : [];
+            // Fallback: migrate legacy individual sidebar link keys
+            if (empty($sidebarLinks)) {
                $ergSiteUrl    = $db->getAproposContent('erg_site_url');
                $sourceCodeUrl = $db->getAproposContent('source_code_url');
+                if ($ergSiteUrl) {
+                    $sidebarLinks[] = ['label' => 'Site de l\'erg', 'url' => $ergSiteUrl];
+                }
+                if ($sourceCodeUrl) {
+                    $sidebarLinks[] = ['label' => 'Code source', 'url' => $sourceCodeUrl];
+                }
+            }
        } else {
            $editType = "page";
        }
@@ -72,7 +83,7 @@ $extraJsInline = '';

 if ($editType === 'page' || $editType === 'about_page') {
    $initialContent = $page["content"] ?? "";
-    $extraJs = ["/assets/js/vendor/overtype.min.js"];
+    $extraJs = ["/assets/js/vendor/overtype.min.js", "/assets/js/app/autosave.js"];
    $extraJsInline = <<<'JS'
 var OT = window.OverType.default || window.OverType;
 var hidden = document.getElementById('content');
@@ -80,12 +91,13 @@ var editor = new OT(document.getElementById('editor'), {
    value: hidden.value,
    minHeight: '400px',
    spellcheck: false,
+    toolbar: true,
    onChange: function(value) { hidden.value = value; }
 });
 JS;
 } elseif ($editType === 'form_help') {
    $initialContent = $formHelpContent;
-    $extraJs = ["/assets/js/vendor/overtype.min.js"];
+    $extraJs = ["/assets/js/vendor/overtype.min.js", "/assets/js/app/autosave.js"];
    $extraJsInline = <<<'JS'
 var OT = window.OverType.default || window.OverType;
 var hidden = document.getElementById('content');
@@ -93,9 +105,12 @@ var editor = new OT(document.getElementById('editor'), {
    value: hidden.value,
    minHeight: '400px',
    spellcheck: false,
+    toolbar: true,
    onChange: function(value) { hidden.value = value; }
 });
 JS;
+} elseif ($editType === 'apropos') {
+    $extraJs = ["/assets/js/app/autosave.js"];
 }

 $isAdmin = true;
--- a/app/public/assets/css/admin.css
+++ b/app/public/assets/css/admin.css
@@ -2140,3 +2140,63 @@ th.admin-ap-col {
  width: 100%;
  box-sizing: border-box;
 }
+
+/* ── Sidebar links editor ──────────────────────────────────────────────── */
+
+.sidebar-link-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-s);
+}
+
+.sidebar-link-fields {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: var(--space-s);
+  flex: 1;
+}
+
+.sidebar-link-fields > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-link-fields label {
+  font-size: var(--step--1);
+  margin-bottom: var(--space-3xs);
+}
+
+.sidebar-link-fields input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sidebar-link-row .admin-icon-btn--delete {
+  margin-top: calc(var(--step--1) + var(--space-3xs) + 0.3em);
+  flex-shrink: 0;
+}
+
+/* ── Auto-save status indicator ────────────────────────────────────────── */
+
+.autosave-status {
+  font-size: var(--step--2);
+  min-height: 1.5em;
+  margin-top: var(--space-2xs);
+  color: var(--text-tertiary);
+  transition: color 0.2s;
+}
+
+.autosave-status--saving {
+  color: var(--accent-yellow);
+  font-style: italic;
+}
+
+.autosave-status--saved {
+  color: var(--accent-green);
+}
+
+.autosave-status--error {
+  color: var(--error);
+  font-weight: 500;
+}
--- a/app/public/assets/css/apropos.css
+++ b/app/public/assets/css/apropos.css
@@ -71,35 +71,23 @@
    border-left-color: var(--accent-primary);
 }

-.apropos-toc-erg {
+.apropos-toc-link:first-of-type {
    padding-top: var(--space-s);
    border-top: 1px solid var(--border-primary);
 }

-.apropos-toc-erg a {
-    font-size: var(--step--2);
-    color: var(--accent-primary);
-    text-decoration: none;
-    transition: opacity 0.15s;
-}
-
-.apropos-toc-erg a:hover {
-    color: var(--accent-primary);
-    opacity: 1;
-}
-
-.apropos-toc-source {
+.apropos-toc-link + .apropos-toc-link {
    padding-top: var(--space-xs);
 }

-.apropos-toc-source a {
+.apropos-toc-link a {
    font-size: var(--step--2);
    color: var(--accent-primary);
    text-decoration: none;
    transition: opacity 0.15s;
 }

-.apropos-toc-source a:hover {
+.apropos-toc-link a:hover {
    color: var(--accent-primary);
    opacity: 1;
 }
@@ -326,7 +314,7 @@
        padding-left: 0;
    }

-    .apropos-toc-erg {
+    .apropos-toc-link {
        border-top: none;
        padding-top: 0;
        margin-left: auto;
--- a/app/public/assets/js/app/autosave.js
+++ b/app/public/assets/js/app/autosave.js
@@ -0,0 +1,76 @@
+/**
+ * Auto-save for admin content edit forms.
+ *
+ * Watches forms with [data-autosave] attribute. Debounces 1.5s after the
+ * last change, POSTs to the form's action, and shows a small status bar.
+ *
+ * The status indicator lives in a sibling element with [data-autosave-status].
+ * States: idle → saving… → saved ✓ / error !
+ */
+(() => {
+  const forms = document.querySelectorAll('form[data-autosave]');
+  if (!forms.length) return;
+
+  const DEBOUNCE_MS = 1500;
+
+  for (const form of forms) {
+    const statusEl = document.querySelector(form.dataset.autosaveStatus || '[data-autosave-status]');
+    let timer = null;
+    let dirty = false;
+
+    const setStatus = (text, cls) => {
+      if (!statusEl) return;
+      statusEl.textContent = text;
+      statusEl.className = 'autosave-status ' + (cls || '');
+    };
+
+    const doSave = () => {
+      if (!dirty) return;
+      dirty = false;
+      setStatus('Enregistrement…', 'autosave-status--saving');
+
+      const formData = new FormData(form);
+
+      fetch(form.action, {
+        method: 'POST',
+        body: formData,
+        headers: { 'Accept': 'application/json' },
+      })
+        .then((r) => {
+          if (!r.ok) throw new Error('HTTP ' + r.status);
+          setStatus('Enregistré ✓', 'autosave-status--saved');
+          // Refresh CSRF token from response if provided
+          r.json().then((data) => {
+            if (data && data.csrf_token) {
+              const csrfInput = form.querySelector('input[name="csrf_token"]');
+              if (csrfInput) csrfInput.value = data.csrf_token;
+              const meta = document.querySelector('meta[name="csrf-token"]');
+              if (meta) meta.setAttribute('content', data.csrf_token);
+            }
+          }).catch(() => {});
+        })
+        .catch(() => {
+          setStatus('Erreur !', 'autosave-status--error');
+          dirty = true;
+        });
+    };
+
+    const schedule = () => {
+      dirty = true;
+      setStatus('', '');
+      clearTimeout(timer);
+      timer = setTimeout(doSave, DEBOUNCE_MS);
+    };
+
+    // Watch all inputs inside the form
+    form.addEventListener('input', schedule);
+    form.addEventListener('change', schedule);
+
+    // Clear dirty on manual submit
+    form.addEventListener('submit', () => {
+      clearTimeout(timer);
+      dirty = false;
+      setStatus('', '');
+    });
+  }
+})();
--- a/app/src/Controllers/AboutController.php
+++ b/app/src/Controllers/AboutController.php
@@ -26,14 +26,24 @@ class AboutController
            }
            $contacts      = $db->getAproposContent('contacts');
            $contacts      = is_array($contacts) && !empty($contacts) ? $contacts : null;
+            $sidebarLinks  = $db->getAproposContent('sidebar_links');
+            $sidebarLinks  = is_array($sidebarLinks) ? $sidebarLinks : [];
+            // Fallback: migrate legacy individual sidebar link keys
+            if (empty($sidebarLinks)) {
                $ergSiteUrl    = $db->getAproposContent('erg_site_url');
                $sourceCodeUrl = $db->getAproposContent('source_code_url');
+                if ($ergSiteUrl) {
+                    $sidebarLinks[] = ['label' => 'Site de l\'erg', 'url' => $ergSiteUrl];
+                }
+                if ($sourceCodeUrl) {
+                    $sidebarLinks[] = ['label' => 'Code source', 'url' => $sourceCodeUrl];
+                }
+            }
        } catch (Exception $e) {
            ErrorHandler::log('about_page', $e);
            $rawContent   = $this->defaultContent;
            $contacts     = null;
-            $ergSiteUrl    = null;
-            $sourceCodeUrl = null;
+            $sidebarLinks = [];
        }

        $converter = new CommonMarkConverter(['html_input' => 'strip']);
@@ -42,8 +52,7 @@ class AboutController
            'currentNav'      => 'apropos',
            'aboutHtml'       => EmailObfuscator::obfuscateHtml($converter->convert($rawContent)->getContent()),
            'contacts'        => $contacts,
-            'ergSiteUrl'      => $ergSiteUrl,
-            'sourceCodeUrl'   => $sourceCodeUrl,
+            'sidebarLinks'    => $sidebarLinks,
            'pageTitle'       => 'À Propos – XAMXAM',
            'metaDescription' => "À propos de XAMXAM, le répertoire des mémoires de fin d'études de l'erg – École de Recherches Graphiques de Bruxelles.",
            'extraCss'        => ['/assets/css/apropos.css'],
--- a/app/storage/logs/admin-2026-06-09.log
+++ b/app/storage/logs/admin-2026-06-09.log
@@ -7,3 +7,10 @@
 {"timestamp":"2026-06-09T10:34:52+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"thesis","action":"edit","status":"success","context":{"thesis_id":26,"title":"DepNum"}}
 {"timestamp":"2026-06-09T10:42:57+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"thesis","action":"edit","status":"success","context":{"thesis_id":26,"title":"DepNum"}}
 {"timestamp":"2026-06-09T12:10:41+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"thesis","action":"edit","status":"success","context":{"thesis_id":26,"title":"DepNum"}}
+{"timestamp":"2026-06-09T15:04:54+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"apropos","action":"edit","status":"success","context":{"key":"contacts"}}
+{"timestamp":"2026-06-09T15:15:33+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"page","action":"edit","status":"success","context":{"slug":"about"}}
+{"timestamp":"2026-06-09T15:15:34+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"page","action":"edit","status":"success","context":{"slug":"about"}}
+{"timestamp":"2026-06-09T15:19:00+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"page","action":"edit","status":"success","context":{"slug":"about"}}
+{"timestamp":"2026-06-09T15:19:03+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"page","action":"edit","status":"success","context":{"slug":"about"}}
+{"timestamp":"2026-06-09T15:20:57+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"apropos","action":"edit","status":"success","context":{"key":"contacts"}}
+{"timestamp":"2026-06-09T15:21:03+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0","resource":"apropos","action":"edit","status":"success","context":{"key":"contacts"}}
--- a/app/templates/admin/apropos-groups-form.php
+++ b/app/templates/admin/apropos-groups-form.php
@@ -6,7 +6,7 @@
 *   $groups      array   Existing groups data
 */
 ?>
-<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="apropos-form-<?= $aproposKey ?>">
+<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="apropos-form-<?= $aproposKey ?>" data-autosave>
    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
    <input type="hidden" name="apropos_key" value="<?= htmlspecialchars($aproposKey) ?>">

@@ -55,10 +55,7 @@
    <button type="button" class="btn btn--primary add-group-btn-f"
            data-key="<?= $aproposKey ?>">+ Ajouter un contact</button>

-    <div class="admin-form-footer">
-        <button type="submit" class="btn btn--primary">Enregistrer</button>
-        <a href="/admin/contenus.php" class="btn btn--secondary admin-cancel-link">Annuler</a>
-    </div>
+    <div class="autosave-status" data-autosave-status></div>

    <template id="entry-template-f-<?= $aproposKey ?>">
        <div class="apropos-entry">
--- a/app/templates/admin/contenus-edit.php
+++ b/app/templates/admin/contenus-edit.php
@@ -5,7 +5,7 @@

    <!-- ── Markdown content ──────────────────────────────────────────────── -->
    <h2>Contenu de la page</h2>
-    <form action="/admin/actions/page.php" method="post" class="admin-form">
+    <form action="/admin/actions/page.php" method="post" class="admin-form" data-autosave>
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
        <input type="hidden" name="slug" value="about">

@@ -13,11 +13,7 @@
        <input type="hidden" id="content" name="content"
               value="<?= htmlspecialchars($initialContent) ?>">
        <div id="editor"></div>
-
-        <div class="admin-form-footer">
-            <button type="submit" class="btn btn--primary">Enregistrer</button>
-            <a href="/admin/contenus.php" class="btn btn--secondary admin-cancel-link">Annuler</a>
-        </div>
+        <div class="autosave-status" data-autosave-status></div>
    </form>

    <!-- ── Contacts ──────────────────────────────────────────────────────── -->
@@ -30,32 +26,103 @@

    <!-- ── Sidebar links ─────────────────────────────────────────────────── -->
    <h2 style="margin-top:3rem;">Liens de la barre latérale</h2>
-    <form action="/admin/actions/apropos.php" method="post" class="admin-form">
+    <form action="/admin/actions/apropos.php" method="post" class="admin-form" id="sidebar-links-form" data-autosave>
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
-        <input type="hidden" name="apropos_key" value="erg_site_url">
-        <label for="apropos-erg-site-url">Site de l'erg :</label>
-        <input type="url" id="apropos-erg-site-url" name="url"
-               value="<?= htmlspecialchars($ergSiteUrl ?? '') ?>"
-               placeholder="https://erg.be">
-        <div class="admin-form-footer">
-            <button type="submit" class="btn btn--primary">Enregistrer</button>
+        <input type="hidden" name="apropos_key" value="sidebar_links">
+
+        <?php foreach ($sidebarLinks as $li => $link): ?>
+        <div class="sidebar-link-row">
+            <div class="sidebar-link-fields">
+                <div>
+                    <label for="sl_<?= $li ?>_label">Label :</label>
+                    <input type="text" id="sl_<?= $li ?>_label"
+                           name="links[<?= $li ?>][label]"
+                           value="<?= htmlspecialchars($link['label'] ?? '') ?>"
+                           placeholder="Site de l'erg">
                </div>
+                <div>
+                    <label for="sl_<?= $li ?>_url">URL :</label>
+                    <input type="url" id="sl_<?= $li ?>_url"
+                           name="links[<?= $li ?>][url]"
+                           value="<?= htmlspecialchars($link['url'] ?? '') ?>"
+                           placeholder="https://erg.be">
+                </div>
+            </div>
+            <button type="button" class="admin-icon-btn admin-icon-btn--delete remove-sidebar-link-btn"
+                    title="Supprimer ce lien">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Zm48,0V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Z"></path></svg>
+            </button>
+        </div>
+        <?php endforeach; ?>
+
+        <button type="button" class="btn btn--primary btn--sm" id="add-sidebar-link-btn">+ Ajouter un lien</button>
+
+        <div class="autosave-status" data-autosave-status></div>
    </form>

-    <form action="/admin/actions/apropos.php" method="post" class="admin-form" style="margin-top:var(--space-m)">
-        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
-        <input type="hidden" name="apropos_key" value="source_code_url">
-        <label for="apropos-source-code-url">Code source :</label>
-        <input type="url" id="apropos-source-code-url" name="url"
-               value="<?= htmlspecialchars($sourceCodeUrl ?? '') ?>"
-               placeholder="https://git.erg.school/PostERG/xamxam">
-        <div class="admin-form-footer">
-            <button type="submit" class="btn btn--primary">Enregistrer</button>
+    <template id="sidebar-link-tpl">
+        <div class="sidebar-link-row">
+            <div class="sidebar-link-fields">
+                <div>
+                    <label>Label :</label>
+                    <input type="text" name="links[{{li}}][label]" placeholder="Site de l'erg">
                </div>
-    </form>
+                <div>
+                    <label>URL :</label>
+                    <input type="url" name="links[{{li}}][url]" placeholder="https://erg.be">
+                </div>
+            </div>
+            <button type="button" class="admin-icon-btn admin-icon-btn--delete remove-sidebar-link-btn"
+                    title="Supprimer ce lien">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Zm48,0V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Z"></path></svg>
+            </button>
+        </div>
+    </template>
+
+    <script>
+    (function() {
+        var form = document.getElementById('sidebar-links-form');
+        var tpl = document.getElementById('sidebar-link-tpl');
+        var tplHtml = tpl.innerHTML;
+
+        function reindexLinks() {
+            var rows = form.querySelectorAll('.sidebar-link-row');
+            rows.forEach(function(row, i) {
+                row.querySelectorAll('input').forEach(function(inp) {
+                    if (inp.name) {
+                        inp.name = inp.name.replace(/links\[\d+\]/, 'links[' + i + ']');
+                    }
+                    if (inp.id) {
+                        inp.id = inp.id.replace(/sl_\d+/, 'sl_' + i);
+                    }
+                });
+                row.querySelectorAll('label[for]').forEach(function(lbl) {
+                    lbl.setAttribute('for', lbl.getAttribute('for').replace(/sl_\d+/, 'sl_' + i));
+                });
+            });
+        }
+
+        // Event delegation for remove buttons (including dynamically added)
+        form.addEventListener('click', function(e) {
+            if (!e.target.closest('.remove-sidebar-link-btn')) return;
+            e.preventDefault();
+            e.target.closest('.sidebar-link-row').remove();
+            reindexLinks();
+        });
+
+        // Add button
+        var addBtn = document.getElementById('add-sidebar-link-btn');
+        addBtn.addEventListener('click', function() {
+            var rows = form.querySelectorAll('.sidebar-link-row');
+            var idx = rows.length;
+            var html = tplHtml.split('{{li}}').join(idx);
+            this.insertAdjacentHTML('beforebegin', html);
+        });
+    })();
+    </script>

    <?php elseif ($editType === 'page' && $pageSlug !== 'about'): ?>
-    <form action="/admin/actions/page.php" method="post" class="admin-form">
+    <form action="/admin/actions/page.php" method="post" class="admin-form" data-autosave>
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
        <input type="hidden" name="slug" value="<?= htmlspecialchars($pageSlug) ?>">

@@ -63,16 +130,12 @@
        <input type="hidden" id="content" name="content"
               value="<?= htmlspecialchars($initialContent) ?>">
        <div id="editor"></div>
-
-        <div class="admin-form-footer">
-            <button type="submit" class="btn btn--primary">Enregistrer</button>
-            <a href="/admin/contenus.php" class="btn btn--secondary admin-cancel-link">Annuler</a>
-        </div>
+        <div class="autosave-status" data-autosave-status></div>
    </form>

    <?php elseif ($editType === 'form_help'): ?>
    <p class="param-note">Ce texte est affiché dans le formulaire de soumission des étudiant·es (lien de partage). Supporte le Markdown.</p>
-    <form action="/admin/actions/form-help.php" method="post" class="admin-form">
+    <form action="/admin/actions/form-help.php" method="post" class="admin-form" data-autosave>
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
        <input type="hidden" name="form_help_key" value="<?= htmlspecialchars($formHelpKey) ?>">

@@ -80,11 +143,7 @@
        <input type="hidden" id="content" name="content"
               value="<?= htmlspecialchars($initialContent) ?>">
        <div id="editor"></div>
-
-        <div class="admin-form-footer">
-            <button type="submit" class="btn btn--primary">Enregistrer</button>
-            <a href="/admin/contenus.php#form-help-blocks" class="btn btn--secondary admin-cancel-link">Annuler</a>
-        </div>
+        <div class="autosave-status" data-autosave-status></div>
    </form>

    <?php else: ?>
--- a/app/templates/public/about.php
+++ b/app/templates/public/about.php
@@ -44,16 +44,15 @@ function renderEntries(array $entries): string
                <?php endif; ?>
                <li><a href="#apropos-credits">Crédits</a></li>
            </ul>
-            <div class="apropos-toc-erg">
-                <a href="<?= htmlspecialchars($ergSiteUrl ?: 'https://erg.be') ?>" target="_blank" rel="noopener">
-                    Site de l'erg ↗
-                </a>
-            </div>
-            <div class="apropos-toc-source">
-                <a href="<?= htmlspecialchars($sourceCodeUrl ?: 'https://git.erg.school/PostERG/xamxam') ?>" target="_blank" rel="noopener">
-                    Code source ↗
+            <?php if (!empty($sidebarLinks)): ?>
+            <?php foreach ($sidebarLinks as $sl): ?>
+            <div class="apropos-toc-link">
+                <a href="<?= htmlspecialchars($sl['url'] ?? '#') ?>" target="_blank" rel="noopener">
+                    <?= htmlspecialchars($sl['label'] ?? 'Lien') ?> ↗
                </a>
            </div>
+            <?php endforeach; ?>
+            <?php endif; ?>
        </nav>

        <!-- MIDDLE: main prose + sections -->