feat: student name popover preview on /repertoire via htmx

app/templates/partials/repertoire-index.php

@@ -17,17 +17,19 @@ $activeSets = [
 ];
 
 // Build the student map from matched students only
-$studentMap = []; // name => id
+// name => [id, id, ...] (a student may have multiple theses)
+$studentWorks = []; // name => [thesis ids]
 foreach ($repData['students'] as $s) {
     if (empty($s['authors'])) continue;
     foreach (explode(',', $s['authors']) as $name) {
         $name = trim($name);
-        if ($name !== '' && !isset($studentMap[$name])) {
-            $studentMap[$name] = (int)$s['id'];
-        }
+        if ($name === '') continue;
+        $studentWorks[$name][] = (int)$s['id'];
     }
 }
-ksort($studentMap);
+ksort($studentWorks);
+// Legacy alias for single-id use
+$studentMap = array_map(fn($ids) => $ids[0], $studentWorks);
 
 /**
  * Build the toggle URL for a filter button.
@@ -170,12 +172,23 @@ $hx = 'hx-target="#repertoire-index" hx-swap="outerHTML" hx-push-url="true" hx-i
     <section class="repertoire-col" data-col="students">
         <h2>Étudiantes</h2>
         <ul>
-        <?php if (empty($studentMap)): ?>
+        <?php if (empty($studentWorks)): ?>
             <li class="rep-empty">—</li>
         <?php else: ?>
-            <?php foreach ($studentMap as $name => $id): ?>
-            <li>
-                <a href="/tfe?id=<?= (int)$id ?>" class="rep-entry rep-entry--link">
+            <?php foreach ($studentWorks as $name => $ids): ?>
+            <?php
+                $firstId   = $ids[0];
+                $previewUrl = '/repertoire/student-preview?name=' . urlencode($name);
+                $targetUrl  = count($ids) === 1 ? '/tfe?id=' . $firstId : '#';
+            ?>
+            <li class="student-entry">
+                <a href="<?= htmlspecialchars($targetUrl) ?>"
+                   class="rep-entry rep-entry--link"
+                   hx-get="<?= htmlspecialchars($previewUrl) ?>"
+                   hx-target="#student-popover"
+                   hx-trigger="mouseenter"
+                   hx-swap="innerHTML"
+                   data-student-name="<?= htmlspecialchars($name) ?>">
                     <?= htmlspecialchars($name) ?>
                 </a>
             </li>

app/templates/partials/student-preview.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Partial: student popover preview.
+ *
+ * Expected variables:
+ *   $theses  array  rows of [id => int, title => string]
+ *   $name    string student name
+ */
+?>
+<?php if (count($theses) === 1): ?>
+    <iframe
+        src="/tfe?id=<?= (int)$theses[0]['id'] ?>"
+        class="student-preview__iframe"
+        loading="lazy"
+        title="Aperçu — <?= htmlspecialchars($name) ?>"
+    ></iframe>
+<?php else: ?>
+    <p class="student-preview__name"><?= htmlspecialchars($name) ?></p>
+    <ul class="student-preview__list">
+        <?php foreach ($theses as $t): ?>
+        <li>
+            <a href="/tfe?id=<?= (int)$t['id'] ?>" class="student-preview__link">
+                <?= htmlspecialchars($t['title']) ?>
+            </a>
+        </li>
+        <?php endforeach; ?>
+    </ul>
+<?php endif; ?>

app/templates/public/repertoire.php

@@ -3,4 +3,60 @@
     <span id="rep-indicator" class="rep-indicator htmx-indicator" aria-hidden="true"></span>
     <?php include APP_ROOT . '/templates/partials/repertoire-index.php'; ?>
 </main>
+<!-- Student popover -->
+<div id="student-popover" class="student-popover" hidden aria-live="polite"></div>
+
 <script src="/assets/js/htmx.min.js"></script>
+<script>
+(function () {
+    var popover = document.getElementById('student-popover');
+    var currentAnchor = null;
+
+    // Position the popover next to the hovered student entry
+    function positionPopover(anchor) {
+        var rect = anchor.getBoundingClientRect();
+        var scrollY = window.scrollY || 0;
+        var scrollX = window.scrollX || 0;
+        // Place to the right of the column; fall back left if off-screen
+        var left = rect.right + scrollX + 12;
+        var top  = rect.top  + scrollY;
+        if (left + 320 > window.innerWidth + scrollX) {
+            left = rect.left + scrollX - 332;
+        }
+        popover.style.left = left + 'px';
+        popover.style.top  = top  + 'px';
+    }
+
+    // Show popover after HTMX fills it
+    document.body.addEventListener('htmx:afterSwap', function (e) {
+        if (e.detail.target !== popover) return;
+        if (!popover.innerHTML.trim()) return;
+        popover.hidden = false;
+        if (currentAnchor) positionPopover(currentAnchor);
+    });
+
+    // Track hovered anchor
+    document.body.addEventListener('mouseenter', function (e) {
+        var a = e.target.closest('[data-student-name]');
+        if (!a) return;
+        currentAnchor = a;
+    }, true);
+
+    // Hide when leaving BOTH the anchor and the popover
+    document.body.addEventListener('mouseleave', function (e) {
+        var a = e.target.closest('[data-student-name]');
+        var p = e.target.closest('#student-popover');
+        if (!a && !p) return;
+        // Small delay so mouse can move into popover
+        setTimeout(function () {
+            var hoverAnchor = document.querySelector('[data-student-name]:hover');
+            var hoverPop    = document.querySelector('#student-popover:hover');
+            if (!hoverAnchor && !hoverPop) {
+                popover.hidden = true;
+                popover.innerHTML = '';
+                currentAnchor = null;
+            }
+        }, 120);
+    }, true);
+}());
+</script>