system.php: extract inline JS and style= attrs into separate assets

Move the ~130-line $extraJsInline heredoc from admin/system.php into a
static file public/assets/js/system.js, loaded via $extraJs so the
template footer emits a normal <script src=…>.

Replace 4 inline style= attributes with named CSS modifier classes in
system.css:
  - style="margin:0;border:none;padding:0" on .srv-section-title
    → .srv-section-title--compact
  - style="margin-bottom:.75rem" on sub-heading <h3>
    → .srv-section-title--sub
  - style="margin-bottom:0" on .php-grid
    → .php-grid--flush
  - style="font-size:.84rem;color:var(--text-secondary)" on <label>
    → .log-toolbar label rule in system.css

The one remaining inline style (--disk-pct / --disk-color CSS custom
properties on .disk-bar) is intentionally kept: it carries PHP runtime
values that cannot be expressed in a static stylesheet.

TODO.md

@@ -11,6 +11,9 @@ Pending tasks have been split into topic files under [`todo/`](todo/README.md):
 
 ## Recently completed (this session)
 
+- [x] `admin/system.php` + `assets/js/system.js` + `assets/css/system.css` — extracted the large `$extraJsInline` heredoc (≈130 lines) into a static `public/assets/js/system.js` loaded via `$extraJs`; replaced 4 inline `style=` attributes with named CSS modifier classes (`srv-section-title--compact`, `srv-section-title--sub`, `php-grid--flush`, `log-toolbar label` rule); only the dynamic `--disk-pct`/`--disk-color` CSS custom properties remain inline because they carry PHP runtime values
+
+
 - [x] `src/App.php` — removed dead legacy flash key fallback chains from `consumeFlash()`: the `error`, `admin_error`, `edit_error`, `form_error`, `success`, `admin_success`, `edit_success` session keys were never written by any code; all callers already use `App::flash()` → `_flash_error` / `_flash_success`. Method is now 4 lines instead of 18.
 - [x] `admin/import.php` + `admin.css` — extracted all 4 remaining inline `style=` attributes from `import.php` into named CSS classes (`admin-error-list`, `admin-file-hint`, `admin-import-results`, `admin-import-results__title`) in the Import page section of `admin.css`. No more inline styles in `import.php`.
 

public/admin/system.php

@@ -360,154 +360,7 @@ if ($activeTab === 'nginx_config') {
 
 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss = ['/assets/css/system.css'];
-$extraJsInline = <<<'JS'
+$extraJs  = ['/assets/js/system.js'];
-(function () {
-
-    // ── Status section collapse toggle ────────────────────────────────
-    var toggleBtn  = document.getElementById('sys-status-toggle');
-    var statusBody = document.getElementById('sys-status-body');
-    if (toggleBtn && statusBody) {
-        toggleBtn.addEventListener('click', function () {
-            var collapsed = statusBody.hidden;
-            statusBody.hidden = !collapsed;
-            toggleBtn.setAttribute('aria-expanded', collapsed ? 'true' : 'false');
-            toggleBtn.textContent = collapsed ? '▲ Réduire' : '▼ Développer';
-            try { localStorage.setItem('sys_status_collapsed', collapsed ? '0' : '1'); } catch(e) {}
-        });
-        try {
-            if (localStorage.getItem('sys_status_collapsed') === '1') {
-                statusBody.hidden = true;
-                toggleBtn.setAttribute('aria-expanded', 'false');
-                toggleBtn.textContent = '▼ Développer';
-            }
-        } catch(e) {}
-    }
-
-    // ── fetch()-based tab panel loading ───────────────────────────────
-    var panel   = document.getElementById('sys-tab-panel');
-    var tabNav  = document.querySelector('.sys-tabs');
-    if (!panel || !tabNav || !window.fetch) return;
-
-    var currentTab = panel.dataset.tab;
-    var currentN   = panel.dataset.n;
-
-    function loadPanel(tab, n, pushState) {
-        var url     = new URL(window.location.href);
-        var fragUrl = new URL('/admin/system-fragment.php', window.location.origin);
-        fragUrl.searchParams.set('tab', tab);
-        fragUrl.searchParams.set('n',   n);
-
-        // Mark the panel as loading
-        panel.classList.add('sys-panel-loading');
-
-        fetch(fragUrl.toString(), { credentials: 'same-origin' })
-            .then(function (r) {
-                if (!r.ok) throw new Error('HTTP ' + r.status);
-                return r.text();
-            })
-            .then(function (html) {
-                panel.innerHTML = html;
-                panel.dataset.tab = tab;
-                panel.dataset.n   = n;
-                currentTab = tab;
-                currentN   = n;
-                panel.classList.remove('sys-panel-loading');
-
-                // Update active tab indicators
-                tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
-                    var isActive = a.dataset.tab === tab;
-                    a.classList.toggle('active', isActive);
-                    if (isActive) {
-                        a.setAttribute('aria-current', 'page');
-                    } else {
-                        a.removeAttribute('aria-current');
-                    }
-                });
-
-                // Re-bind inner controls (lines-select, copy btn)
-                bindPanelControls();
-
-                // Update browser URL without reloading
-                if (pushState) {
-                    url.searchParams.set('tab', tab);
-                    url.searchParams.set('n',   n);
-                    history.pushState({ tab: tab, n: n }, '', url.toString());
-                }
-            })
-            .catch(function () {
-                // Graceful degradation: fall back to full page load
-                panel.classList.remove('sys-panel-loading');
-                url.searchParams.set('tab', tab);
-                url.searchParams.set('n',   n);
-                window.location.href = url.toString();
-            });
-    }
-
-    // Wire tab links
-    tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
-        a.addEventListener('click', function (e) {
-            e.preventDefault();
-            var tab = a.dataset.tab;
-            if (tab && tab !== currentTab) {
-                loadPanel(tab, currentN, true);
-            }
-        });
-    });
-
-    // Handle browser back/forward
-    window.addEventListener('popstate', function (e) {
-        if (e.state && e.state.tab) {
-            loadPanel(e.state.tab, e.state.n || 100, false);
-        }
-    });
-
-    function bindPanelControls() {
-        // Lines-select
-        var sel = panel.querySelector('#lines-select');
-        if (sel) {
-            sel.addEventListener('change', function () {
-                loadPanel(currentTab, parseInt(this.value, 10), true);
-            });
-        }
-        // Copy button
-        var copyBtn = panel.querySelector('#log-copy-btn');
-        var logOut  = panel.querySelector('#log-output');
-        if (copyBtn && logOut) {
-            copyBtn.addEventListener('click', function () {
-                var text = Array.from(logOut.querySelectorAll('.log-line'))
-                    .map(function (el) { return el.textContent; })
-                    .join('\n');
-                if (navigator.clipboard && navigator.clipboard.writeText) {
-                    navigator.clipboard.writeText(text).then(function () {
-                        copyBtn.textContent = '✓ Copié';
-                        copyBtn.classList.add('copied');
-                        setTimeout(function () {
-                            copyBtn.textContent = 'Copier';
-                            copyBtn.classList.remove('copied');
-                        }, 2000);
-                    }).catch(function () { fallbackCopy(text); });
-                } else {
-                    fallbackCopy(text);
-                }
-            });
-        }
-    }
-
-    // Bind controls already present on first load
-    bindPanelControls();
-
-    function fallbackCopy(text) {
-        var ta = document.createElement('textarea');
-        ta.value = text;
-        ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
-        document.body.appendChild(ta);
-        ta.select();
-        try { document.execCommand('copy'); } catch (e) {}
-        document.body.removeChild(ta);
-    }
-
-})();
-JS;
 require_once APP_ROOT . '/templates/head.php';
 ?>
     <?php include APP_ROOT . '/templates/header.php'; ?>
@@ -528,7 +381,7 @@ require_once APP_ROOT . '/templates/head.php';
     ════════════════════════════════════════════════════════════════════ -->
     <section class="sys-status-section" aria-label="Statut du système">
         <div class="sys-status-header">
-            <h2 class="srv-section-title" style="margin:0;border:none;padding:0;">Statut
+            <h2 class="srv-section-title srv-section-title--compact">Statut
                 <?php if ($statusCached && $statusCacheAge !== null): ?>
                 <span class="sys-cache-badge sys-cache-badge--hit" title="Données en cache">
                     ⚡ Cache — il y a <?= $statusCacheAge ?>s
@@ -562,8 +415,8 @@ require_once APP_ROOT . '/templates/head.php';
 
             <div class="sys-status-meta">
                 <div>
-                    <h3 class="srv-section-title" style="margin-bottom:.75rem;">Environnement PHP</h3>
+                    <h3 class="srv-section-title srv-section-title--sub">Environnement PHP</h3>
-                    <div class="php-grid" style="margin-bottom:0;">
+                    <div class="php-grid php-grid--flush">
                         <?php foreach ($phpInfo as $key => $val): ?>
                         <div class="php-item">
                             <div class="php-item__key"><?= htmlspecialchars($key) ?></div>
@@ -573,7 +426,7 @@ require_once APP_ROOT . '/templates/head.php';
                     </div>
                 </div>
                 <div>
-                    <h3 class="srv-section-title" style="margin-bottom:.75rem;">Espace disque</h3>
+                    <h3 class="srv-section-title srv-section-title--sub">Espace disque</h3>
                     <?php $diskColor = $diskPct > 85 ? '#e05555' : ($diskPct > 70 ? '#ffc107' : '#4caf50'); ?>
                     <div class="disk-bar-wrap">
                         <div class="disk-bar" style="--disk-pct:<?= $diskPct ?>%;--disk-color:<?= $diskColor ?>"></div>
@@ -669,9 +522,7 @@ require_once APP_ROOT . '/templates/head.php';
 
     <!-- Lines selector (submits via JS on change; no button needed) -->
     <div class="log-toolbar">
-        <label for="lines-select" style="font-size:.84rem;color:var(--text-secondary);">
+        <label for="lines-select">Afficher</label>
-            Afficher
-        </label>
         <select id="lines-select" aria-label="Nombre de lignes">
             <?php foreach (ALLOWED_LINES as $n): ?>
             <option value="<?= $n ?>" <?= $n === $selectedN ? 'selected' : '' ?>>

public/assets/css/system.css

@@ -119,6 +119,14 @@
     margin: 0 0 1rem;
     font-weight: 500;
 }
+/* Compact variant: no border, no margin — used inside sys-status-header */
+.srv-section-title--compact {
+    margin: 0;
+    border: none;
+    padding: 0;
+}
+/* Sub-section variant: tighter bottom margin — used for PHP/disk sub-headings */
+.srv-section-title--sub { margin-bottom: .75rem; }
 
 /* ── PHP info grid ─────────────────────────────────────────────────────── */
 .php-grid {
@@ -127,6 +135,8 @@
     gap: .5rem .75rem;
     margin-bottom: 2.5rem;
 }
+/* Flush variant: no bottom margin — used inside sys-status-meta cell */
+.php-grid--flush { margin-bottom: 0; }
 .php-item {
     background: #242424;
     border: 1px solid #555;
@@ -208,6 +218,10 @@
     gap: .6rem;
     margin-bottom: 1.25rem;
 }
+.log-toolbar label {
+    font-size: .84rem;
+    color: var(--text-secondary);
+}
 .log-toolbar select {
     background: #242424;
     border: 1px solid #555;

public/assets/js/system.js

@@ -0,0 +1,146 @@
+(function () {
+
+    // ── Status section collapse toggle ────────────────────────────────
+    var toggleBtn  = document.getElementById('sys-status-toggle');
+    var statusBody = document.getElementById('sys-status-body');
+    if (toggleBtn && statusBody) {
+        toggleBtn.addEventListener('click', function () {
+            var collapsed = statusBody.hidden;
+            statusBody.hidden = !collapsed;
+            toggleBtn.setAttribute('aria-expanded', collapsed ? 'true' : 'false');
+            toggleBtn.textContent = collapsed ? '▲ Réduire' : '▼ Développer';
+            try { localStorage.setItem('sys_status_collapsed', collapsed ? '0' : '1'); } catch(e) {}
+        });
+        try {
+            if (localStorage.getItem('sys_status_collapsed') === '1') {
+                statusBody.hidden = true;
+                toggleBtn.setAttribute('aria-expanded', 'false');
+                toggleBtn.textContent = '▼ Développer';
+            }
+        } catch(e) {}
+    }
+
+    // ── fetch()-based tab panel loading ───────────────────────────────
+    var panel   = document.getElementById('sys-tab-panel');
+    var tabNav  = document.querySelector('.sys-tabs');
+    if (!panel || !tabNav || !window.fetch) return;
+
+    var currentTab = panel.dataset.tab;
+    var currentN   = panel.dataset.n;
+
+    function loadPanel(tab, n, pushState) {
+        var url     = new URL(window.location.href);
+        var fragUrl = new URL('/admin/system-fragment.php', window.location.origin);
+        fragUrl.searchParams.set('tab', tab);
+        fragUrl.searchParams.set('n',   n);
+
+        // Mark the panel as loading
+        panel.classList.add('sys-panel-loading');
+
+        fetch(fragUrl.toString(), { credentials: 'same-origin' })
+            .then(function (r) {
+                if (!r.ok) throw new Error('HTTP ' + r.status);
+                return r.text();
+            })
+            .then(function (html) {
+                panel.innerHTML = html;
+                panel.dataset.tab = tab;
+                panel.dataset.n   = n;
+                currentTab = tab;
+                currentN   = n;
+                panel.classList.remove('sys-panel-loading');
+
+                // Update active tab indicators
+                tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
+                    var isActive = a.dataset.tab === tab;
+                    a.classList.toggle('active', isActive);
+                    if (isActive) {
+                        a.setAttribute('aria-current', 'page');
+                    } else {
+                        a.removeAttribute('aria-current');
+                    }
+                });
+
+                // Re-bind inner controls (lines-select, copy btn)
+                bindPanelControls();
+
+                // Update browser URL without reloading
+                if (pushState) {
+                    url.searchParams.set('tab', tab);
+                    url.searchParams.set('n',   n);
+                    history.pushState({ tab: tab, n: n }, '', url.toString());
+                }
+            })
+            .catch(function () {
+                // Graceful degradation: fall back to full page load
+                panel.classList.remove('sys-panel-loading');
+                url.searchParams.set('tab', tab);
+                url.searchParams.set('n',   n);
+                window.location.href = url.toString();
+            });
+    }
+
+    // Wire tab links
+    tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
+        a.addEventListener('click', function (e) {
+            e.preventDefault();
+            var tab = a.dataset.tab;
+            if (tab && tab !== currentTab) {
+                loadPanel(tab, currentN, true);
+            }
+        });
+    });
+
+    // Handle browser back/forward
+    window.addEventListener('popstate', function (e) {
+        if (e.state && e.state.tab) {
+            loadPanel(e.state.tab, e.state.n || 100, false);
+        }
+    });
+
+    function bindPanelControls() {
+        // Lines-select
+        var sel = panel.querySelector('#lines-select');
+        if (sel) {
+            sel.addEventListener('change', function () {
+                loadPanel(currentTab, parseInt(this.value, 10), true);
+            });
+        }
+        // Copy button
+        var copyBtn = panel.querySelector('#log-copy-btn');
+        var logOut  = panel.querySelector('#log-output');
+        if (copyBtn && logOut) {
+            copyBtn.addEventListener('click', function () {
+                var text = Array.from(logOut.querySelectorAll('.log-line'))
+                    .map(function (el) { return el.textContent; })
+                    .join('\n');
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard.writeText(text).then(function () {
+                        copyBtn.textContent = '✓ Copié';
+                        copyBtn.classList.add('copied');
+                        setTimeout(function () {
+                            copyBtn.textContent = 'Copier';
+                            copyBtn.classList.remove('copied');
+                        }, 2000);
+                    }).catch(function () { fallbackCopy(text); });
+                } else {
+                    fallbackCopy(text);
+                }
+            });
+        }
+    }
+
+    // Bind controls already present on first load
+    bindPanelControls();
+
+    function fallbackCopy(text) {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); } catch (e) {}
+        document.body.removeChild(ta);
+    }
+
+})();

todo/01-css-semantic-refactor.md

@@ -18,6 +18,7 @@
 - [x] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — already done
 - [x] **`search.css`**: Replace `.repertoire-col > h2` — already uses `.repertoire-index section > h2`
 - [x] **`system.php`**: Move inline `<style>` block to `system.css`
+- [x] **`system.php`**: Extract `$extraJsInline` JS block to `public/assets/js/system.js`; replace remaining inline `style=` attributes with CSS modifier classes (`.srv-section-title--compact`, `.srv-section-title--sub`, `.php-grid--flush`, `.log-toolbar label`)
 
 ## Template HTML changes to match
 

todo/02-php-components.md

@@ -23,7 +23,7 @@
 - [ ] Consolidate action handlers into controller methods
 - [x] Unify flash message keys project-wide to `_flash_error` / `_flash_success` — all callers already use `App::flash()`; removed dead legacy-key fallback chains (`error`, `admin_error`, `edit_error`, `form_error`, `success`, `admin_success`, `edit_success`) from `consumeFlash()`
 - [ ] Move OG tag construction into controller logic
-- [ ] Extract inline CSS/JS from `system.php` into separate assets
+- [x] Extract inline CSS/JS from `system.php` into separate assets — JS moved to `public/assets/js/system.js` (loaded via `$extraJs`); 4 inline `style=` attributes replaced with CSS classes; only dynamic CSS custom properties (`--disk-pct`, `--disk-color`) remain as inline styles because they carry PHP runtime values
 
 ## Backend Maintenance