Simplify attachSearchBox and restore the CSS comment

- collapse the render/keydown/select helpers (replaceChildren with mapped
  array, inline ArrowUp/Down branch, drop the move() helper)
- abort the in-flight fetch from hide() so Escape/blur/outside-click
  cancel the request, and gate the post-await render on
  ctrl.signal.aborted to suppress responses that settle after hide()
- rename idx → index
- restore the leading comment in web_src/css/modules/search.css that an
  earlier commit on this branch dropped

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

web_src/css/modules/search.css

@@ -1,3 +1,5 @@
+/* These are the remnants of the fomantic search module */
+
 .ui.search {
   position: relative;
 }

web_src/js/modules/search.ts

@@ -14,6 +14,13 @@ function buildResultHTML(result: SearchResult): string {
   return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
 }
 
+function buildResultElement(result: SearchResult): HTMLElement {
+  const item = document.createElement('div');
+  item.className = 'result';
+  item.innerHTML = buildResultHTML(result);
+  return item;
+}
+
 /** Attach an API-driven autocomplete to `container`. `parse` maps the raw JSON response into the rendered result list. The selected result's title is written to the input on selection. */
 export function attachSearchBox<T = unknown>(container: HTMLElement, url: string, parse: (raw: T, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): void {
   const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input');
@@ -25,12 +32,11 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
     resultsEl.className = 'results';
     container.append(resultsEl);
   }
-
-  let fetchController: AbortController | null = null;
   const itemResults = new Map<HTMLElement, SearchResult>();
-  const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
+  let fetchController: AbortController | null = null;
 
   const hide = () => {
+    fetchController?.abort();
     resultsEl.style.display = 'none';
     resultsEl.replaceChildren();
     itemResults.clear();
@@ -38,60 +44,51 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
 
   const render = (results: SearchResult[]) => {
     if (!results.length) return hide();
-    resultsEl.replaceChildren();
     itemResults.clear();
-    for (const result of results) {
+    resultsEl.replaceChildren(...results.map((result) => {
-      const item = document.createElement('div');
+      const item = buildResultElement(result);
-      item.className = 'result';
-      item.innerHTML = buildResultHTML(result);
       itemResults.set(item, result);
-      resultsEl.append(item);
+      return item;
-    }
+    }));
     resultsEl.style.display = 'block';
   };
 
   const select = (item: HTMLElement) => {
-    const picked = itemResults.get(item)!;
+    input.value = itemResults.get(item)!.title;
-    input.value = picked.title;
     input.dispatchEvent(new Event('change', {bubbles: true}));
     hide();
   };
 
-  const performSearch = async (query: string) => {
+  const search = debounce(200, async (query: string) => {
     fetchController?.abort();
     if (query.length < minCharacters) return hide();
-    fetchController = new AbortController();
+    const ctrl = (fetchController = new AbortController());
     try {
-      const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: fetchController.signal});
+      const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: ctrl.signal});
       if (!response.ok) return hide();
       const results = parse(await response.json(), query);
-      if (input.value !== query) return; // stale response racing a newer keystroke
+      // hide() ran (signal aborted) or a newer keystroke landed before the response did
-      render(results);
+      if (!ctrl.signal.aborted && input.value === query) render(results);
     } catch (err) {
       if ((err as Error).name !== 'AbortError') hide();
     }
-  };
+  });
 
-  const debounced = debounce(200, (query: string) => { performSearch(query) });
+  input.addEventListener('input', () => search(input.value));
-
+  input.addEventListener('focus', () => { if (itemResults.size) resultsEl.style.display = 'block'; });
-  input.addEventListener('input', () => debounced(input.value));
+  input.addEventListener('blur', () => setTimeout(hide, 150)); // deferred so a result mousedown can land first
-  input.addEventListener('focus', () => { if (items().length) resultsEl.style.display = 'block'; });
   input.addEventListener('keydown', (event) => {
-    const all = items();
+    const all = Array.from(resultsEl.querySelectorAll<HTMLElement>('.result'));
     if (!all.length) return;
-    const activeIndex = Array.from(all).findIndex((item) => item.classList.contains('active'));
+    const index = all.findIndex((item) => item.classList.contains('active'));
-    const move = (next: number) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      all[activeIndex]?.classList.remove('active');
+      all[index]?.classList.remove('active');
+      const next = event.key === 'ArrowDown' ? (index + 1) % all.length : index <= 0 ? all.length - 1 : index - 1;
       all[next].classList.add('active');
-    };
+    } else if (event.key === 'Enter' && index >= 0) {
-    if (event.key === 'ArrowDown') {
-      move((activeIndex + 1) % all.length);
-    } else if (event.key === 'ArrowUp') {
-      move(activeIndex <= 0 ? all.length - 1 : activeIndex - 1);
-    } else if (event.key === 'Enter' && activeIndex >= 0) {
       event.preventDefault();
-      select(all[activeIndex]);
+      select(all[index]);
     } else if (event.key === 'Escape') {
       hide();
     }
@@ -106,5 +103,4 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
   document.addEventListener('click', (event) => {
     if (!container.contains(event.target as Node)) hide();
   });
-  input.addEventListener('blur', () => setTimeout(hide, 150)); // deferred so a result mousedown can land first
 }