perf: htmx lazy popover with Cache-Control — no pre-render, images load on hover only

app/src/Controllers/SearchController.php

@@ -194,7 +194,6 @@ class SearchController
             "currentNav" => "repertoire",
             "extraCss" => ["/assets/css/repertoire.css"],
             "bodyClass" => "search-body",
-            "db" => $this->db,
         ];
     }
 
@@ -224,6 +223,7 @@ class SearchController
             exit();
         }
 
+        header('Cache-Control: public, max-age=300');
         include APP_ROOT . '/templates/partials/student-preview.php';
         exit();
     }
@@ -234,7 +234,6 @@ class SearchController
     ): never {
         header("Content-Type: text/html; charset=UTF-8");
         $isHtmx = true;
-        $db = $this->db;
         include APP_ROOT . "/templates/partials/repertoire-index.php";
         exit();
     }

app/templates/partials/repertoire-index.php

@@ -31,10 +31,7 @@ ksort($studentWorks);
 // Legacy alias for single-id use
 $studentMap = array_map(fn($ids) => $ids[0], $studentWorks);
 
-// Batch-fetch all preview data for visible students (one query)
+
-$previewsByAuthor = !empty($studentWorks)
-    ? $db->getThesesForAuthors(array_keys($studentWorks))
-    : [];
 
 /**
  * Build the toggle URL for a filter button.
@@ -184,13 +181,16 @@ $hx = 'hx-target="#repertoire-index" hx-swap="outerHTML" hx-push-url="true" hx-i
             <?php
                 $firstId    = $ids[0];
                 $targetUrl  = count($ids) === 1 ? '/tfe?id=' . $firstId : '#';
-                $templateId = 'sp-' . md5($name);
+                $previewUrl = '/repertoire/student-preview?name=' . urlencode($name);
             ?>
             <li class="student-entry">
                 <a href="<?= htmlspecialchars($targetUrl) ?>"
                    class="rep-entry rep-entry--link"
                    data-student-name="<?= htmlspecialchars($name) ?>"
-                   data-preview="<?= htmlspecialchars($templateId) ?>">
+                   hx-get="<?= htmlspecialchars($previewUrl) ?>"
+                   hx-target="#student-popover"
+                   hx-trigger="mouseenter once"
+                   hx-swap="innerHTML">
                     <?= htmlspecialchars($name) ?>
                 </a>
             </li>
@@ -224,38 +224,3 @@ $hx = 'hx-target="#repertoire-index" hx-swap="outerHTML" hx-push-url="true" hx-i
     </section>
 
 </div>
-
-<?php foreach ($studentWorks as $name => $ids):
-    $templateId = 'sp-' . md5($name);
-    $theses = $previewsByAuthor[$name] ?? [];
-    if (empty($theses)) continue;
-?>
-<template id="<?= htmlspecialchars($templateId) ?>">
-<?php foreach ($theses as $t):
-    $synopsis = $t['synopsis'] ?? '';
-    if (mb_strlen($synopsis) > 160) $synopsis = mb_substr($synopsis, 0, 157) . '…';
-    $meta = array_filter([$t['year'] ?? null, $t['orientation'] ?? null, $t['finality_type'] ?? null]);
-?>
-<a href="/tfe?id=<?= (int)$t['id'] ?>" class="student-card">
-    <?php if (!empty($t['banner_path'])): ?>
-    <div class="student-card__banner" style="background-image:url('<?= htmlspecialchars($t['banner_path']) ?>')"></div>
-    <?php else: ?>
-    <div class="student-card__banner student-card__banner--gradient">
-        <span class="student-card__gradient-author"><?= htmlspecialchars($t['authors'] ?? '') ?></span>
-        <span class="student-card__gradient-title"><?= htmlspecialchars($t['title']) ?></span>
-    </div>
-    <?php endif; ?>
-    <div class="student-card__body">
-        <p class="student-card__meta"><?= htmlspecialchars(implode(' · ', $meta)) ?></p>
-        <h3 class="student-card__title"><?= htmlspecialchars($t['title']) ?></h3>
-        <?php if (!empty($t['subtitle'])): ?>
-        <p class="student-card__subtitle"><?= htmlspecialchars($t['subtitle']) ?></p>
-        <?php endif; ?>
-        <?php if ($synopsis !== ''): ?>
-        <p class="student-card__synopsis"><?= htmlspecialchars($synopsis) ?></p>
-        <?php endif; ?>
-    </div>
-</a>
-<?php endforeach; ?>
-</template>
-<?php endforeach; ?>

app/templates/public/repertoire.php

@@ -12,50 +12,49 @@
     var popover = document.getElementById('student-popover');
     var currentAnchor = null;
 
-    function positionPopover(anchor) {
+    function position(anchor) {
-        var rect   = anchor.getBoundingClientRect();
+        var r = anchor.getBoundingClientRect();
-        var scrollY = window.scrollY || 0;
+        var left = r.right + window.scrollX + 12;
-        var scrollX = window.scrollX || 0;
+        var top  = r.top  + window.scrollY;
-        var left = rect.right + scrollX + 12;
+        if (left + 300 > window.innerWidth + window.scrollX) left = r.left + window.scrollX - 312;
-        var top  = rect.top  + scrollY;
-        if (left + 300 > window.innerWidth + scrollX) {
-            left = rect.left + scrollX - 312;
-        }
         popover.style.left = left + 'px';
         popover.style.top  = top  + 'px';
     }
 
-    function showPreview(anchor) {
+    // After htmx swaps content in, show and position the popover
-        var tplId = anchor.dataset.preview;
+    document.body.addEventListener('htmx:afterSwap', function (e) {
-        if (!tplId) return;
+        if (e.detail.target !== popover) return;
-        var tpl = document.getElementById(tplId);
-        if (!tpl) return;
-        popover.innerHTML = '';
-        popover.appendChild(tpl.content.cloneNode(true));
-        positionPopover(anchor);
         popover.hidden = false;
-    }
+        if (currentAnchor) position(currentAnchor);
-
+    });
-    function hidePreview() {
-        popover.hidden = true;
-        currentAnchor = null;
-    }
 
+    // On subsequent hovers (already cached by browser / htmx once),
+    // just reposition and show — htmx won't re-fire due to `once`,
+    // so we handle show/position on mouseenter ourselves.
     document.body.addEventListener('mouseenter', function (e) {
-        var a = e.target.closest('[data-preview]');
+        var a = e.target.closest('[data-student-name]');
         if (!a) return;
         currentAnchor = a;
-        showPreview(a);
+        // If popover already has this student's content, just show it
+        if (popover.dataset.loadedFor === a.dataset.studentName) {
+            position(a);
+            popover.hidden = false;
+        }
     }, true);
 
+    // Mark which student is loaded after swap
+    document.body.addEventListener('htmx:afterSwap', function (e) {
+        if (e.detail.target !== popover || !currentAnchor) return;
+        popover.dataset.loadedFor = currentAnchor.dataset.studentName;
+    });
+
+    // Hide on mouse leave (both anchor and popover)
     document.body.addEventListener('mouseleave', function (e) {
-        var a = e.target.closest('[data-preview]');
+        if (!e.target.closest('[data-student-name]') && !e.target.closest('#student-popover')) return;
-        var p = e.target.closest('#student-popover');
-        if (!a && !p) return;
         setTimeout(function () {
-            if (!document.querySelector('[data-preview]:hover') &&
+            if (!document.querySelector('[data-student-name]:hover') &&
                 !document.querySelector('#student-popover:hover')) {
-                hidePreview();
+                popover.hidden = true;
             }
         }, 120);
     }, true);