refactor: session-based incremental TFE upload via HTMX, drop SortableJS

Replace the client-side FileArray + Sortable drag-to-reorder with a
server-side session-based upload flow:

- New endpoints: /partage/upload-tfe-file, /partage/remove-tfe-file
  (and /admin/ variants) — single-file incremental upload via HTMX
  multipart/form-data with progress bar support
- Session storage: uploaded files go to STORAGE_ROOT/uploads/{session_id}/
  with metadata in $_SESSION['tfe_uploads']
- file-upload-queue.js reduced to single-file previews only (couverture,
  note_intention, annexes thumbnails)
- ThesisFileHandler gains handleTfeFilesFromSession + writeTfeFileFromSrc
  + cleanupSessionUploads for final commit from session temp
- Sortable.min.js removed from all script tags; drag handles and ghost
  CSS removed
- No file_orders[]/file_labels[] hidden field injection needed
- Upload queue survives page refresh (server-owned list)

This eliminates the SortableJS dependency entirely while keeping the
same UX: pick files, see them in a queue, remove individual files.

TODO.md

@@ -1,41 +1,16 @@
 # TODO
 
-- [x] Fix language-search-fragment: use searchLanguages() like tag fragment, remove broken predefined exclusion logic
+- [x] Simplify file-upload-queue.js — drop Sortable, keep only single-file previews
-- [x] Both fragments now follow identical patterns
+- [x] Create session-based upload flow (upload-tfe-file.php, remove-tfe-file.php, tfe-queue-helper.php)
-- [x] Fix "Créer" button not appearing on language search: both language and tag inputs used name="q" in the same form, causing HTMX to submit the wrong (empty) value — renamed to unique names (language_search_q / tag_search_q)
+- [x] Create admin wrappers for upload/remove endpoints
-- [x] Exclude Français, Anglais, Néerlandais from language-search suggestions (handled by the checkbox list)
+- [x] Register new routes in partage/index.php
-- [x] Refactor file upload naming convention
+- [x] Update fichiers-fragment.php — HTMX-powered file input + server-rendered queue + progress bar
-  - [x] Create shared ThesisFileHandler trait (src/Controllers/ThesisFileHandler.php)
+- [x] Update ThesisCreateController — read TFE files from session temp
-  - [x] New pattern: theses/{YYYY}/{YYYY}_{AUTHORS}_{TITLE_SLUG}/
+- [x] Update ThesisEditController — read TFE files from session temp
-  - [x] COUVERTURE: single cover image in thesis folder (covers/ directory deprecated)
+- [x] Add handleTfeFilesFromSession + writeTfeFileFromSrc + cleanupSessionUploads to ThesisFileHandler trait
-  - [x] NOTE_INTENTION: single PDF in thesis folder
+- [x] Remove sortable.min.js script tags from add.php, edit.php, index.php
-  - [x] TFE_{XX}: main files, contiguous numbering 01+, hierarchy PDF > video > audio > subtitles > images > other
+- [x] Clean up form.php — remove drag handles, sortable hints
-  - [x] Subtitles (VTT) placed immediately after their associated video in TFE sequence
+- [x] Clean up fieldset-files.php — remove sortable references
-  - [x] ANNEXE_{XX}: annex files, separate numbering 01+
+- [x] Clean up CSS — remove .fq-drag-handle, .fq-ghost, .sortable-ghost
-  - [x] Two-digit zero-padded numbering (sprintf('%02d', ...))
+- [x] Fix closure syntax (use before return type) in tfe-queue-helper.php
-  - [x] Update ThesisCreateController.php: use trait, new file handling
+- [x] Commit
-  - [x] Update ThesisEditController.php: use trait, new file handling
-  - [x] Remove duplicate methods (generateAuthorSlug, sanitizeFilename, etc.) from both controllers
-  - [x] Update Database.php: deprecate handleCoverUpload, remove banner_path from queries
-  - [x] Update SystemController.php: remove banners/ stats
-  - [x] Update schema.sql: remove banner_path column and view field
-  - [x] Create migration 027_drop_banner_path.sql
-  - [x] Update PureLogicTest.php: adapt detectFileType call signature
-  - [x] All pure logic tests pass
-- [x] Fix license validation: only require license for non-admin when access_type_id=1 (Libre), not for Interne (2) or Interdit (3) — fixes share link submissions failing with "Veuillez sélectionner une licence"
-- [x] Add xamxam@erg.be mailto link at top of student (partage) form
-- [x] On validation error, append "envoyez un e-mail à xamxam@erg.be" to flash error message
-- [x] Preserve uploaded file names across validation redirects: store in session, display as warning on re-render so the student knows which files to re-select
-- [x] Obfuscate all email addresses and mailto: links as HTML decimal entities site-wide (EmailObfuscator class, applied in templates + Parsedown post-processing)
-- [x] Fix TFE and annexes files not saved in ThesisCreateController::submit(): call handleAnnexeFiles, fix file input name mapping
-- [x] Apply ALLOWED_MIME_TYPES/ALLOWED_EXTENSIONS validation in handleAnnexeFiles (same as handleTfeFiles)
-- [x] Fix handleAnnexeFiles to use correct $_FILES key ('annexes' not 'files')
-- [x] Add annexe handling in ThesisEditController::save()
-- [x] Relax 3-keyword minimum: admin mode (create) requires 1+, edit requires 1+, student (partage) requires 3
-- [x] Add CSS for file preview items (.fp-item, .fp-thumb, .fp-icon, .fp-meta, .fp-name, .fp-size) so annexes/cover/note-intention previews wrap and display correctly
-- [x] Fix TFE file input accept attribute to include video/audio/archive extensions
-- [x] Make annexes file input required when "Ce TFE comporte des annexes" is checked
-- [x] Add PHP-side validation: if has_annexes checked but no annexe files provided, throw error
-- [x] Add HTMX inline file validation: MIME type + file size checked on change via validate-file-fragment endpoint
-- [x] Create shared validation logic (validate-file-fragment-shared.php) used by both admin and partage
-- [x] Add CSS for .file-validation-msg, .fv-ok, .fv-error inline validation messages

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/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/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';

app/public/admin/edit.php

@@ -40,7 +40,7 @@ try {
 
 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/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';

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

@@ -0,0 +1,12 @@
+<?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';

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

@@ -0,0 +1,12 @@
+<?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';

app/public/assets/css/form.css

@@ -555,7 +555,8 @@
   border-color: var(--accent-primary);
 }
 
-.sortable-list {
+/* New-file queue items */
+.tfe-file-queue {
   list-style: none;
   margin: var(--space-2xs) 0 0;
   padding: 0;
@@ -565,11 +566,6 @@
   min-width: 0;
 }
 
-/* New-file queue items */
-.tfe-file-queue {
-  min-height: 0;
-}
-
 .tfe-queue-empty {
   font-size: var(--step--2);
   color: var(--text-tertiary);
@@ -591,28 +587,6 @@
   min-width: 0;
 }
 
-.fq-drag-handle,
-.admin-file-drag-handle {
-  cursor: grab;
-  color: var(--text-tertiary);
-  font-size: 1.1rem;
-  line-height: 1;
-  padding: 0 var(--space-3xs);
-  flex-shrink: 0;
-  user-select: none;
-}
-
-.fq-drag-handle:active,
-.admin-file-drag-handle:active {
-  cursor: grabbing;
-}
-
-.fq-ghost,
-.sortable-ghost {
-  opacity: 0.4;
-  background: var(--accent-muted, #f0f0f0);
-}
-
 .fq-icon {
   font-size: 1.3rem;
   line-height: 1;

app/public/assets/js/file-upload-queue.js

@@ -1,11 +1,11 @@
 /**
  * file-upload-queue.js
  *
- * Renders visual file queues for:
+ * Provides single-file previews for file inputs with the data-preview attribute
- *   1. #tfe-files-input  — multi-file upload with drag-to-reorder (SortableJS)
+ * (couverture, note_intention, annexes, etc.).
- *      and per-file label inputs. Injects hidden file_labels[] / file_orders[].
+ *
- *   2. input[data-preview] — single-file previews (couverture, note_intention, etc.)
+ * The multi-file TFE queue is rendered server-side via HTMX fragments
- *   3. #existing-files-sortable — edit-mode sortable list
+ * (upload-tfe-file.php / remove-tfe-file.php).
  *
  * Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
  * after swap without a global event listener.
@@ -52,127 +52,7 @@ window.XamxamInitFileUploads = function () {
 		});
 	}
 
-	// ── 1. TFE multi-file queue ────────────────────────────────────────────
+	// ── Single-file previews (data-preview attribute) ────────────────────
-	var picker = document.getElementById("tfe-files-input");
-	var queue = document.getElementById("tfe-file-queue");
-	var empty = document.getElementById("tfe-file-queue-empty");
-	var sortHint = document.getElementById("tfe-file-queue-sort-hint");
-	if (picker && queue) {
-		console.log(
-			"[file-upload-queue] init TFE queue picker=",
-			picker,
-			"multiple=",
-			picker.multiple,
-		);
-		var fileArray = [];
-
-		if (typeof Sortable !== "undefined") {
-			Sortable.create(queue, {
-				animation: 150,
-				handle: ".fq-drag-handle",
-				ghostClass: "fq-ghost",
-				onEnd: function () {
-					var items = queue.querySelectorAll(".fq-item");
-					var newArr = Array.prototype.map.call(items, function (li) {
-						return fileArray[parseInt(li.getAttribute("data-idx"), 10)];
-					});
-					fileArray = newArr;
-					renderQueue();
-				},
-			});
-		}
-
-		picker.onchange = function () {
-			console.log(
-				"[file-upload-queue] onchange fired, files count:",
-				picker.files.length,
-				"names:",
-				Array.from(picker.files).map(function (f) {
-					return f.name;
-				}),
-			);
-			fileArray = fileArray.concat(Array.from(picker.files));
-			console.log(
-				"[file-upload-queue] fileArray after concat, length:",
-				fileArray.length,
-			);
-			picker.value = "";
-			renderQueue();
-		};
-
-		function renderQueue() {
-			queue.innerHTML = "";
-			if (!fileArray.length) {
-				empty.style.display = "";
-				if (sortHint) sortHint.style.display = "none";
-				injectHiddenFields([]);
-				return;
-			}
-			empty.style.display = "none";
-			if (sortHint) sortHint.style.display = "";
-			fileArray.forEach(function (file, idx) {
-				var li = document.createElement("li");
-				li.className = "fq-item";
-				li.setAttribute("data-idx", idx);
-				li.innerHTML =
-					'<span class="fq-drag-handle" title="R\u00e9ordonner">\u2820</span>' +
-					'<span class="fq-icon">' +
-					iconFor(file) +
-					"</span>" +
-					'<span class="fq-info"><span class="fq-name">' +
-					esc(file.name) +
-					"</span>" +
-					'<span class="fq-size">' +
-					humanSize(file.size) +
-					"</span></span>" +
-					'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' +
-					esc(file.name) +
-					'">&#x2715;</button>';
-				li.querySelector(".fq-remove").onclick = (function (i) {
-					return function () {
-						fileArray.splice(i, 1);
-						renderQueue();
-					};
-				})(idx);
-				queue.appendChild(li);
-			});
-			injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
-		}
-
-		function injectHiddenFields(items) {
-			var form = picker.closest("form");
-			if (!form) return;
-			form
-				.querySelectorAll(".fq-hidden-label, .fq-hidden-order")
-				.forEach(function (el) {
-					el.remove();
-				});
-			items.forEach(function (li, sortedIdx) {
-				var label = li.querySelector(".fq-label");
-				var lInp = document.createElement("input");
-				lInp.type = "hidden";
-				lInp.name = "file_labels[]";
-				lInp.value = label ? label.value : "";
-				lInp.className = "fq-hidden-label";
-				form.appendChild(lInp);
-				var oInp = document.createElement("input");
-				oInp.type = "hidden";
-				oInp.name = "file_orders[]";
-				oInp.value = sortedIdx + 1;
-				oInp.className = "fq-hidden-order";
-				form.appendChild(oInp);
-			});
-		}
-
-		// On submit, refresh hidden fields from current queue state
-		var form = picker.closest("form");
-		if (form)
-			form.addEventListener("submit", function () {
-				injectHiddenFields(Array.from(queue.querySelectorAll(".fq-item")));
-			});
-	}
-
-	// ── 2. Single-file previews (data-preview attribute) ────────────────────
 	document
 		.querySelectorAll('input[type="file"][data-preview]')
 		.forEach(function (input) {
@@ -221,32 +101,6 @@ window.XamxamInitFileUploads = function () {
 				});
 			};
 		});
-
-	// ── 3. Existing-files sortable (edit mode) ──────────────────────────────
-	var sortList = document.getElementById("existing-files-sortable");
-	if (sortList && typeof Sortable !== "undefined") {
-		Sortable.create(sortList, {
-			animation: 150,
-			handle: ".admin-file-drag-handle",
-			ghostClass: "fq-ghost",
-			onEnd: function () {
-				sortList
-					.querySelectorAll('input[name="file_sort_order[]"]')
-					.forEach(function (el) {
-						el.remove();
-					});
-				sortList
-					.querySelectorAll(".admin-file-list-item[data-file-id]")
-					.forEach(function (li) {
-						var inp = document.createElement("input");
-						inp.type = "hidden";
-						inp.name = "file_sort_order[]";
-						inp.value = li.getAttribute("data-file-id");
-						li.prepend(inp);
-					});
-			},
-		});
-	}
 };
 
 // Bootstrap on page load

app/public/partage/fichiers-fragment.php

@@ -160,18 +160,47 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
     <div class="admin-form-group admin-files-fieldgroup">
         <label>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="files[]" multiple
+                       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">
+                       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>
+            <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).
                 PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
             </small>
-            <ul id="tfe-file-queue" class="tfe-file-queue sortable-list"
+            <div id="tfe-file-queue-container">
-                aria-label="Fichiers sélectionnés (réordonnable)"></ul>
+                <?php
-            <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+                // Render initial queue state from session
-            <small class="admin-file-hint" id="tfe-file-queue-sort-hint" style="display:none;">Glissez-déposez les fichiers pour déterminer l'ordre d'affichage sur la page du TFE.</small>
+                $initialUploads = $_SESSION['tfe_uploads'] ?? [];
+                require_once APP_ROOT . '/public/partage/tfe-queue-helper.php';
+                renderQueueFragment($initialUploads, $tfeRemoveUrl);
+                ?>
+            </div>
         </div>
     </div>
 
@@ -224,10 +253,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?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">
+            <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' ?>">
                 <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>
             </div>
@@ -235,10 +274,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?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">
+            <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[]"
                        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. Max 500 MB.</small>
             </div>
         </div>
@@ -249,10 +298,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?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">
+            <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' ?>">
                 <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>
             </div>
@@ -260,10 +319,20 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?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">
+            <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[]"
                        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. Max 500 MB.</small>
             </div>
         </div>
@@ -273,5 +342,21 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
 
 </fieldset><!-- /Fichiers -->
 
-<script>if(window.XamxamInitFileUploads)window.XamxamInitFileUploads()</script>
+<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,6 +43,22 @@ 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') {
     App::boot();
@@ -371,7 +387,6 @@ 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

@@ -0,0 +1,47 @@
+<?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

@@ -0,0 +1,78 @@
+<?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

@@ -0,0 +1,119 @@
+<?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');

app/src/Controllers/ThesisCreateController.php

@@ -196,7 +196,13 @@ class ThesisCreateController
 
         $this->handleCoverUpload($thesisId, $files['couverture'] ?? null, $folderPath, $filePrefix);
         $this->handleNoteIntentionUpload($thesisId, $files['note_intention'] ?? null, $folderPath, $filePrefix);
-        $nextNum = $this->handleTfeFiles($thesisId, $files['files'] ?? null, $folderPath, $filePrefix, $post, 1);
+
+        // TFE files come from session temp (incremental upload via HTMX)
+        $sessionUploads = $_SESSION['tfe_uploads'] ?? [];
+        $nextNum = $this->handleTfeFilesFromSession($thesisId, $sessionUploads, $folderPath, $filePrefix, 1);
+        // Clear session uploads after successful commit
+        $this->cleanupSessionUploads();
+
         $this->handleAnnexeFiles($thesisId, $files['annexes'] ?? null, $folderPath, $filePrefix, $post);
         // PeerTube file rows don't go on disk, but the uploads themselves are processed separately
 

app/src/Controllers/ThesisEditController.php

@@ -411,8 +411,9 @@ class ThesisEditController
             }
         }
 
-        // ── New TFE files upload ─────────────────────────────────────────────
+        // ── New TFE files upload (from session via HTMX incremental upload) ──
-        if (!empty($files['files']['name'][0])) {
+        $sessionUploads = $_SESSION['tfe_uploads'] ?? [];
+        if (!empty($sessionUploads)) {
             // Count existing TFE files to determine starting number
             $tfeCount = 0;
             foreach ($existingFiles as $f) {
@@ -420,9 +421,9 @@ class ThesisEditController
                     && !str_starts_with($f['file_path'] ?? '', 'http')) {
                     $tfeCount++;
                 }
-                // Don't count captions as separate TFE entries — they'll be renumbered
             }
-            $this->handleTfeFiles($thesisId, $files['files'], $folderPath, $filePrefix, $post, $tfeCount + 1);
+            $this->handleTfeFilesFromSession($thesisId, $sessionUploads, $folderPath, $filePrefix, $tfeCount + 1);
+            $this->cleanupSessionUploads();
         }
 
         // ── New annexe files upload ────────────────────────────────────────────

app/src/Controllers/ThesisFileHandler.php

@@ -303,6 +303,102 @@ trait ThesisFileHandler
         return $num;
     }
 
+    /**
+     * Process TFE file uploads from session-stored temp paths.
+     *
+     * Used when files are uploaded incrementally via HTMX fragments (upload-tfe-file.php)
+     * rather than submitted in a single multipart form.
+     *
+     * @param int        $thesisId
+     * @param array      $uploads    Array of ['orig_name', 'size', 'mime', 'tmp_path']
+     * @param string     $folderPath
+     * @param string     $filePrefix
+     * @param int        $startNum
+     */
+    protected function handleTfeFilesFromSession(int $thesisId, array $uploads, string $folderPath, string $filePrefix, int $startNum = 1): int
+    {
+        if (empty($uploads)) {
+            return $startNum;
+        }
+
+        $dir = STORAGE_ROOT . '/' . $folderPath;
+        if (!is_dir($dir)) {
+            mkdir($dir, 0755, true);
+        }
+
+        $files = [];
+        foreach ($uploads as $f) {
+            $mimeType = $f['mime'];
+            $absPath  = STORAGE_ROOT . '/' . $f['tmp_path'];
+
+            if (!file_exists($absPath)) {
+                error_log("ThesisFileHandler: session temp file missing {$f['tmp_path']}, skipping");
+                continue;
+            }
+
+            $ext = strtolower(pathinfo($f['orig_name'], PATHINFO_EXTENSION));
+
+            if ($mimeType === 'text/plain' && $ext === 'vtt') {
+                $mimeType = 'text/vtt';
+            }
+
+            $files[] = [
+                'mimeType'  => $mimeType,
+                'ext'       => $ext,
+                'size'      => $f['size'],
+                'origName'  => $f['orig_name'],
+                'label'     => '',
+                'sortOrder' => null,
+                'hierarchy' => $this->tfeHierarchyRank($mimeType, $ext),
+                'fileType'  => $this->detectFileType($mimeType, $ext),
+                // Pass the absolute path so writeTfeFile knows where to copy from
+                'srcPath'   => $absPath,
+            ];
+        }
+
+        // Sort by hierarchy rank
+        usort($files, fn($a, $b) => $a['hierarchy'] - $b['hierarchy']);
+
+        $videoCount = 0;
+        $vttQueue   = [];
+
+        foreach ($files as $f) {
+            if ($f['fileType'] === 'video') {
+                $videoCount++;
+            }
+        }
+
+        $num = $startNum;
+
+        foreach ($files as $f) {
+            if ($f['fileType'] === 'caption') {
+                $vttQueue[] = $f;
+                continue;
+            }
+
+            if ($f['fileType'] === 'video') {
+                $this->writeTfeFileFromSrc($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
+                $num++;
+
+                if (!empty($vttQueue)) {
+                    $vtt = array_shift($vttQueue);
+                    $this->writeTfeFileFromSrc($vtt, $thesisId, $dir, $folderPath, $filePrefix, $num);
+                    $num++;
+                }
+            } else {
+                $this->writeTfeFileFromSrc($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
+                $num++;
+            }
+        }
+
+        foreach ($vttQueue as $vtt) {
+            $this->writeTfeFileFromSrc($vtt, $thesisId, $dir, $folderPath, $filePrefix, $num);
+            $num++;
+        }
+
+        return $num;
+    }
+
     /**
      * Process annex file uploads.
      *
@@ -421,6 +517,61 @@ trait ThesisFileHandler
         error_log("ThesisFileHandler: TFE uploaded → $targetName ({$f['fileType']})");
     }
 
+    /**
+     * Write a single TFE file from a source path (session temp) to the thesis folder.
+     * Used by handleTfeFilesFromSession instead of move_uploaded_file.
+     */
+    protected function writeTfeFileFromSrc(array $f, int $thesisId, string $dir, string $folderPath, string $filePrefix, int $num): void
+    {
+        $padded     = sprintf('%02d', $num);
+        $targetName = $filePrefix . '_TFE_' . $padded . '.' . $f['ext'];
+        $targetPath = $dir . $targetName;
+
+        if (!rename($f['srcPath'], $targetPath)) {
+            // Fallback: copy + unlink
+            if (!copy($f['srcPath'], $targetPath)) {
+                error_log("ThesisFileHandler: failed to move session TFE {$f['origName']}");
+                return;
+            }
+            unlink($f['srcPath']);
+        }
+
+        chmod($targetPath, 0644);
+        $relPath = $folderPath . $targetName;
+
+        $this->db->insertThesisFile(
+            $thesisId, $f['fileType'],
+            $relPath,
+            basename($f['origName']),
+            $f['size'],
+            $f['mimeType'],
+            $f['label'] !== '' ? $f['label'] : null,
+            $f['sortOrder']
+        );
+        error_log("ThesisFileHandler: TFE (session) moved → $targetName ({$f['fileType']})");
+    }
+
+    /**
+     * Clean up session upload temp files and clear the session entry.
+     * Call after successful commit of TFE files.
+     */
+    protected function cleanupSessionUploads(): void
+    {
+        $sessionId = session_id();
+        $tempDir   = STORAGE_ROOT . '/uploads/' . $sessionId;
+
+        // Remove any remaining files in the temp dir
+        if (is_dir($tempDir)) {
+            $files = glob($tempDir . '/*');
+            foreach ($files as $file) {
+                @unlink($file);
+            }
+            @rmdir($tempDir);
+        }
+
+        unset($_SESSION['tfe_uploads']);
+    }
+
     /**
      * Assign a hierarchy rank for sorting TFE files.
      * Lower = earlier in the sequence.

app/src/Controllers/validate-file-fragment-shared.php

@@ -17,8 +17,18 @@ $adminMode = ($_POST['admin_mode'] ?? '0') === '1';
 $fieldName = $_POST['field_name'] ?? '';
 
 // Read file from the field-name-specific key (e.g., $_FILES['couverture'], $_FILES['annexes'])
-// For multi-file inputs (name ends with []), the first file is validated.
+// Fall back to the first file in $_FILES if the specific key is empty
+// (handles PeerTube inputs where name differs from field_name).
 $rawFile = $_FILES[$fieldName] ?? null;
+if (!$rawFile || empty($rawFile['name'])) {
+    // Try any uploaded file
+    foreach ($_FILES as $v) {
+        if (!empty($v['name'])) {
+            $rawFile = $v;
+            break;
+        }
+    }
+}
 if ($rawFile && is_array($rawFile['name'] ?? null)) {
     // Multi-file: flatten first entry
     $file = [

app/templates/admin/acces.php

@@ -220,6 +220,19 @@
 +%%%%%%% diff from: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
 +\\\\\\\        to: uvnvvyny 09c854ea "fix: req annexes, add HTMX inline file validation (MIME/size)" (rebased revision)
 ++                        $linkName = $link['name'] ?? '';
+++                        $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% diff from: uvnvvyny 09c854ea "fix: req annexes, add HTMX inline file validation (MIME/size)" (rebased revision)
+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\        to: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
+-                        $linkName = $link['name'] ?? '';
+-                        $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% diff from: somsyvxz 14a3cd10 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebase destination)
+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\        to: mxvvqust 02efed58 "refactor: session-based incremental TFE upload via HTMX, drop SortableJS" (rebased revision)
+                         $linkName = $link['name'] ?? '';
+                         $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
+                         $linkLockedYear = $link['locked_year'] ?? null;
++%%%%%%% diff from: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
++\\\\\\\        to: mxvvqust 0a424ac8 "refactor: session-based incremental TFE upload via HTMX, drop SortableJS" (rebased revision)
+++                        $linkName = $link['name'] ?? '';
 ++                        $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
                     ?>
                     <tr class="admin-table-row" onclick="event.stopPropagation(); window.open('/partage/<?= urlencode($link['slug']) ?>', '_blank')" style="cursor:pointer">

app/templates/partials/form/fieldset-files.php

@@ -33,7 +33,7 @@ $adminMode = $adminMode ?? false;
     include APP_ROOT . '/templates/partials/form/file-field.php';
     ?>
 
-    <!-- TFE files — multi-file, sortable, with per-file labels -->
+    <!-- TFE files — multi-file, with per-file labels -->
     <div class="admin-form-group admin-files-fieldgroup">
         <label>TFE (obligatoire) :</label>
         <div class="admin-file-input">
@@ -46,9 +46,9 @@ $adminMode = $adminMode ?? false;
                 Les fichiers <code>.vtt</code> sont des sous-titres et seront associés automatiquement à la vidéo précédente.
             </small>
 
-            <!-- Sortable file queue — populated by JS -->
+            <!-- File queue — populated by JS -->
-            <ul id="tfe-file-queue" class="tfe-file-queue sortable-list" aria-label="Fichiers sélectionnés (réordonnable)">
+            <ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés">
-                <!-- Items injected by file-upload-queue.js -->
+                <!-- Queue rendered server-side via HTMX (upload-tfe-file) -->
             </ul>
             <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
         </div>

app/templates/partials/form/file-field.php

@@ -31,14 +31,16 @@ if (defined('ADMIN_MODE') && ADMIN_MODE) {
 ?>
 <div>
     <label for="<?= htmlspecialchars($id) ?>"><?= htmlspecialchars($label) ?><?= $required ? ' <span class="asterisk">*</span>' : '' ?></label>
-    <div class="admin-file-input"
+    <!-- HTMX validation: scoped to this field -->
+    <form class="admin-file-input file-validation-form"
          hx-post="<?= htmlspecialchars($validateUrl) ?>"
          hx-encoding="multipart/form-data"
          hx-trigger="change from:input[type='file']"
          hx-target="find .file-validation-msg"
          hx-swap="innerHTML"
-         hx-include="[name='admin_mode'], [name='edit_mode'], [name='field_name']">
+         hx-sync="replace">
         <input type="hidden" name="field_name" value="<?= htmlspecialchars($fieldName) ?>">
+        <input type="hidden" name="admin_mode" value="<?= ($adminMode ?? false) ? '1' : '0' ?>">
         <input type="file"
                id="<?= htmlspecialchars($id) ?>"
                name="<?= htmlspecialchars($name) ?><?= $multiple ? '[]' : '' ?>"
@@ -51,7 +53,7 @@ if (defined('ADMIN_MODE') && ADMIN_MODE) {
         <?php if ($hint): ?>
         <small><?= $hintRaw ? $hint : htmlspecialchars($hint) ?></small>
         <?php endif; ?>
-    </div>
+    </form>
 </div>
 <?php
 unset($accept, $hint, $hintRaw, $required, $multiple, $id, $fieldName, $previewId, $validateUrl);

app/templates/partials/form/form.php

@@ -31,7 +31,7 @@
  *   bool   $showFlash           — render flash banners (error/warning/success)
  *   bool   $showContact         — Contact checkbox fieldset
  *   bool   $showCoverPreview    — cover image preview + remove checkbox
- *   bool   $showExistingFiles   — existing thesis files list (sortable, deletable)
+ *   bool   $showExistingFiles   — existing thesis files list (deletable)
  *   bool   $showBackoffice      — Backoffice fieldset (context_note, jury_points, remarks, baiu_link, exemplaires, contact_interne, is_published)
  *   bool   $showEmailConfirmation — E-mail de confirmation fieldset
 
@@ -340,7 +340,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
 
         <!-- Edit-only: existing files management -->
         <div id="edit-existing-files-block">
-            <!-- Existing thesis files — sortable, with labels -->
+            <!-- Existing thesis files — with labels -->
             <?php $thesisFilesList = array_values(
                 array_filter(
                     $currentFiles,
@@ -350,10 +350,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
             <?php if (!empty($thesisFilesList)): ?>
             <div class="admin-form-group">
                 <label>Fichiers du TFE existants :</label>
-                <small style="display:block;margin-bottom:var(--space-2xs);color:var(--text-tertiary)">
+                <ul id="existing-files-sortable" class="admin-file-list">
-                    Glissez-déposez les lignes pour réordonner les fichiers sur la page publique.
-                </small>
-                <ul id="existing-files-sortable" class="admin-file-list sortable-list">
                     <?php foreach ($thesisFilesList as $f):
 
                         $fExt = strtolower(
@@ -400,7 +397,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
                         <input type="hidden" name="file_sort_order[]" value="<?= (int) $f[
                             "id"
                         ] ?>">
-                        <span class="admin-file-drag-handle" title="Réordonner">⠿</span>
+
                         <span class="admin-file-icon-col"><?= $fIcon ?></span>
                         <span class="admin-file-info">
                             <a href="<?= $fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">