cleanup: remplacer <details> par <fieldset>/<legend> (comme contenus.php)

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)

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,22 +31,25 @@ 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;
+$fpMeta = $fpStale . ' dossier' . ($fpStale > 1 ? 's' : '');
-if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
+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">
+    <fieldset>
-    <details class="n-section" open>
+        <legend>
-        <summary>
             <?= icon('paint-brush-household') ?>
             Fichiers temporaires
-        </summary>
+        </legend>
         <p style="margin:0;color:var(--accent-green)">✓ Aucun fichier temporaire.</p>
-    </details>
+    </fieldset>
-</div>
 <?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>
@@ -68,20 +64,19 @@ if ($staleHuman) $summaryMeta .= ' · ' . $staleHuman;
 <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-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>
 
-    <details class="n-section" open>
-        <summary>
-            <?= icon('paint-brush-household') ?>
-            Fichiers temporaires <span class="n-meta"><?= htmlspecialchars($summaryMeta) ?></span>
-        </summary>
-
 <?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
+            Corbeille <span class="n-meta"><?= htmlspecialchars($trMeta) ?></span>
-        </p>
+        </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>

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,40 +17,30 @@ $json = ob_get_clean();
 $d = json_decode($json, true);
 
 if (!($d['configured'] ?? false)): ?>
-<div id="peertube-orphans-fragment" style="display:contents">
+    <fieldset>
-    <details id="peertube-orphans-col" class="n-section" open>
+        <legend>
-        <summary>
             <?= icon('video') ?>
             Vidéos PeerTube orphelines
-        </summary>
+        </legend>
-        <div id="peertube-orphans-stats">
         <p style="margin:0;color:var(--color-warning)">⚠️ PeerTube non configuré.</p>
-        </div>
+    </fieldset>
-    </details>
-</div>
 <?php return; endif; ?>
 
 <?php if (!empty($d['error'])): ?>
-<div id="peertube-orphans-fragment" style="display:contents">
+    <fieldset>
-    <details id="peertube-orphans-col" class="n-section" open>
+        <legend>
-        <summary>
             <?= icon('video') ?>
             Vidéos PeerTube orphelines
-        </summary>
+        </legend>
-        <div id="peertube-orphans-stats">
         <p style="margin:0;color:var(--color-error)">✗ <?= htmlspecialchars($d['error']) ?></p>
-        </div>
+    </fieldset>
-    </details>
-</div>
 <?php return; endif; ?>
 
-<div id="peertube-orphans-fragment" style="display:contents">
+    <fieldset>
-    <details id="peertube-orphans-col" class="n-section" open>
+        <legend>
-        <summary>
             <?= icon('video') ?>
             Vidéos PeerTube orphelines <span class="n-meta"><?= (int)($d['orphan_count'] ?? 0) ?> vidéos orphelines</span>
-        </summary>
+        </legend>
-        <div id="peertube-orphans-stats">
 <?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>
@@ -68,7 +58,7 @@ if (!($d['configured'] ?? false)): ?>
                                 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-swap="innerHTML"
                                 hx-trigger="click"
                                 hx-indicator="#peertube-orphans-fragment">
                             <?= icon('trash') ?>
@@ -82,15 +72,14 @@ if (!($d['configured'] ?? false)): ?>
 <?php else: ?>
         <p style="margin:0;color:var(--accent-green)">✓ Aucune vidéo orpheline.</p>
 <?php endif; ?>
-        </div>
+    </fieldset>
-    </details>
 
 <?php if (($d['stale_count'] ?? 0) > 0): ?>
-    <details id="peertube-stale-section" class="n-section" open>
+    <fieldset>
-        <summary>
+        <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>

app/templates/admin/cleanup.php

@@ -10,29 +10,39 @@
         </div>
     </div>
 
-    <div class="n-grid" id="cleanup-grid-parent">
+    <article>
-        <!-- ═══════ FilePond / Trash ═══════ -->
+        <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="outerHTML"
+                 hx-swap="innerHTML"
                  hx-indicator="#tmp-cleanup-stats-wrapper">
-            <details class="n-section" open>
+                <fieldset>
-                <summary>
+                    <legend>
                         <?= icon('paint-brush-household') ?>
                         Fichiers temporaires
-                </summary>
+                    </legend>
                     <p style="margin:0;color:var(--text-secondary)">Chargement…</p>
-            </details>
+                </fieldset>
             </div>
+        </section>
 
-        <!-- ═══════ PeerTube ═══════ -->
+        <section aria-labelledby="peertube-title">
-        <div id="peertube-orphans-fragment" style="display:contents"
+            <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="outerHTML"
+                 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>
-    </div>
+        </section>
+    </article>
 </main>