feat: add file display to forms and recap pages

- Live file preview on all file inputs (file-field partial, edit template):
  thumbnails for images, emoji icons for PDF/video/zip/vtt, filename + size
- New file-preview.js wired via $extraJs in add.php / edit.php and direct
  <script> in partage/index.php; $extraJs support added to head.php
- admin/recapitulatif.php: replace plain table with rich file list — image
  thumbnails linked to media.php, type badges, human-readable size, date
- partage/recapitulatif.php: full rewrite — shows thesis metadata + files
  list with same rich display (no media links for student privacy)
- form.css: new sections for .file-preview-list (live preview) and
  .recap-file-list / .recap-dl / .partage-recap (recap pages)

app/public/admin/add.php

@@ -46,6 +46,7 @@ function wasSelected($key, $value) {
 $isAdmin = true;
 $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
+$extraJs   = ['/assets/js/file-preview.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

@@ -28,6 +28,7 @@ try {
 
 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
+$extraJs   = ['/assets/js/file-preview.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/edit.php';

app/public/assets/css/form.css

@@ -540,6 +540,190 @@ label:has(+ div > input:required)::after {
     font-size: var(--step--1);
 }
 
+/* ── Live file-input preview (.file-preview-list) ──────────────────────── */
+.file-preview-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    margin-top: var(--space-2xs);
+}
+
+.file-preview-list:empty {
+    display: none;
+}
+
+.fp-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    padding: var(--space-3xs) var(--space-xs);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+    min-width: 0;
+    max-width: 260px;
+}
+
+.fp-thumb {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 3px;
+    flex-shrink: 0;
+}
+
+.fp-icon {
+    font-size: 1.6rem;
+    line-height: 1;
+    flex-shrink: 0;
+    width: 48px;
+    text-align: center;
+}
+
+.fp-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.fp-name {
+    font-size: var(--step--2);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 180px;
+    display: block;
+}
+
+.fp-size {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+}
+
+/* ── Recap file list (admin & partage recapitulatif) ────────────────────── */
+.recap-file-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.recap-file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-s);
+    padding: var(--space-xs) var(--space-s);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+}
+
+.recap-file-thumb-link {
+    flex-shrink: 0;
+}
+
+.recap-file-thumb {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border-radius: 3px;
+    display: block;
+}
+
+.recap-file-icon {
+    font-size: 2rem;
+    line-height: 1;
+    width: 64px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.recap-file-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--space-2xs) var(--space-s);
+    min-width: 0;
+}
+
+.recap-file-name {
+    font-size: var(--step--1);
+    font-weight: 500;
+    color: var(--text-primary);
+    word-break: break-all;
+}
+
+a.recap-file-name {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+a.recap-file-name:hover {
+    color: var(--accent-primary);
+}
+
+.recap-file-type-badge {
+    font-size: var(--step--2);
+    padding: 1px 6px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-primary);
+    border-radius: 3px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.recap-file-size,
+.recap-file-date {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+    white-space: nowrap;
+}
+
+/* ── Partage recap page ─────────────────────────────────────────────────── */
+.partage-recap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-l);
+}
+
+.recap-section {
+    border-top: 1px solid var(--border-primary);
+    padding-top: var(--space-m);
+}
+
+.recap-section h2 {
+    font-size: var(--step-0);
+    font-weight: 600;
+    margin: 0 0 var(--space-s);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+}
+
+.recap-dl {
+    display: grid;
+    grid-template-columns: 180px 1fr;
+    gap: var(--space-2xs) var(--space-s);
+    margin: 0;
+}
+
+.recap-dl dt {
+    font-size: var(--step--1);
+    font-weight: 600;
+    color: var(--text-secondary);
+    padding-top: 2px;
+}
+
+.recap-dl dd {
+    font-size: var(--step--1);
+    margin: 0;
+    color: var(--text-primary);
+}
+
 /* ── Thanks page ────────────────────────────────────────────────────────── */
 .thanks-student-page {
     display: flex;

app/public/assets/js/file-preview.js

@@ -0,0 +1,96 @@
+/**
+ * Live file-input preview.
+ * For every <input type="file" data-preview="CONTAINER_ID"> found on the page,
+ * renders a list of selected files with thumbnails (images) or file-type icons
+ * (PDFs, videos, archives…) and the filename + size.
+ */
+(function () {
+  'use strict';
+
+  const ICON = {
+    pdf:   '📄',
+    video: '🎬',
+    zip:   '🗜️',
+    vtt:   '💬',
+    image: '🖼️',
+    other: '📎',
+  };
+
+  function iconFor(file) {
+    const t = file.type;
+    if (t.startsWith('image/'))      return ICON.image;
+    if (t === 'application/pdf')     return ICON.pdf;
+    if (t.startsWith('video/'))      return ICON.video;
+    if (t === 'application/zip' || t === 'application/x-zip-compressed') return ICON.zip;
+    if (file.name.endsWith('.vtt'))  return ICON.vtt;
+    return ICON.other;
+  }
+
+  function humanSize(bytes) {
+    if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
+    if (bytes >= 1048576)   return (bytes / 1048576).toFixed(2) + ' MB';
+    if (bytes >= 1024)      return (bytes / 1024).toFixed(1) + ' KB';
+    return bytes + ' B';
+  }
+
+  function renderPreview(input, container) {
+    container.innerHTML = '';
+    const files = Array.from(input.files);
+    if (!files.length) return;
+
+    files.forEach(function (file) {
+      const item = document.createElement('div');
+      item.className = 'fp-item';
+
+      if (file.type.startsWith('image/')) {
+        const img = document.createElement('img');
+        img.className = 'fp-thumb';
+        img.alt = file.name;
+        const reader = new FileReader();
+        reader.onload = function (e) { img.src = e.target.result; };
+        reader.readAsDataURL(file);
+        item.appendChild(img);
+      } else {
+        const icon = document.createElement('span');
+        icon.className = 'fp-icon';
+        icon.textContent = iconFor(file);
+        item.appendChild(icon);
+      }
+
+      const meta = document.createElement('span');
+      meta.className = 'fp-meta';
+      meta.innerHTML =
+        '<span class="fp-name">' + escHtml(file.name) + '</span>' +
+        '<span class="fp-size">' + humanSize(file.size) + '</span>';
+      item.appendChild(meta);
+
+      container.appendChild(item);
+    });
+  }
+
+  function escHtml(str) {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function init() {
+    document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
+      var containerId = input.getAttribute('data-preview');
+      var container   = document.getElementById(containerId);
+      if (!container) return;
+
+      input.addEventListener('change', function () {
+        renderPreview(input, container);
+      });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

app/public/partage/index.php

@@ -218,6 +218,7 @@ function renderShareLinkForm(string $slug, array $link): void
         <title><?= htmlspecialchars($pageTitle) ?></title>
         <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/file-preview.js') ?>" defer></script>
     </head>
     <body class="student-body">
         <main id="main-content">

app/public/partage/recapitulatif.php

@@ -1,7 +1,7 @@
 <?php
 /**
- * Thanks page for share-link submissions.
- * Displays a centered confirmation with a link to create another thesis via the same link.
+ * Confirmation / recap page for share-link submissions.
+ * Displays the submitted thesis details and uploaded files.
  */
 if (!defined('APP_ROOT')) {
     require_once __DIR__ . '/../../bootstrap.php';
@@ -15,21 +15,31 @@ if ($thesisId <= 0) {
     die('ID de TFE invalide.');
 }
 
-// Verify the thesis exists
-$db = Database::getInstance();
+$db     = Database::getInstance();
 $thesis = $db->getThesis($thesisId);
 if (!$thesis) {
     http_response_code(404);
     die('TFE introuvable.');
 }
 
+$files = $db->getThesisFiles($thesisId);
+
 // Was the confirmation e-mail sent?
 $emailSent = !empty($_SESSION['share_email_sent']);
 unset($_SESSION['share_email_sent']);
 
-// Get the share link slug from the referer path
-$pathParts = explode('/', trim($_SERVER['REQUEST_URI'] ?? '', '/'));
-$slug = count($pathParts) >= 2 ? $pathParts[0] : null;
+// Derive share-link slug from the URI so we can build the "submit another" link.
+$pathParts = explode('/', trim(parse_url($_SERVER['REQUEST_URI'] ?? '', PHP_URL_PATH), '/'));
+// URI is /partage/recapitulatif?id=N  → parts[0]=partage, parts[1]=recapitulatif
+// We have no slug here, so just link back to /partage/ root.
+$slug = null;
+
+function partageFormatFileSize(int $bytes): string {
+    if ($bytes >= 1073741824) return number_format($bytes / 1073741824, 2) . ' GB';
+    if ($bytes >= 1048576)   return number_format($bytes / 1048576, 2) . ' MB';
+    if ($bytes >= 1024)      return number_format($bytes / 1024, 2) . ' KB';
+    return $bytes . ' B';
+}
 
 $pageTitle = 'Merci — TFE enregistré';
 ?>
@@ -43,20 +53,99 @@ $pageTitle = 'Merci — TFE enregistré';
     <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
 </head>
 <body class="student-body">
-    <main id="main-content" class="thanks-student-page">
+    <main id="main-content" class="partage-recap">
+
         <div class="thanks-success">
             <h1>✅ Merci !</h1>
             <p class="thanks-message">Votre TFE a bien été enregistré sur la plateforme.</p>
             <?php if ($emailSent): ?>
             <p class="flash-success">📧 Un e-mail de confirmation a été envoyé avec un récapitulatif de votre soumission.</p>
             <?php endif; ?>
-            <?php if ($thesis): ?>
-            <p><strong><?= htmlspecialchars($thesis['title']) ?></strong><?php if (!empty($thesis['authors'])): ?> — <?= htmlspecialchars($thesis['authors']) ?><?php endif; ?></p>
-            <?php endif; ?>
-            <?php if ($slug): ?>
-            <a href="/partage/<?= urlencode($slug) ?>" class="btn-new-form">+ Soumettre un autre TFE</a>
-            <?php endif; ?>
         </div>
+
+        <section class="recap-section">
+            <h2>Récapitulatif de votre soumission</h2>
+            <dl class="recap-dl">
+                <dt>Titre</dt>
+                <dd><?= htmlspecialchars($thesis['title']) ?></dd>
+
+                <?php if (!empty($thesis['subtitle'])): ?>
+                <dt>Sous-titre</dt>
+                <dd><?= htmlspecialchars($thesis['subtitle']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['authors'])): ?>
+                <dt>Auteur·ice(s)</dt>
+                <dd><?= htmlspecialchars($thesis['authors']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['year'])): ?>
+                <dt>Année</dt>
+                <dd><?= htmlspecialchars((string)$thesis['year']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['orientation'])): ?>
+                <dt>Orientation</dt>
+                <dd><?= htmlspecialchars($thesis['orientation']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['ap_program'])): ?>
+                <dt>Atelier pluridisciplinaire</dt>
+                <dd><?= htmlspecialchars($thesis['ap_program']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['finality_type'])): ?>
+                <dt>Finalité</dt>
+                <dd><?= htmlspecialchars($thesis['finality_type']) ?></dd>
+                <?php endif; ?>
+
+                <?php if (!empty($thesis['keywords'])): ?>
+                <dt>Mots-clés</dt>
+                <dd><?= htmlspecialchars($thesis['keywords']) ?></dd>
+                <?php endif; ?>
+            </dl>
+        </section>
+
+        <?php if (!empty($files)): ?>
+        <section class="recap-section">
+            <h2>Fichiers soumis</h2>
+            <ul class="recap-file-list">
+                <?php foreach ($files as $f): ?>
+                <?php
+                    $mime     = $f['mime_type'] ?? '';
+                    $isImage  = str_starts_with($mime, 'image/');
+                    $mediaUrl = '/media.php?path=' . urlencode($f['file_path']);
+                    $fileName = htmlspecialchars($f['file_name'] ?? basename($f['file_path']));
+                    $fileType = htmlspecialchars($f['file_type']);
+                ?>
+                <li class="recap-file-item">
+                    <?php if ($isImage): ?>
+                    <a href="<?= $mediaUrl ?>" target="_blank" rel="noopener" class="recap-file-thumb-link">
+                        <img src="<?= $mediaUrl ?>" alt="<?= $fileName ?>" class="recap-file-thumb" loading="lazy">
+                    </a>
+                    <?php else: ?>
+                    <span class="recap-file-icon">
+                        <?php
+                        if ($mime === 'application/pdf')   echo '📄';
+                        elseif (str_starts_with($mime, 'video/')) echo '🎬';
+                        elseif (str_starts_with($mime, 'audio/')) echo '🎵';
+                        elseif (in_array($mime, ['application/zip','application/x-zip-compressed'])) echo '🗜️';
+                        elseif (str_ends_with($f['file_name'] ?? '', '.vtt')) echo '💬';
+                        else echo '📎';
+                        ?>
+                    </span>
+                    <?php endif; ?>
+                    <div class="recap-file-meta">
+                        <span class="recap-file-name"><?= $fileName ?></span>
+                        <span class="recap-file-type-badge"><?= $fileType ?></span>
+                        <span class="recap-file-size"><?= partageFormatFileSize((int)$f['file_size']) ?></span>
+                    </div>
+                </li>
+                <?php endforeach; ?>
+            </ul>
+        </section>
+        <?php endif; ?>
+
     </main>
 </body>
 </html>