Replace HTMX+PHP file upload queues with client-side JS

Drops the session-backed HTMX incremental upload system in favour of a
single JS module that manages `File` objects client-side and injects
them into `FormData` on submit.

Key changes:

* `file-upload-queue.js`: client-side queues with validation, reorder
  (SortableJS), removal, dirty-state tracking, and fetch-based submit
  with manual redirect handling
* `fichiers-fragment.php`: empty queue containers for JS-managed queues;
  HTMX format switching still works with queue rehydration after swap;
  annexe uploads now support multiple files
* Form UI cleanup: moved existing files and cover preview into the
  `Fichiers` fieldset (edit mode); removed redundant queue labels while
  keeping labels for single-file inputs (`couverture`,
  `note d'intention`); added delete buttons for existing files
* `ThesisFileHandler.php`: added
  `handleTfeQueueFiles()`/`handleAnnexeQueueFiles()` reading from
  `$_FILES['queue_file']`; introduced `extractFilesSubArray()` for
  nested upload arrays; removed session-based queue handling
* `ThesisCreateController.php` &
  `ThesisEditController.php`: switched to extracted
  `['queue_file']` uploads
* `beforeunload-guard.js`: now also watches
  `window.__xamxamDirty`
* Deleted obsolete PHP upload/remove/reorder queue endpoints for
  `partage` and `admin`
* Cleaned up route dispatch in `partage/index.php`
* Misc form and styling updates in templates/CSS
* Added `docs/cms-migration-plan.html`

app/public/partage/fichiers-fragment.php

@@ -6,18 +6,19 @@
  * Called on every format checkbox change so the Fichiers fieldset adapts.
  *
  * Fixed inputs (always present in #format-fichiers-block):
- *   1. Image de couverture (optional)
- *   2. Note d'intention (PDF, required unless adminMode)
- *   3. TFE — multi-file upload (required unless adminMode)
- *   4. Annexes checkbox + file input
+ *   1. Image de couverture (optional)     — single file, plain input
+ *   2. Note d'intention (PDF, required)   — single file, plain input
+ *   3. TFE — multi-file JS queue          — client-side, orderable
+ *   4. Annexes checkbox + JS queue        — client-side, orderable
  *
- * Format-specific extra inputs (separate #format-extras-block so toggling
- * formats does not destroy file queue state):
+ * Format-specific extra inputs (#format-extras-block):
  *   - Site web   → URL field only
- *   - Vidéo      → PeerTube upload or direct file input
- *   - Audio      → PeerTube upload or direct file input
- *   - (all others: Écriture, Performance, Objet éditorial, Installation, Autre)
- *     → no extra input needed beyond the standard TFE file upload
+ *   - Vidéo      → PeerTube single upload  OR  multi-file JS queue
+ *   - Audio      → PeerTube single upload  OR  multi-file JS queue
+ *
+ * File queues are managed entirely client-side by file-upload-queue.js.
+ * This fragment only provides the empty container elements and the file
+ * picker inputs.
  *
  * Expected POST:
  *   formats[]       — array of selected format_type IDs
@@ -59,7 +60,6 @@ $hasVideo   = $videoId   && in_array($videoId,   $selectedFormats, true);
 $hasAudio   = $audioId   && in_array($audioId,   $selectedFormats, true);
 $hasImage   = $imageId   && in_array($imageId,   $selectedFormats, true);
 
-// Show standard file inputs unless *only* Site web is selected
 $hasNonWebFormat = !empty(array_filter(
     $selectedFormats,
     fn($id) => $id !== $siteWebId
@@ -89,8 +89,8 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <fieldset class="admin-checkbox-group"
                   <?= !$adminMode ? 'required aria-required="true"' : '' ?>
                   hx-post="<?= htmlspecialchars($hxPost) ?>"
-                  hx-target="#format-extras-block"
-                  hx-select="#format-extras-block"
+                  hx-target="#format-fichiers-block"
+                  hx-select="#format-fichiers-block"
                   hx-trigger="change"
                   hx-include="this, [name='website_url'], [name='admin_mode'], [name='edit_mode'], [name='_cover'], [name='has_annexes']"
                   hx-swap="outerHTML">
@@ -116,28 +116,92 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
 <fieldset>
     <legend>Fichiers</legend>
 
+    <?php
+    // Existing files + cover preview (edit mode only, initial render — not re-sent on HTMX swaps)
+    $_efiles = $currentFiles ?? [];
+    $_cover  = $_POST['_cover'] ?? null;
+    if ($editMode && (!empty($_efiles) || $_cover)):
+    ?>
+    <div class="admin-form-group">
+        <ul id="existing-files-sortable" class="admin-file-list">
+            <?php
+            // ── Couverture preview ──
+            if ($_cover): ?>
+            <li class="admin-file-list-item">
+                <span class="admin-file-icon-col">🖼️</span>
+                <span class="admin-file-info">
+                    <span class="admin-file-name">Couverture</span>
+                    <span class="admin-file-meta-row">
+                        <img src="/media?path=<?= urlencode($_cover) ?>"
+                             alt="Couverture actuelle" style="max-height:120px;border-radius:var(--radius);margin-top:var(--space-3xs);">
+                    </span>
+                    <label class="admin-checkbox-label" style="margin-top:var(--space-3xs);">
+                        <input type="checkbox" name="remove_cover" value="1"> Supprimer
+                    </label>
+                </span>
+            </li>
+            <?php endif; ?>
+            <?php
+            // ── Existing files ──
+            $_thesisFilesList = array_values(array_filter($_efiles, fn($f) => $f["file_type"] !== "cover"));
+            foreach ($_thesisFilesList as $_f):
+                $_fExt = strtolower(pathinfo($_f["file_path"] ?? "", PATHINFO_EXTENSION));
+                $_fType = $_f["file_type"] ?? "other";
+                $_fIcon = match (true) {
+                    $_fType === "main" || $_fExt === "pdf" => "📄",
+                    in_array($_fExt, ["jpg","jpeg","png","gif","webp"]) => "🖼️",
+                    $_fType === "video" || in_array($_fExt, ["mp4","webm","mov","ogv"]) => "🎬",
+                    $_fType === "audio" || in_array($_fExt, ["mp3","ogg","wav","flac","aac","m4a"]) => "🔊",
+                    $_fType === "caption" || $_fExt === "vtt" => "💬",
+                    $_fType === "website" => "🌐",
+                    default => "📎",
+                };
+                $_fIsExternal = str_starts_with($_f["file_path"] ?? "", "http://") || str_starts_with($_f["file_path"] ?? "", "https://");
+                $_fLinkHref = $_fIsExternal ? htmlspecialchars($_f["file_path"]) : "/media?path=" . urlencode($_f["file_path"]);
+            ?>
+            <li class="admin-file-list-item" data-file-id="<?= (int)$_f["id"] ?>">
+                <input type="hidden" name="file_sort_order[]" value="<?= (int)$_f["id"] ?>">
+                <span class="admin-file-icon-col"><?= $_fIcon ?></span>
+                <span class="admin-file-info">
+                    <a href="<?= $_fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
+                        <?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>
+                    </a>
+                    <span class="admin-file-meta-row">
+                        <span class="admin-file-type-badge"><?= htmlspecialchars($_fType) ?></span>
+                        <?php if (!empty($_f["file_size"]) && $_f["file_size"] > 0): ?>
+                        <span class="admin-file-size"><?= number_format($_f["file_size"] / 1024 / 1024, 2) ?> MB</span>
+                        <?php endif; ?>
+                    </span>
+                    <input type="text" name="file_label[<?= (int)$_f["id"] ?>]"
+                           value="<?= htmlspecialchars($_f["display_label"] ?? "") ?>"
+                           placeholder="Légende / description (optionnel)"
+                           class="admin-file-label-input">
+                </span>
+                <input type="hidden" name="delete_files[]" value="<?= (int)$_f["id"] ?>" disabled>
+                <button type="button"
+                        class="admin-btn-remove fq-remove"
+                        onclick="this.previousElementSibling.disabled=false;this.closest('li').style.opacity='0.4';this.disabled=true;"
+                        aria-label="Supprimer <?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>">&#x2715;</button>
+            </li>
+            <?php endforeach; ?>
+        </ul>
+    </div>
+    <?php endif; ?>
+
     <!-- ── 1. Couverture (always) ── -->
     <div>
     <?php
     $_cover = $_POST['_cover'] ?? null;
-    if ($editMode && $_cover): ?>
-    <div class="admin-banner-preview">
-        <img src="/media?path=<?= urlencode($_cover) ?>"
-             alt="Couverture actuelle" style="max-height:180px;">
-        <label class="admin-checkbox-label">
-            <input type="checkbox" name="remove_cover" value="1"> Supprimer la couverture
-        </label>
-    </div>
-    <?php endif;
-    $name     = 'couverture';
-    $label    = 'Image de couverture (optionnel) :';
-    $accept   = 'image/jpeg,image/png,image/webp';
-    $hint     = ($editMode && $_cover)
-        ? 'Laisser vide pour conserver la couverture actuelle. JPG, PNG ou WEBP. Max 20 MB.'
-        : 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
-    $required = false;
-    $id       = 'couverture';
-    include APP_ROOT . '/templates/partials/form/file-field.php';
+    // Only show upload field in add mode or when no existing cover
+    if (!$editMode || !$_cover):
+        $name     = 'couverture';
+        $label    = 'Image de couverture (optionnel)';
+        $accept   = 'image/jpeg,image/png,image/webp';
+        $hint     = 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
+        $required = false;
+        $id       = 'couverture';
+        include APP_ROOT . '/templates/partials/form/file-field.php';
+    endif;
     unset($_cover);
     ?>
     </div>
@@ -146,9 +210,9 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
     <div>
     <?php
     $name     = 'note_intention';
-    $label    = 'Note d\'intention :';
+    $label    = 'Note d\'intention';
     $accept   = '.pdf';
-    $hint     = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
+    $hint     = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
     $hintRaw  = true;
     $required = !$adminMode;
     $id       = 'note_intention';
@@ -156,55 +220,29 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
     ?>
     </div>
 
-    <!-- ── 3. TFE (always) ── -->
+    <!-- ── 3. TFE — multi-file client-side JS queue (always) ── -->
     <div class="admin-form-group admin-files-fieldgroup">
-        <label>TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
+        <label for="tfe-files-input">TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
         <div class="admin-file-input">
-            <?php
-            $tfeUploadUrl = $adminMode ? '/admin/upload-tfe-file.php' : '/partage/upload-tfe-file';
-            $tfeRemoveUrl = $adminMode ? '/admin/remove-tfe-file.php' : '/partage/remove-tfe-file';
-            $tfeValidateUrl = $adminMode ? '/admin/validate-file-fragment.php' : '/partage/validate-file-fragment';
-            ?>
-            <!-- Inline validation form (scoped) -->
-            <form class="file-validation-form"
-                  hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                  hx-encoding="multipart/form-data"
-                  hx-trigger="change from:#tfe-files-input"
-                  hx-target="find .file-validation-msg"
-                  hx-swap="innerHTML"
-                  hx-sync="replace">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
-                <input type="file" id="tfe-files-input"
-                       name="tfe"
-                       accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
-                       class="tfe-file-picker"
-                       hx-encoding="multipart/form-data"
-                       hx-post="<?= htmlspecialchars($tfeUploadUrl) ?>"
-                       hx-target="#tfe-file-queue-container"
-                       hx-select="#tfe-file-queue-container"
-                       hx-swap="outerHTML"
-                       hx-trigger="change"
-                       hx-include="[name='csrf_token'], [name='admin_mode']">
-                <div class="file-validation-msg" aria-live="polite"></div>
-            </form>
+            <input type="file" id="tfe-files-input"
+                   name="tfe"
+                   accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
+                   class="tfe-file-picker"
+                   <?= !$adminMode ? 'required' : '' ?>>
             <progress id="tfe-upload-progress" value="0" max="100" style="display:none;width:100%;margin-top:var(--space-3xs);"></progress>
             <small class="admin-file-hint">
-                PDF (max 100 MB) · Images (JPG/PNG/GIF/WEBP).
+                PDF (max 100 MB) · Images (JPG/PNG/GIF/WEBP). Glissez pour réordonner.
                 PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
             </small>
-            <div id="tfe-file-queue-container">
-                <?php
-                // Render initial queue state from session
-                $initialUploads = $_SESSION['tfe_uploads'] ?? [];
-                require_once APP_ROOT . '/public/partage/tfe-queue-helper.php';
-                renderQueueFragment($initialUploads, $tfeRemoveUrl);
-                ?>
+            <!-- Queue container — populated by file-upload-queue.js -->
+            <div id="tfe-file-queue-container" class="fq-container" data-queue-type="tfe">
+                <ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
+                <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
             </div>
         </div>
     </div>
 
-    <!-- ── Annexes ── -->
+    <!-- ── 4. Annexes — multi-file client-side JS queue ── -->
     <div id="annexes-input-block">
         <div class="admin-form-group">
             <label class="admin-checkbox-label">
@@ -220,25 +258,31 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
             </label>
         </div>
         <?php if ($hasAnnexesChecked): ?>
-        <div>
-        <?php
-        $name     = 'annexes';
-        $label    = 'Annexes :';
-        $accept   = '.pdf,.zip,.tar,.gz';
-        $hint     = 'PDF ou archives ZIP/TAR. Max 500 MB.';
-        $required = !$adminMode;
-        $multiple = true;
-        include APP_ROOT . '/templates/partials/form/file-field.php';
-        ?>
+        <div class="admin-form-group admin-files-fieldgroup">
+            <label for="annexe-files-input">Annexes<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
+                <input type="file" id="annexe-files-input"
+                       name="annexe" multiple
+                       accept=".pdf,.zip,.tar,.gz"
+                       class="tfe-file-picker"
+                       <?= !$adminMode ? 'required' : '' ?>>
+                <small class="admin-file-hint">PDF ou archives ZIP/TAR. Max 500 MB. Glissez pour réordonner.</small>
+                <!-- Queue container — populated by file-upload-queue.js -->
+                <div id="annexe-file-queue-container" class="fq-container" data-queue-type="annexe">
+                    <ul id="annexe-file-queue" class="tfe-file-queue" aria-label="Annexes sélectionnées"></ul>
+                    <p id="annexe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+                </div>
+            </div>
         </div>
+        <script>if(window.XamxamInitQueues)window.XamxamInitQueues();</script>
         <?php endif; ?>
     </div>
 
-    <!-- ── Format-specific extras (swappable, inside Fichiers fieldset) ── -->
+    <!-- ── Format-specific extras (swappable) ── -->
     <div id="format-extras-block" style="display:flex;flex-direction:column;gap:var(--space-s);">
         <?php if ($hasSiteWeb): ?>
         <div class="admin-form-group">
-            <label for="website_url">URL du site<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
+            <label for="website_url">URL du site<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
             <div class="admin-file-input">
                 <input type="url" id="website_url" name="website_url"
                        value="<?= $websiteUrl ?>"
@@ -252,43 +296,29 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?php if ($hasVideo): ?>
         <?php if ($peerTubeEnabled): ?>
         <div class="admin-form-group">
-            <label for="peertube_video">Fichier vidéo (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#peertube_video"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_video">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
+            <label for="peertube_video">Vidéo PeerTube<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
                 <input type="file" id="peertube_video" name="peertube_video"
                        accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP4, WebM ou MOV. La vidéo sera hébergée sur PeerTube et intégrée
-                comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
+                <small>MP4, WebM ou MOV. La vidéo sera hébergée sur PeerTube. Max 500 MB.</small>
             </div>
         </div>
         <?php else: ?>
-        <div class="admin-form-group">
-            <label for="tfe-video-upload">Fichier vidéo<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#tfe-video-upload"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-video-upload">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
-                <input type="file" id="tfe-video-upload" name="files[]"
+        <div class="admin-form-group admin-files-fieldgroup">
+            <label for="video-files-input">Vidéo<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
+                <input type="file" id="video-files-input"
+                       name="video"
                        accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
+                       class="tfe-file-picker"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP4, WebM ou MOV. Max 500 MB.</small>
+                <small class="admin-file-hint">MP4, WebM ou MOV. Max 500 MB par fichier. Glissez pour réordonner.</small>
+                <!-- Queue container — populated by file-upload-queue.js -->
+                <div id="video-file-queue-container" class="fq-container" data-queue-type="video">
+                    <ul id="video-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
+                    <p id="video-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+                </div>
             </div>
         </div>
         <?php endif; ?>
@@ -297,66 +327,40 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?php if ($hasAudio): ?>
         <?php if ($peerTubeEnabled): ?>
         <div class="admin-form-group">
-            <label for="peertube_audio">Fichier audio (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#peertube_audio"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_audio">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
+            <label for="peertube_audio">Audio PeerTube<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
                 <input type="file" id="peertube_audio" name="peertube_audio"
                        accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP3, OGG, WAV, FLAC ou AAC. Le fichier sera hébergé sur PeerTube et intégré
-                comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
+                <small>MP3, OGG, WAV, FLAC ou AAC. Le fichier sera hébergé sur PeerTube. Max 500 MB.</small>
             </div>
         </div>
         <?php else: ?>
-        <div class="admin-form-group">
-            <label for="tfe-audio-upload">Fichier audio<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#tfe-audio-upload"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-audio-upload">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
-                <input type="file" id="tfe-audio-upload" name="files[]"
+        <div class="admin-form-group admin-files-fieldgroup">
+            <label for="audio-files-input">Audio<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
+                <input type="file" id="audio-files-input"
+                       name="audio"
                        accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
+                       class="tfe-file-picker"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP3, OGG, WAV, FLAC ou AAC. Max 500 MB.</small>
+                <small class="admin-file-hint">MP3, OGG, WAV, FLAC ou AAC. Max 500 MB par fichier. Glissez pour réordonner.</small>
+                <!-- Queue container — populated by file-upload-queue.js -->
+                <div id="audio-file-queue-container" class="fq-container" data-queue-type="audio">
+                    <ul id="audio-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
+                    <p id="audio-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+                </div>
             </div>
         </div>
         <?php endif; ?>
         <?php endif; ?>
+
+        <script>if(window.XamxamInitQueues)window.XamxamInitQueues();</script>
     </div>
 
 </fieldset><!-- /Fichiers -->
 
 <script>
 if(window.XamxamInitFileUploads)window.XamxamInitFileUploads();
-// TFE upload progress bar
-(function(){
-  var input = document.getElementById('tfe-files-input');
-  var prog = document.getElementById('tfe-upload-progress');
-  if (!input || !prog) return;
-  input.addEventListener('htmx:xhr:progress', function(evt) {
-    prog.style.display = '';
-    prog.setAttribute('value', evt.detail.loaded / evt.detail.total * 100);
-  });
-  input.addEventListener('htmx:afterRequest', function() {
-    prog.style.display = 'none';
-    prog.setAttribute('value', 0);
-  });
-})();
 </script>
 </div><!-- #format-fichiers-block -->

app/public/partage/index.php

@@ -43,21 +43,7 @@ if ($slug === 'validate-file-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST')
     exit;
 }
 
-// Special route: /partage/upload-tfe-file (HTMX fragment — upload single TFE file)
-if ($slug === 'upload-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
-    App::boot();
-    App::verifyCsrf();
-    require_once __DIR__ . '/upload-tfe-file.php';
-    exit;
-}
 
-// Special route: /partage/remove-tfe-file (HTMX fragment — remove single TFE file)
-if ($slug === 'remove-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
-    App::boot();
-    App::verifyCsrf();
-    require_once __DIR__ . '/remove-tfe-file.php';
-    exit;
-}
 
 // Special route: /partage/fichiers-fragment (HTMX fragment — format-aware fichiers block)
 if ($slug === 'fichiers-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST') {
@@ -387,6 +373,7 @@ function renderShareLinkForm(string $slug, array $link): void
         <meta name="theme-color" content="#ffffff">
         <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
         <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
+        <script src="<?= App::assetV('/assets/js/sortable.min.js') ?>" defer></script>
         <script src="<?= App::assetV('/assets/js/file-upload-queue.js') ?>" defer></script>
         <script src="<?= App::assetV('/assets/js/beforeunload-guard.js') ?>" defer></script>
         <script src="<?= App::assetV('/assets/js/htmx.min.js') ?>" defer></script>

app/public/partage/remove-tfe-file.php

@@ -1,47 +0,0 @@
-<?php
-/**
- * remove-tfe-file.php (partage)
- *
- * HTMX fragment: removes a file from the TFE upload queue (session + temp
- * directory) and returns the updated queue HTML fragment.
- *
- * Expected POST:
- *   index  — the numeric index of the file to remove
- */
-
-require_once __DIR__ . '/../../bootstrap.php';
-App::boot();
-App::verifyCsrf();
-
-$index = isset($_POST['index']) ? (int)$_POST['index'] : -1;
-$uploads = $_SESSION['tfe_uploads'] ?? [];
-
-if ($index < 0 || $index >= count($uploads)) {
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Index invalide.</p>';
-    exit;
-}
-
-// ── Delete temp file ───────────────────────────────────────────────────────
-$entry = $uploads[$index];
-$absPath = STORAGE_ROOT . '/' . $entry['tmp_path'];
-if (file_exists($absPath)) {
-    unlink($absPath);
-}
-
-// ── Remove from session ────────────────────────────────────────────────────
-array_splice($_SESSION['tfe_uploads'], $index, 1);
-
-// ── Clean up empty temp directory ──────────────────────────────────────────
-$sessionId = session_id();
-$tempDir   = STORAGE_ROOT . '/uploads/' . $sessionId;
-$_SESSION['tfe_uploads'] = array_values($_SESSION['tfe_uploads']);
-
-if (empty($_SESSION['tfe_uploads']) && is_dir($tempDir)) {
-    // Remove dir only if empty (rmdir fails if not empty, which is fine)
-    @rmdir($tempDir);
-}
-
-// ── Render updated queue ───────────────────────────────────────────────────
-require_once __DIR__ . '/tfe-queue-helper.php';
-renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');

app/public/partage/tfe-queue-helper.php

@@ -1,78 +0,0 @@
-<?php
-/**
- * Shared fragment helper for rendering the TFE file upload queue.
- *
- * Used by both upload-tfe-file.php and remove-tfe-file.php.
- *
- * @param array  $uploads   Array of ['tmp_path', 'orig_name', 'size', 'mime']
- * @param string $removeUrl URL endpoint for removing files (e.g. '/partage/remove-tfe-file')
- */
-
-function renderQueueFragment(array $uploads, string $removeUrl = '/partage/remove-tfe-file'): void
-{
-    $ICON = [
-        'pdf'   => "\u{1F4C4}",
-        'video' => "\u{1F3AC}",
-        'audio' => "\u{1F50A}",
-        'zip'   => "\u{1F5DC}\u{FE0F}",
-        'vtt'   => "\u{1F4AC}",
-        'image' => "\u{1F5BC}\u{FE0F}",
-        'other' => "\u{1F4CE}",
-    ];
-
-    $iconFor = function (string $name, string $mime) use ($ICON): string {
-        if (str_starts_with($mime, 'image/')) return $ICON['image'];
-        if ($mime === 'application/pdf' || str_ends_with(strtolower($name), '.pdf')) return $ICON['pdf'];
-        if (str_starts_with($mime, 'video/') || preg_match('/\.(mp4|webm|mov|ogv)$/i', $name)) return $ICON['video'];
-        if (str_starts_with($mime, 'audio/') || preg_match('/\.(mp3|ogg|oga|wav|flac|aac|m4a)$/i', $name)) return $ICON['audio'];
-        if (preg_match('/\.(zip|tar|gz|tgz)$/i', $name)) return $ICON['zip'];
-        if (preg_match('/\.vtt$/i', $name)) return $ICON['vtt'];
-        return $ICON['other'];
-    };
-
-    $humanSize = function (int $b): string {
-        return $b >= 1073741824
-            ? number_format($b / 1073741824, 2) . ' GB'
-            : ($b >= 1048576
-                ? number_format($b / 1048576, 2) . ' MB'
-                : ($b >= 1024
-                    ? number_format($b / 1024, 1) . ' KB'
-                    : $b . ' B'));
-    };
-
-    if (empty($uploads)) {
-        echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
-           . ' aria-label="Fichiers sélectionnés"></ul>'
-           . "\n"
-           . '<p id="tfe-file-queue-empty" class="tfe-queue-empty">'
-           . 'Aucun fichier sélectionné.</p>';
-        return;
-    }
-
-    echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
-       . ' aria-label="Fichiers sélectionnés">';
-    foreach ($uploads as $idx => $f) {
-        $icon = $iconFor($f['orig_name'], $f['mime']);
-        $name = htmlspecialchars($f['orig_name']);
-        $size = $humanSize($f['size']);
-        echo '<li class="fq-item">'
-           . '<span class="fq-icon">' . $icon . '</span>'
-           . '<span class="fq-info">'
-           . '<span class="fq-name">' . $name . '</span>'
-           . '<span class="fq-size">' . $size . '</span>'
-           . '</span>'
-           . '<button type="button" class="admin-btn-remove fq-remove"'
-           . ' aria-label="Retirer ' . $name . '"'
-           . ' hx-post="' . htmlspecialchars($removeUrl) . '"'
-           . ' hx-target="#tfe-file-queue-container"'
-           . ' hx-select="#tfe-file-queue-container"'
-           . ' hx-swap="outerHTML"'
-           . ' hx-vals=\'{"index":' . $idx . '}\''
-           . ' hx-include="[name=\'csrf_token\']"'
-           . '>&#x2715;</button>'
-           . '</li>';
-    }
-    echo '</ul>';
-    echo '<p id="tfe-file-queue-empty" class="tfe-queue-empty" style="display:none">'
-       . 'Aucun fichier sélectionné.</p>';
-}

app/public/partage/upload-tfe-file.php

@@ -1,119 +0,0 @@
-<?php
-/**
- * upload-tfe-file.php (partage)
- *
- * HTMX fragment: receives a single file upload, stores it in a session-scoped
- * temp directory, appends it to the TFE upload queue, and returns the updated
- * queue HTML fragment.
- *
- * Expected POST:
- *   file  — the uploaded file (single file, not array)
- *
- * Session structure:
- *   $_SESSION['tfe_uploads'] = [
- *     ['tmp_path' => '...', 'orig_name' => '...', 'size' => ..., 'mime' => '...'],
- *     ...
- *   ]
- */
-
-require_once __DIR__ . '/../../bootstrap.php';
-App::boot();
-App::verifyCsrf();
-
-// ── Validate upload ────────────────────────────────────────────────────────
-$upload = $_FILES['tfe'] ?? null;
-if (!$upload || !isset($upload['error']) || $upload['error'] !== UPLOAD_ERR_OK) {
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Erreur lors du téléchargement.</p>';
-    exit;
-}
-
-// ── MIME + size validation ─────────────────────────────────────────────────
-$adminMode = ($_POST['admin_mode'] ?? '0') === '1';
-$finfo     = new \finfo(FILEINFO_MIME_TYPE);
-$mimeType  = $finfo->file($upload['tmp_name']);
-$ext       = strtolower(pathinfo($upload['name'], PATHINFO_EXTENSION));
-
-if ($mimeType === 'text/plain' && $ext === 'vtt') {
-    $mimeType = 'text/vtt';
-}
-
-$allowedMimes = [
-    'application/pdf',
-    'image/jpeg', 'image/png', 'image/gif', 'image/webp',
-    'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
-    'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
-    'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
-    'text/vtt',
-    'application/zip', 'application/x-zip-compressed',
-    'application/x-tar', 'application/gzip',
-    'application/octet-stream',
-];
-$allowedExts = [
-    'jpg', 'jpeg', 'png', 'gif', 'webp', 'pdf',
-    'mp4', 'webm', 'ogv', 'mov',
-    'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
-    'vtt', 'zip', 'tar', 'gz', 'tgz',
-];
-
-$mimeOk = in_array($mimeType, $allowedMimes, true)
-       || ($mimeType === 'application/octet-stream' && in_array($ext, $allowedExts, true))
-       || in_array($ext, $allowedExts, true);
-
-if (!$mimeOk && !$adminMode) {
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Type de fichier non accepté : ' . htmlspecialchars($upload['name']) . '</p>';
-    exit;
-}
-
-$maxSize = ($mimeType === 'application/pdf' || $ext === 'pdf') ? 100 * 1024 * 1024 : 500 * 1024 * 1024;
-if ($upload['size'] > $maxSize && !$adminMode) {
-    $maxMb = round($maxSize / 1024 / 1024);
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Fichier trop volumineux (' . round($upload['size'] / 1024 / 1024, 1) . ' MB). Maximum : ' . $maxMb . ' MB.</p>';
-    exit;
-}
-
-// ── Session temp directory ─────────────────────────────────────────────────
-$sessionId  = session_id();
-$tempDir    = STORAGE_ROOT . '/uploads/' . $sessionId;
-if (!is_dir($tempDir)) {
-    mkdir($tempDir, 0755, true);
-}
-
-// ── Move uploaded file to temp ─────────────────────────────────────────────
-$origName  = basename($upload['name']);
-$ext       = strtolower(pathinfo($origName, PATHINFO_EXTENSION));
-
-// Generate a unique temp name to avoid collisions
-$uniqueId  = bin2hex(random_bytes(8));
-$tmpName   = 'tmp_' . $uniqueId . ($ext ? '.' . $ext : '');
-$tmpPath   = $tempDir . '/' . $tmpName;
-
-if (!move_uploaded_file($upload['tmp_name'], $tmpPath)) {
-    http_response_code(500);
-    echo '<p class="tfe-queue-empty">Erreur lors de la sauvegarde du fichier.</p>';
-    exit;
-}
-
-chmod($tmpPath, 0644);
-
-// Determine MIME type
-$finfo    = new \finfo(FILEINFO_MIME_TYPE);
-$mimeType = $finfo->file($tmpPath);
-
-// ── Store in session ───────────────────────────────────────────────────────
-if (!isset($_SESSION['tfe_uploads']) || !is_array($_SESSION['tfe_uploads'])) {
-    $_SESSION['tfe_uploads'] = [];
-}
-
-$_SESSION['tfe_uploads'][] = [
-    'tmp_path'  => 'uploads/' . $sessionId . '/' . $tmpName,
-    'orig_name' => $origName,
-    'size'      => $upload['size'],
-    'mime'      => $mimeType,
-];
-
-// ── Render updated queue ───────────────────────────────────────────────────
-require_once __DIR__ . '/tfe-queue-helper.php';
-renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');