feat: student name popover preview on /repertoire via htmx

app/public/assets/css/repertoire.css

@@ -340,3 +340,70 @@
     margin: var(--space-2xs) var(--space-m);
     flex-shrink: 0;
 }
+
+/* ---- Student popover ---- */
+.student-popover {
+    position: absolute;
+    z-index: 200;
+    width: 320px;
+    background: var(--bg-primary, #fff);
+    border: 1px solid var(--border-primary, #ddd);
+    box-shadow: 0 4px 18px rgba(0,0,0,.12);
+    border-radius: 4px;
+    overflow: hidden;
+    pointer-events: auto;
+}
+
+.student-popover[hidden] {
+    display: none;
+}
+
+.student-popover__iframe {
+    display: block;
+    width: 100%;
+    height: 400px;
+    border: none;
+}
+
+.student-preview__iframe {
+    display: block;
+    width: 100%;
+    height: 400px;
+    border: none;
+}
+
+.student-preview__name {
+    font-weight: 600;
+    font-size: var(--step--1);
+    padding: var(--space-xs) var(--space-s) var(--space-3xs);
+    margin: 0;
+    border-bottom: 1px solid var(--border-primary, #eee);
+}
+
+.student-preview__list {
+    list-style: none;
+    margin: 0;
+    padding: var(--space-3xs) 0;
+}
+
+.student-preview__list li {
+    border-bottom: 1px solid var(--border-primary, #eee);
+}
+
+.student-preview__list li:last-child {
+    border-bottom: none;
+}
+
+.student-preview__link {
+    display: block;
+    padding: var(--space-2xs) var(--space-s);
+    font-size: var(--step--1);
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: background 0.12s, color 0.12s;
+}
+
+.student-preview__link:hover {
+    background: var(--accent-primary, #0055ff);
+    color: #fff;
+}

app/src/Controllers/SearchController.php

@@ -203,6 +203,30 @@ class SearchController
      * Render the repertoire index partial and exit (for HTMX swaps).
      * Never returns.
      */
+    /**
+     * HTMX endpoint: returns a popover snippet for a student name.
+     * Renders directly and exits.
+     */
+    public function handleStudentPreview(): never {
+        $name = trim($_GET['name'] ?? '');
+        header('Content-Type: text/html; charset=UTF-8');
+
+        if ($name === '') {
+            echo '';
+            exit();
+        }
+
+        $theses = $this->db->getThesesByAuthorName($name);
+
+        if (empty($theses)) {
+            echo '';
+            exit();
+        }
+
+        include APP_ROOT . '/templates/partials/student-preview.php';
+        exit();
+    }
+
     private function renderRepertoirePartial(
         array $repData,
         array $activeFilters,

app/src/Database.php

@@ -455,6 +455,24 @@ class Database {
         return $stmt->fetchAll();
     }
 
+    /**
+     * Fetch all published theses for a given author name.
+     * Returns rows of [id => int, title => string].
+     */
+    public function getThesesByAuthorName(string $name): array {
+        $stmt = $this->pdo->prepare(
+            "SELECT t.id, t.title
+             FROM theses t
+             JOIN thesis_authors ta ON ta.thesis_id = t.id
+             JOIN authors a         ON a.id = ta.author_id
+             WHERE t.is_published = 1
+               AND a.name = ?
+             ORDER BY t.year DESC, t.title ASC"
+        );
+        $stmt->execute([$name]);
+        return $stmt->fetchAll();
+    }
+
     public function getAvailableYears() {
         $sql = "SELECT DISTINCT year FROM theses WHERE is_published = 1 ORDER BY year DESC";
         $stmt = $this->pdo->query($sql);

app/src/Dispatcher.php

@@ -107,6 +107,17 @@ class Dispatcher {
             };
         }
 
+        // /repertoire/student-preview (HTMX popover)
+        if ($path === '/repertoire/student-preview') {
+            return function() {
+                require_once APP_ROOT . '/src/Database.php';
+                require_once APP_ROOT . '/src/RateLimit.php';
+                require_once APP_ROOT . '/src/Controllers/SearchController.php';
+                $controller = SearchController::create();
+                $controller->handleStudentPreview();
+            };
+        }
+
         // /partage/*
         if (preg_match('#^/partage(/.*)?$#', $path)) {
             return function() {

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>