From 786eef6df5bb66f2de35a89aabbe3f6af30422fc Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Fri, 3 Jul 2026 17:08:49 +0200
Subject: [PATCH] cleanup: remplacer <details> par <fieldset>/<legend> (comme
 contenus.php)

---
 TODO.md                                       |   1 +
 .../admin/actions/cleanup-stats-fragment.php  |  94 ++++++++--------
 .../actions/peertube-orphans-fragment.php     | 106 ++++++++----------
 app/templates/admin/cleanup.php               |  58 ++++++----
 4 files changed, 127 insertions(+), 132 deletions(-)

diff --git a/TODO.md b/TODO.md
index 34371d1..ac685f3 100644
--- a/TODO.md
+++ b/TODO.md
@@ -17,3 +17,4 @@
 - [x] Remove orientation display from search result card meta
 - [x] Add bulk select/delete to tmp cleanup dialog (like admin/index.php pattern)
 - [x] Move cleanup UI from modal to dedicated page (like add.php/edit.php)
+- [x] Replace <details> with <fieldset>/<legend> in cleanup fragments (like contenus.php)
diff --git a/app/public/admin/actions/cleanup-stats-fragment.php b/app/public/admin/actions/cleanup-stats-fragment.php
index eeedad7..461d49c 100644
--- a/app/public/admin/actions/cleanup-stats-fragment.php
+++ b/app/public/admin/actions/cleanup-stats-fragment.php
@@ -4,7 +4,7 @@
  *
  * GET /admin/actions/cleanup-stats-fragment.php
  *
- * Returns an HTML fragment ready for HTMX swap into #tmp-cleanup-stats-wrapper.
+ * Returns an HTML fragment ready for HTMX innerHTML swap into #tmp-cleanup-stats-wrapper.
  */
 require_once __DIR__ . '/../../../bootstrap.php';
 require_once __DIR__ . '/../../../src/AdminAuth.php';
@@ -24,13 +24,6 @@ $trActive = $d['trash_active_count'] ?? 0;
 $totalStale = $fpStale + $trStale;
 $totalFiles = $fpStale + $fpActive + $trStale + $trActive;
 
-// Build summary meta: total stale count + total size
-$staleParts = [];
-if ($fpStale > 0) $staleParts[] = $fpStale . ' téléversement';
-if ($trStale > 0) $staleParts[] = $trStale . ' corbeille';
-$staleMeta = implode(' + ', $staleParts);
-
-// Approximate total stale size
 $staleSize = ($d['filepond_stale_size'] ?? 0) + ($d['trash_stale_size'] ?? 0);
 $staleHuman = '';
 if ($staleSize >= 1073741824) { $staleHuman = number_format($staleSize / 1073741824, 1) . ' GB'; }
@@ -38,50 +31,52 @@ elseif ($staleSize >= 1048576) { $staleHuman = number_format($staleSize / 104857
 elseif ($staleSize >= 1024) { $staleHuman = number_format($staleSize / 1024, 0) . ' KB'; }
 elseif ($staleSize > 0) { $staleHuman = $staleSize . ' B'; }
 
-$summaryMeta = $staleMeta;
-if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
-
+$fpMeta = $fpStale . ' dossier' . ($fpStale > 1 ? 's' : '');
+if ($fpStale > 0) {
+    $fpMeta .= ' · ' . ($d['filepond_stale_human'] ?? '');
+}
+$trMeta = $trStale . ' fichier' . ($trStale > 1 ? 's' : '');
+if ($trStale > 0) {
+    $trMeta .= ' · ' . ($d['trash_stale_human'] ?? '');
+}
+?>
 <?php if ($totalStale === 0 && $totalFiles === 0): ?>
-<div id="tmp-cleanup-stats-wrapper">
-    <details class="n-section" open>
-        <summary>
+    <fieldset>
+        <legend>
             <?= icon('paint-brush-household') ?>
             Fichiers temporaires
-        </summary>
+        </legend>
         <p style="margin:0;color:var(--accent-green)">✓ Aucun fichier temporaire.</p>
-    </details>
-</div>
+    </fieldset>
 <?php return; endif; ?>
 
-<div id="tmp-cleanup-stats-wrapper">
-    <!-- Bulk actions bar -->
-    <div id="cleanup-bulk-actions" class="admin-bulk-actions" style="display:none">
-        <strong><span id="cleanup-selected-count">0</span> fichier(s) sélectionné(s)</strong>
-        <div class="admin-bulk-btns">
-            <button type="button" class="btn btn--sm btn--red" onclick="cleanupBulkDelete()">
-                <?= icon('trash') ?> Supprimer la sélection
-            </button>
-        </div>
+<!-- Bulk actions bar -->
+<div id="cleanup-bulk-actions" class="admin-bulk-actions" style="display:none">
+    <strong><span id="cleanup-selected-count">0</span> fichier(s) sélectionné(s)</strong>
+    <div class="admin-bulk-btns">
+        <button type="button" class="btn btn--sm btn--red" onclick="cleanupBulkDelete()">
+            <?= icon('trash') ?> Supprimer la sélection
+        </button>
     </div>
+</div>
 
-    <!-- Hidden bulk form (HTMX-powered) -->
-    <form id="cleanup-bulk-form" method="post" action="/admin/actions/cleanup-tmp.php"
-          hx-post="/admin/actions/cleanup-tmp.php"
-          hx-target="#tmp-cleanup-stats-wrapper"
-          hx-swap="outerHTML"
-          hx-indicator="#tmp-cleanup-stats-wrapper"
-          style="display:none">
-        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
-        <div id="cleanup-bulk-checkboxes"></div>
-    </form>
-
-    <details class="n-section" open>
-        <summary>
-            <?= icon('paint-brush-household') ?>
-            Fichiers temporaires <span class="n-meta"><?= htmlspecialchars($summaryMeta) ?></span>
-        </summary>
+<!-- Hidden bulk form (HTMX-powered) -->
+<form id="cleanup-bulk-form" method="post" action="/admin/actions/cleanup-tmp.php"
+      hx-post="/admin/actions/cleanup-tmp.php"
+      hx-target="#tmp-cleanup-stats-wrapper"
+      hx-swap="innerHTML"
+      hx-indicator="#tmp-cleanup-stats-wrapper"
+      style="display:none">
+    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
+    <div id="cleanup-bulk-checkboxes"></div>
+</form>
 
 <?php if ($fpStale > 0): ?>
+    <fieldset>
+        <legend>
+            <?= icon('paint-brush-household') ?>
+            Téléversements abandonnés <span class="n-meta"><?= htmlspecialchars($fpMeta) ?></span>
+        </legend>
         <table class="n-table">
             <thead><tr><th width="1%"><input type="checkbox" onchange="cleanupToggleAll(this, 'filepond')" title="Tout sélectionner"></th><th>Nom</th><th>Taille</th><th>Âge</th><th width="1%"></th></tr></thead>
             <tbody>
@@ -97,7 +92,7 @@ if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
                                 hx-confirm="Supprimer définitivement ce téléversement abandonné ?"
                                 hx-vals='{"csrf_token":"<?= htmlspecialchars($_SESSION['csrf_token']) ?>","filepond_dir":"<?= htmlspecialchars($f['name']) ?>"}'
                                 hx-target="#tmp-cleanup-stats-wrapper"
-                                hx-swap="outerHTML"
+                                hx-swap="innerHTML"
                                 hx-indicator="#tmp-cleanup-stats-wrapper">
                             <?= icon('trash') ?>
                             Supprimer
@@ -107,13 +102,15 @@ if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
             <?php endforeach; ?>
             </tbody>
         </table>
+    </fieldset>
 <?php endif; ?>
 
 <?php if ($trStale > 0): ?>
-        <p class="n-heading">
+    <fieldset>
+        <legend>
             <?= icon('trash') ?>
-            Corbeille
-        </p>
+            Corbeille <span class="n-meta"><?= htmlspecialchars($trMeta) ?></span>
+        </legend>
         <table class="n-table">
             <thead><tr><th width="1%"><input type="checkbox" onchange="cleanupToggleAll(this, 'trash')" title="Tout sélectionner"></th><th>Nom</th><th>Taille</th><th>Âge</th><th width="1%"></th></tr></thead>
             <tbody>
@@ -129,7 +126,7 @@ if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
                                 hx-confirm="Supprimer définitivement ce fichier de la corbeille ?"
                                 hx-vals='{"csrf_token":"<?= htmlspecialchars($_SESSION['csrf_token']) ?>","trash_file":"<?= htmlspecialchars($f['name']) ?>"}'
                                 hx-target="#tmp-cleanup-stats-wrapper"
-                                hx-swap="outerHTML"
+                                hx-swap="innerHTML"
                                 hx-indicator="#tmp-cleanup-stats-wrapper">
                             <?= icon('trash') ?>
                             Supprimer
@@ -139,6 +136,7 @@ if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
             <?php endforeach; ?>
             </tbody>
         </table>
+    </fieldset>
 <?php endif; ?>
 
 <?php if ($fpActive > 0 || $trActive > 0): ?>
@@ -147,5 +145,3 @@ if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
             <?php if ($trActive) echo $trActive . ' fichier(s) récent(s) (' . htmlspecialchars($d['trash_active_human']) . ')'; ?>
         </p>
 <?php endif; ?>
-    </details>
-</div>
diff --git a/app/public/admin/actions/peertube-orphans-fragment.php b/app/public/admin/actions/peertube-orphans-fragment.php
index 88c2870..29da083 100644
--- a/app/public/admin/actions/peertube-orphans-fragment.php
+++ b/app/public/admin/actions/peertube-orphans-fragment.php
@@ -4,7 +4,7 @@
  *
  * GET /admin/actions/peertube-orphans-fragment.php
  *
- * Returns an HTML fragment ready for HTMX swap into #peertube-orphans-fragment.
+ * Returns an HTML fragment ready for HTMX innerHTML swap into #peertube-orphans-fragment.
  */
 require_once __DIR__ . '/../../../bootstrap.php';
 require_once __DIR__ . '/../../../src/AdminAuth.php';
@@ -17,80 +17,69 @@ $json = ob_get_clean();
 $d = json_decode($json, true);
 
 if (!($d['configured'] ?? false)): ?>
-<div id="peertube-orphans-fragment" style="display:contents">
-    <details id="peertube-orphans-col" class="n-section" open>
-        <summary>
+    <fieldset>
+        <legend>
             <?= icon('video') ?>
             Vidéos PeerTube orphelines
-        </summary>
-        <div id="peertube-orphans-stats">
-            <p style="margin:0;color:var(--color-warning)">⚠️ PeerTube non configuré.</p>
-        </div>
-    </details>
-</div>
+        </legend>
+        <p style="margin:0;color:var(--color-warning)">⚠️ PeerTube non configuré.</p>
+    </fieldset>
 <?php return; endif; ?>
 
 <?php if (!empty($d['error'])): ?>
-<div id="peertube-orphans-fragment" style="display:contents">
-    <details id="peertube-orphans-col" class="n-section" open>
-        <summary>
+    <fieldset>
+        <legend>
             <?= icon('video') ?>
             Vidéos PeerTube orphelines
-        </summary>
-        <div id="peertube-orphans-stats">
-            <p style="margin:0;color:var(--color-error)">✗ <?= htmlspecialchars($d['error']) ?></p>
-        </div>
-    </details>
-</div>
+        </legend>
+        <p style="margin:0;color:var(--color-error)">✗ <?= htmlspecialchars($d['error']) ?></p>
+    </fieldset>
 <?php return; endif; ?>
 
-<div id="peertube-orphans-fragment" style="display:contents">
-    <details id="peertube-orphans-col" class="n-section" open>
-        <summary>
+    <fieldset>
+        <legend>
             <?= icon('video') ?>
             Vidéos PeerTube orphelines <span class="n-meta"><?= (int)($d['orphan_count'] ?? 0) ?> vidéos orphelines</span>
-        </summary>
-        <div id="peertube-orphans-stats">
+        </legend>
 <?php if (($d['orphan_count'] ?? 0) > 0): ?>
-            <table class="n-table">
-                <thead><tr><th>Nom</th><th>Date</th><th width="1%"></th></tr></thead>
-                <tbody>
-                <?php foreach ($d['orphans'] as $v): ?>
-                    <tr>
-                        <td>
-                            <strong><?= htmlspecialchars($v['name']) ?></strong>
-                            <span class="n-table__info" style="display:block"><?= htmlspecialchars($v['uuid']) ?></span>
-                        </td>
-                        <td style="white-space:nowrap"><?= htmlspecialchars(substr($v['createdAt'] ?? '', 0, 10)) ?></td>
-                        <td style="white-space:nowrap">
-                            <button type="button" class="btn btn--sm btn--danger" style="font-size:0.85em;padding:2px var(--space-xs)"
-                                    hx-post="/admin/actions/peertube-delete.php"
-                                    hx-confirm="Supprimer définitivement cette vidéo de PeerTube ?"
-                                    hx-vals='{"csrf_token":"<?= htmlspecialchars($_SESSION['csrf_token']) ?>","uuid":"<?= htmlspecialchars($v['uuid']) ?>"}'
-                                    hx-target="#peertube-orphans-fragment"
-                                    hx-swap="outerHTML"
-                                    hx-trigger="click"
-                                    hx-indicator="#peertube-orphans-fragment">
-                                <?= icon('trash') ?>
-                                Supprimer
-                            </button>
-                        </td>
-                    </tr>
-                <?php endforeach; ?>
-                </tbody>
-            </table>
+        <table class="n-table">
+            <thead><tr><th>Nom</th><th>Date</th><th width="1%"></th></tr></thead>
+            <tbody>
+            <?php foreach ($d['orphans'] as $v): ?>
+                <tr>
+                    <td>
+                        <strong><?= htmlspecialchars($v['name']) ?></strong>
+                        <span class="n-table__info" style="display:block"><?= htmlspecialchars($v['uuid']) ?></span>
+                    </td>
+                    <td style="white-space:nowrap"><?= htmlspecialchars(substr($v['createdAt'] ?? '', 0, 10)) ?></td>
+                    <td style="white-space:nowrap">
+                        <button type="button" class="btn btn--sm btn--danger" style="font-size:0.85em;padding:2px var(--space-xs)"
+                                hx-post="/admin/actions/peertube-delete.php"
+                                hx-confirm="Supprimer définitivement cette vidéo de PeerTube ?"
+                                hx-vals='{"csrf_token":"<?= htmlspecialchars($_SESSION['csrf_token']) ?>","uuid":"<?= htmlspecialchars($v['uuid']) ?>"}'
+                                hx-target="#peertube-orphans-fragment"
+                                hx-swap="innerHTML"
+                                hx-trigger="click"
+                                hx-indicator="#peertube-orphans-fragment">
+                            <?= icon('trash') ?>
+                            Supprimer
+                        </button>
+                    </td>
+                </tr>
+            <?php endforeach; ?>
+            </tbody>
+        </table>
 <?php else: ?>
-            <p style="margin:0;color:var(--accent-green)">✓ Aucune vidéo orpheline.</p>
+        <p style="margin:0;color:var(--accent-green)">✓ Aucune vidéo orpheline.</p>
 <?php endif; ?>
-        </div>
-    </details>
+    </fieldset>
 
 <?php if (($d['stale_count'] ?? 0) > 0): ?>
-    <details id="peertube-stale-section" class="n-section" open>
-        <summary>
+    <fieldset>
+        <legend>
             <?= icon('warning-diamond') ?>
             Références DB obsolètes <span class="n-meta"><?= $d['stale_count'] ?></span>
-        </summary>
+        </legend>
         <p style="margin:0 0 var(--space-sm) 0;font-size:0.85em;color:var(--text-secondary)">Ces UUID sont référencés en base de données mais n'existent plus sur la chaîne PeerTube. Les TFE liés affichent des liens morts.</p>
         <table class="n-table">
             <thead><tr><th>UUID</th><th>TFE(s)</th></tr></thead>
@@ -110,6 +99,5 @@ if (!($d['configured'] ?? false)): ?>
             <?php endforeach; ?>
             </tbody>
         </table>
-    </details>
+    </fieldset>
 <?php endif; ?>
-</div>
diff --git a/app/templates/admin/cleanup.php b/app/templates/admin/cleanup.php
index 0fd8742..e1fdefe 100644
--- a/app/templates/admin/cleanup.php
+++ b/app/templates/admin/cleanup.php
@@ -10,29 +10,39 @@
         </div>
     </div>
 
-    <div class="n-grid" id="cleanup-grid-parent">
-        <!-- ═══════ FilePond / Trash ═══════ -->
-        <div id="tmp-cleanup-stats-wrapper"
-             hx-get="/admin/actions/cleanup-stats-fragment.php"
-             hx-trigger="load"
-             hx-swap="outerHTML"
-             hx-indicator="#tmp-cleanup-stats-wrapper">
-            <details class="n-section" open>
-                <summary>
-                    <?= icon('paint-brush-household') ?>
-                    Fichiers temporaires
-                </summary>
-                <p style="margin:0;color:var(--text-secondary)">Chargement…</p>
-            </details>
-        </div>
+    <article>
+        <section aria-labelledby="tmp-files-title">
+            <h2 id="tmp-files-title">Téléversements et corbeille</h2>
+            <div id="tmp-cleanup-stats-wrapper"
+                 hx-get="/admin/actions/cleanup-stats-fragment.php"
+                 hx-trigger="load"
+                 hx-swap="innerHTML"
+                 hx-indicator="#tmp-cleanup-stats-wrapper">
+                <fieldset>
+                    <legend>
+                        <?= icon('paint-brush-household') ?>
+                        Fichiers temporaires
+                    </legend>
+                    <p style="margin:0;color:var(--text-secondary)">Chargement…</p>
+                </fieldset>
+            </div>
+        </section>
 
-        <!-- ═══════ PeerTube ═══════ -->
-        <div id="peertube-orphans-fragment" style="display:contents"
-             hx-get="/admin/actions/peertube-orphans-fragment.php"
-             hx-trigger="load"
-             hx-swap="outerHTML"
-             hx-indicator="#peertube-orphans-fragment">
-            <p style="margin:0;color:var(--text-secondary)">Chargement…</p>
-        </div>
-    </div>
+        <section aria-labelledby="peertube-title">
+            <h2 id="peertube-title">Vidéos PeerTube</h2>
+            <div id="peertube-orphans-fragment"
+                 hx-get="/admin/actions/peertube-orphans-fragment.php"
+                 hx-trigger="load"
+                 hx-swap="innerHTML"
+                 hx-indicator="#peertube-orphans-fragment">
+                <fieldset>
+                    <legend>
+                        <?= icon('video') ?>
+                        Vidéos PeerTube
+                    </legend>
+                    <p style="margin:0;color:var(--text-secondary)">Chargement…</p>
+                </fieldset>
+            </div>
+        </section>
+    </article>
 </main>