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>

templates/admin/badge/users.tmpl

@@ -4,8 +4,8 @@
 			{{.Title}}
 		</h4>
 		<div class="ui attached segment">
-			<form class="ui form" action="{{.Link}}" method="post">
+			<form class="ui form flex-text-block" action="{{.Link}}" method="post">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+				<div id="search-user-box" class="ui search input">
 					<input class="prompt" name="user" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 				</div>
 				<button class="ui primary button">{{ctx.Locale.Tr "admin.badges.add_user"}}</button>

templates/repo/settings/actions_general.tmpl

@@ -86,8 +86,8 @@
 	</div>
 	{{end}}
 	<div class="ui bottom attached segment">
-		<form class="ui form form-fetch-action" action="{{.Link}}/collaborative_owner/add" method="post">
+		<form class="ui form form-fetch-action flex-text-block" action="{{.Link}}/collaborative_owner/add" method="post">
-			<div id="search-user-box" class="ui search input tw-align-middle" data-include-orgs="true">
+			<div id="search-user-box" class="ui search input" data-include-orgs="true">
 				<input class="prompt" name="collaborative_owner" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 			</div>
 			<button class="ui primary button">{{ctx.Locale.Tr "actions.general.add_collaborative_owner"}}</button>

templates/repo/settings/collaboration.tmpl

@@ -39,8 +39,8 @@
 		</div>
 		{{end}}
 		<div class="ui bottom attached segment">
-			<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
+			<form class="ui form flex-text-block" id="repo-collab-form" action="{{.Link}}" method="post">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+				<div id="search-user-box" class="ui search input">
 					<input class="prompt" name="collaborator" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 				</div>
 				<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_collaborator"}}</button>
@@ -106,8 +106,8 @@
 			{{end}}
 			<div class="ui bottom attached segment">
 				{{if $allowedToChangeTeams}}
-					<form class="ui form" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
+					<form class="ui form flex-text-block" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
-						<div id="search-team-box" class="ui search input tw-align-middle" data-org-name="{{.OrgName}}">
+						<div id="search-team-box" class="ui search input" data-org-name="{{.OrgName}}">
 							<input class="prompt" name="team" placeholder="{{ctx.Locale.Tr "search.team_kind"}}" autocomplete="off" required>
 						</div>
 						<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_team"}}</button>

tests/e2e/search-box.test.ts

@@ -0,0 +1,83 @@
+import {test, expect} from '@playwright/test';
+import {apiCreateOrg, apiCreateOrgRepo, apiCreateRepo, apiCreateTeam, apiCreateUser, apiUserHeaders, loginUser, randomString} from './utils.ts';
+
+// search queries use the unique random suffix (slice(-6)) to avoid result collisions
+// from concurrent workers' similarly-prefixed names
+
+test('SearchRepoBox renders results and selects on click', async ({page, request}) => {
+  const owner = `srb-${randomString(8)}`;
+  const orgName = `srb-org-${randomString(8)}`;
+  const repoName = `srb-repo-${randomString(8)}`;
+  // a non-Owners team is required: the Owners team includes all repos, which hides the add-repo form
+  const teamName = `srb-team-${randomString(8)}`;
+
+  await apiCreateUser(request, owner);
+  const ownerHeaders = apiUserHeaders(owner);
+  await apiCreateOrg(request, orgName, {headers: ownerHeaders});
+  await Promise.all([
+    apiCreateOrgRepo(request, orgName, repoName, {headers: ownerHeaders}),
+    apiCreateTeam(request, orgName, teamName, {headers: ownerHeaders}),
+    loginUser(page, owner),
+  ]);
+
+  await page.goto(`/org/${orgName}/teams/${teamName}/repositories`);
+
+  const box = page.locator('div[data-global-init="initSearchRepoBox"]');
+  const input = box.locator('input.prompt');
+  await input.fill(repoName.slice(-6));
+
+  const result = box.locator('.results .result').first();
+  await expect(result).toContainText(repoName);
+  await result.click();
+  await expect(input).toHaveValue(new RegExp(repoName));
+});
+
+test('SearchUserBox renders results and selects on click', async ({page, request}) => {
+  const owner = `sub-${randomString(8)}`;
+  const target = `sub-target-${randomString(8)}`;
+  const repoName = `sub-repo-${randomString(8)}`;
+
+  await Promise.all([apiCreateUser(request, owner), apiCreateUser(request, target)]);
+  await Promise.all([
+    apiCreateRepo(request, {name: repoName, headers: apiUserHeaders(owner)}),
+    loginUser(page, owner),
+  ]);
+
+  await page.goto(`/${owner}/${repoName}/settings/collaboration`);
+
+  const box = page.locator('#search-user-box');
+  const input = box.locator('input.prompt');
+  await input.fill(target.slice(-6));
+
+  const result = box.locator('.results .result').first();
+  await expect(result).toContainText(target);
+  await result.click();
+  await expect(input).toHaveValue(target);
+});
+
+test('SearchTeamBox renders results and selects on click', async ({page, request}) => {
+  const owner = `stb-${randomString(8)}`;
+  const orgName = `stb-org-${randomString(8)}`;
+  const repoName = `stb-repo-${randomString(8)}`;
+  const teamName = `stb-team-${randomString(8)}`;
+
+  await apiCreateUser(request, owner);
+  const ownerHeaders = apiUserHeaders(owner);
+  await apiCreateOrg(request, orgName, {headers: ownerHeaders});
+  await Promise.all([
+    apiCreateOrgRepo(request, orgName, repoName, {headers: ownerHeaders}),
+    apiCreateTeam(request, orgName, teamName, {headers: ownerHeaders}),
+    loginUser(page, owner),
+  ]);
+
+  await page.goto(`/${orgName}/${repoName}/settings/collaboration`);
+
+  const box = page.locator('#search-team-box');
+  const input = box.locator('input.prompt');
+  await input.fill(teamName.slice(-6));
+
+  const result = box.locator('.results .result').first();
+  await expect(result).toContainText(teamName);
+  await result.click();
+  await expect(input).toHaveValue(teamName);
+});

tests/e2e/utils.ts

@@ -47,6 +47,34 @@ export async function apiCreateRepo(requestContext: APIRequestContext, {name, au
   }), 'apiCreateRepo');
 }
 
+export async function apiCreateOrg(requestContext: APIRequestContext, name: string, {headers}: {headers?: Record<string, string>} = {}) {
+  await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/orgs`, {
+    headers: headers || apiHeaders(),
+    data: {username: name},
+  }), 'apiCreateOrg');
+}
+
+export async function apiCreateOrgRepo(requestContext: APIRequestContext, org: string, name: string, {headers}: {headers?: Record<string, string>} = {}) {
+  await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/orgs/${org}/repos`, {
+    headers: headers || apiHeaders(),
+    data: {name, auto_init: true},
+  }), 'apiCreateOrgRepo');
+}
+
+/** Create a team with read permission on a fixed unit set, returning the team id. */
+export async function apiCreateTeam(requestContext: APIRequestContext, org: string, name: string, {includesAllRepositories = false, headers}: {includesAllRepositories?: boolean; headers?: Record<string, string>} = {}): Promise<number> {
+  let teamID = 0;
+  await apiRetry(async () => {
+    const response = await requestContext.post(`${baseUrl()}/api/v1/orgs/${org}/teams`, {
+      headers: headers || apiHeaders(),
+      data: {name, permission: 'read', includes_all_repositories: includesAllRepositories, units: ['repo.code', 'repo.issues', 'repo.pulls']},
+    });
+    if (response.ok()) teamID = (await response.json()).id;
+    return response;
+  }, 'apiCreateTeam');
+  return teamID;
+}
+
 export async function apiCreateIssue(requestContext: APIRequestContext, owner: string, repo: string, {title, headers}: {title: string; headers?: Record<string, string>}) {
   await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/issues`, {
     headers: headers || apiHeaders(),

web_src/css/modules/search.css

@@ -1,4 +1,4 @@
-/* These are the remnants of the fomantic search module */
+/* Styles for the first-party search-box autocomplete (web_src/js/modules/fomantic/search.ts) */
 
 .ui.search {
   position: relative;

web_src/fomantic/build/fomantic.js

@@ -1,6 +1,5 @@
 import './components/api.js';
 import './components/dropdown.js';
 import './components/modal.js';
-import './components/search.js';
 
 // Hard-forked from Fomantic UI 2.8.7, patches are commented with "GITEA-PATCH"

web_src/fomantic/theme.config.less

@@ -44,7 +44,6 @@
 @progress   : 'default';
 @slider     : 'default';
 @rating     : 'default';
-@search     : 'default';
 @shape      : 'default';
 @sidebar    : 'default';
 @sticky     : 'default';

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({
+  initSearchBox(el, {
-    minCharacters: 2,
+    apiUrl: url,
-    apiSettings: {
+    onResponse(response: any) {
-      url,
+      const items = [];
-      onResponse(response: any) {
+      for (const item of response.data) {
-        const items = [];
+        items.push({
-        for (const item of response.data) {
+          title: htmlEscape(item.repository.full_name.split('/')[1]),
-          items.push({
+          description: htmlEscape(item.repository.full_name),
-            title: htmlEscape(item.repository.full_name.split('/')[1]),
+        });
-            description: htmlEscape(item.repository.full_name),
+      }
-          });
+      return {results: items};
-        }
-        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({
+  initSearchBox(searchUserBox, {
-    minCharacters: 2,
+    apiUrl: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
-    apiSettings: {
+    onResponse(response: any, searchQuery: string) {
-      url: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
+      const resultItems = [];
-      onResponse(response: any) {
+      const searchQueryUppercase = searchQuery.toUpperCase();
-        const resultItems = [];
+      for (const item of response.data) {
-        const searchQuery = searchUserBox.querySelector('input')!.value;
+        const resultItem = {
-        const searchQueryUppercase = searchQuery.toUpperCase();
+          title: item.login,
-        for (const item of response.data) {
+          image: item.avatar_url,
-          const resultItem = {
+          description: htmlEscape(item.full_name),
-            title: item.login,
+        };
-            image: item.avatar_url,
+        if (searchQueryUppercase === item.login.toUpperCase()) {
-            description: htmlEscape(item.full_name),
+          resultItems.unshift(resultItem); // add the exact match to the top
-          };
+        } else {
-          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,
-          };
           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,
   });
 }

web_src/js/features/repo-settings.ts

@@ -3,6 +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 {globMatch} from '../utils/glob.ts';
 
 const {appSubUrl} = window.config;
@@ -46,26 +47,20 @@ function initRepoSettingsCollaboration() {
 }
 
 function initRepoSettingsSearchTeamBox() {
-  const searchTeamBox = document.querySelector('#search-team-box');
+  const searchTeamBox = document.querySelector<HTMLElement>('#search-team-box');
   if (!searchTeamBox) return;
 
-  fomanticQuery(searchTeamBox).search({
+  initSearchBox(searchTeamBox, {
-    minCharacters: 2,
+    apiUrl: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
-    searchFields: ['name', 'description'],
+    onResponse(response: any) {
-    showNoResults: false,
+      const items = [];
-    rawResponse: true,
+      for (const item of response.data) {
-    apiSettings: {
+        items.push({
-      url: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
+          title: item.name,
-      onResponse(response: any) {
+          description: `${item.permission} access`, // TODO: translate this string
-        const items: Array<Record<string, any>> = [];
+        });
-        for (const item of response.data) {
+      }
-          items.push({
+      return {results: items};
-            title: item.name,
-            description: `${item.permission} access`, // TODO: translate this string
-          });
-        }
-        return {results: items};
-      },
     },
   });
 }

web_src/js/modules/fomantic/search.ts

@@ -0,0 +1,120 @@
+import {debounce} from 'throttle-debounce';
+import {GET} from '../fetch.ts';
+import {html, htmlRaw} from '../../utils/html.ts';
+
+export type SearchResult = {
+  title: string;
+  description?: string;
+  image?: string;
+};
+
+export type SearchOpts = {
+  apiUrl: string;
+  minCharacters?: number;
+  onResponse: (raw: any, query: string) => {results: SearchResult[]};
+};
+
+function buildResultHTML(result: SearchResult): string {
+  const img = result.image ? html`<div class="image"><img src="${result.image}" alt=""></div>` : '';
+  const desc = result.description ? html`<div class="description">${htmlRaw(result.description)}</div>` : '';
+  return html`${htmlRaw(img)}<div class="content"><div class="title">${htmlRaw(result.title)}</div>${htmlRaw(desc)}</div>`;
+}
+
+export function initSearchBox(container: HTMLElement, opts: SearchOpts): void {
+  const minCharacters = opts.minCharacters ?? 2;
+  const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input');
+  if (!input) return;
+
+  let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
+  if (!resultsEl) {
+    resultsEl = document.createElement('div');
+    resultsEl.className = 'results';
+    container.append(resultsEl);
+  }
+
+  let abortCtrl: AbortController | null = null;
+
+  const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
+
+  const hide = () => {
+    resultsEl.style.display = 'none';
+    resultsEl.replaceChildren();
+  };
+
+  const render = (results: SearchResult[]) => {
+    if (!results.length) return hide();
+    resultsEl.replaceChildren();
+    for (const result of results) {
+      const item = document.createElement('div');
+      item.className = 'result';
+      item.innerHTML = buildResultHTML(result);
+      resultsEl.append(item);
+    }
+    resultsEl.style.display = 'block';
+  };
+
+  const selectItem = (item: HTMLElement) => {
+    input.value = item.querySelector<HTMLElement>('.title')!.textContent ?? '';
+    input.dispatchEvent(new Event('change', {bubbles: true}));
+    hide();
+    input.focus();
+  };
+
+  const performSearch = async (query: string) => {
+    abortCtrl?.abort();
+    if (query.length < minCharacters) return hide();
+    abortCtrl = new AbortController();
+    try {
+      const response = await GET(opts.apiUrl.replaceAll('{query}', encodeURIComponent(query)), {signal: abortCtrl.signal});
+      if (!response.ok) return hide();
+      const {results} = opts.onResponse(await response.json(), query);
+      if (input.value !== query) return; // stale response racing a newer keystroke
+      render(results);
+    } catch (err) {
+      if ((err as Error).name !== 'AbortError') hide();
+    }
+  };
+
+  const debounced = debounce(200, (query: string) => { performSearch(query) });
+  input.addEventListener('input', () => debounced(input.value));
+  input.addEventListener('focus', () => {
+    if (items().length) resultsEl.style.display = 'block';
+  });
+
+  input.addEventListener('keydown', (event) => {
+    const all = items();
+    if (!all.length) return;
+    const activeIndex = Array.from(all).findIndex((item) => item.classList.contains('active'));
+    const move = (next: number) => {
+      event.preventDefault();
+      all[activeIndex]?.classList.remove('active');
+      all[next].classList.add('active');
+    };
+    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();
+      selectItem(all[activeIndex]);
+    } else if (event.key === 'Escape') {
+      hide();
+    }
+  });
+
+  // mousedown fires before input blur so the selection registers before blur-hide kicks in
+  resultsEl.addEventListener('mousedown', (event) => {
+    const target = (event.target as HTMLElement).closest<HTMLElement>('.result');
+    if (!target) return;
+    event.preventDefault();
+    selectItem(target);
+  });
+
+  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
+  });
+}