Replace Fomantic search module with first-party autocomplete

Drops the 1565-line vendored Fomantic UI search jQuery plugin in favor
of a small first-party TypeScript module covering the three call sites
(repo, user, and team autocomplete). Adds an e2e regression suite that
exercises each search box.

Also fixes input/button vertical alignment in the four forms that wrap
a search box: the fomantic-era `tw-align-middle` workaround is replaced
by `flex-text-block` on the form, which is the codebase's standard
flex helper for this layout.

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

web_src/js/features/comp/SearchRepoBox.ts

@@ -1,4 +1,4 @@
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {initSearchBox} from '../../modules/fomantic/search.ts';
 import {htmlEscape} from '../../utils/html.ts';
 
 const {appSubUrl} = window.config;
@@ -10,22 +10,17 @@ export function initCompSearchRepoBox(el: HTMLElement) {
   if (exclusive === 'true') {
     url += `&exclusive=true`;
   }
-  fomanticQuery(el).search({
-    minCharacters: 2,
-    apiSettings: {
-      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};
-      },
+  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};
     },
-    searchFields: ['full_name'],
-    showNoResults: false,
   });
 }

web_src/js/features/comp/SearchUserBox.ts

@@ -1,49 +1,43 @@
 import {htmlEscape} from '../../utils/html.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {initSearchBox} from '../../modules/fomantic/search.ts';
 
 const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
 export function initCompSearchUserBox() {
-  const searchUserBox = document.querySelector('#search-user-box');
+  const searchUserBox = document.querySelector<HTMLElement>('#search-user-box');
   if (!searchUserBox) 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';
-  fomanticQuery(searchUserBox).search({
-    minCharacters: 2,
-    apiSettings: {
-      url: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
-      onResponse(response: any) {
-        const resultItems = [];
-        const searchQuery = searchUserBox.querySelector('input')!.value;
-        const searchQueryUppercase = searchQuery.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);
-          }
-        }
-
-        if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
-          const resultItem = {
-            title: searchQuery,
-            description: allowEmailDescription,
-          };
+  initSearchBox(searchUserBox, {
+    apiUrl: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
+    onResponse(response: any, searchQuery: string) {
+      const resultItems = [];
+      const searchQueryUppercase = searchQuery.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);
         }
+      }
 
-        return {results: resultItems};
-      },
+      if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
+        const resultItem = {
+          title: searchQuery,
+          description: allowEmailDescription,
+        };
+        resultItems.push(resultItem);
+      }
+
+      return {results: resultItems};
     },
-    searchFields: ['login', 'full_name'],
-    showNoResults: false,
   });
 }