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`
2026-06-25 16:19:19 +02:00 · 2026-05-10 17:16:25 +02:00
parent 98ed83fac2
commit 13d26ded66
20 changed files with 2063 additions and 753 deletions
--- a/app/public/admin/add.php
+++ b/app/public/admin/add.php
@@ -55,7 +55,7 @@ function wasSelected($key, $value) {
 $isAdmin = true;
 $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/add.php';
--- a/app/public/admin/edit.php
+++ b/app/public/admin/edit.php
@@ -40,7 +40,7 @@ try {

 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/edit.php';
--- a/app/public/admin/remove-tfe-file.php
+++ b/app/public/admin/remove-tfe-file.php
@@ -1,12 +0,0 @@
-<?php
-/**
- * remove-tfe-file.php (admin)
- *
- * Admin-gated wrapper for the remove-tfe-file fragment.
- */
-require_once __DIR__ . '/../../bootstrap.php';
-require_once __DIR__ . '/../../src/AdminAuth.php';
-App::boot();
-AdminAuth::requireLogin();
-
-require_once __DIR__ . '/../partage/remove-tfe-file.php';
--- a/app/public/admin/upload-tfe-file.php
+++ b/app/public/admin/upload-tfe-file.php
@@ -1,12 +0,0 @@
-<?php
-/**
- * upload-tfe-file.php (admin)
- *
- * Admin-gated wrapper for the upload-tfe-file fragment.
- */
-require_once __DIR__ . '/../../bootstrap.php';
-require_once __DIR__ . '/../../src/AdminAuth.php';
-App::boot();
-AdminAuth::requireLogin();
-
-require_once __DIR__ . '/../partage/upload-tfe-file.php';
--- a/app/public/assets/css/form.css
+++ b/app/public/assets/css/form.css
@@ -641,6 +641,25 @@
  flex-shrink: 0;
 }

+.fq-drag-handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--text-tertiary);
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0 var(--space-3xs);
+  user-select: none;
+  touch-action: none;
+}
+
+.fq-drag-handle:active {
+  cursor: grabbing;
+}
+
+.fq-container {
+  /* wrapper div emitted by renderQueueFragment */
+}
+
 /* ── Existing-files list (edit form) ─────────────────────────────────────── */

 .admin-file-list {
--- a/app/public/assets/js/beforeunload-guard.js
+++ b/app/public/assets/js/beforeunload-guard.js
@@ -2,6 +2,7 @@
 * Beforeunload guard — prompts the user before navigating away from unsaved changes.
 *
 * Attach to any form with a data-beforeunload-guard attribute.
+ * Also watches window.__xamxamDirty (set by file-upload-queue.js).
 * No effect when JavaScript is unavailable (form posts normally).
 */
 (() => {
@@ -13,11 +14,11 @@
    for (const form of forms) {
        form.addEventListener('input', () => { dirty = true; });
        form.addEventListener('change', () => { dirty = true; });
-        form.addEventListener('submit', () => { dirty = false; });
+        form.addEventListener('submit', () => { dirty = false; window.__xamxamDirty = false; });
    }

    window.addEventListener('beforeunload', (e) => {
-        if (dirty) {
+        if (dirty || window.__xamxamDirty) {
            e.preventDefault();
        }
    });
--- a/app/public/assets/js/file-upload-queue.js
+++ b/app/public/assets/js/file-upload-queue.js
@@ -1,17 +1,31 @@
 /**
 * file-upload-queue.js
 *
- * Provides single-file previews for file inputs with the data-preview attribute
- * (couverture, note_intention, annexes, etc.).
+ * Client-side file upload queues for TFE, Video, Audio, and Annexe files.
+ * Replaces the old HTMX+PHP session-backed queue system.
 *
- * The multi-file TFE queue is rendered server-side via HTMX fragments
- * (upload-tfe-file.php / remove-tfe-file.php).
+ * Queues:
+ *   tfe    — main thesis files (multi-format)
+ *   video  — video files (non-PeerTube path)
+ *   audio  — audio files (non-PeerTube path)
+ *   annexe — annex files
 *
- * Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
- * after swap without a global event listener.
+ * Architecture:
+ *   1. Intercept 'change' on all .tfe-file-picker inputs.
+ *   2. Validate MIME/extension/size client-side.
+ *   3. Store File objects in window.__xamxamQueues.
+ *   4. Render queue UI with SortableJS drag-to-reorder.
+ *   5. On form submit: inject all queued files into FormData and POST normally.
+ *
+ * The queue containers are rendered server-side by fichiers-fragment.php
+ * as empty <ul> elements with standard IDs.  This script populates them.
 */
-window.XamxamInitFileUploads = function () {
-	console.log("[file-upload-queue] XamxamInitFileUploads called");
+
+(function () {
+	"use strict";
+
+	// ── Constants ──────────────────────────────────────────────────────────
+
 	var ICON = {
 		pdf: "\uD83D\uDCC4",
 		video: "\uD83C\uDFAC",
@@ -22,15 +36,46 @@ window.XamxamInitFileUploads = function () {
 		other: "\uD83D\uDCCE",
 	};

+	var QUEUE_TYPES = ["tfe", "video", "audio", "annexe"];
+
+	var ALLOWED_BY_TYPE = {
+		tfe: {
+			exts: ["jpg","jpeg","png","gif","webp","pdf","mp4","webm","ogv","mov","mp3","ogg","oga","wav","flac","aac","m4a","vtt","zip","tar","gz","tgz"],
+			maxSize: function (f) { return (/\.pdf$/i.test(f.name) ? 100 : 500) * 1024 * 1024; },
+		},
+		video: {
+			exts: ["mp4","webm","ogv","mov"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+		audio: {
+			exts: ["mp3","ogg","oga","wav","flac","aac","m4a"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+		annexe: {
+			exts: ["pdf","zip","tar","gz","tgz"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+	};
+
+	// ── State ──────────────────────────────────────────────────────────────
+
+	if (!window.__xamxamQueues) {
+		window.__xamxamQueues = {};
+	}
+	var queues = window.__xamxamQueues;
+	QUEUE_TYPES.forEach(function (qt) {
+		if (!Array.isArray(queues[qt])) queues[qt] = [];
+	});
+
+	// ── Helpers ────────────────────────────────────────────────────────────
+
 	function iconFor(file) {
-		var t = file.type || "",
-			n = file.name.toLowerCase();
+		var t = (file.type || "").toLowerCase(),
+			n = (file.name || "").toLowerCase();
 		if (/^image\//.test(t)) return ICON.image;
 		if (t === "application/pdf" || /\.pdf$/.test(n)) return ICON.pdf;
-		if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n))
-			return ICON.video;
-		if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n))
-			return ICON.audio;
+		if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICON.video;
+		if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICON.audio;
 		if (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
 		if (/\.vtt$/.test(n)) return ICON.vtt;
 		return ICON.other;
@@ -52,58 +97,356 @@ window.XamxamInitFileUploads = function () {
 		});
 	}

-	// ── Single-file previews (data-preview attribute) ────────────────────
-	document
-		.querySelectorAll('input[type="file"][data-preview]')
-		.forEach(function (input) {
-			if (input.id === "tfe-files-input") return;
-			console.log(
-				"[file-upload-queue] binding preview for",
-				input.id,
-				"multiple=",
-				input.multiple,
-			);
-			var container = document.getElementById(
-				input.getAttribute("data-preview"),
-			);
-			if (!container) return;
-			input.onchange = function () {
-				container.innerHTML = "";
-				Array.from(input.files).forEach(function (file) {
-					var item = document.createElement("div");
-					item.className = "fp-item";
-					if (/^image\//.test(file.type)) {
-						var img = document.createElement("img");
-						img.className = "fp-thumb";
-						img.alt = file.name;
-						var reader = new FileReader();
-						reader.onload = function (e) {
-							img.src = e.target.result;
-						};
-						reader.readAsDataURL(file);
-						item.appendChild(img);
-					} else {
-						var ic = document.createElement("span");
-						ic.className = "fp-icon";
-						ic.textContent = iconFor(file);
-						item.appendChild(ic);
-					}
-					var meta = document.createElement("span");
-					meta.className = "fp-meta";
-					meta.innerHTML =
-						'<span class="fp-name">' +
-						esc(file.name) +
-						'</span><span class="fp-size">' +
-						humanSize(file.size) +
-						"</span>";
-					item.appendChild(meta);
-					container.appendChild(item);
-				});
-			};
-		});
-};
+	function ext(fn) {
+		var m = fn.match(/\.([^./]+)$/);
+		return m ? m[1].toLowerCase() : "";
+	}

-// Bootstrap on page load
-if (document.readyState === "loading")
-	document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
-else window.XamxamInitFileUploads();
+	function genFileId() {
+		return "fq_" + Math.random().toString(36).slice(2, 10) + "_" + Date.now().toString(36);
+	}
+
+	// ── Validation ─────────────────────────────────────────────────────────
+
+	function validateFile(file, queueType) {
+		var rules = ALLOWED_BY_TYPE[queueType];
+		if (!rules) return "Type de file d'attente inconnu.";
+
+		var fileExt = ext(file.name);
+		if (fileExt && rules.exts.indexOf(fileExt) === -1) {
+			return "Type de fichier non accepté : ." + fileExt + " (" + file.name + ")";
+		}
+
+		var max = rules.maxSize(file);
+		if (file.size > max) {
+			var maxMb = Math.round(max / 1024 / 1024);
+			return "Fichier trop volumineux (" + (file.size / 1024 / 1024).toFixed(1) + " MB). Maximum : " + maxMb + " MB.";
+		}
+
+		return null;
+	}
+
+	// ── Rendering ──────────────────────────────────────────────────────────
+
+	function getQueueContainerId(qt) {
+		return {
+			tfe:    "tfe-file-queue-container",
+			video:  "video-file-queue-container",
+			audio:  "audio-file-queue-container",
+			annexe: "annexe-file-queue-container",
+		}[qt];
+	}
+
+	function getQueueUlId(qt) {
+		return {
+			tfe:    "tfe-file-queue",
+			video:  "video-file-queue",
+			audio:  "audio-file-queue",
+			annexe: "annexe-file-queue",
+		}[qt];
+	}
+
+	function getEmptyId(qt) {
+		return {
+			tfe:    "tfe-file-queue-empty",
+			video:  "video-file-queue-empty",
+			audio:  "audio-file-queue-empty",
+			annexe: "annexe-file-queue-empty",
+		}[qt];
+	}
+
+	function renderQueue(queueType) {
+		var container = document.getElementById(getQueueContainerId(queueType));
+		if (!container) return;
+
+		var files = queues[queueType];
+		var ulId   = getQueueUlId(queueType);
+		var emptyId  = getEmptyId(queueType);
+
+		var html = '<ul id="' + ulId + '" class="tfe-file-queue" aria-label="Fichiers sélectionnés">';
+		for (var i = 0; i < files.length; i++) {
+			var f  = files[i];
+			var ic = iconFor(f);
+			var id = f.__xamxamId || "";
+			html += '<li class="fq-item" data-fq-id="' + id + '">' +
+				'<span class="fq-drag-handle" aria-hidden="true">&#8942;</span>' +
+				'<span class="fq-icon">' + ic + '</span>' +
+				'<span class="fq-info">' +
+				'<span class="fq-name">' + esc(f.name) + '</span>' +
+				'<span class="fq-size">' + humanSize(f.size) + '</span>' +
+				'</span>' +
+				'<button type="button" class="admin-btn-remove fq-remove"' +
+				' aria-label="Retirer ' + esc(f.name) + '"' +
+				' data-action="xamxam-remove"' +
+				' data-queue="' + queueType + '"' +
+				' data-file-id="' + id + '">&#x2715;</button>' +
+				'</li>';
+		}
+		html += '</ul>';
+
+		var emptyStyle = files.length > 0 ? ' style="display:none"' : '';
+		html += '<p id="' + emptyId + '" class="tfe-queue-empty"' + emptyStyle + '>Aucun fichier sélectionné.</p>';
+
+		container.innerHTML = html;
+
+		// Wire Sortable
+		if (window.Sortable && files.length > 1) {
+			var list = container.querySelector("ul.tfe-file-queue");
+			if (list) {
+				Sortable.create(list, {
+					handle: ".fq-drag-handle",
+					animation: 150,
+					onEnd: function () {
+						reorderFromDOM(queueType);
+					},
+				});
+			}
+		}
+
+		// Mark form as dirty
+		markDirty();
+	}
+
+	function reorderFromDOM(queueType) {
+		var container = document.getElementById(getQueueContainerId(queueType));
+		if (!container) return;
+		var ids = Array.from(container.querySelectorAll("[data-fq-id]")).map(function (li) { return li.dataset.fqId; });
+		var files = queues[queueType];
+		var byId = {};
+		files.forEach(function (f) { byId[f.__xamxamId] = f; });
+		var reordered = ids.map(function (id) { return byId[id]; }).filter(Boolean);
+		files.forEach(function (f) {
+			if (reordered.indexOf(f) === -1) reordered.push(f);
+		});
+		queues[queueType] = reordered;
+		markDirty();
+	}
+
+	// ── Operations ─────────────────────────────────────────────────────────
+
+	function addFiles(queueType, newFiles) {
+		var errors = [];
+		var addedFiles = [];
+		for (var i = 0; i < newFiles.length; i++) {
+			var err = validateFile(newFiles[i], queueType);
+			if (err) {
+				errors.push(err);
+			} else {
+				newFiles[i].__xamxamId = genFileId();
+				addedFiles.push(newFiles[i]);
+			}
+		}
+
+		if (addedFiles.length > 0) {
+			queues[queueType] = queues[queueType].concat(addedFiles);
+			renderQueue(queueType);
+		}
+
+		return errors;
+	}
+
+	function removeFile(queueType, fileId) {
+		var idx = -1;
+		for (var i = 0; i < queues[queueType].length; i++) {
+			if (queues[queueType][i].__xamxamId === fileId) { idx = i; break; }
+		}
+		if (idx >= 0) {
+			queues[queueType].splice(idx, 1);
+			renderQueue(queueType);
+		}
+	}
+
+	// ── FormData injection on submit ───────────────────────────────────────
+
+	function injectQueuesIntoFormData(form, nativeFormData) {
+		var fd = nativeFormData || new FormData();
+		QUEUE_TYPES.forEach(function (qt) {
+			var files = queues[qt];
+			for (var i = 0; i < files.length; i++) {
+				fd.append("queue_file[" + qt + "][]", files[i], files[i].name);
+			}
+		});
+
+		// Append queue order hints so the server can validate user ordering
+		QUEUE_TYPES.forEach(function (qt) {
+			var ids = queues[qt].map(function (f) { return f.__xamxamId; });
+			if (ids.length > 0) {
+				fd.append("queue_order[" + qt + "]", JSON.stringify(ids));
+			}
+		});
+
+		return fd;
+	}
+
+	// ── Dirty tracking integration ─────────────────────────────────────────
+
+	function markDirty() {
+		// Set a global flag that beforeunload-guard.js can check
+		window.__xamxamDirty = true;
+	}
+
+	function markClean() {
+		window.__xamxamDirty = false;
+	}
+
+	// ── Validate callback for inline validation fragments ──────────────────
+
+	function showValidationMsg(input, msg) {
+		// Find the .file-validation-msg element scoped to this input's form
+		var form = input.closest(".file-validation-form");
+		var msgEl = form ? form.querySelector(".file-validation-msg") : null;
+		if (msgEl) {
+			msgEl.innerHTML = '<span class="file-validation-error">' + esc(msg) + '</span>';
+		}
+	}
+
+	function clearValidationMsg(input) {
+		var form = input.closest(".file-validation-form");
+		var msgEl = form ? form.querySelector(".file-validation-msg") : null;
+		if (msgEl) {
+			msgEl.innerHTML = "";
+		}
+	}
+
+	// ── Binding ────────────────────────────────────────────────────────────
+
+	function bindQueueInputs() {
+		document.querySelectorAll(".tfe-file-picker").forEach(function (input) {
+			if (input.dataset.xamxamBound) return;
+			input.dataset.xamxamBound = "1";
+
+			var queueType = null;
+			// Determine queue type from input attributes
+			if (input.id === "tfe-files-input") queueType = "tfe";
+			else if (input.id === "video-files-input") queueType = "video";
+			else if (input.id === "audio-files-input") queueType = "audio";
+			else if (input.id === "annexe-files-input") queueType = "annexe";
+			else if (input.getAttribute("hx-vals")) {
+				// Legacy: try to parse from hx-vals
+				try {
+					var vals = JSON.parse(input.getAttribute("hx-vals"));
+					if (vals && vals.queue_type && QUEUE_TYPES.indexOf(vals.queue_type) >= 0) {
+						queueType = vals.queue_type;
+					}
+				} catch (_) { /* ignore */ }
+			}
+
+			if (!queueType) return;
+
+			input.addEventListener("change", function () {
+				clearValidationMsg(input);
+				var files = Array.from(input.files || []);
+				var errors = addFiles(queueType, files);
+				if (errors.length > 0) {
+					showValidationMsg(input, errors.join("; "));
+				}
+				// Reset file input so the same file can be re-selected
+				input.value = "";
+			});
+		});
+	}
+
+	/**
+	 * Delegate click events for remove buttons (these are regenerated on
+	 * every renderQueue call, so live delegation is needed).
+	 */
+	function bindRemoveButtons() {
+		document.addEventListener("click", function (e) {
+			var btn = e.target.closest("button[data-action='xamxam-remove']");
+			if (!btn) return;
+			e.preventDefault();
+			var qt = btn.getAttribute("data-queue");
+			var fid = btn.getAttribute("data-file-id");
+			if (qt && fid) removeFile(qt, fid);
+		});
+	}
+
+	// ── Form submit interception ───────────────────────────────────────────
+
+	function bindFormSubmit() {
+		document.querySelectorAll("form[data-beforeunload-guard]").forEach(function (form) {
+			if (form.dataset.xamxamFormBound) return;
+			form.dataset.xamxamFormBound = "1";
+
+			form.addEventListener("submit", function (e) {
+				var hasFiles = QUEUE_TYPES.some(function (qt) { return queues[qt].length > 0; });
+				if (!hasFiles) return; // Normal submit
+
+				// Check if the form can accept multipart
+				if (form.enctype !== "multipart/form-data") return;
+
+				e.preventDefault();
+
+				// Build FormData from form fields + inject queued files
+				var fd = new FormData(form);
+
+				// Remove stale file input artifacts (consumed by change handler)
+				QUEUE_TYPES.forEach(function (qt) {
+					fd.delete("tfe");
+					fd.delete("video");
+					fd.delete("audio");
+					fd.delete("annexe");
+				});
+
+				fd = injectQueuesIntoFormData(form, fd);
+
+				markClean();
+
+				// Use fetch so we can inspect the response before navigation.
+				// The server either redirects (302 → we navigate to that URL)
+				// or returns the form page with errors (200 → replace the page).
+				fetch(form.getAttribute("action") || "", {
+					method: "POST",
+					body: fd,
+					redirect: "manual",
+				}).then(function (resp) {
+					if (resp.type === "opaqueredirect" || resp.status === 302 || resp.status === 301) {
+						// Browser redirect — navigate the whole page
+						window.location.href = resp.headers.get("Location") || form.getAttribute("action");
+						return;
+					}
+					// Success or error — render the HTML response
+					return resp.text();
+				}).then(function (html) {
+					if (!html) return;
+					document.open();
+					document.write(html);
+					document.close();
+					// Re-bind after DOM replacement (for error re-renders)
+					setTimeout(window.XamxamInitFileUploads, 0);
+				}).catch(function () {
+					// Network error — fall back to native submit
+					form.submit();
+				});
+			});
+		});
+	}
+
+	// ── Public API (called by HTMX afterSwap scripts) ──────────────────────
+
+	window.XamxamInitFileUploads = function () {
+		bindQueueInputs();
+	};
+
+	window.XamxamInitQueues = function () {
+		// Re-render all queues from in-memory state (used when format switching
+		// replaces the queues container via HTMX).
+		QUEUE_TYPES.forEach(function (qt) {
+			var container = document.getElementById(getQueueContainerId(qt));
+			if (container && queues[qt].length > 0) {
+				renderQueue(qt);
+			}
+		});
+	};
+
+	// ── Bootstrap ──────────────────────────────────────────────────────────
+
+	bindRemoveButtons();
+	bindFormSubmit();
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
+	} else {
+		window.XamxamInitFileUploads();
+	}
+})();
--- a/app/public/partage/fichiers-fragment.php
+++ b/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 -->
--- a/app/public/partage/index.php
+++ b/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>
--- a/app/public/partage/remove-tfe-file.php
+++ b/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');
--- a/app/public/partage/tfe-queue-helper.php
+++ b/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>';
-}
--- a/app/public/partage/upload-tfe-file.php
+++ b/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');