fix(search): dropdown dead on htmx-less pages; Alpine-side debounce; auto bundle stamps

The "top search bar doesn't work" report had TWO stacked causes, found
by reproducing with real keypress-by-keypress typing instead of
Playwright's fill() (which fires a single input event and masked both):

1. htmx.min.js was included PER PAGE. The header's live search is
   htmx-driven on every page, but five pages rendering @Header —
   series, admin, admin hash-conflicts, admin processing-issues,
   browse-detail — never loaded it: the input's hx-* attributes were
   inert (htmx-internal-data absent), so typing produced no request at
   all. The include now lives in the header partial itself (classic
   script, before the module bundle); the sixteen per-page copies on
   @Header pages are removed (double-processing guard). Non-header
   pages (login/register/setup/reader/index) keep their own.

2. htmx's delay: modifier on a PROGRAMMATICALLY dispatched custom event
   (htmx.trigger) loses the request entirely under rapid successive
   triggers — every re-fire canceled the pending timer and the last
   never issued, so fast typing (the normal kind) never opened the
   dropdown while one-shot fill() worked. The debounce moved into the
   Alpine component (client-local state, where it belongs); htmx now
   executes the bare `search` event immediately.

Also made bundle staleness structurally impossible: each bundle's
script stamp is a content hash computed at startup (templates/
bundles.go), so a rebuild that changes bundle bytes changes its cache
key with no manual ?v=N bump — the manual stamp was how the first
dropdown fix stayed invisible for a deploy. The reader bundle (never
stamped at all) is covered too. HTML pages additionally send
Cache-Control: no-cache (they are dynamic), so a stale page can no
longer reference a stale stamp; /api, /static and /uploads keep their
native caching, pinned by a middleware test.
This commit is contained in:
John O'Keefe committed 2026-10-27 23:33:52 -04:00
1 parent fd9292e6f2
commit 4c43caa639
44 files changed
+881 -704

No files matched your search

+12 -4
View File
@@ -9,6 +9,7 @@ import { Alpine } from "./alpine";
// innerHTML string templates — a violation of the rendering-ownership
// doctrine this migration removes (2026-10-27 search-progress batch).
const SEARCH_DEBOUNCE_MS = 300;
const SEARCH_MIN_CHARS = 2;
interface HtmxAfterRequestEvent extends CustomEvent {
@@ -20,6 +21,7 @@ Alpine.data("headerSearch", () => ({
loading: false,
selected: -1,
lastQuery: "",
debounceTimer: null as ReturnType<typeof setTimeout> | null,
init() {
// htmx dispatches request lifecycle events on the REQUESTING
@@ -55,10 +57,16 @@ Alpine.data("headerSearch", () => ({
this.close();
return;
}
// htmx owns the request (its `search` trigger carries the 300ms
// delay); this side only gates the minimum length. No trigger
// filter expressions — CSP has no 'unsafe-eval'.
window.htmx.trigger(this.$refs.input as HTMLElement, "search");
// Alpine owns the debounce: htmx's `delay:` on a custom trigger
// event LOSES the request under rapid successive triggers (each
// re-arm cancels the pending one and the last never issues —
// verified empirically; this is the 2026-10-27 "dropdown never
// opens while typing" bug). The bare `search` event just executes.
if (this.debounceTimer) clearTimeout(this.debounceTimer);
this.debounceTimer = setTimeout(() => {
this.debounceTimer = null;
window.htmx.trigger(this.$refs.input as HTMLElement, "search");
}, SEARCH_DEBOUNCE_MS);
},
onFocus() {