Refactor search-box module to await-style chooseFromApi

Move web_src/js/modules/fomantic/search.ts to web_src/js/modules/search.ts
(no Fomantic dependency anymore). Replace the imperative
initSearchBox(el, opts) with chooseFromApi(el, url, parse) that returns
a Promise<SearchResult> resolving with the user's chosen item; callers
loop with `while (box.isConnected) { const pick = await ...; ... }` and
own writing back to whatever input/state they manage.

Cleanup is via a single AbortController whose signal is passed to all
listeners; the in-flight fetch has its own controller so a new keystroke
can cancel just the request without tearing down listeners.

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

web_src/js/features/comp/SearchRepoBox.ts

@@ -1,26 +1,20 @@
-import {initSearchBox} from '../../modules/fomantic/search.ts';
-import {htmlEscape} from '../../utils/html.ts';
+import {chooseFromApi} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 
-export function initCompSearchRepoBox(el: HTMLElement) {
+export async function initCompSearchRepoBox(el: HTMLElement) {
   const uid = el.getAttribute('data-uid');
   const exclusive = el.getAttribute('data-exclusive');
   let url = `${appSubUrl}/repo/search?q={query}&uid=${uid}`;
-  if (exclusive === 'true') {
-    url += `&exclusive=true`;
+  if (exclusive === 'true') url += `&exclusive=true`;
+  const input = el.querySelector<HTMLInputElement>('input.prompt')!;
+
+  while (el.isConnected) {
+    const pick = await chooseFromApi(el, url, (response: any) => response.data.map((item: any) => ({
+      title: item.repository.full_name.split('/')[1],
+      description: item.repository.full_name,
+    })));
+    input.value = pick.title;
+    input.dispatchEvent(new Event('change', {bubbles: true}));
   }
-  initSearchBox(el, {
-    apiUrl: url,
-    onResponse(response: any) {
-      const items = [];
-      for (const item of response.data) {
-        items.push({
-          title: htmlEscape(item.repository.full_name.split('/')[1]),
-          description: htmlEscape(item.repository.full_name),
-        });
-      }
-      return {results: items};
-    },
-  });
 }

web_src/js/features/comp/SearchUserBox.ts

@@ -1,43 +1,33 @@
-import {htmlEscape} from '../../utils/html.ts';
-import {initSearchBox} from '../../modules/fomantic/search.ts';
+import {chooseFromApi, type SearchResult} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
-export function initCompSearchUserBox() {
-  const searchUserBox = document.querySelector<HTMLElement>('#search-user-box');
-  if (!searchUserBox) return;
+export async function initCompSearchUserBox() {
+  const box = document.querySelector<HTMLElement>('#search-user-box');
+  if (!box) return;
 
-  const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
-  const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
-  const includeOrgs = searchUserBox.getAttribute('data-include-orgs') === 'true';
-  initSearchBox(searchUserBox, {
-    apiUrl: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
-    onResponse(response: any, searchQuery: string) {
-      const resultItems = [];
-      const searchQueryUppercase = searchQuery.toUpperCase();
+  const allowEmailInput = box.getAttribute('data-allow-email') === 'true';
+  const allowEmailDescription = box.getAttribute('data-allow-email-description') ?? undefined;
+  const includeOrgs = box.getAttribute('data-include-orgs') === 'true';
+  const url = `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`;
+  const input = box.querySelector<HTMLInputElement>('input.prompt')!;
+
+  while (box.isConnected) {
+    const pick = await chooseFromApi(box, url, (response: any, query: string) => {
+      const items: SearchResult[] = [];
+      const queryUpper = query.toUpperCase();
       for (const item of response.data) {
-        const resultItem = {
-          title: item.login,
-          image: item.avatar_url,
-          description: htmlEscape(item.full_name),
-        };
-        if (searchQueryUppercase === item.login.toUpperCase()) {
-          resultItems.unshift(resultItem); // add the exact match to the top
-        } else {
-          resultItems.push(resultItem);
-        }
+        const result: SearchResult = {title: item.login, image: item.avatar_url, description: item.full_name};
+        if (queryUpper === item.login.toUpperCase()) items.unshift(result); // exact match floats to top
+        else items.push(result);
       }
-
-      if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
-        const resultItem = {
-          title: searchQuery,
-          description: allowEmailDescription,
-        };
-        resultItems.push(resultItem);
+      if (allowEmailInput && !items.length && looksLikeEmailAddressCheck.test(query)) {
+        items.push({title: query, description: allowEmailDescription});
       }
-
-      return {results: resultItems};
-    },
-  });
+      return items;
+    });
+    input.value = pick.title;
+    input.dispatchEvent(new Event('change', {bubbles: true}));
+  }
 }

web_src/js/features/repo-settings.ts

@@ -3,7 +3,7 @@ import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
-import {initSearchBox} from '../modules/fomantic/search.ts';
+import {chooseFromApi} from '../modules/search.ts';
 import {globMatch} from '../utils/glob.ts';
 
 const {appSubUrl} = window.config;
@@ -46,23 +46,20 @@ function initRepoSettingsCollaboration() {
   }
 }
 
-function initRepoSettingsSearchTeamBox() {
-  const searchTeamBox = document.querySelector<HTMLElement>('#search-team-box');
-  if (!searchTeamBox) return;
+async function initRepoSettingsSearchTeamBox() {
+  const box = document.querySelector<HTMLElement>('#search-team-box');
+  if (!box) return;
 
-  initSearchBox(searchTeamBox, {
-    apiUrl: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
-    onResponse(response: any) {
-      const items = [];
-      for (const item of response.data) {
-        items.push({
-          title: item.name,
-          description: `${item.permission} access`, // TODO: translate this string
-        });
-      }
-      return {results: items};
-    },
-  });
+  const url = `${appSubUrl}/org/${box.getAttribute('data-org-name')}/teams/-/search?q={query}`;
+  const input = box.querySelector<HTMLInputElement>('input.prompt')!;
+  while (box.isConnected) {
+    const pick = await chooseFromApi(box, url, (response: any) => response.data.map((item: any) => ({
+      title: item.name,
+      description: `${item.permission} access`, // TODO: translate this string
+    })));
+    input.value = pick.title;
+    input.dispatchEvent(new Event('change', {bubbles: true}));
+  }
 }
 
 function initRepoSettingsGitHook() {