feat: migrate admin system page to HTMX with tab-based navigation and log viewer

public/admin/system.php

@@ -70,8 +70,12 @@ if ($activeTab === 'nginx_config') {
 
 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss = ['/assets/css/system.css'];
-$extraJs  = ['/assets/js/system.js'];
+// HTMX loaded once in footer; status collapse + copy via inline JS
 require_once APP_ROOT . '/templates/head.php';
+
+// Restore collapsed state from cookie
+$collapsed = $_COOKIE['sys_collapsed'] ?? null;
+$statusInitiallyCollapsed = $collapsed === '1';
 ?>
     <?php include APP_ROOT . '/templates/header.php'; ?>
 
@@ -103,11 +107,14 @@ require_once APP_ROOT . '/templates/head.php';
                 <?php endif; ?>
             </h2>
             <button id="sys-status-toggle" class="sys-status-toggle"
-                    aria-expanded="true" aria-controls="sys-status-body"
-                    type="button">▲ Réduire</button>
+                    aria-expanded="<?= $statusInitiallyCollapsed ? 'false' : 'true' ?>" aria-controls="sys-status-body"
+                    type="button"
+                    onclick="var b=document.getElementById('sys-status-body');var c=b.hidden;b.hidden=!c;this.setAttribute('aria-expanded',c);this.textContent=c?'▲ Réduire':'▼ Développer';document.cookie='sys_collapsed='+(!c)+';path=/;max-age=31536000';return false">
+              <?= $statusInitiallyCollapsed ? '▼ Développer' : '▲ Réduire' ?>
+        </button>
         </div>
 
-        <div id="sys-status-body">
+        <div id="sys-status-body"<?= $statusInitiallyCollapsed ? ' hidden' : '' ?>>
             <div class="srv-grid">
                 <?php foreach ($checks as $check): ?>
                 <?php $st = $check['status'] ?? 'unknown'; ?>
@@ -154,6 +161,11 @@ require_once APP_ROOT . '/templates/head.php';
         <?php foreach (SystemController::LOG_FILES as $key => $def): ?>
         <a href="?tab=<?= htmlspecialchars($key) ?>&amp;n=<?= $selectedN ?>"
            class="sys-tab <?= $activeTab === $key ? 'active' : '' ?>"
+           hx-get="/admin/system-fragment.php?tab=<?= htmlspecialchars($key) ?>&amp;n=<?= $selectedN ?>"
+           hx-target="#sys-tab-panel"
+           hx-push-url="?tab=<?= htmlspecialchars($key) ?>&amp;n=<?= $selectedN ?>"
+           hx-swap="innerHTML"
+           hx-indicator="#sys-tab-panel"
            data-tab="<?= htmlspecialchars($key) ?>"
            <?= $activeTab === $key ? 'aria-current="page"' : '' ?>>
             <?= htmlspecialchars($def['label']) ?>
@@ -161,14 +173,17 @@ require_once APP_ROOT . '/templates/head.php';
         <?php endforeach; ?>
         <a href="?tab=nginx_config"
            class="sys-tab <?= $activeTab === 'nginx_config' ? 'active' : '' ?>"
+           hx-get="/admin/system-fragment.php?tab=nginx_config"
+           hx-target="#sys-tab-panel"
+           hx-push-url="?tab=nginx_config"
+           hx-swap="innerHTML"
+           hx-indicator="#sys-tab-panel"
            data-tab="nginx_config"
            <?= $activeTab === 'nginx_config' ? 'aria-current="page"' : '' ?>>nginx — config</a>
     </nav>
 
-    <!-- Tab panel — content swapped by fetch(); data-* attrs drive JS state -->
-    <div id="sys-tab-panel"
-         data-tab="<?= htmlspecialchars($activeTab) ?>"
-         data-n="<?= $selectedN ?>">
+    <!-- Tab panel — content swapped by HTMX -->
+    <div id="sys-tab-panel">
 
     <?php if ($activeTab === 'nginx_config'): ?>
     <!-- ════════════════════════════════════════════════════════════════════
@@ -205,7 +220,8 @@ require_once APP_ROOT . '/templates/head.php';
 
     <?php else: ?>
         <div class="log-output" id="log-output" role="region" aria-label="Configuration nginx">
-            <button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier la configuration">
+            <button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier la configuration"
+                    onclick="copyLogContent(this);return false">
                 Copier
             </button>
             <?php foreach ($nginxConfigLines as $i => $line): ?>
@@ -223,13 +239,21 @@ 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">Afficher</label>
-        <select id="lines-select" aria-label="Nombre de lignes">
+    <form id="lines-form" hx-get="/admin/system-fragment.php"
+          hx-target="#sys-tab-panel"
+          hx-swap="innerHTML"
+          hx-indicator="#sys-tab-panel"
+          hx-trigger="change"
+          hx-vals='{"tab":"<?= htmlspecialchars($activeTab) ?>"}'>
+      <label for="lines-select">Afficher</label>
+      <select id="lines-select" name="n" aria-label="Nombre de lignes">
             <?php foreach (SystemController::ALLOWED_LINES as $n): ?>
             <option value="<?= $n ?>" <?= $n === $selectedN ? 'selected' : '' ?>>
                 <?= $n ?> dernières lignes
             </option>
             <?php endforeach; ?>
         </select>
+    </form>
         <?php if ($logLines !== null && count($logLines) > 0): ?>
             <span class="log-count-badge"><?= count($logLines) ?> ligne(s)</span>
         <?php endif; ?>
@@ -262,7 +286,8 @@ require_once APP_ROOT . '/templates/head.php';
 
     <?php else: ?>
         <div class="log-output" id="log-output" role="log" aria-live="off" aria-label="Contenu du journal">
-            <button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier le contenu">
+            <button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier le contenu"
+                    onclick="copyLogContent(this);return false">
                 Copier
             </button>
             <?php foreach ($logLines as $i => $line): ?>
@@ -278,5 +303,56 @@ require_once APP_ROOT . '/templates/head.php';
 
 </main>
 
+<script>
+function copyLogContent(btn) {
+    var logOut = document.querySelector('#log-output');
+    if (!logOut) return;
+    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(){
+            btn.textContent = '\u2713 Copi\u00e9';
+            btn.classList.add('copied');
+            setTimeout(function(){ btn.textContent = 'Copier'; btn.classList.remove('copied'); }, 2000);
+        });
+    } else {
+        fallbackCopy(text, btn);
+    }
+}
+function fallbackCopy(text, btn) {
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.cssText = 'position:fixed;opacity:0';
+    document.body.appendChild(ta); ta.select();
+    try { document.execCommand('copy'); btn.textContent = '\u2713 Copi\u00e9'; btn.classList.add('copied');
+        setTimeout(function(){ btn.textContent = 'Copier'; btn.classList.remove('copied'); }, 2000);
+    } catch(e) {}
+    document.body.removeChild(ta);
+}
+// Update active tab class after each HTMX swap on #sys-tab-panel
+document.body.addEventListener('htmx:afterSwap', function(evt) {
+    if (evt.detail.target && evt.detail.target.id === 'sys-tab-panel') {
+        var rc = evt.detail.requestConfig;
+        var tab = null;
+        // Tab clicks carry ?tab=… in the path
+        var qIdx = rc.path.indexOf('?');
+        if (qIdx !== -1) {
+            tab = new URLSearchParams(rc.path.substring(qIdx + 1)).get('tab');
+        }
+        // Line-count form sends tab via hx-vals in parameters
+        if (!tab && rc.parameters && rc.parameters.tab) {
+            tab = rc.parameters.tab;
+        }
+        if (tab) {
+            document.querySelectorAll('.sys-tabs .sys-tab').forEach(function(a) {
+                var isActive = a.getAttribute('data-tab') === tab;
+                a.classList.toggle('active', isActive);
+                if (isActive) a.setAttribute('aria-current', 'page');
+                else a.removeAttribute('aria-current');
+            });
+        }
+    }
+});
+</script>
 
 <?php require_once APP_ROOT . '/templates/admin/footer.php'; ?>