From 77f78076fef8b563f3c74fa5269f4cf09ac7a7a0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 26 Apr 2026 20:43:58 +0200
Subject: [PATCH 01/14] 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 +-
 templates/repo/settings/actions_general.tmpl |    4 +-
 templates/repo/settings/collaboration.tmpl   |    8 +-
 tests/e2e/search-box.test.ts                 |   83 +
 tests/e2e/utils.ts                           |   28 +
 web_src/css/modules/search.css               |    2 +-
 web_src/fomantic/build/components/search.js  | 1565 ------------------
 web_src/fomantic/build/fomantic.js           |    1 -
 web_src/fomantic/theme.config.less           |    1 -
 web_src/js/features/comp/SearchRepoBox.ts    |   29 +-
 web_src/js/features/comp/SearchUserBox.ts    |   58 +-
 web_src/js/features/repo-settings.ts         |   31 +-
 web_src/js/modules/fomantic/search.ts        |  120 ++
 13 files changed, 291 insertions(+), 1643 deletions(-)
 create mode 100644 tests/e2e/search-box.test.ts
 delete mode 100644 web_src/fomantic/build/components/search.js
 create mode 100644 web_src/js/modules/fomantic/search.ts

diff --git a/templates/admin/badge/users.tmpl b/templates/admin/badge/users.tmpl
index 97d332010f..77d126acb9 100644
--- a/templates/admin/badge/users.tmpl
+++ b/templates/admin/badge/users.tmpl
@@ -4,8 +4,8 @@
 			{{.Title}}
 		</h4>
 		<div class="ui attached segment">
-			<form class="ui form" action="{{.Link}}" method="post">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+			<form class="ui form flex-text-block" action="{{.Link}}" method="post">
+				<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>
diff --git a/templates/repo/settings/actions_general.tmpl b/templates/repo/settings/actions_general.tmpl
index c4f5569834..8ea755cad3 100644
--- a/templates/repo/settings/actions_general.tmpl
+++ b/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">
-			<div id="search-user-box" class="ui search input tw-align-middle" data-include-orgs="true">
+		<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" 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>
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index 48c0269273..1e6d608542 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/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">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+			<form class="ui form flex-text-block" id="repo-collab-form" action="{{.Link}}" method="post">
+				<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">
-						<div id="search-team-box" class="ui search input tw-align-middle" data-org-name="{{.OrgName}}">
+					<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" 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>
diff --git a/tests/e2e/search-box.test.ts b/tests/e2e/search-box.test.ts
new file mode 100644
index 0000000000..db54d64ed8
--- /dev/null
+++ b/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);
+});
diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts
index 3f7c8ed3d1..049b80f504 100644
--- a/tests/e2e/utils.ts
+++ b/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(),
diff --git a/web_src/css/modules/search.css b/web_src/css/modules/search.css
index 647b7e27a3..532c979ece 100644
--- a/web_src/css/modules/search.css
+++ b/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;
diff --git a/web_src/fomantic/build/components/search.js b/web_src/fomantic/build/components/search.js
deleted file mode 100644
index 6f2c7ee699..0000000000
--- a/web_src/fomantic/build/components/search.js
+++ /dev/null
@@ -1,1565 +0,0 @@
-/*!
- * # Fomantic-UI - Search
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
-  return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
-  ? window
-  : (typeof self != 'undefined' && self.Math == Math)
-    ? self
-    : Function('return this')()
-;
-
-$.fn.search = function(parameters) {
-  var
-    $allModules     = $(this),
-    moduleSelector  = $allModules.selector || '',
-
-    time            = new Date().getTime(),
-    performance     = [],
-
-    query           = arguments[0],
-    methodInvoked   = (typeof query == 'string'),
-    queryArguments  = [].slice.call(arguments, 1),
-    returnedValue
-  ;
-  $(this)
-    .each(function() {
-      var
-        settings          = ( $.isPlainObject(parameters) )
-          ? $.extend(true, {}, $.fn.search.settings, parameters)
-          : $.extend({}, $.fn.search.settings),
-
-        className        = settings.className,
-        metadata         = settings.metadata,
-        regExp           = settings.regExp,
-        fields           = settings.fields,
-        selector         = settings.selector,
-        error            = settings.error,
-        namespace        = settings.namespace,
-
-        eventNamespace   = '.' + namespace,
-        moduleNamespace  = namespace + '-module',
-
-        $module          = $(this),
-        $prompt          = $module.find(selector.prompt),
-        $searchButton    = $module.find(selector.searchButton),
-        $results         = $module.find(selector.results),
-        $result          = $module.find(selector.result),
-        $category        = $module.find(selector.category),
-
-        element          = this,
-        instance         = $module.data(moduleNamespace),
-
-        disabledBubbled  = false,
-        resultsDismissed = false,
-
-        module
-      ;
-
-      module = {
-
-        initialize: function() {
-          module.verbose('Initializing module');
-          module.get.settings();
-          module.determine.searchFields();
-          module.bind.events();
-          module.set.type();
-          module.create.results();
-          module.instantiate();
-        },
-        instantiate: function() {
-          module.verbose('Storing instance of module', module);
-          instance = module;
-          $module
-            .data(moduleNamespace, module)
-          ;
-        },
-        destroy: function() {
-          module.verbose('Destroying instance');
-          $module
-            .off(eventNamespace)
-            .removeData(moduleNamespace)
-          ;
-        },
-
-        refresh: function() {
-          module.debug('Refreshing selector cache');
-          $prompt         = $module.find(selector.prompt);
-          $searchButton   = $module.find(selector.searchButton);
-          $category       = $module.find(selector.category);
-          $results        = $module.find(selector.results);
-          $result         = $module.find(selector.result);
-        },
-
-        refreshResults: function() {
-          $results = $module.find(selector.results);
-          $result  = $module.find(selector.result);
-        },
-
-        bind: {
-          events: function() {
-            module.verbose('Binding events to search');
-            if(settings.automatic) {
-              $module
-                .on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input)
-              ;
-              $prompt
-                .attr('autocomplete', 'off')
-              ;
-            }
-            $module
-              // prompt
-              .on('focus'     + eventNamespace, selector.prompt, module.event.focus)
-              .on('blur'      + eventNamespace, selector.prompt, module.event.blur)
-              .on('keydown'   + eventNamespace, selector.prompt, module.handleKeyboard)
-              // search button
-              .on('click'     + eventNamespace, selector.searchButton, module.query)
-              // results
-              .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
-              .on('mouseup'   + eventNamespace, selector.results, module.event.result.mouseup)
-              .on('click'     + eventNamespace, selector.result,  module.event.result.click)
-            ;
-          }
-        },
-
-        determine: {
-          searchFields: function() {
-            // this makes sure $.extend does not add specified search fields to default fields
-            // this is the only setting which should not extend defaults
-            if(parameters && parameters.searchFields !== undefined) {
-              settings.searchFields = parameters.searchFields;
-            }
-          }
-        },
-
-        event: {
-          input: function() {
-            if(settings.searchDelay) {
-              clearTimeout(module.timer);
-              module.timer = setTimeout(function() {
-                if(module.is.focused()) {
-                  module.query();
-                }
-              }, settings.searchDelay);
-            }
-            else {
-              module.query();
-            }
-          },
-          focus: function() {
-            module.set.focus();
-            if(settings.searchOnFocus && module.has.minimumCharacters() ) {
-              module.query(function() {
-                if(module.can.show() ) {
-                  module.showResults();
-                }
-              });
-            }
-          },
-          blur: function(event) {
-            var
-              pageLostFocus = (document.activeElement === this),
-              callback      = function() {
-                module.cancel.query();
-                module.remove.focus();
-                module.timer = setTimeout(module.hideResults, settings.hideDelay);
-              }
-            ;
-            if(pageLostFocus) {
-              return;
-            }
-            resultsDismissed = false;
-            if(module.resultsClicked) {
-              module.debug('Determining if user action caused search to close');
-              $module
-                .one('click.close' + eventNamespace, selector.results, function(event) {
-                  if(module.is.inMessage(event) || disabledBubbled) {
-                    $prompt.focus();
-                    return;
-                  }
-                  disabledBubbled = false;
-                  if( !module.is.animating() && !module.is.hidden()) {
-                    callback();
-                  }
-                })
-              ;
-            }
-            else {
-              module.debug('Input blurred without user action, closing results');
-              callback();
-            }
-          },
-          result: {
-            mousedown: function() {
-              module.resultsClicked = true;
-            },
-            mouseup: function() {
-              module.resultsClicked = false;
-            },
-            click: function(event) {
-              module.debug('Search result selected');
-              var
-                $result = $(this),
-                $title  = $result.find(selector.title).eq(0),
-                $link   = $result.is('a[href]')
-                  ? $result
-                  : $result.find('a[href]').eq(0),
-                href    = $link.attr('href')   || false,
-                target  = $link.attr('target') || false,
-                // title is used for result lookup
-                value   = ($title.length > 0)
-                  ? $title.text()
-                  : false,
-                results = module.get.results(),
-                result  = $result.data(metadata.result) || module.get.result(value, results)
-              ;
-              if(value) {
-                module.set.value(value);
-              }
-              if( $.isFunction(settings.onSelect) ) {
-                if(settings.onSelect.call(element, result, results) === false) {
-                  module.debug('Custom onSelect callback cancelled default select action');
-                  disabledBubbled = true;
-                  return;
-                }
-              }
-              module.hideResults();
-              if(href) {
-                event.preventDefault();
-                module.verbose('Opening search link found in result', $link);
-                if(target == '_blank' || event.ctrlKey) {
-                  window.open(href);
-                }
-                else {
-                  window.location.href = (href);
-                }
-              }
-            }
-          }
-        },
-        ensureVisible: function ensureVisible($el) {
-          var elTop, elBottom, resultsScrollTop, resultsHeight;
-
-          elTop = $el.position().top;
-          elBottom = elTop + $el.outerHeight(true);
-
-          resultsScrollTop = $results.scrollTop();
-          resultsHeight = $results.height()
-            parseInt($results.css('paddingTop'), 0) +
-            parseInt($results.css('paddingBottom'), 0);
-            
-          if (elTop < 0) {
-            $results.scrollTop(resultsScrollTop + elTop);
-          }
-
-          else if (resultsHeight < elBottom) {
-            $results.scrollTop(resultsScrollTop + (elBottom - resultsHeight));
-          }
-        },
-        handleKeyboard: function(event) {
-          var
-            // force selector refresh
-            $result         = $module.find(selector.result),
-            $category       = $module.find(selector.category),
-            $activeResult   = $result.filter('.' + className.active),
-            currentIndex    = $result.index( $activeResult ),
-            resultSize      = $result.length,
-            hasActiveResult = $activeResult.length > 0,
-
-            keyCode         = event.which,
-            keys            = {
-              backspace : 8,
-              enter     : 13,
-              escape    : 27,
-              upArrow   : 38,
-              downArrow : 40
-            },
-            newIndex
-          ;
-          // search shortcuts
-          if(keyCode == keys.escape) {
-            module.verbose('Escape key pressed, blurring search field');
-            module.hideResults();
-            resultsDismissed = true;
-          }
-          if( module.is.visible() ) {
-            if(keyCode == keys.enter) {
-              module.verbose('Enter key pressed, selecting active result');
-              if( $result.filter('.' + className.active).length > 0 ) {
-                module.event.result.click.call($result.filter('.' + className.active), event);
-                event.preventDefault();
-                return false;
-              }
-            }
-            else if(keyCode == keys.upArrow && hasActiveResult) {
-              module.verbose('Up key pressed, changing active result');
-              newIndex = (currentIndex - 1 < 0)
-                ? currentIndex
-                : currentIndex - 1
-              ;
-              $category
-                .removeClass(className.active)
-              ;
-              $result
-                .removeClass(className.active)
-                .eq(newIndex)
-                  .addClass(className.active)
-                  .closest($category)
-                    .addClass(className.active)
-              ;
-              module.ensureVisible($result.eq(newIndex));
-              event.preventDefault();
-            }
-            else if(keyCode == keys.downArrow) {
-              module.verbose('Down key pressed, changing active result');
-              newIndex = (currentIndex + 1 >= resultSize)
-                ? currentIndex
-                : currentIndex + 1
-              ;
-              $category
-                .removeClass(className.active)
-              ;
-              $result
-                .removeClass(className.active)
-                .eq(newIndex)
-                  .addClass(className.active)
-                  .closest($category)
-                    .addClass(className.active)
-              ;
-              module.ensureVisible($result.eq(newIndex));
-              event.preventDefault();
-            }
-          }
-          else {
-            // query shortcuts
-            if(keyCode == keys.enter) {
-              module.verbose('Enter key pressed, executing query');
-              module.query();
-              module.set.buttonPressed();
-              $prompt.one('keyup', module.remove.buttonFocus);
-            }
-          }
-        },
-
-        setup: {
-          api: function(searchTerm, callback) {
-            var
-              apiSettings = {
-                debug             : settings.debug,
-                on                : false,
-                cache             : settings.cache,
-                action            : 'search',
-                urlData           : {
-                  query : searchTerm
-                },
-                onSuccess         : function(response) {
-                  module.parse.response.call(element, response, searchTerm);
-                  callback();
-                },
-                onFailure         : function() {
-                  module.displayMessage(error.serverError);
-                  callback();
-                },
-                onAbort : function(response) {
-                },
-                onError           : module.error
-              }
-            ;
-            $.extend(true, apiSettings, settings.apiSettings);
-            module.verbose('Setting up API request', apiSettings);
-            $module.api(apiSettings);
-          }
-        },
-
-        can: {
-          useAPI: function() {
-            return $.fn.api !== undefined;
-          },
-          show: function() {
-            return module.is.focused() && !module.is.visible() && !module.is.empty();
-          },
-          transition: function() {
-            return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
-          }
-        },
-
-        is: {
-          animating: function() {
-            return $results.hasClass(className.animating);
-          },
-          hidden: function() {
-            return $results.hasClass(className.hidden);
-          },
-          inMessage: function(event) {
-            if(!event.target) {
-              return;
-            }
-            var
-              $target = $(event.target),
-              isInDOM = $.contains(document.documentElement, event.target)
-            ;
-            return (isInDOM && $target.closest(selector.message).length > 0);
-          },
-          empty: function() {
-            return ($results.html() === '');
-          },
-          visible: function() {
-            return ($results.filter(':visible').length > 0);
-          },
-          focused: function() {
-            return ($prompt.filter(':focus').length > 0);
-          }
-        },
-
-        get: {
-          settings: function() {
-            if($.isPlainObject(parameters) && parameters.searchFullText) {
-              settings.fullTextSearch = parameters.searchFullText;
-              module.error(settings.error.oldSearchSyntax, element);
-            }
-            if (settings.ignoreDiacritics && !String.prototype.normalize) {
-              settings.ignoreDiacritics = false;
-              module.error(error.noNormalize, element);
-            }
-          },
-          inputEvent: function() {
-            var
-              prompt = $prompt[0],
-              inputEvent   = (prompt !== undefined && prompt.oninput !== undefined)
-                ? 'input'
-                : (prompt !== undefined && prompt.onpropertychange !== undefined)
-                  ? 'propertychange'
-                  : 'keyup'
-            ;
-            return inputEvent;
-          },
-          value: function() {
-            return $prompt.val();
-          },
-          results: function() {
-            var
-              results = $module.data(metadata.results)
-            ;
-            return results;
-          },
-          result: function(value, results) {
-            var
-              result       = false
-            ;
-            value = (value !== undefined)
-              ? value
-              : module.get.value()
-            ;
-            results = (results !== undefined)
-              ? results
-              : module.get.results()
-            ;
-            if(settings.type === 'category') {
-              module.debug('Finding result that matches', value);
-              $.each(results, function(index, category) {
-                if(Array.isArray(category.results)) {
-                  result = module.search.object(value, category.results)[0];
-                  // don't continue searching if a result is found
-                  if(result) {
-                    return false;
-                  }
-                }
-              });
-            }
-            else {
-              module.debug('Finding result in results object', value);
-              result = module.search.object(value, results)[0];
-            }
-            return result || false;
-          },
-        },
-
-        select: {
-          firstResult: function() {
-            module.verbose('Selecting first result');
-            $result.first().addClass(className.active);
-          }
-        },
-
-        set: {
-          focus: function() {
-            $module.addClass(className.focus);
-          },
-          loading: function() {
-            $module.addClass(className.loading);
-          },
-          value: function(value) {
-            module.verbose('Setting search input value', value);
-            $prompt
-              .val(value)
-            ;
-          },
-          type: function(type) {
-            type = type || settings.type;
-            if(settings.type == 'category') {
-              $module.addClass(settings.type);
-            }
-          },
-          buttonPressed: function() {
-            $searchButton.addClass(className.pressed);
-          }
-        },
-
-        remove: {
-          loading: function() {
-            $module.removeClass(className.loading);
-          },
-          focus: function() {
-            $module.removeClass(className.focus);
-          },
-          buttonPressed: function() {
-            $searchButton.removeClass(className.pressed);
-          },
-          diacritics: function(text) {
-            return settings.ignoreDiacritics ?  text.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : text;
-          }
-        },
-
-        query: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          var
-            searchTerm = module.get.value(),
-            cache = module.read.cache(searchTerm)
-          ;
-          callback = callback || function() {};
-          if( module.has.minimumCharacters() )  {
-            if(cache) {
-              module.debug('Reading result from cache', searchTerm);
-              module.save.results(cache.results);
-              module.addResults(cache.html);
-              module.inject.id(cache.results);
-              callback();
-            }
-            else {
-              module.debug('Querying for', searchTerm);
-              if($.isPlainObject(settings.source) || Array.isArray(settings.source)) {
-                module.search.local(searchTerm);
-                callback();
-              }
-              else if( module.can.useAPI() ) {
-                module.search.remote(searchTerm, callback);
-              }
-              else {
-                module.error(error.source);
-                callback();
-              }
-            }
-            settings.onSearchQuery.call(element, searchTerm);
-          }
-          else {
-            module.hideResults();
-          }
-        },
-
-        search: {
-          local: function(searchTerm) {
-            var
-              results = module.search.object(searchTerm, settings.source),
-              searchHTML
-            ;
-            module.set.loading();
-            module.save.results(results);
-            module.debug('Returned full local search results', results);
-            if(settings.maxResults > 0) {
-              module.debug('Using specified max results', results);
-              results = results.slice(0, settings.maxResults);
-            }
-            if(settings.type == 'category') {
-              results = module.create.categoryResults(results);
-            }
-            searchHTML = module.generateResults({
-              results: results
-            });
-            module.remove.loading();
-            module.addResults(searchHTML);
-            module.inject.id(results);
-            module.write.cache(searchTerm, {
-              html    : searchHTML,
-              results : results
-            });
-          },
-          remote: function(searchTerm, callback) {
-            callback = $.isFunction(callback)
-              ? callback
-              : function(){}
-            ;
-            if($module.api('is loading')) {
-              $module.api('abort');
-            }
-            module.setup.api(searchTerm, callback);
-            $module
-              .api('query')
-            ;
-          },
-          object: function(searchTerm, source, searchFields) {
-            searchTerm = module.remove.diacritics(String(searchTerm));
-            var
-              results      = [],
-              exactResults = [],
-              fuzzyResults = [],
-              searchExp    = searchTerm.replace(regExp.escape, '\\$&'),
-              matchRegExp  = new RegExp(regExp.beginsWith + searchExp, 'i'),
-
-              // avoid duplicates when pushing results
-              addResult = function(array, result) {
-                var
-                  notResult      = ($.inArray(result, results) == -1),
-                  notFuzzyResult = ($.inArray(result, fuzzyResults) == -1),
-                  notExactResults = ($.inArray(result, exactResults) == -1)
-                ;
-                if(notResult && notFuzzyResult && notExactResults) {
-                  array.push(result);
-                }
-              }
-            ;
-            source = source || settings.source;
-            searchFields = (searchFields !== undefined)
-              ? searchFields
-              : settings.searchFields
-            ;
-
-            // search fields should be array to loop correctly
-            if(!Array.isArray(searchFields)) {
-              searchFields = [searchFields];
-            }
-
-            // exit conditions if no source
-            if(source === undefined || source === false) {
-              module.error(error.source);
-              return [];
-            }
-            // iterate through search fields looking for matches
-            $.each(searchFields, function(index, field) {
-              $.each(source, function(label, content) {
-                var
-                  fieldExists = (typeof content[field] == 'string') || (typeof content[field] == 'number')
-                ;
-                if(fieldExists) {
-                  var text;
-                  if (typeof content[field] === 'string'){  
-                      text = module.remove.diacritics(content[field]);
-                  } else {
-                      text = content[field].toString(); 
-                  }
-                  if( text.search(matchRegExp) !== -1) {
-                    // content starts with value (first in results)
-                    addResult(results, content);
-                  }
-                  else if(settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, text) ) {
-                    // content fuzzy matches (last in results)
-                    addResult(exactResults, content);
-                  }
-                  else if(settings.fullTextSearch == true && module.fuzzySearch(searchTerm, text) ) {
-                    // content fuzzy matches (last in results)
-                    addResult(fuzzyResults, content);
-                  }
-                }
-              });
-            });
-            $.merge(exactResults, fuzzyResults);
-            $.merge(results, exactResults);
-            return results;
-          }
-        },
-        exactSearch: function (query, term) {
-          query = query.toLowerCase();
-          term  = term.toLowerCase();
-          return term.indexOf(query) > -1;
-        },
-        fuzzySearch: function(query, term) {
-          var
-            termLength  = term.length,
-            queryLength = query.length
-          ;
-          if(typeof query !== 'string') {
-            return false;
-          }
-          query = query.toLowerCase();
-          term  = term.toLowerCase();
-          if(queryLength > termLength) {
-            return false;
-          }
-          if(queryLength === termLength) {
-            return (query === term);
-          }
-          search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) {
-            var
-              queryCharacter = query.charCodeAt(characterIndex)
-            ;
-            while(nextCharacterIndex < termLength) {
-              if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) {
-                continue search;
-              }
-            }
-            return false;
-          }
-          return true;
-        },
-
-        parse: {
-          response: function(response, searchTerm) {
-            if(Array.isArray(response)){
-                var o={};
-                o[fields.results]=response;
-                response = o;
-            }
-            var
-              searchHTML = module.generateResults(response)
-            ;
-            module.verbose('Parsing server response', response);
-            if(response !== undefined) {
-              if(searchTerm !== undefined && response[fields.results] !== undefined) {
-                module.addResults(searchHTML);
-                module.inject.id(response[fields.results]);
-                module.write.cache(searchTerm, {
-                  html    : searchHTML,
-                  results : response[fields.results]
-                });
-                module.save.results(response[fields.results]);
-              }
-            }
-          }
-        },
-
-        cancel: {
-          query: function() {
-            if( module.can.useAPI() ) {
-              $module.api('abort');
-            }
-          }
-        },
-
-        has: {
-          minimumCharacters: function() {
-            var
-              searchTerm    = module.get.value(),
-              numCharacters = searchTerm.length
-            ;
-            return (numCharacters >= settings.minCharacters);
-          },
-          results: function() {
-            if($results.length === 0) {
-              return false;
-            }
-            var
-              html = $results.html()
-            ;
-            return html != '';
-          }
-        },
-
-        clear: {
-          cache: function(value) {
-            var
-              cache = $module.data(metadata.cache)
-            ;
-            if(!value) {
-              module.debug('Clearing cache', value);
-              $module.removeData(metadata.cache);
-            }
-            else if(value && cache && cache[value]) {
-              module.debug('Removing value from cache', value);
-              delete cache[value];
-              $module.data(metadata.cache, cache);
-            }
-          }
-        },
-
-        read: {
-          cache: function(name) {
-            var
-              cache = $module.data(metadata.cache)
-            ;
-            if(settings.cache) {
-              module.verbose('Checking cache for generated html for query', name);
-              return (typeof cache == 'object') && (cache[name] !== undefined)
-                ? cache[name]
-                : false
-              ;
-            }
-            return false;
-          }
-        },
-
-        create: {
-          categoryResults: function(results) {
-            var
-              categoryResults = {}
-            ;
-            $.each(results, function(index, result) {
-              if(!result.category) {
-                return;
-              }
-              if(categoryResults[result.category] === undefined) {
-                module.verbose('Creating new category of results', result.category);
-                categoryResults[result.category] = {
-                  name    : result.category,
-                  results : [result]
-                };
-              }
-              else {
-                categoryResults[result.category].results.push(result);
-              }
-            });
-            return categoryResults;
-          },
-          id: function(resultIndex, categoryIndex) {
-            var
-              resultID      = (resultIndex + 1), // not zero indexed
-              letterID,
-              id
-            ;
-            if(categoryIndex !== undefined) {
-              // start char code for "A"
-              letterID = String.fromCharCode(97 + categoryIndex);
-              id          = letterID + resultID;
-              module.verbose('Creating category result id', id);
-            }
-            else {
-              id = resultID;
-              module.verbose('Creating result id', id);
-            }
-            return id;
-          },
-          results: function() {
-            if($results.length === 0) {
-              $results = $('<div />')
-                .addClass(className.results)
-                .appendTo($module)
-              ;
-            }
-          }
-        },
-
-        inject: {
-          result: function(result, resultIndex, categoryIndex) {
-            module.verbose('Injecting result into results');
-            var
-              $selectedResult = (categoryIndex !== undefined)
-                ? $results
-                    .children().eq(categoryIndex)
-                      .children(selector.results)
-                        .first()
-                        .children(selector.result)
-                          .eq(resultIndex)
-                : $results
-                    .children(selector.result).eq(resultIndex)
-            ;
-            module.verbose('Injecting results metadata', $selectedResult);
-            $selectedResult
-              .data(metadata.result, result)
-            ;
-          },
-          id: function(results) {
-            module.debug('Injecting unique ids into results');
-            var
-              // since results may be object, we must use counters
-              categoryIndex = 0,
-              resultIndex   = 0
-            ;
-            if(settings.type === 'category') {
-              // iterate through each category result
-              $.each(results, function(index, category) {
-                if(category.results.length > 0){
-                  resultIndex = 0;
-                  $.each(category.results, function(index, result) {
-                    if(result.id === undefined) {
-                      result.id = module.create.id(resultIndex, categoryIndex);
-                    }
-                    module.inject.result(result, resultIndex, categoryIndex);
-                    resultIndex++;
-                  });
-                  categoryIndex++;
-                }
-              });
-            }
-            else {
-              // top level
-              $.each(results, function(index, result) {
-                if(result.id === undefined) {
-                  result.id = module.create.id(resultIndex);
-                }
-                module.inject.result(result, resultIndex);
-                resultIndex++;
-              });
-            }
-            return results;
-          }
-        },
-
-        save: {
-          results: function(results) {
-            module.verbose('Saving current search results to metadata', results);
-            $module.data(metadata.results, results);
-          }
-        },
-
-        write: {
-          cache: function(name, value) {
-            var
-              cache = ($module.data(metadata.cache) !== undefined)
-                ? $module.data(metadata.cache)
-                : {}
-            ;
-            if(settings.cache) {
-              module.verbose('Writing generated html to cache', name, value);
-              cache[name] = value;
-              $module
-                .data(metadata.cache, cache)
-              ;
-            }
-          }
-        },
-
-        addResults: function(html) {
-          if( $.isFunction(settings.onResultsAdd) ) {
-            if( settings.onResultsAdd.call($results, html) === false ) {
-              module.debug('onResultsAdd callback cancelled default action');
-              return false;
-            }
-          }
-          if(html) {
-            $results
-              .html(html)
-            ;
-            module.refreshResults();
-            if(settings.selectFirstResult) {
-              module.select.firstResult();
-            }
-            module.showResults();
-          }
-          else {
-            module.hideResults(function() {
-              $results.empty();
-            });
-          }
-        },
-
-        showResults: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          if(resultsDismissed) {
-            return;
-          }
-          if(!module.is.visible() && module.has.results()) {
-            if( module.can.transition() ) {
-              module.debug('Showing results with css animations');
-              $results
-                .transition({
-                  animation  : settings.transition + ' in',
-                  debug      : settings.debug,
-                  verbose    : settings.verbose,
-                  duration   : settings.duration,
-                  onShow     : function() {
-                    var $firstResult = $module.find(selector.result).eq(0);
-                    if($firstResult.length > 0) {
-                      module.ensureVisible($firstResult);
-                    }
-                  },
-                  onComplete : function() {
-                    callback();
-                  },
-                  queue      : true
-                })
-              ;
-            }
-            else {
-              module.debug('Showing results with javascript');
-              $results
-                .stop()
-                .fadeIn(settings.duration, settings.easing)
-              ;
-            }
-            settings.onResultsOpen.call($results);
-          }
-        },
-        hideResults: function(callback) {
-          callback = $.isFunction(callback)
-            ? callback
-            : function(){}
-          ;
-          if( module.is.visible() ) {
-            if( module.can.transition() ) {
-              module.debug('Hiding results with css animations');
-              $results
-                .transition({
-                  animation  : settings.transition + ' out',
-                  debug      : settings.debug,
-                  verbose    : settings.verbose,
-                  duration   : settings.duration,
-                  onComplete : function() {
-                    callback();
-                  },
-                  queue      : true
-                })
-              ;
-            }
-            else {
-              module.debug('Hiding results with javascript');
-              $results
-                .stop()
-                .fadeOut(settings.duration, settings.easing)
-              ;
-            }
-            settings.onResultsClose.call($results);
-          }
-        },
-
-        generateResults: function(response) {
-          module.debug('Generating html from response', response);
-          var
-            template       = settings.templates[settings.type],
-            isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])),
-            isProperArray  = (Array.isArray(response[fields.results]) && response[fields.results].length > 0),
-            html           = ''
-          ;
-          if(isProperObject || isProperArray ) {
-            if(settings.maxResults > 0) {
-              if(isProperObject) {
-                if(settings.type == 'standard') {
-                  module.error(error.maxResults);
-                }
-              }
-              else {
-                response[fields.results] = response[fields.results].slice(0, settings.maxResults);
-              }
-            }
-            if($.isFunction(template)) {
-              html = template(response, fields, settings.preserveHTML);
-            }
-            else {
-              module.error(error.noTemplate, false);
-            }
-          }
-          else if(settings.showNoResults) {
-            html = module.displayMessage(error.noResults, 'empty', error.noResultsHeader);
-          }
-          settings.onResults.call(element, response);
-          return html;
-        },
-
-        displayMessage: function(text, type, header) {
-          type = type || 'standard';
-          module.debug('Displaying message', text, type, header);
-          module.addResults( settings.templates.message(text, type, header) );
-          return settings.templates.message(text, type, header);
-        },
-
-        setting: function(name, value) {
-          if( $.isPlainObject(name) ) {
-            $.extend(true, settings, name);
-          }
-          else if(value !== undefined) {
-            settings[name] = value;
-          }
-          else {
-            return settings[name];
-          }
-        },
-        internal: function(name, value) {
-          if( $.isPlainObject(name) ) {
-            $.extend(true, module, name);
-          }
-          else if(value !== undefined) {
-            module[name] = value;
-          }
-          else {
-            return module[name];
-          }
-        },
-        debug: function() {
-          if(!settings.silent && settings.debug) {
-            if(settings.performance) {
-              module.performance.log(arguments);
-            }
-            else {
-              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
-              module.debug.apply(console, arguments);
-            }
-          }
-        },
-        verbose: function() {
-          if(!settings.silent && settings.verbose && settings.debug) {
-            if(settings.performance) {
-              module.performance.log(arguments);
-            }
-            else {
-              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
-              module.verbose.apply(console, arguments);
-            }
-          }
-        },
-        error: function() {
-          if(!settings.silent) {
-            module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
-            module.error.apply(console, arguments);
-          }
-        },
-        performance: {
-          log: function(message) {
-            var
-              currentTime,
-              executionTime,
-              previousTime
-            ;
-            if(settings.performance) {
-              currentTime   = new Date().getTime();
-              previousTime  = time || currentTime;
-              executionTime = currentTime - previousTime;
-              time          = currentTime;
-              performance.push({
-                'Name'           : message[0],
-                'Arguments'      : [].slice.call(message, 1) || '',
-                'Element'        : element,
-                'Execution Time' : executionTime
-              });
-            }
-            clearTimeout(module.performance.timer);
-            module.performance.timer = setTimeout(module.performance.display, 500);
-          },
-          display: function() {
-            var
-              title = settings.name + ':',
-              totalTime = 0
-            ;
-            time = false;
-            clearTimeout(module.performance.timer);
-            $.each(performance, function(index, data) {
-              totalTime += data['Execution Time'];
-            });
-            title += ' ' + totalTime + 'ms';
-            if(moduleSelector) {
-              title += ' \'' + moduleSelector + '\'';
-            }
-            if($allModules.length > 1) {
-              title += ' ' + '(' + $allModules.length + ')';
-            }
-            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-              console.groupCollapsed(title);
-              if(console.table) {
-                console.table(performance);
-              }
-              else {
-                $.each(performance, function(index, data) {
-                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
-                });
-              }
-              console.groupEnd();
-            }
-            performance = [];
-          }
-        },
-        invoke: function(query, passedArguments, context) {
-          var
-            object = instance,
-            maxDepth,
-            found,
-            response
-          ;
-          passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
-          if(typeof query == 'string' && object !== undefined) {
-            query    = query.split(/[\. ]/);
-            maxDepth = query.length - 1;
-            $.each(query, function(depth, value) {
-              var camelCaseValue = (depth != maxDepth)
-                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
-                : query
-              ;
-              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
-                object = object[camelCaseValue];
-              }
-              else if( object[camelCaseValue] !== undefined ) {
-                found = object[camelCaseValue];
-                return false;
-              }
-              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
-                object = object[value];
-              }
-              else if( object[value] !== undefined ) {
-                found = object[value];
-                return false;
-              }
-              else {
-                return false;
-              }
-            });
-          }
-          if( $.isFunction( found ) ) {
-            response = found.apply(context, passedArguments);
-          }
-          else if(found !== undefined) {
-            response = found;
-          }
-          if(Array.isArray(returnedValue)) {
-            returnedValue.push(response);
-          }
-          else if(returnedValue !== undefined) {
-            returnedValue = [returnedValue, response];
-          }
-          else if(response !== undefined) {
-            returnedValue = response;
-          }
-          return found;
-        }
-      };
-      if(methodInvoked) {
-        if(instance === undefined) {
-          module.initialize();
-        }
-        module.invoke(query);
-      }
-      else {
-        if(instance !== undefined) {
-          instance.invoke('destroy');
-        }
-        module.initialize();
-      }
-
-    })
-  ;
-
-  return (returnedValue !== undefined)
-    ? returnedValue
-    : this
-  ;
-};
-
-$.fn.search.settings = {
-
-  name              : 'Search',
-  namespace         : 'search',
-
-  silent            : false,
-  debug             : false,
-  verbose           : false,
-  performance       : true,
-
-  // template to use (specified in settings.templates)
-  type              : 'standard',
-
-  // minimum characters required to search
-  minCharacters     : 1,
-
-  // whether to select first result after searching automatically
-  selectFirstResult : false,
-
-  // API config
-  apiSettings       : false,
-
-  // object to search
-  source            : false,
-
-  // Whether search should query current term on focus
-  searchOnFocus     : true,
-
-  // fields to search
-  searchFields   : [
-    'id',
-    'title',
-    'description'
-  ],
-
-  // field to display in standard results template
-  displayField   : '',
-
-  // search anywhere in value (set to 'exact' to require exact matches
-  fullTextSearch : 'exact',
-
-  // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
-  ignoreDiacritics : false,
-
-  // whether to add events to prompt automatically
-  automatic      : true,
-
-  // delay before hiding menu after blur
-  hideDelay      : 0,
-
-  // delay before searching
-  searchDelay    : 200,
-
-  // maximum results returned from search
-  maxResults     : 7,
-
-  // whether to store lookups in local cache
-  cache          : true,
-
-  // whether no results errors should be shown
-  showNoResults  : true,
-
-  // preserve possible html of resultset values
-  preserveHTML   : true,
-
-  // transition settings
-  transition     : 'scale',
-  duration       : 200,
-  easing         : 'easeOutExpo',
-
-  // callbacks
-  onSelect       : false,
-  onResultsAdd   : false,
-
-  onSearchQuery  : function(query){},
-  onResults      : function(response){},
-
-  onResultsOpen  : function(){},
-  onResultsClose : function(){},
-
-  className: {
-    animating : 'animating',
-    active    : 'active',
-    empty     : 'empty',
-    focus     : 'focus',
-    hidden    : 'hidden',
-    loading   : 'loading',
-    results   : 'results',
-    pressed   : 'down'
-  },
-
-  error : {
-    source          : 'Cannot search. No source used, and Semantic API module was not included',
-    noResultsHeader : 'No Results',
-    noResults       : 'Your search returned no results',
-    logging         : 'Error in debug logging, exiting.',
-    noEndpoint      : 'No search endpoint was specified',
-    noTemplate      : 'A valid template name was not specified.',
-    oldSearchSyntax : 'searchFullText setting has been renamed fullTextSearch for consistency, please adjust your settings.',
-    serverError     : 'There was an issue querying the server.',
-    maxResults      : 'Results must be an array to use maxResults setting',
-    method          : 'The method you called is not defined.',
-    noNormalize     : '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including <https://cdn.jsdelivr.net/npm/unorm@1.4.1/lib/unorm.min.js> as a polyfill.'
-  },
-
-  metadata: {
-    cache   : 'cache',
-    results : 'results',
-    result  : 'result'
-  },
-
-  regExp: {
-    escape     : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
-    beginsWith : '(?:\s|^)'
-  },
-
-  // maps api response attributes to internal representation
-  fields: {
-    categories      : 'results',     // array of categories (category view)
-    categoryName    : 'name',        // name of category (category view)
-    categoryResults : 'results',     // array of results (category view)
-    description     : 'description', // result description
-    image           : 'image',       // result image
-    price           : 'price',       // result price
-    results         : 'results',     // array of results (standard)
-    title           : 'title',       // result title
-    url             : 'url',         // result url
-    action          : 'action',      // "view more" object name
-    actionText      : 'text',        // "view more" text
-    actionURL       : 'url'          // "view more" url
-  },
-
-  selector : {
-    prompt       : '.prompt',
-    searchButton : '.search.button',
-    results      : '.results',
-    message      : '.results > .message',
-    category     : '.category',
-    result       : '.result',
-    title        : '.title, .name'
-  },
-
-  templates: {
-    escape: function(string, preserveHTML) {
-      if (preserveHTML){
-        return string;
-      }
-      var
-        badChars     = /[<>"'`]/g,
-        shouldEscape = /[&<>"'`]/,
-        escape       = {
-          "<": "&lt;",
-          ">": "&gt;",
-          '"': "&quot;",
-          "'": "&#x27;",
-          "`": "&#x60;"
-        },
-        escapedChar  = function(chr) {
-          return escape[chr];
-        }
-      ;
-      if(shouldEscape.test(string)) {
-        string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
-        return string.replace(badChars, escapedChar);
-      }
-      return string;
-    },
-    message: function(message, type, header) {
-      var
-        html = ''
-      ;
-      if(message !== undefined && type !== undefined) {
-        html +=  ''
-          + '<div class="message ' + type + '">'
-        ;
-        if(header) {
-          html += ''
-          + '<div class="header">' + header + '</div>'
-          ;
-        }
-        html += ' <div class="description">' + message + '</div>';
-        html += '</div>';
-      }
-      return html;
-    },
-    category: function(response, fields, preserveHTML) {
-      var
-        html = '',
-        escape = $.fn.search.settings.templates.escape
-      ;
-      if(response[fields.categoryResults] !== undefined) {
-
-        // each category
-        $.each(response[fields.categoryResults], function(index, category) {
-          if(category[fields.results] !== undefined && category.results.length > 0) {
-
-            html  += '<div class="category">';
-
-            if(category[fields.categoryName] !== undefined) {
-              html += '<div class="name">' + escape(category[fields.categoryName], preserveHTML) + '</div>';
-            }
-
-            // each item inside category
-            html += '<div class="results">';
-            $.each(category.results, function(index, result) {
-              if(result[fields.url]) {
-                html  += '<a class="result" href="' + result[fields.url].replace(/"/g,"") + '">';
-              }
-              else {
-                html  += '<a class="result">';
-              }
-              if(result[fields.image] !== undefined) {
-                html += ''
-                  + '<div class="image">'
-                  + ' <img src="' + result[fields.image].replace(/"/g,"") + '">'
-                  + '</div>'
-                ;
-              }
-              html += '<div class="content">';
-              if(result[fields.price] !== undefined) {
-                html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
-              }
-              if(result[fields.title] !== undefined) {
-                html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
-              }
-              if(result[fields.description] !== undefined) {
-                html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
-              }
-              html  += ''
-                + '</div>'
-              ;
-              html += '</a>';
-            });
-            html += '</div>';
-            html  += ''
-              + '</div>'
-            ;
-          }
-        });
-        if(response[fields.action]) {
-          if(fields.actionURL === false) {
-            html += ''
-            + '<div class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</div>';
-          } else {
-            html += ''
-            + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g,"") + '" class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</a>';
-          }
-        }
-        return html;
-      }
-      return false;
-    },
-    standard: function(response, fields, preserveHTML) {
-      var
-        html = '',
-        escape = $.fn.search.settings.templates.escape
-      ;
-      if(response[fields.results] !== undefined) {
-
-        // each result
-        $.each(response[fields.results], function(index, result) {
-          if(result[fields.url]) {
-            html  += '<a class="result" href="' + result[fields.url].replace(/"/g,"") + '">';
-          }
-          else {
-            html  += '<a class="result">';
-          }
-          if(result[fields.image] !== undefined) {
-            html += ''
-              + '<div class="image">'
-              + ' <img src="' + result[fields.image].replace(/"/g,"") + '">'
-              + '</div>'
-            ;
-          }
-          html += '<div class="content">';
-          if(result[fields.price] !== undefined) {
-            html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
-          }
-          if(result[fields.title] !== undefined) {
-            html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
-          }
-          if(result[fields.description] !== undefined) {
-            html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
-          }
-          html  += ''
-            + '</div>'
-          ;
-          html += '</a>';
-        });
-        if(response[fields.action]) {
-          if(fields.actionURL === false) {
-            html += ''
-            + '<div class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</div>';
-          } else {
-            html += ''
-            + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g,"") + '" class="action">'
-            +   escape(response[fields.action][fields.actionText], preserveHTML)
-            + '</a>';
-          }
-        }
-        return html;
-      }
-      return false;
-    }
-  }
-};
-
-})( jQuery, window, document );
diff --git a/web_src/fomantic/build/fomantic.js b/web_src/fomantic/build/fomantic.js
index c903fd1633..8cc8652482 100644
--- a/web_src/fomantic/build/fomantic.js
+++ b/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"
diff --git a/web_src/fomantic/theme.config.less b/web_src/fomantic/theme.config.less
index 632ddce07f..8507c4af9b 100644
--- a/web_src/fomantic/theme.config.less
+++ b/web_src/fomantic/theme.config.less
@@ -44,7 +44,6 @@
 @progress   : 'default';
 @slider     : 'default';
 @rating     : 'default';
-@search     : 'default';
 @shape      : 'default';
 @sidebar    : 'default';
 @sticky     : 'default';
diff --git a/web_src/js/features/comp/SearchRepoBox.ts b/web_src/js/features/comp/SearchRepoBox.ts
index c87240b67a..ca2a48e1b1 100644
--- a/web_src/js/features/comp/SearchRepoBox.ts
+++ b/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,
   });
 }
diff --git a/web_src/js/features/comp/SearchUserBox.ts b/web_src/js/features/comp/SearchUserBox.ts
index f5680078a3..c4529eee08 100644
--- a/web_src/js/features/comp/SearchUserBox.ts
+++ b/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,
   });
 }
diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts
index f3b95178f3..50437b13c4 100644
--- a/web_src/js/features/repo-settings.ts
+++ b/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({
-    minCharacters: 2,
-    searchFields: ['name', 'description'],
-    showNoResults: false,
-    rawResponse: true,
-    apiSettings: {
-      url: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
-      onResponse(response: any) {
-        const items: Array<Record<string, any>> = [];
-        for (const item of response.data) {
-          items.push({
-            title: item.name,
-            description: `${item.permission} access`, // TODO: translate this string
-          });
-        }
-        return {results: items};
-      },
+  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};
     },
   });
 }
diff --git a/web_src/js/modules/fomantic/search.ts b/web_src/js/modules/fomantic/search.ts
new file mode 100644
index 0000000000..e112bde5d3
--- /dev/null
+++ b/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
+  });
+}

From cfe9e70e3e4b250b3079e24d58234fe7008a5cf5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 26 Apr 2026 20:51:47 +0200
Subject: [PATCH 02/14] Trim e2e to a single minimal collaborator-search test

Three boxes (repo/user/team) all share the same first-party module, so
one happy-path test on the user box is sufficient as a regression
gate. Drops the org/team helpers in tests/e2e/utils.ts that only those
extra tests motivated.

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 tests/e2e/repo-collab.test.ts | 22 ++++++++++
 tests/e2e/search-box.test.ts  | 83 -----------------------------------
 tests/e2e/utils.ts            | 28 ------------
 3 files changed, 22 insertions(+), 111 deletions(-)
 create mode 100644 tests/e2e/repo-collab.test.ts
 delete mode 100644 tests/e2e/search-box.test.ts

diff --git a/tests/e2e/repo-collab.test.ts b/tests/e2e/repo-collab.test.ts
new file mode 100644
index 0000000000..bc4f9329ca
--- /dev/null
+++ b/tests/e2e/repo-collab.test.ts
@@ -0,0 +1,22 @@
+import {env} from 'node:process';
+import {test, expect} from '@playwright/test';
+import {apiCreateRepo, apiCreateUser, login, randomString} from './utils.ts';
+
+test('add collaborator search', async ({page, request}) => {
+  const target = `rc-${randomString(8)}`;
+  const repoName = `rc-${randomString(8)}`;
+
+  await apiCreateUser(request, target);
+  await Promise.all([
+    apiCreateRepo(request, {name: repoName, autoInit: false}),
+    login(page),
+  ]);
+
+  await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/settings/collaboration`);
+  const input = page.locator('#search-user-box input.prompt');
+  await input.fill(target.slice(-6));
+  const result = page.locator('#search-user-box .results .result').first();
+  await expect(result).toContainText(target);
+  await result.click();
+  await expect(input).toHaveValue(target);
+});
diff --git a/tests/e2e/search-box.test.ts b/tests/e2e/search-box.test.ts
deleted file mode 100644
index db54d64ed8..0000000000
--- a/tests/e2e/search-box.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-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);
-});
diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts
index 049b80f504..3f7c8ed3d1 100644
--- a/tests/e2e/utils.ts
+++ b/tests/e2e/utils.ts
@@ -47,34 +47,6 @@ 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(),

From 2ecee0bb0ae33582c0d934d74b273b871b82ce42 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 26 Apr 2026 21:05:36 +0200
Subject: [PATCH 03/14] 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 |  30 +++---
 web_src/js/features/comp/SearchUserBox.ts |  58 +++++------
 web_src/js/features/repo-settings.ts      |  31 +++---
 web_src/js/modules/fomantic/search.ts     | 120 ----------------------
 web_src/js/modules/search.ts              | 114 ++++++++++++++++++++
 5 files changed, 164 insertions(+), 189 deletions(-)
 delete mode 100644 web_src/js/modules/fomantic/search.ts
 create mode 100644 web_src/js/modules/search.ts

diff --git a/web_src/js/features/comp/SearchRepoBox.ts b/web_src/js/features/comp/SearchRepoBox.ts
index ca2a48e1b1..629f7cebbd 100644
--- a/web_src/js/features/comp/SearchRepoBox.ts
+++ b/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};
-    },
-  });
 }
diff --git a/web_src/js/features/comp/SearchUserBox.ts b/web_src/js/features/comp/SearchUserBox.ts
index c4529eee08..c812bc6b0e 100644
--- a/web_src/js/features/comp/SearchUserBox.ts
+++ b/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}));
+  }
 }
diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts
index 50437b13c4..6fabb2b9c1 100644
--- a/web_src/js/features/repo-settings.ts
+++ b/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() {
diff --git a/web_src/js/modules/fomantic/search.ts b/web_src/js/modules/fomantic/search.ts
deleted file mode 100644
index e112bde5d3..0000000000
--- a/web_src/js/modules/fomantic/search.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-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
-  });
-}
diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
new file mode 100644
index 0000000000..4e87da02c1
--- /dev/null
+++ b/web_src/js/modules/search.ts
@@ -0,0 +1,114 @@
+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;
+};
+
+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">${result.description}</div>` : '';
+  return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
+}
+
+// Awaits one user selection from an autocomplete attached to `container`. Resolves with
+// the chosen item; the caller writes it to whatever input/state it owns. Wrap in a loop
+// to keep the search box live across selections.
+export function chooseFromApi(container: HTMLElement, url: string, parse: (raw: any, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): Promise<SearchResult> {
+  return new Promise((resolve) => {
+    const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input')!;
+
+    let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
+    if (!resultsEl) {
+      resultsEl = document.createElement('div');
+      resultsEl.className = 'results';
+      container.append(resultsEl);
+    }
+
+    let fetchController: AbortController | null = null;
+    const lifecycleController = new AbortController();
+    const itemResults = new Map<HTMLElement, SearchResult>();
+    const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
+
+    const hide = () => {
+      resultsEl.style.display = 'none';
+      resultsEl.replaceChildren();
+      itemResults.clear();
+    };
+
+    const render = (results: SearchResult[]) => {
+      if (!results.length) return hide();
+      resultsEl.replaceChildren();
+      itemResults.clear();
+      for (const result of results) {
+        const item = document.createElement('div');
+        item.className = 'result';
+        item.innerHTML = buildResultHTML(result);
+        itemResults.set(item, result);
+        resultsEl.append(item);
+      }
+      resultsEl.style.display = 'block';
+    };
+
+    const finish = (item: HTMLElement) => {
+      const picked = itemResults.get(item)!;
+      hide();
+      lifecycleController.abort();
+      resolve(picked);
+    };
+
+    const performSearch = async (query: string) => {
+      fetchController?.abort();
+      if (query.length < minCharacters) return hide();
+      fetchController = new AbortController();
+      try {
+        const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: fetchController.signal});
+        if (!response.ok) return hide();
+        const results = parse(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), {signal: lifecycleController.signal});
+    input.addEventListener('focus', () => { if (items().length) resultsEl.style.display = 'block'; }, {signal: lifecycleController.signal});
+    input.addEventListener('keydown', (event) => {
+      const all = items();
+      if (!all.length) return;
+      const activeIndex = Array.from(all).findIndex((it) => it.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();
+        finish(all[activeIndex]);
+      } else if (event.key === 'Escape') {
+        hide();
+      }
+    }, {signal: lifecycleController.signal});
+    // 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();
+      finish(target);
+    }, {signal: lifecycleController.signal});
+    document.addEventListener('click', (event) => {
+      if (!container.contains(event.target as Node)) hide();
+    }, {signal: lifecycleController.signal});
+    input.addEventListener('blur', () => setTimeout(hide, 150), {signal: lifecycleController.signal}); // deferred so a result mousedown can land first
+  });
+}

From fae5d792f428ea5cf45600351f04f825be7c5335 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 26 Apr 2026 21:07:19 +0200
Subject: [PATCH 04/14] Rename test var target to userName for clarity

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 tests/e2e/repo-collab.test.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/e2e/repo-collab.test.ts b/tests/e2e/repo-collab.test.ts
index bc4f9329ca..bf7497b9ad 100644
--- a/tests/e2e/repo-collab.test.ts
+++ b/tests/e2e/repo-collab.test.ts
@@ -3,10 +3,10 @@ import {test, expect} from '@playwright/test';
 import {apiCreateRepo, apiCreateUser, login, randomString} from './utils.ts';
 
 test('add collaborator search', async ({page, request}) => {
-  const target = `rc-${randomString(8)}`;
+  const userName = `rc-${randomString(8)}`;
   const repoName = `rc-${randomString(8)}`;
 
-  await apiCreateUser(request, target);
+  await apiCreateUser(request, userName);
   await Promise.all([
     apiCreateRepo(request, {name: repoName, autoInit: false}),
     login(page),
@@ -14,9 +14,9 @@ test('add collaborator search', async ({page, request}) => {
 
   await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/settings/collaboration`);
   const input = page.locator('#search-user-box input.prompt');
-  await input.fill(target.slice(-6));
+  await input.fill(userName.slice(-6));
   const result = page.locator('#search-user-box .results .result').first();
-  await expect(result).toContainText(target);
+  await expect(result).toContainText(userName);
   await result.click();
-  await expect(input).toHaveValue(target);
+  await expect(input).toHaveValue(userName);
 });

From 4fd1adee5fdfbdeefa33391dc24344df38ab259a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 26 Apr 2026 21:08:07 +0200
Subject: [PATCH 05/14] Expand rc- prefix to repo-collab- for clarity

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 tests/e2e/repo-collab.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/repo-collab.test.ts b/tests/e2e/repo-collab.test.ts
index bf7497b9ad..a7ce81e7c0 100644
--- a/tests/e2e/repo-collab.test.ts
+++ b/tests/e2e/repo-collab.test.ts
@@ -3,8 +3,8 @@ import {test, expect} from '@playwright/test';
 import {apiCreateRepo, apiCreateUser, login, randomString} from './utils.ts';
 
 test('add collaborator search', async ({page, request}) => {
-  const userName = `rc-${randomString(8)}`;
-  const repoName = `rc-${randomString(8)}`;
+  const userName = `repo-collab-${randomString(8)}`;
+  const repoName = `repo-collab-${randomString(8)}`;
 
   await apiCreateUser(request, userName);
   await Promise.all([

From 26cdb902c9211bcacb12fb1f78617c03ceec1d06 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 26 Apr 2026 21:15:54 +0200
Subject: [PATCH 06/14] Tighten search-box types, expand test prefix, drop
 stale CSS comment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- chooseFromApi is now generic over the response shape; each caller
  declares a typed *SearchResponse, removing four `any` annotations
- e2e test prefix: rc- → repo-collab- for legibility in the test DB
- web_src/css/modules/search.css: drop the stale leading comment

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/css/modules/search.css            | 2 --
 web_src/js/features/comp/SearchRepoBox.ts | 4 +++-
 web_src/js/features/comp/SearchUserBox.ts | 4 +++-
 web_src/js/features/repo-settings.ts      | 4 +++-
 web_src/js/modules/search.ts              | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web_src/css/modules/search.css b/web_src/css/modules/search.css
index 532c979ece..7cf91d032f 100644
--- a/web_src/css/modules/search.css
+++ b/web_src/css/modules/search.css
@@ -1,5 +1,3 @@
-/* Styles for the first-party search-box autocomplete (web_src/js/modules/fomantic/search.ts) */
-
 .ui.search {
   position: relative;
 }
diff --git a/web_src/js/features/comp/SearchRepoBox.ts b/web_src/js/features/comp/SearchRepoBox.ts
index 629f7cebbd..46e7456468 100644
--- a/web_src/js/features/comp/SearchRepoBox.ts
+++ b/web_src/js/features/comp/SearchRepoBox.ts
@@ -2,6 +2,8 @@ import {chooseFromApi} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 
+type RepoSearchResponse = {data: Array<{repository: {full_name: string}}>};
+
 export async function initCompSearchRepoBox(el: HTMLElement) {
   const uid = el.getAttribute('data-uid');
   const exclusive = el.getAttribute('data-exclusive');
@@ -10,7 +12,7 @@ export async function initCompSearchRepoBox(el: HTMLElement) {
   const input = el.querySelector<HTMLInputElement>('input.prompt')!;
 
   while (el.isConnected) {
-    const pick = await chooseFromApi(el, url, (response: any) => response.data.map((item: any) => ({
+    const pick = await chooseFromApi<RepoSearchResponse>(el, url, (response) => response.data.map((item) => ({
       title: item.repository.full_name.split('/')[1],
       description: item.repository.full_name,
     })));
diff --git a/web_src/js/features/comp/SearchUserBox.ts b/web_src/js/features/comp/SearchUserBox.ts
index c812bc6b0e..b4850db46f 100644
--- a/web_src/js/features/comp/SearchUserBox.ts
+++ b/web_src/js/features/comp/SearchUserBox.ts
@@ -3,6 +3,8 @@ import {chooseFromApi, type SearchResult} from '../../modules/search.ts';
 const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
+type UserSearchResponse = {data: Array<{login: string; avatar_url: string; full_name: string}>};
+
 export async function initCompSearchUserBox() {
   const box = document.querySelector<HTMLElement>('#search-user-box');
   if (!box) return;
@@ -14,7 +16,7 @@ export async function initCompSearchUserBox() {
   const input = box.querySelector<HTMLInputElement>('input.prompt')!;
 
   while (box.isConnected) {
-    const pick = await chooseFromApi(box, url, (response: any, query: string) => {
+    const pick = await chooseFromApi<UserSearchResponse>(box, url, (response, query) => {
       const items: SearchResult[] = [];
       const queryUpper = query.toUpperCase();
       for (const item of response.data) {
diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts
index 6fabb2b9c1..a0815212fe 100644
--- a/web_src/js/features/repo-settings.ts
+++ b/web_src/js/features/repo-settings.ts
@@ -46,6 +46,8 @@ function initRepoSettingsCollaboration() {
   }
 }
 
+type TeamSearchResponse = {data: Array<{name: string; permission: string}>};
+
 async function initRepoSettingsSearchTeamBox() {
   const box = document.querySelector<HTMLElement>('#search-team-box');
   if (!box) return;
@@ -53,7 +55,7 @@ async function initRepoSettingsSearchTeamBox() {
   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) => ({
+    const pick = await chooseFromApi<TeamSearchResponse>(box, url, (response) => response.data.map((item) => ({
       title: item.name,
       description: `${item.permission} access`, // TODO: translate this string
     })));
diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
index 4e87da02c1..5f580de54c 100644
--- a/web_src/js/modules/search.ts
+++ b/web_src/js/modules/search.ts
@@ -17,7 +17,7 @@ function buildResultHTML(result: SearchResult): string {
 // Awaits one user selection from an autocomplete attached to `container`. Resolves with
 // the chosen item; the caller writes it to whatever input/state it owns. Wrap in a loop
 // to keep the search box live across selections.
-export function chooseFromApi(container: HTMLElement, url: string, parse: (raw: any, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): Promise<SearchResult> {
+export function chooseFromApi<T = unknown>(container: HTMLElement, url: string, parse: (raw: T, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): Promise<SearchResult> {
   return new Promise((resolve) => {
     const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input')!;
 

From 5859380a1202633858c5e103f324bc04258b392f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 Apr 2026 00:44:53 +0200
Subject: [PATCH 07/14] Convert search box to imperative attach API

- attachSearchBox(el, url, parse) replaces the await-style chooseFromApi
- The component handles input update + change-event dispatch on
  selection, so callers don't loop or write back the value themselves
- Each caller is now a single statement; response shape is conveyed via
  the parse callback's parameter annotation (T inferred)

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/comp/SearchRepoBox.ts |  18 +--
 web_src/js/features/comp/SearchUserBox.ts |  35 ++---
 web_src/js/features/repo-settings.ts      |  17 +--
 web_src/js/modules/search.ts              | 174 +++++++++++-----------
 4 files changed, 112 insertions(+), 132 deletions(-)

diff --git a/web_src/js/features/comp/SearchRepoBox.ts b/web_src/js/features/comp/SearchRepoBox.ts
index 46e7456468..51227bf509 100644
--- a/web_src/js/features/comp/SearchRepoBox.ts
+++ b/web_src/js/features/comp/SearchRepoBox.ts
@@ -1,22 +1,16 @@
-import {chooseFromApi} from '../../modules/search.ts';
+import {attachSearchBox} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 
 type RepoSearchResponse = {data: Array<{repository: {full_name: string}}>};
 
-export async function initCompSearchRepoBox(el: HTMLElement) {
+export 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`;
-  const input = el.querySelector<HTMLInputElement>('input.prompt')!;
-
-  while (el.isConnected) {
-    const pick = await chooseFromApi<RepoSearchResponse>(el, url, (response) => response.data.map((item) => ({
-      title: item.repository.full_name.split('/')[1],
-      description: item.repository.full_name,
-    })));
-    input.value = pick.title;
-    input.dispatchEvent(new Event('change', {bubbles: true}));
-  }
+  attachSearchBox(el, url, (response: RepoSearchResponse) => response.data.map((item) => ({
+    title: item.repository.full_name.split('/')[1],
+    description: item.repository.full_name,
+  })));
 }
diff --git a/web_src/js/features/comp/SearchUserBox.ts b/web_src/js/features/comp/SearchUserBox.ts
index b4850db46f..739b5c5994 100644
--- a/web_src/js/features/comp/SearchUserBox.ts
+++ b/web_src/js/features/comp/SearchUserBox.ts
@@ -1,11 +1,11 @@
-import {chooseFromApi, type SearchResult} from '../../modules/search.ts';
+import {attachSearchBox, type SearchResult} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
 type UserSearchResponse = {data: Array<{login: string; avatar_url: string; full_name: string}>};
 
-export async function initCompSearchUserBox() {
+export function initCompSearchUserBox() {
   const box = document.querySelector<HTMLElement>('#search-user-box');
   if (!box) return;
 
@@ -13,23 +13,18 @@ export async function initCompSearchUserBox() {
   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<UserSearchResponse>(box, url, (response, query) => {
-      const items: SearchResult[] = [];
-      const queryUpper = query.toUpperCase();
-      for (const item of response.data) {
-        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 && !items.length && looksLikeEmailAddressCheck.test(query)) {
-        items.push({title: query, description: allowEmailDescription});
-      }
-      return items;
-    });
-    input.value = pick.title;
-    input.dispatchEvent(new Event('change', {bubbles: true}));
-  }
+  attachSearchBox(box, url, (response: UserSearchResponse, query) => {
+    const items: SearchResult[] = [];
+    const queryUpper = query.toUpperCase();
+    for (const item of response.data) {
+      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 && !items.length && looksLikeEmailAddressCheck.test(query)) {
+      items.push({title: query, description: allowEmailDescription});
+    }
+    return items;
+  });
 }
diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts
index a0815212fe..f003200c3e 100644
--- a/web_src/js/features/repo-settings.ts
+++ b/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 {chooseFromApi} from '../modules/search.ts';
+import {attachSearchBox} from '../modules/search.ts';
 import {globMatch} from '../utils/glob.ts';
 
 const {appSubUrl} = window.config;
@@ -48,20 +48,15 @@ function initRepoSettingsCollaboration() {
 
 type TeamSearchResponse = {data: Array<{name: string; permission: string}>};
 
-async function initRepoSettingsSearchTeamBox() {
+function initRepoSettingsSearchTeamBox() {
   const box = document.querySelector<HTMLElement>('#search-team-box');
   if (!box) return;
 
   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<TeamSearchResponse>(box, url, (response) => response.data.map((item) => ({
-      title: item.name,
-      description: `${item.permission} access`, // TODO: translate this string
-    })));
-    input.value = pick.title;
-    input.dispatchEvent(new Event('change', {bubbles: true}));
-  }
+  attachSearchBox(box, url, (response: TeamSearchResponse) => response.data.map((item) => ({
+    title: item.name,
+    description: `${item.permission} access`, // TODO: translate this string
+  })));
 }
 
 function initRepoSettingsGitHook() {
diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
index 5f580de54c..6a7c481387 100644
--- a/web_src/js/modules/search.ts
+++ b/web_src/js/modules/search.ts
@@ -14,101 +14,97 @@ function buildResultHTML(result: SearchResult): string {
   return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
 }
 
-// Awaits one user selection from an autocomplete attached to `container`. Resolves with
-// the chosen item; the caller writes it to whatever input/state it owns. Wrap in a loop
-// to keep the search box live across selections.
-export function chooseFromApi<T = unknown>(container: HTMLElement, url: string, parse: (raw: T, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): Promise<SearchResult> {
-  return new Promise((resolve) => {
-    const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input')!;
+/** 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');
+  if (!input) return;
 
-    let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
-    if (!resultsEl) {
-      resultsEl = document.createElement('div');
-      resultsEl.className = 'results';
-      container.append(resultsEl);
+  let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
+  if (!resultsEl) {
+    resultsEl = document.createElement('div');
+    resultsEl.className = 'results';
+    container.append(resultsEl);
+  }
+
+  let fetchController: AbortController | null = null;
+  const itemResults = new Map<HTMLElement, SearchResult>();
+  const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
+
+  const hide = () => {
+    resultsEl.style.display = 'none';
+    resultsEl.replaceChildren();
+    itemResults.clear();
+  };
+
+  const render = (results: SearchResult[]) => {
+    if (!results.length) return hide();
+    resultsEl.replaceChildren();
+    itemResults.clear();
+    for (const result of results) {
+      const item = document.createElement('div');
+      item.className = 'result';
+      item.innerHTML = buildResultHTML(result);
+      itemResults.set(item, result);
+      resultsEl.append(item);
     }
+    resultsEl.style.display = 'block';
+  };
 
-    let fetchController: AbortController | null = null;
-    const lifecycleController = new AbortController();
-    const itemResults = new Map<HTMLElement, SearchResult>();
-    const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
+  const select = (item: HTMLElement) => {
+    const picked = itemResults.get(item)!;
+    input.value = picked.title;
+    input.dispatchEvent(new Event('change', {bubbles: true}));
+    hide();
+  };
 
-    const hide = () => {
-      resultsEl.style.display = 'none';
-      resultsEl.replaceChildren();
-      itemResults.clear();
-    };
+  const performSearch = async (query: string) => {
+    fetchController?.abort();
+    if (query.length < minCharacters) return hide();
+    fetchController = new AbortController();
+    try {
+      const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: fetchController.signal});
+      if (!response.ok) return hide();
+      const results = parse(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 render = (results: SearchResult[]) => {
-      if (!results.length) return hide();
-      resultsEl.replaceChildren();
-      itemResults.clear();
-      for (const result of results) {
-        const item = document.createElement('div');
-        item.className = 'result';
-        item.innerHTML = buildResultHTML(result);
-        itemResults.set(item, result);
-        resultsEl.append(item);
-      }
-      resultsEl.style.display = 'block';
-    };
+  const debounced = debounce(200, (query: string) => { performSearch(query) });
 
-    const finish = (item: HTMLElement) => {
-      const picked = itemResults.get(item)!;
-      hide();
-      lifecycleController.abort();
-      resolve(picked);
-    };
-
-    const performSearch = async (query: string) => {
-      fetchController?.abort();
-      if (query.length < minCharacters) return hide();
-      fetchController = new AbortController();
-      try {
-        const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: fetchController.signal});
-        if (!response.ok) return hide();
-        const results = parse(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), {signal: lifecycleController.signal});
-    input.addEventListener('focus', () => { if (items().length) resultsEl.style.display = 'block'; }, {signal: lifecycleController.signal});
-    input.addEventListener('keydown', (event) => {
-      const all = items();
-      if (!all.length) return;
-      const activeIndex = Array.from(all).findIndex((it) => it.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();
-        finish(all[activeIndex]);
-      } else if (event.key === 'Escape') {
-        hide();
-      }
-    }, {signal: lifecycleController.signal});
-    // 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;
+  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();
-      finish(target);
-    }, {signal: lifecycleController.signal});
-    document.addEventListener('click', (event) => {
-      if (!container.contains(event.target as Node)) hide();
-    }, {signal: lifecycleController.signal});
-    input.addEventListener('blur', () => setTimeout(hide, 150), {signal: lifecycleController.signal}); // deferred so a result mousedown can land first
+      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();
+      select(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();
+    select(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
 }

From dbe3328e6a4ad6215fe501bfaadd00cc29db9647 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 Apr 2026 00:51:58 +0200
Subject: [PATCH 08/14] Extend e2e test to verify selected user lands in
 collaborator list

After clicking the search result, the test now also clicks Add
Collaborator and asserts the username appears in the page body
(i.e., in the collaborator list after the redirect), proving the
chosen result drives the form submission end-to-end.

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 tests/e2e/repo-collab.test.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/repo-collab.test.ts b/tests/e2e/repo-collab.test.ts
index a7ce81e7c0..7e49307a41 100644
--- a/tests/e2e/repo-collab.test.ts
+++ b/tests/e2e/repo-collab.test.ts
@@ -6,8 +6,8 @@ test('add collaborator search', async ({page, request}) => {
   const userName = `repo-collab-${randomString(8)}`;
   const repoName = `repo-collab-${randomString(8)}`;
 
-  await apiCreateUser(request, userName);
   await Promise.all([
+    apiCreateUser(request, userName),
     apiCreateRepo(request, {name: repoName, autoInit: false}),
     login(page),
   ]);
@@ -19,4 +19,8 @@ test('add collaborator search', async ({page, request}) => {
   await expect(result).toContainText(userName);
   await result.click();
   await expect(input).toHaveValue(userName);
+
+  // submit and confirm the chosen user lands in the collaborator list
+  await page.getByRole('button', {name: 'Add Collaborator'}).click();
+  await expect(page.locator('body')).toContainText(userName);
 });

From a9a2e6085fa280026a874fdba6729ed61a1bc29d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 Apr 2026 01:06:02 +0200
Subject: [PATCH 09/14] Apply suggestion from @silverwind

Signed-off-by: silverwind <me@silverwind.io>
---
 tests/e2e/repo-collab.test.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tests/e2e/repo-collab.test.ts b/tests/e2e/repo-collab.test.ts
index 7e49307a41..4efdc85c6a 100644
--- a/tests/e2e/repo-collab.test.ts
+++ b/tests/e2e/repo-collab.test.ts
@@ -19,8 +19,6 @@ test('add collaborator search', async ({page, request}) => {
   await expect(result).toContainText(userName);
   await result.click();
   await expect(input).toHaveValue(userName);
-
-  // submit and confirm the chosen user lands in the collaborator list
   await page.getByRole('button', {name: 'Add Collaborator'}).click();
   await expect(page.locator('body')).toContainText(userName);
 });

From 6b7c38645211ebd9f17182889e8b3dfd17442c4d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 Apr 2026 01:37:34 +0200
Subject: [PATCH 10/14] Simplify attachSearchBox and restore the CSS comment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 |  2 ++
 web_src/js/modules/search.ts   | 64 ++++++++++++++++------------------
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/web_src/css/modules/search.css b/web_src/css/modules/search.css
index 7cf91d032f..647b7e27a3 100644
--- a/web_src/css/modules/search.css
+++ b/web_src/css/modules/search.css
@@ -1,3 +1,5 @@
+/* These are the remnants of the fomantic search module */
+
 .ui.search {
   position: relative;
 }
diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
index 6a7c481387..f187f907ea 100644
--- a/web_src/js/modules/search.ts
+++ b/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) {
-      const item = document.createElement('div');
-      item.className = 'result';
-      item.innerHTML = buildResultHTML(result);
+    resultsEl.replaceChildren(...results.map((result) => {
+      const item = buildResultElement(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 = picked.title;
+    input.value = itemResults.get(item)!.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
-      render(results);
+      // hide() ran (signal aborted) or a newer keystroke landed before the response did
+      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', () => debounced(input.value));
-  input.addEventListener('focus', () => { if (items().length) resultsEl.style.display = 'block'; });
+  input.addEventListener('input', () => search(input.value));
+  input.addEventListener('focus', () => { if (itemResults.size) resultsEl.style.display = 'block'; });
+  input.addEventListener('blur', () => setTimeout(hide, 150)); // deferred so a result mousedown can land first
   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 move = (next: number) => {
+    const index = all.findIndex((item) => item.classList.contains('active'));
+    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');
-    };
-    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) {
+    } else if (event.key === 'Enter' && index >= 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
 }

From 73d7f6867ae34d102206f685bc1d7bd7ae746dda Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 Apr 2026 02:08:02 +0200
Subject: [PATCH 11/14] Address Copilot review on attachSearchBox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- hide() also cancels the pending debounced search so a fetch scheduled
  before blur/Escape/outside-click does not fire afterwards and re-show
  the dropdown on a field the user has already left
- use urlQueryEscape for the {query} substitution to keep escaping
  symmetric with the Go backend (matches Go's url.QueryEscape: space → +,
  strict RFC 3986 for !'()*); both decoders still accept %20

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/modules/search.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
index f187f907ea..8cf7eec676 100644
--- a/web_src/js/modules/search.ts
+++ b/web_src/js/modules/search.ts
@@ -1,6 +1,7 @@
 import {debounce} from 'throttle-debounce';
 import {GET} from './fetch.ts';
 import {html, htmlRaw} from '../utils/html.ts';
+import {urlQueryEscape} from '../utils/url.ts';
 
 export type SearchResult = {
   title: string;
@@ -34,8 +35,10 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
   }
   const itemResults = new Map<HTMLElement, SearchResult>();
   let fetchController: AbortController | null = null;
+  let search: ReturnType<typeof debounce<(query: string) => Promise<void>>> | null = null;
 
   const hide = () => {
+    search?.cancel();
     fetchController?.abort();
     resultsEl.style.display = 'none';
     resultsEl.replaceChildren();
@@ -59,12 +62,12 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
     hide();
   };
 
-  const search = debounce(200, async (query: string) => {
+  search = debounce(200, async (query: string) => {
     fetchController?.abort();
     if (query.length < minCharacters) return hide();
     const ctrl = (fetchController = new AbortController());
     try {
-      const response = await GET(url.replaceAll('{query}', encodeURIComponent(query)), {signal: ctrl.signal});
+      const response = await GET(url.replaceAll('{query}', urlQueryEscape(query)), {signal: ctrl.signal});
       if (!response.ok) return hide();
       const results = parse(await response.json(), query);
       // hide() ran (signal aborted) or a newer keystroke landed before the response did

From 92158b1ee5c6c8ecc1def6303361ba8146c9bedf Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 4 May 2026 22:27:01 +0200
Subject: [PATCH 12/14] =?UTF-8?q?Tweak=20attachSearchBox:=20rename=20`all`?=
 =?UTF-8?q?=E2=86=92`resultEls`,=20clarify=20stale-response=20comment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/modules/search.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
index 8cf7eec676..9121dae194 100644
--- a/web_src/js/modules/search.ts
+++ b/web_src/js/modules/search.ts
@@ -70,7 +70,7 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
       const response = await GET(url.replaceAll('{query}', urlQueryEscape(query)), {signal: ctrl.signal});
       if (!response.ok) return hide();
       const results = parse(await response.json(), query);
-      // hide() ran (signal aborted) or a newer keystroke landed before the response did
+      // only render if the fetch wasn't aborted (e.g. by hide()) and the input still matches
       if (!ctrl.signal.aborted && input.value === query) render(results);
     } catch (err) {
       if ((err as Error).name !== 'AbortError') hide();
@@ -81,17 +81,17 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
   input.addEventListener('focus', () => { if (itemResults.size) resultsEl.style.display = 'block'; });
   input.addEventListener('blur', () => setTimeout(hide, 150)); // deferred so a result mousedown can land first
   input.addEventListener('keydown', (event) => {
-    const all = Array.from(resultsEl.querySelectorAll<HTMLElement>('.result'));
-    if (!all.length) return;
-    const index = all.findIndex((item) => item.classList.contains('active'));
+    const resultEls = Array.from(resultsEl.querySelectorAll<HTMLElement>('.result'));
+    if (!resultEls.length) return;
+    const index = resultEls.findIndex((item) => item.classList.contains('active'));
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      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');
+      resultEls[index]?.classList.remove('active');
+      const next = event.key === 'ArrowDown' ? (index + 1) % resultEls.length : index <= 0 ? resultEls.length - 1 : index - 1;
+      resultEls[next].classList.add('active');
     } else if (event.key === 'Enter' && index >= 0) {
       event.preventDefault();
-      select(all[index]);
+      select(resultEls[index]);
     } else if (event.key === 'Escape') {
       hide();
     }

From 3adfa3f17c191b361b0051d46c74a7524bc0cdd6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 4 May 2026 22:29:27 +0200
Subject: [PATCH 13/14] Add errorName helper, use it instead of (err as
 Error).name

Mirrors errorMessage in web_src/js/modules/errors.ts. Migrates the only
two existing `(err as Error).name !== 'AbortError'` sites
(modules/search.ts, features/common-fetch-action.ts).

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/features/common-fetch-action.ts | 4 ++--
 web_src/js/modules/errors.ts               | 4 ++++
 web_src/js/modules/search.ts               | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web_src/js/features/common-fetch-action.ts b/web_src/js/features/common-fetch-action.ts
index 96bc2e2adb..0f65f780ac 100644
--- a/web_src/js/features/common-fetch-action.ts
+++ b/web_src/js/features/common-fetch-action.ts
@@ -1,7 +1,7 @@
 import {GET, request} from '../modules/fetch.ts';
 import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
 import {addDelegatedEventListener, createElementFromHTML} from '../utils/dom.ts';
-import {errorMessage} from '../modules/errors.ts';
+import {errorMessage, errorName} from '../modules/errors.ts';
 import {confirmModal, createConfirmModal} from './comp/ConfirmModal.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {registerGlobalSelectorFunc} from '../modules/observer.ts';
@@ -138,7 +138,7 @@ async function performActionRequest(el: HTMLElement, opt: FetchActionOpts) {
     }
     await handleFetchActionError(resp);
   } catch (err) {
-    if ((err as Error).name !== 'AbortError') {
+    if (errorName(err) !== 'AbortError') {
       console.error(`Fetch action request error:`, err);
       showErrorToast(`Error: ${errorMessage(err)}`);
     }
diff --git a/web_src/js/modules/errors.ts b/web_src/js/modules/errors.ts
index d4fb549cfe..95a171693a 100644
--- a/web_src/js/modules/errors.ts
+++ b/web_src/js/modules/errors.ts
@@ -6,6 +6,10 @@ export function errorMessage(err: unknown): string {
   return (err as Error)?.message || String(err);
 }
 
+export function errorName(err: unknown): string {
+  return (err as Error)?.name ?? '';
+}
+
 export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error', details?: string) {
   const parentContainer = document.querySelector('.page-content') ?? document.body;
   if (!parentContainer) {
diff --git a/web_src/js/modules/search.ts b/web_src/js/modules/search.ts
index 9121dae194..258d3c3c5b 100644
--- a/web_src/js/modules/search.ts
+++ b/web_src/js/modules/search.ts
@@ -1,5 +1,6 @@
 import {debounce} from 'throttle-debounce';
 import {GET} from './fetch.ts';
+import {errorName} from './errors.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {urlQueryEscape} from '../utils/url.ts';
 
@@ -73,7 +74,7 @@ export function attachSearchBox<T = unknown>(container: HTMLElement, url: string
       // only render if the fetch wasn't aborted (e.g. by hide()) and the input still matches
       if (!ctrl.signal.aborted && input.value === query) render(results);
     } catch (err) {
-      if ((err as Error).name !== 'AbortError') hide();
+      if (errorName(err) !== 'AbortError') hide();
     }
   });
 

From 1c44b48a4cf33fa9dff60ad0845a73ec8980a8bf Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 4 May 2026 22:36:51 +0200
Subject: [PATCH 14/14] Add TSDoc to errorMessage and errorName helpers

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
---
 web_src/js/modules/errors.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web_src/js/modules/errors.ts b/web_src/js/modules/errors.ts
index 95a171693a..4b6504dc99 100644
--- a/web_src/js/modules/errors.ts
+++ b/web_src/js/modules/errors.ts
@@ -2,10 +2,12 @@
 import {html} from '../utils/html.ts';
 import type {Intent} from '../types.ts';
 
+/** Extract a message string from an unknown caught value. */
 export function errorMessage(err: unknown): string {
   return (err as Error)?.message || String(err);
 }
 
+/** Extract a name string from an unknown caught value. */
 export function errorName(err: unknown): string {
   return (err as Error)?.name ?? '';
 }