Unify search boxes (#29530)

Unify all but a few search boxes to use uniform style, uniform
translations and shared templates where possible.
Remove a few duplicated search templates, e. g. code search.

<details><summary>Example after screenshots:</summary>


![grafik](https://github.com/go-gitea/gitea/assets/47871822/e20e7d6b-c6be-4a47-b132-672766f41421)


![grafik](https://github.com/go-gitea/gitea/assets/47871822/d5b11b9c-c12f-4a29-8fb0-24e5aa511d18)


![grafik](https://github.com/go-gitea/gitea/assets/47871822/d86bb444-36c7-426d-9cf1-c634963dffb1)


![grafik](https://github.com/go-gitea/gitea/assets/47871822/a76c0319-0518-484a-a840-563d02b61198)

</details>


Also includes #29700 

Co-authored-by: 6543 <6543@obermui.de>

---------

Co-authored-by: 6543 <m.huber@kithara.com>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>

options/locale/locale_en-US.ini

@@ -155,6 +155,27 @@ filter.not_template = Not Template
 filter.public = Public
 filter.private = Private
 
+[search]
+search = Search...
+type_tooltip = Search type
+fuzzy = Fuzzy
+fuzzy_tooltip = Include results that also match the search term closely
+match = Match
+match_tooltip = Include only results that match the exact search term
+repo_kind = Search repos...
+user_kind = Search users...
+org_kind = Search orgs...
+team_kind = Search teams...
+code_kind = Search code...
+code_search_unavailable = Code search is currently not available. Please contact the site administrator.
+package_kind = Search packages...
+project_kind = Search projects...
+branch_kind = Search branches...
+commit_kind = Search commits...
+runner_kind = Search runners...
+no_results = No matching results found.
+keyword_search_unavailable = Searching by keyword is currently not available. Please contact the site administrator.
+
 [aria]
 navbar = Navigation Bar
 footer = Footer
@@ -330,7 +351,6 @@ collaborative_repos = Collaborative Repositories
 my_orgs = My Organizations
 my_mirrors = My Mirrors
 view_home = View %s
-search_repos = Find a repository…
 filter = Other Filters
 filter_by_team_repositories = Filter by team repositories
 feed_of = Feed of "%s"
@@ -351,20 +371,8 @@ issues.in_your_repos = In your repositories
 repos = Repositories
 users = Users
 organizations = Organizations
-search = Search
 go_to = Go to
 code = Code
-search.type.tooltip = Search type
-search.fuzzy = Fuzzy
-search.fuzzy.tooltip = Include results that also matches the search term closely
-search.match = Match
-search.match.tooltip = Include only results that matches the exact search term
-code_search_unavailable = Currently code search is not available. Please contact your site administrator.
-repo_no_results = No matching repositories found.
-user_no_results = No matching users found.
-org_no_results = No matching organizations found.
-code_no_results = No source code matching your search term found.
-code_search_results = Search results for "%s"
 code_last_indexed_at = Last indexed %s
 relevant_repositories_tooltip = Repositories that are forks or that have no topic, no icon, and no description are hidden.
 relevant_repositories = Only relevant repositories are being shown, <a href="%s">show unfiltered results</a>.
@@ -1324,9 +1332,8 @@ commits.desc = Browse source code change history.
 commits.commits = Commits
 commits.no_commits = No commits in common. "%s" and "%s" have entirely different histories.
 commits.nothing_to_compare = These branches are equal.
-commits.search = Search commits…
 commits.search.tooltip = You can prefix keywords with "author:", "committer:", "after:", or "before:", e.g. "revert author:Alice before:2019-01-13".
-commits.find = Search
+commits.search_branch = This Branch
 commits.search_all = All Branches
 commits.author = Author
 commits.message = Message
@@ -1502,7 +1509,6 @@ issues.filter_sort.moststars = Most stars
 issues.filter_sort.feweststars = Fewest stars
 issues.filter_sort.mostforks = Most forks
 issues.filter_sort.fewestforks = Fewest forks
-issues.keyword_search_unavailable = Searching by keyword is currently not available. Please contact your site administrator.
 issues.action_open = Open
 issues.action_close = Close
 issues.action_label = Label
@@ -2035,17 +2041,6 @@ contributors.contribution_type.commits = Commits
 contributors.contribution_type.additions = Additions
 contributors.contribution_type.deletions = Deletions
 
-search = Search
-search.search_repo = Search repository
-search.type.tooltip = Search type
-search.fuzzy = Fuzzy
-search.fuzzy.tooltip = Include results that also matches the search term closely
-search.match = Match
-search.match.tooltip = Include only results that matches the exact search term
-search.results = Search results for "%s" in <a href="%s">%s</a>
-search.code_no_results = No source code matching your search term found.
-search.code_search_unavailable = Currently code search is not available. Please contact your site administrator.
-
 settings = Settings
 settings.desc = Settings is where you can manage the settings for the repository
 settings.options = Repository
@@ -2206,7 +2201,6 @@ settings.delete_collaborator = Remove
 settings.collaborator_deletion = Remove Collaborator
 settings.collaborator_deletion_desc = Removing a collaborator will revoke their access to this repository. Continue?
 settings.remove_collaborator_success = The collaborator has been removed.
-settings.search_user_placeholder = Search user…
 settings.org_not_allowed_to_be_collaborator = Organizations cannot be added as a collaborator.
 settings.change_team_access_not_allowed = Changing team access for repository has been restricted to organization owner
 settings.team_not_in_organization = The team is not in the same organization as the repository
@@ -2214,7 +2208,6 @@ settings.teams = Teams
 settings.add_team = Add Team
 settings.add_team_duplicate = Team already has the repository
 settings.add_team_success = The team now have access to the repository.
-settings.search_team = Search Team…
 settings.change_team_permission_tip = Team's permission is set on the team setting page and can't be changed per repository
 settings.delete_team_tip = This team has access to all repositories and can't be removed
 settings.remove_team_success = The team's access to the repository has been removed.
@@ -2367,9 +2360,7 @@ settings.protect_whitelist_committers = Whitelist Restricted Push
 settings.protect_whitelist_committers_desc = Only whitelisted users or teams will be allowed to push to this branch (but not force push).
 settings.protect_whitelist_deploy_keys = Whitelist deploy keys with write access to push.
 settings.protect_whitelist_users = Whitelisted users for pushing:
-settings.protect_whitelist_search_users = Search users…
 settings.protect_whitelist_teams = Whitelisted teams for pushing:
-settings.protect_whitelist_search_teams = Search teams…
 settings.protect_merge_whitelist_committers = Enable Merge Whitelist
 settings.protect_merge_whitelist_committers_desc = Allow only whitelisted users or teams to merge pull requests into this branch.
 settings.protect_merge_whitelist_users = Whitelisted users for merging:
@@ -2614,7 +2605,6 @@ branch.default_deletion_failed = Branch "%s" is the default branch. It cannot be
 branch.restore = Restore Branch "%s"
 branch.download = Download Branch "%s"
 branch.rename = Rename Branch "%s"
-branch.search = Search Branch
 branch.included_desc = This branch is part of the default branch
 branch.included = Included
 branch.create_new_branch = Create branch from branch:
@@ -2760,7 +2750,6 @@ teams.write_permission_desc = This team grants <strong>Write</strong> access: me
 teams.admin_permission_desc = This team grants <strong>Admin</strong> access: members can read from, push to and add collaborators to team repositories.
 teams.create_repo_permission_desc = Additionally, this team grants <strong>Create repository</strong> permission: members can create new repositories in organization.
 teams.repositories = Team Repositories
-teams.search_repo_placeholder = Search repository…
 teams.remove_all_repos_title = Remove all team repositories
 teams.remove_all_repos_desc = This will remove all repositories from the team.
 teams.add_all_repos_title = Add all repositories

routers/web/explore/code.go

@@ -34,12 +34,11 @@ func Code(ctx *context.Context) {
 	language := ctx.FormTrim("l")
 	keyword := ctx.FormTrim("q")
 
-	queryType := ctx.FormTrim("t")
+	isFuzzy := ctx.FormOptionalBool("fuzzy").ValueOrDefault(true)
-	isFuzzy := queryType != "match"
 
 	ctx.Data["Keyword"] = keyword
 	ctx.Data["Language"] = language
-	ctx.Data["queryType"] = queryType
+	ctx.Data["IsFuzzy"] = isFuzzy
 	ctx.Data["PageIsViewCode"] = true
 
 	if keyword == "" {

routers/web/repo/commit.go

@@ -203,7 +203,7 @@ func SearchCommits(ctx *context.Context) {
 
 	ctx.Data["Keyword"] = query
 	if all {
-		ctx.Data["All"] = "checked"
+		ctx.Data["All"] = true
 	}
 	ctx.Data["Username"] = ctx.Repo.Owner.Name
 	ctx.Data["Reponame"] = ctx.Repo.Repository.Name

routers/web/repo/search.go

@@ -24,12 +24,11 @@ func Search(ctx *context.Context) {
 	language := ctx.FormTrim("l")
 	keyword := ctx.FormTrim("q")
 
-	queryType := ctx.FormTrim("t")
+	isFuzzy := ctx.FormOptionalBool("fuzzy").ValueOrDefault(true)
-	isFuzzy := queryType != "match"
 
 	ctx.Data["Keyword"] = keyword
 	ctx.Data["Language"] = language
-	ctx.Data["queryType"] = queryType
+	ctx.Data["IsFuzzy"] = isFuzzy
 	ctx.Data["PageIsViewCode"] = true
 
 	if keyword == "" {
@@ -54,7 +53,7 @@ func Search(ctx *context.Context) {
 		ctx.Data["CodeIndexerUnavailable"] = !code_indexer.IsAvailable(ctx)
 	}
 
-	ctx.Data["SourcePath"] = ctx.Repo.Repository.Link()
+	ctx.Data["Repo"] = ctx.Repo.Repository
 	ctx.Data["SearchResults"] = searchResults
 	ctx.Data["SearchResultLanguages"] = searchResultLanguages
 

routers/web/user/code.go

@@ -39,12 +39,11 @@ func CodeSearch(ctx *context.Context) {
 	language := ctx.FormTrim("l")
 	keyword := ctx.FormTrim("q")
 
-	queryType := ctx.FormTrim("t")
+	isFuzzy := ctx.FormOptionalBool("fuzzy").ValueOrDefault(true)
-	isFuzzy := queryType != "match"
 
 	ctx.Data["Keyword"] = keyword
 	ctx.Data["Language"] = language
-	ctx.Data["queryType"] = queryType
+	ctx.Data["IsFuzzy"] = isFuzzy
 	ctx.Data["IsCodePage"] = true
 
 	if keyword == "" {

services/context/pagination.go

@@ -53,5 +53,5 @@ func (p *Pagination) SetDefaultParams(ctx *Context) {
 	p.AddParam(ctx, "sort", "SortType")
 	p.AddParam(ctx, "q", "Keyword")
 	// do not add any more uncommon params here!
-	p.AddParam(ctx, "t", "queryType")
+	p.AddParam(ctx, "fuzzy", "IsFuzzy")
 }

templates/admin/base/search.tmpl

@@ -1,23 +0,0 @@
-<div class="ui secondary filter menu gt-ac gt-mx-0">
-	<form class="ui form ignore-dirty gt-f1">
-		<div class="ui fluid action input">
-			{{template "shared/searchinput" dict "Value" .Keyword}}
-			<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
-		</div>
-	</form>
-	<!-- Sort -->
-	<div class="ui dropdown type jump item gt-mr-0">
-		<span class="text">
-			{{ctx.Locale.Tr "repo.issues.filter_sort"}}
-		</span>
-		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-		<div class="menu">
-			<a class="{{if or (eq .SortType "oldest") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.oldest"}}</a>
-			<a class="{{if eq .SortType "newest"}}active {{end}}item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.latest"}}</a>
-			<a class="{{if eq .SortType "alphabetically"}}active {{end}}item" href="{{$.Link}}?sort=alphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
-			<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="{{$.Link}}?sort=reversealphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
-			<a class="{{if eq .SortType "recentupdate"}}active {{end}}item" href="{{$.Link}}?sort=recentupdate&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.recentupdate"}}</a>
-			<a class="{{if eq .SortType "leastupdate"}}active {{end}}item" href="{{$.Link}}?sort=leastupdate&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.leastupdate"}}</a>
-		</div>
-	</div>
-</div>

templates/admin/emails/list.tmpl

@@ -6,10 +6,7 @@
 		<div class="ui attached segment">
 			<div class="ui secondary filter menu gt-ac gt-mx-0">
 				<form class="ui form ignore-dirty gt-f1">
-					<div class="ui fluid action input">
+					{{template "shared/search/combo" dict "Value" .Keyword}}
-						{{template "shared/searchinput" dict "Value" .Keyword}}
-						<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
-					</div>
 				</form>
 				<!-- Sort -->
 				<div class="ui dropdown type jump item gt-mr-0">

templates/admin/org/list.tmpl

@@ -7,7 +7,26 @@
 			</div>
 		</h4>
 		<div class="ui attached segment">
-			{{template "admin/base/search" .}}
+			<div class="ui secondary filter menu gt-ac gt-mx-0">
+				<form class="ui form ignore-dirty gt-f1">
+					{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.org_kind")}}
+				</form>
+				<!-- Sort -->
+				<div class="ui dropdown type jump item gt-mr-0">
+					<span class="text">
+						{{ctx.Locale.Tr "repo.issues.filter_sort"}}
+					</span>
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					<div class="menu">
+						<a class="{{if or (eq .SortType "oldest") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.oldest"}}</a>
+						<a class="{{if eq .SortType "newest"}}active {{end}}item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.latest"}}</a>
+						<a class="{{if eq .SortType "alphabetically"}}active {{end}}item" href="{{$.Link}}?sort=alphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
+						<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="{{$.Link}}?sort=reversealphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
+						<a class="{{if eq .SortType "recentupdate"}}active {{end}}item" href="{{$.Link}}?sort=recentupdate&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.recentupdate"}}</a>
+						<a class="{{if eq .SortType "leastupdate"}}active {{end}}item" href="{{$.Link}}?sort=leastupdate&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.leastupdate"}}</a>
+					</div>
+				</div>
+			</div>
 		</div>
 		<div class="ui attached table segment">
 			<table class="ui very basic striped table unstackable">

templates/admin/packages/list.tmpl

@@ -13,16 +13,16 @@
 		</h4>
 		<div class="ui attached segment">
 			<form class="ui form ignore-dirty">
-				<div class="ui fluid action input">
+				<div class="ui small fluid action input">
-					{{template "shared/searchinput" dict "Value" .Query}}
+					{{template "shared/search/input" dict "Value" .Query}}
-					<select class="ui dropdown" name="type">
+					<select class="ui small dropdown" name="type">
 						<option value="">{{ctx.Locale.Tr "packages.filter.type"}}</option>
 						<option value="all">{{ctx.Locale.Tr "packages.filter.type.all"}}</option>
 						{{range $type := .AvailableTypes}}
 						<option{{if eq $.PackageType $type}} selected="selected"{{end}} value="{{$type}}">{{$type.Name}}</option>
 						{{end}}
 					</select>
-					<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
+					{{template "shared/search/button"}}
 				</div>
 			</form>
 		</div>

templates/admin/repo/unadopted.tmpl

@@ -8,10 +8,10 @@
 		</h4>
 		<div class="ui attached segment">
 			<form class="ui form ignore-dirty">
-				<div class="ui fluid action input">
+				<div class="ui small fluid action input">
 					<input name="search" value="true" type="hidden">
 					<input name="q" value="{{.Keyword}}" placeholder="{{ctx.Locale.Tr "repo.adopt_search"}}" autofocus>
-				<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
+					{{template "shared/search/button"}}
 				</div>
 			</form>
 		</div>

templates/admin/user/list.tmpl

@@ -52,11 +52,7 @@
 					</div>
 				</div>
 
-				<!-- Search Text -->
+				{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.user_kind")}}
-				<div class="ui fluid action input">
-					{{template "shared/searchinput" dict "Value" .Keyword}}
-					<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
-				</div>
 			</form>
 		</div>
 		<div class="ui attached table segment">

templates/code/searchcombo.tmpl

@@ -1,17 +0,0 @@
-{{template "code/searchform" .}}
-<div class="divider"></div>
-<div class="ui user list">
-	{{if .CodeIndexerUnavailable}}
-		<div class="ui error message">
-			<p>{{ctx.Locale.Tr "explore.code_search_unavailable"}}</p>
-		</div>
-	{{else if .SearchResults}}
-		<h3>
-			{{ctx.Locale.Tr "explore.code_search_results" .Keyword}}
-		</h3>
-		{{template "code/searchresults" .}}
-	{{else if .Keyword}}
-		<div>{{ctx.Locale.Tr "explore.code_no_results"}}</div>
-	{{end}}
-</div>
-{{template "base/paginate" .}}

templates/code/searchform.tmpl

@@ -1,14 +0,0 @@
-<form class="ui form ignore-dirty">
-	<div class="ui fluid action input">
-		{{template "shared/searchinput" dict "Value" .Keyword "Disabled" .CodeIndexerUnavailable}}
-		<div class="ui dropdown selection {{if .CodeIndexerUnavailable}} disabled{{end}}" data-tooltip-content="{{ctx.Locale.Tr "explore.search.type.tooltip"}}">
-			<input name="t" type="hidden" value="{{.queryType}}"{{if .CodeIndexerUnavailable}} disabled{{end}}>{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-			<div class="text">{{ctx.Locale.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div>
-			<div class="menu">
-				<div class="item" data-value="" data-tooltip-content="{{ctx.Locale.Tr "explore.search.fuzzy.tooltip"}}">{{ctx.Locale.Tr "explore.search.fuzzy"}}</div>
-				<div class="item" data-value="match" data-tooltip-content="{{ctx.Locale.Tr "explore.search.match.tooltip"}}">{{ctx.Locale.Tr "explore.search.match"}}</div>
-			</div>
-		</div>
-		<button class="ui primary button"{{if .CodeIndexerUnavailable}} disabled{{end}}>{{ctx.Locale.Tr "explore.search"}}</button>
-	</div>
-</form>

templates/explore/code.tmpl

@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content explore users">
 	{{template "explore/navbar" .}}
 	<div class="ui container">
-		{{template "code/searchcombo" .}}
+		{{template "shared/search/code/search" .}}
 	</div>
 </div>
 {{template "base/footer" .}}

templates/explore/repo_list.tmpl

@@ -58,7 +58,7 @@
 		</div>
 	{{else}}
 	<div>
-		{{ctx.Locale.Tr "explore.repo_no_results"}}
+		{{ctx.Locale.Tr "search.no_results"}}
 	</div>
 	{{end}}
 </div>

templates/explore/search.tmpl

@@ -1,12 +1,13 @@
-<div class="ui secondary filter menu gt-ac gt-mx-0">
+<div class="ui small secondary filter menu gt-ac gt-mx-0">
 	<form class="ui form ignore-dirty gt-f1">
-		<div class="ui fluid action input">
+		{{if .PageIsExploreUsers}}
-			{{template "shared/searchinput" dict "Value" .Keyword}}
+			{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.user_kind")}}
-			<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
+		{{else}}
-		</div>
+			{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.org_kind")}}
+		{{end}}
 	</form>
 	<!-- Sort -->
-	<div class="ui dropdown type jump item gt-mr-0">
+	<div class="ui small dropdown type jump item gt-mr-0">
 		<span class="text">
 			{{ctx.Locale.Tr "repo.issues.filter_sort"}}
 		</span>

templates/explore/user_list.tmpl

@@ -26,6 +26,8 @@
 			</div>
 		</div>
 	{{else}}
-		<div class="flex-item">{{ctx.Locale.Tr "explore.user_no_results"}}</div>
+		<div class="flex-item">
+			{{ctx.Locale.Tr "search.no_results"}}
+		</div>
 	{{end}}
 </div>

templates/explore/users.tmpl

@@ -3,9 +3,7 @@
 	{{template "explore/navbar" .}}
 	<div class="ui container">
 		{{template "explore/search" .}}
-
 		{{template "explore/user_list" .}}
-
 		{{template "base/paginate" .}}
 	</div>
 </div>

templates/org/team/members.tmpl

@@ -14,7 +14,7 @@
 							<input type="hidden" name="uid" value="{{.SignedUser.ID}}">
 							<div id="search-user-box" class="ui search gt-mr-3"{{if .IsEmailInviteEnabled}} data-allow-email="true" data-allow-email-description="{{ctx.Locale.Tr "org.teams.invite_team_member" $.Team.Name}}"{{end}}>
 								<div class="ui input">
-									<input class="prompt" name="uname" placeholder="{{ctx.Locale.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" required>
+									<input class="prompt" name="uname" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" required>
 								</div>
 							</div>
 							<button class="ui primary button">{{ctx.Locale.Tr "org.teams.add_team_member"}}</button>

templates/org/team/repositories.tmpl

@@ -14,7 +14,7 @@
 							{{.CsrfTokenHtml}}
 							<div id="search-repo-box" data-uid="{{.Org.ID}}" class="ui search">
 								<div class="ui input">
-									<input class="prompt" name="repo_name" placeholder="{{ctx.Locale.Tr "org.teams.search_repo_placeholder"}}" autocomplete="off" required>
+									<input class="prompt" name="repo_name" placeholder="{{ctx.Locale.Tr "search.repo_kind"}}" autocomplete="off" required>
 								</div>
 							</div>
 							<button class="ui primary button gt-ml-3">{{ctx.Locale.Tr "add"}}</button>

templates/package/shared/list.tmpl

@@ -1,16 +1,16 @@
 {{template "base/alert" .}}
 {{if .HasPackages}}
 <form class="ui form ignore-dirty">
-	<div class="ui fluid action input">
+	<div class="ui small fluid action input">
-		{{template "shared/searchinput" dict "Value" .Query}}
+		{{template "shared/search/input" dict "Value" .Query "Placeholder" (ctx.Locale.Tr "search.package_kind")}}
-		<select class="ui dropdown" name="type">
+		<select class="ui small dropdown" name="type">
 			<option value="">{{ctx.Locale.Tr "packages.filter.type"}}</option>
 			<option value="all">{{ctx.Locale.Tr "packages.filter.type.all"}}</option>
 			{{range $type := .AvailableTypes}}
 			<option{{if eq $.PackageType $type}} selected="selected"{{end}} value="{{$type}}">{{$type.Name}}</option>
 			{{end}}
 		</select>
-		<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
+		{{template "shared/search/button"}}
 	</div>
 </form>
 {{end}}

templates/package/shared/versionlist.tmpl

@@ -1,21 +1,21 @@
 <p><a href="{{.PackageDescriptor.PackageWebLink}}">{{.PackageDescriptor.Package.Name}}</a> / <strong>{{ctx.Locale.Tr "packages.versions"}}</strong></p>
 <form class="ui form ignore-dirty">
-	<div class="ui fluid action input">
+	<div class="ui small fluid action input">
-		{{template "shared/searchinput" dict "Value" .Query}}
+		{{template "shared/search/input" dict "Value" .Query "Placeholder" (ctx.Locale.Tr "search.package_kind")}}
-		<select class="ui dropdown" name="sort">
+		<select class="ui small dropdown" name="sort">
 			<option value="version_asc"{{if eq .Sort "version_asc"}} selected="selected"{{end}}>{{ctx.Locale.Tr "filter.string.asc"}}</option>
 			<option value="version_desc"{{if eq .Sort "version_desc"}} selected="selected"{{end}}>{{ctx.Locale.Tr "filter.string.desc"}}</option>
 			<option value="created_asc"{{if eq .Sort "created_asc"}} selected="selected"{{end}}>{{ctx.Locale.Tr "repo.issues.filter_sort.oldest"}}</option>
 			<option value="created_desc"{{if or (eq .Sort "") (eq .Sort "created_desc")}} selected="selected"{{end}}>{{ctx.Locale.Tr "repo.issues.filter_sort.latest"}}</option>
 		</select>
 		{{if eq .PackageDescriptor.Package.Type "container"}}
-		<select class="ui dropdown" name="tagged">
+		<select class="ui small dropdown" name="tagged">
 			{{$isTagged := or (eq .Tagged "") (eq .Tagged "tagged")}}
 			<option value="tagged"{{if $isTagged}} selected="selected"{{end}}>{{ctx.Locale.Tr "packages.filter.container.tagged"}}</option>
 			<option value="untagged"{{if not $isTagged}} selected="selected"{{end}}>{{ctx.Locale.Tr "packages.filter.container.untagged"}}</option>
 		</select>
 		{{end}}
-		<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
+		{{template "shared/search/button"}}
 	</div>
 </form>
 <div>

templates/projects/list.tmpl

@@ -21,13 +21,8 @@
 <div class="list-header">
 	<!-- Search -->
 	<form class="list-header-search ui form ignore-dirty">
-		<div class="ui small search fluid action input">
 		<input type="hidden" name="state" value="{{$.State}}">
-			{{template "shared/searchinput" dict "Value" .Keyword}}
+		{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.project_kind")}}
-			<button class="ui small icon button" type="submit" aria-label="{{ctx.Locale.Tr "explore.search"}}">
-				{{svg "octicon-search"}}
-			</button>
-		</div>
 	</form>
 	<!-- Sort -->
 	<div class="list-header-sort ui small dropdown type jump item">

templates/repo/branch/list.tmpl

@@ -67,20 +67,17 @@
 			</div>
 		{{end}}
 
-		{{if .Branches}}
 		<h4 class="ui top attached header gt-df gt-ac gt-sb">
 			<div class="gt-df gt-ac">
 				{{ctx.Locale.Tr "repo.branches"}}
 			</div>
-				<div class="tw-whitespace-nowrap">
+		</h4>
+
+		<div class="ui attached segment">
 			<form class="ignore-dirty" method="get">
-						<div class="ui tiny search input">
+				{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.branch_kind")}}
-							<input name="q" placeholder="{{ctx.Locale.Tr "repo.branch.search"}}" value="{{.Keyword}}" autofocus>
-						</div>
-						<button class="ui primary tiny button gt-mr-0" data-tooltip-content={{ctx.Locale.Tr "repo.commits.search.tooltip"}}>{{ctx.Locale.Tr "repo.commits.find"}}</button>
 			</form>
 		</div>
-			</h4>
 
 		<div class="ui attached table segment">
 			<table class="ui very basic striped fixed table single line">
@@ -200,7 +197,6 @@
 			</table>
 		</div>
 		{{template "base/paginate" .}}
-		{{end}}
 	</div>
 </div>
 

templates/repo/commits_search_dropdown.tmpl

@@ -0,0 +1,8 @@
+<div class="ui small dropdown selection">
+	<input name="all" type="hidden" value="{{.All}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+	<div class="text">{{if .All}}{{ctx.Locale.Tr "repo.commits.search_all"}}{{else}}{{ctx.Locale.Tr "repo.commits.search_branch"}}{{end}}</div>
+	<div class="menu">
+		<div class="item" data-value="false">{{ctx.Locale.Tr "repo.commits.search_branch"}}</div>
+		<div class="item" data-value="true">{{ctx.Locale.Tr "repo.commits.search_all"}}</div>
+	</div>
+</div>

templates/repo/commits_table.tmpl

@@ -8,27 +8,27 @@
 			{{ctx.Locale.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch}}
 		{{end}}
 	</div>
+	{{if .IsDiffCompare}}
 		<div class="commits-table-right tw-whitespace-nowrap">
-		{{if .PageIsCommits}}
-			<form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
-				<div class="ui tiny search input">
-					<input name="q" placeholder="{{ctx.Locale.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
-				</div>
-
-				<div class="ui tiny checkbox">
-					<input type="checkbox" name="all" value="true" {{.All}}>
-					<label>{{ctx.Locale.Tr "repo.commits.search_all"}}</label>
-				</div>
-				<button class="ui primary tiny button gt-mr-0" data-panel="#add-deploy-key-panel" data-tooltip-content={{ctx.Locale.Tr "repo.commits.search.tooltip"}}>{{ctx.Locale.Tr "repo.commits.find"}}</button>
-			</form>
-		{{else if .IsDiffCompare}}
 			<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui green sha label gt-mx-0">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
 			...
 			<a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID | PathEscape}}" class="ui green sha label gt-mx-0">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
-		{{end}}
 		</div>
+	{{end}}
 </h4>
 
+{{if .PageIsCommits}}
+	<div class="ui attached segment">
+		<form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
+			<div class="ui small fluid action input">
+				{{template "shared/search/input" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.commit_kind")}}
+				{{template "repo/commits_search_dropdown" .}}
+				{{template "shared/search/button" dict "Tooltip" (ctx.Locale.Tr "repo.commits.search.tooltip")}}
+			</div>
+		</form>
+	</div>
+{{end}}
+
 {{if and .Commits (gt .CommitCount 0)}}
 	{{template "repo/commits_list" .}}
 {{end}}

templates/repo/home.tmpl

@@ -15,14 +15,12 @@
 				<div class="ui repo-search">
 					<form class="ui form ignore-dirty" action="{{.RepoLink}}/search" method="get">
 						<div class="field">
-							<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{ctx.Locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
+							<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{ctx.Locale.Tr "search.code_search_unavailable"}}"{{end}}>
-								<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{ctx.Locale.Tr "repo.search.search_repo"}}">
+								<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
 								{{if .CodeIndexerUnavailable}}
 									<i class="icon">{{svg "octicon-alert"}}</i>
 								{{end}}
-								<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
+								{{template "shared/search/button" dict "Disabled" .CodeIndexerUnavailable}}
-									{{svg "octicon-search"}}
-								</button>
 							</div>
 						</div>
 					</form>

templates/repo/issue/search.tmpl

@@ -9,10 +9,10 @@
 			<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
 			<input type="hidden" name="poster" value="{{$.PosterID}}">
 		{{end}}
-		{{template "shared/searchinput" dict "Value" .Keyword}}
+		{{template "shared/search/input" dict "Value" .Keyword}}
 		{{if .PageIsIssueList}}
 			<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{ctx.Locale.Tr "explore.go_to"}}" data-repo-link="{{.RepoLink}}">{{svg "octicon-hash"}}</button>
 		{{end}}
-		<button class="ui small icon button" aria-label="{{ctx.Locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
+		{{template "shared/search/button"}}
 	</div>
 </form>

templates/repo/search.tmpl

@@ -2,59 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository file list">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="ui repo-search">
+		{{template "shared/search/code/search" .}}
-			<form class="ui form ignore-dirty" method="get">
-				<div class="ui fluid action input">
-					<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{ctx.Locale.Tr "repo.search.search_repo"}}">
-					<div class="ui dropdown selection {{if .CodeIndexerUnavailable}} disabled{{end}}" data-tooltip-content="{{ctx.Locale.Tr "repo.search.type.tooltip"}}">
-						<input name="t" type="hidden"{{if .CodeIndexerUnavailable}} disabled{{end}} value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-						<div class="text">{{ctx.Locale.Tr (printf "repo.search.%s" (or .queryType "fuzzy"))}}</div>
-						<div class="menu">
-							<div class="item" data-value="" data-tooltip-content="{{ctx.Locale.Tr "repo.search.fuzzy.tooltip"}}">{{ctx.Locale.Tr "repo.search.fuzzy"}}</div>
-							<div class="item" data-value="match" data-tooltip-content="{{ctx.Locale.Tr "repo.search.match.tooltip"}}">{{ctx.Locale.Tr "repo.search.match"}}</div>
-						</div>
-					</div>
-					<button class="ui icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">{{svg "octicon-search" 16}}</button>
-				</div>
-			</form>
-		</div>
-		{{if .CodeIndexerUnavailable}}
-			<div class="ui error message">
-				<p>{{ctx.Locale.Tr "repo.search.code_search_unavailable"}}</p>
-			</div>
-		{{else if .Keyword}}
-			<h3>
-				{{ctx.Locale.Tr "repo.search.results" .Keyword .RepoLink .RepoName}}
-			</h3>
-			{{if .SearchResults}}
-				<div class="flex-text-block gt-fw">
-					{{range $term := .SearchResultLanguages}}
-					<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label gt-m-0" href="{{$.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
-						<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
-						{{$term.Language}}
-						<div class="detail">{{$term.Count}}</div>
-					</a>
-					{{end}}
-				</div>
-				<div class="repository search">
-					{{range $result := .SearchResults}}
-						<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
-							<h4 class="ui top attached normal header gt-df gt-fw">
-								<span class="file gt-f1">{{.Filename}}</span>
-								<a role="button" class="ui basic tiny button" rel="nofollow" href="{{$.SourcePath}}/src/commit/{{PathEscape $result.CommitID}}/{{PathEscapeSegments .Filename}}">{{ctx.Locale.Tr "repo.diff.view_file"}}</a>
-							</h4>
-							<div class="ui attached table segment">
-								{{template "shared/searchfile" dict "RepoLink" $.SourcePath "SearchResult" .}}
-							</div>
-							{{template "shared/searchbottom" dict "root" $ "result" .}}
-						</div>
-					{{end}}
-				</div>
-				{{template "base/paginate" .}}
-			{{else}}
-				<div>{{ctx.Locale.Tr "repo.search.code_no_results"}}</div>
-			{{end}}
-		{{end}}
 	</div>
 </div>
 {{template "base/footer" .}}

templates/repo/settings/collaboration.tmpl

@@ -42,7 +42,7 @@
 			<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
 				{{.CsrfTokenHtml}}
 				<div id="search-user-box" class="ui search input gt-vm">
-					<input class="prompt" name="collaborator" placeholder="{{ctx.Locale.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
+					<input class="prompt" name="collaborator" placeholder="{{ctx.Locale.Tr "search.team_kind"}}" autocomplete="off" autofocus required>
 				</div>
 				<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_collaborator"}}</button>
 			</form>
@@ -90,7 +90,7 @@
 				<form class="ui form" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
 					{{.CsrfTokenHtml}}
 					<div id="search-team-box" class="ui search input gt-vm" data-org-name="{{.OrgName}}">
-						<input class="prompt" name="team" placeholder="{{ctx.Locale.Tr "repo.settings.search_team"}}" autocomplete="off" autofocus required>
+						<input class="prompt" name="team" placeholder="{{ctx.Locale.Tr "search.team_kind"}}" autocomplete="off" autofocus required>
 					</div>
 					<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_team"}}</button>
 				</form>

templates/repo/settings/protected_branch.tmpl

@@ -52,7 +52,7 @@
 							<label>{{ctx.Locale.Tr "repo.settings.protect_whitelist_users"}}</label>
 							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="whitelist_users" value="{{.whitelist_users}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
+								<div class="default text">{{ctx.Locale.Tr "search.user_kind"}}</div>
 								<div class="menu">
 									{{range .Users}}
 										<div class="item" data-value="{{.ID}}">
@@ -67,7 +67,7 @@
 								<label>{{ctx.Locale.Tr "repo.settings.protect_whitelist_teams"}}</label>
 								<div class="ui multiple search selection dropdown">
 									<input type="hidden" name="whitelist_teams" value="{{.whitelist_teams}}">
-									<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
+									<div class="default text">{{ctx.Locale.Tr "search.team_kind"}}</div>
 									<div class="menu">
 										{{range .Teams}}
 											<div class="item" data-value="{{.ID}}">
@@ -113,7 +113,7 @@
 							<label>{{ctx.Locale.Tr "repo.settings.protect_approvals_whitelist_users"}}</label>
 							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="approvals_whitelist_users" value="{{.approvals_whitelist_users}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
+								<div class="default text">{{ctx.Locale.Tr "search.user_kind"}}</div>
 								<div class="menu">
 								{{range .Users}}
 									<div class="item" data-value="{{.ID}}">
@@ -128,7 +128,7 @@
 								<label>{{ctx.Locale.Tr "repo.settings.protect_approvals_whitelist_teams"}}</label>
 								<div class="ui multiple search selection dropdown">
 									<input type="hidden" name="approvals_whitelist_teams" value="{{.approvals_whitelist_teams}}">
-									<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
+									<div class="default text">{{ctx.Locale.Tr "search.team_kind"}}</div>
 									<div class="menu">
 									{{range .Teams}}
 										<div class="item" data-value="{{.ID}}">
@@ -210,7 +210,7 @@
 							<label>{{ctx.Locale.Tr "repo.settings.protect_merge_whitelist_users"}}</label>
 							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="merge_whitelist_users" value="{{.merge_whitelist_users}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
+								<div class="default text">{{ctx.Locale.Tr "search.user_kind"}}</div>
 								<div class="menu">
 								{{range .Users}}
 									<div class="item" data-value="{{.ID}}">
@@ -225,7 +225,7 @@
 							<label>{{ctx.Locale.Tr "repo.settings.protect_merge_whitelist_teams"}}</label>
 							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="merge_whitelist_teams" value="{{.merge_whitelist_teams}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
+								<div class="default text">{{ctx.Locale.Tr "search.team_kind"}}</div>
 								<div class="menu">
 								{{range .Teams}}
 									<div class="item" data-value="{{.ID}}">

templates/repo/settings/tags.tmpl

@@ -28,7 +28,7 @@
 									<label>{{ctx.Locale.Tr "repo.settings.tags.protection.allowed.users"}}</label>
 									<div class="ui multiple search selection dropdown">
 										<input type="hidden" name="allowlist_users" value="{{.allowlist_users}}">
-										<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
+										<div class="default text">{{ctx.Locale.Tr "search.user_kind"}}</div>
 										<div class="menu">
 											{{range .Users}}
 												<div class="item" data-value="{{.ID}}">
@@ -43,7 +43,7 @@
 										<label>{{ctx.Locale.Tr "repo.settings.tags.protection.allowed.teams"}}</label>
 										<div class="ui multiple search selection dropdown">
 											<input type="hidden" name="allowlist_teams" value="{{.allowlist_teams}}">
-											<div class="default text">{{ctx.Locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
+											<div class="default text">{{ctx.Locale.Tr "search.team_kind"}}</div>
 											<div class="menu">
 												{{range .Teams}}
 													<div class="item" data-value="{{.ID}}">

templates/shared/actions/runner_list.tmpl

@@ -33,11 +33,7 @@
 	</h4>
 	<div class="ui attached segment">
 		<form class="ui form ignore-dirty" id="user-list-search-form" action="{{$.Link}}">
-			<!-- Search Text -->
+			{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.runner_kind")}}
-			<div class="ui fluid action input">
-				{{template "shared/searchinput" dict "Value" .Keyword}}
-				<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
-			</div>
 		</form>
 	</div>
 	<div class="ui attached table segment">

templates/shared/issuelist.tmpl

@@ -153,7 +153,7 @@
 	{{end}}
 	{{if .IssueIndexerUnavailable}}
 		<div class="ui error message">
-			<p>{{ctx.Locale.Tr "repo.issues.keyword_search_unavailable"}}</p>
+			<p>{{ctx.Locale.Tr "search.keyword_search_unavailable"}}</p>
 		</div>
 	{{end}}
 </div>

templates/shared/repo_search.tmpl

@@ -1,17 +1,17 @@
-<div class="ui secondary filter menu">
+<div class="ui small secondary filter menu">
-	<form id="repo-search-form" class="ui form ignore-dirty tw-flex-1 tw-flex tw-flex-row tw-gap-x-2">
+	<form id="repo-search-form" class="ui form ignore-dirty tw-flex-1 tw-flex tw-flex-row tw-gap-x-2 gt-ac">
 		{{if .Language}}<input hidden name="language" value="{{.Language}}">{{end}}
-		<div class="ui fluid action input tw-flex-1">
+		<div class="ui small fluid action input tw-flex-1">
-			{{template "shared/searchinput" dict "Value" .Keyword}}
+			{{template "shared/search/input" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.repo_kind")}}
 			{{if .PageIsExploreRepositories}}
 				<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">
 			{{else if .TabName}}
 				<input type="hidden" name="tab" value="{{.TabName}}">
 			{{end}}
-			<button class="ui primary button">{{ctx.Locale.Tr "explore.search"}}</button>
+			{{template "shared/search/button"}}
 		</div>
 		<!-- Filter -->
-		<div class="ui dropdown type jump item tw-mr-0">
+		<div class="ui small dropdown type jump item tw-mr-0">
 			<span class="text">
 				{{ctx.Locale.Tr "filter"}}
 			</span>
@@ -36,7 +36,7 @@
 			</div>
 		</div>
 		<!-- Sort -->
-		<div class="ui dropdown type jump item gt-mr-0">
+		<div class="ui small dropdown type jump item gt-mr-0">
 			<span class="text">
 				{{ctx.Locale.Tr "repo.issues.filter_sort"}}
 			</span>
@@ -65,3 +65,4 @@
 		<span data-tooltip-content="{{ctx.Locale.Tr "explore.relevant_repositories_tooltip"}}">{{ctx.Locale.Tr "explore.relevant_repositories" (printf "?only_show_relevant=0&sort=%s&q=%s&language=%s" $.SortType (QueryEscape $.Keyword) (QueryEscape $.Language))}}</span>
 	</div>
 {{end}}
+<div class="divider"></div>

templates/shared/search/button.tmpl

@@ -0,0 +1,3 @@
+{{/* Disable (optional) - if search button has to be disabled */}}
+{{/* Tooltip (optional) - a tooltip to be displayed on hover */}}
+<button class="ui small icon button" aria-label="{{ctx.Locale.Tr "search.search"}}" {{with .Tooltip}}data-tooltip-content="{{.}}"{{end}}{{if .Disabled}} disabled{{end}}>{{svg "octicon-search"}}</button>

templates/shared/search/code/results.tmpl

@@ -1,6 +1,7 @@
 <div class="flex-text-block gt-fw">
 	{{range $term := .SearchResultLanguages}}
-	<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label gt-m-0" href="{{AppSubUrl}}{{if $.ContextUser}}/{{$.ContextUser.Name}}/-/code{{else}}/explore/code{{end}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
+	<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label gt-m-0"
+		href="{{$.Link}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}&fuzzy={{$.IsFuzzy}}">
 		<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
 		{{$term.Language}}
 		<div class="detail">{{$term.Count}}</div>
@@ -9,9 +10,10 @@
 </div>
 <div class="repository search">
 	{{range $result := .SearchResults}}
-		{{$repo := (index $.RepoMaps .RepoID)}}
+		{{$repo := or $.Repo (index $.RepoMaps .RepoID)}}
 		<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
 			<h4 class="ui top attached normal header gt-df gt-fw">
+				{{if not $.Repo}}
 					<span class="file gt-f1">
 						<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
 						{{if $repo.IsArchived}}
@@ -19,6 +21,9 @@
 						{{end}}
 						- {{.Filename}}
 					</span>
+				{{else}}
+					<span class="file gt-f1">{{.Filename}}</span>
+				{{end}}
 				<a role="button" class="ui basic tiny button" rel="nofollow" href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{.Filename | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.diff.view_file"}}</a>
 			</h4>
 			<div class="ui attached table segment">
@@ -28,3 +33,4 @@
 		</div>
 	{{end}}
 </div>
+{{template "base/paginate" .}}

templates/shared/search/code/search.tmpl

@@ -0,0 +1,15 @@
+<form class="ui form ignore-dirty">
+	{{template "shared/search/combo_fuzzy" dict "Value" .Keyword "Disabled" .CodeIndexerUnavailable "IsFuzzy" .IsFuzzy "Placeholder" (ctx.Locale.Tr "search.code_kind")}}
+</form>
+<div class="divider"></div>
+<div class="ui user list">
+	{{if .CodeIndexerUnavailable}}
+		<div class="ui error message">
+			<p>{{ctx.Locale.Tr "search.code_search_unavailable"}}</p>
+		</div>
+	{{else if .SearchResults}}
+		{{template "shared/search/code/results" .}}
+	{{else if .Keyword}}
+		<div>{{ctx.Locale.Tr "search.no_results"}}</div>
+	{{end}}
+</div>

templates/shared/search/combo.tmpl

@@ -0,0 +1,8 @@
+{{/* Value - value of the search field (for search results page) */}}
+{{/* Disabled (optional) - if search field/button has to be disabled */}}
+{{/* Placeholder (optional) - placeholder text to be used */}}
+{{/* Tooltip (optional) - a tooltip to be displayed on button hover */}}
+<div class="ui small fluid action input">
+	{{template "shared/search/input" dict "Value" .Value "Disabled" .Disabled "Placeholder" .Placeholder}}
+	{{template "shared/search/button" dict "Disabled" .Disabled "Tooltip" .Tooltip}}
+</div>

templates/shared/search/combo_fuzzy.tmpl

@@ -0,0 +1,10 @@
+{{/* Value - value of the search field (for search results page) */}}
+{{/* Disabled (optional) - if search field/button has to be disabled */}}
+{{/* Placeholder (optional) - placeholder text to be used */}}
+{{/* IsFuzzy - state of the fuzzy search toggle */}}
+{{/* Tooltip (optional) - a tooltip to be displayed on button hover */}}
+<div class="ui small fluid action input">
+	{{template "shared/search/input" dict "Value" .Value "Disabled" .Disabled "Placeholder" .Placeholder}}
+	{{template "shared/search/fuzzy" dict "Disabled" .Disabled "IsFuzzy" .IsFuzzy}}
+	{{template "shared/search/button" dict "Disabled" .Disabled "Tooltip" .Tooltip}}
+</div>

templates/shared/search/fuzzy.tmpl

@@ -0,0 +1,10 @@
+{{/* Disabled (optional) - if dropdown has to be disabled */}}
+{{/* IsFuzzy - state of the fuzzy search toggle */}}
+<div class="ui small dropdown selection {{if .Disabled}} disabled{{end}}" data-tooltip-content="{{ctx.Locale.Tr "search.type_tooltip"}}">
+	<input name="fuzzy" type="hidden"{{if .Disabled}} disabled{{end}} value="{{.IsFuzzy}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+	<div class="text">{{if .IsFuzzy}}{{ctx.Locale.Tr "search.fuzzy"}}{{else}}{{ctx.Locale.Tr "search.match"}}{{end}}</div>
+	<div class="menu">
+		<div class="item" data-value="true" data-tooltip-content="{{ctx.Locale.Tr "search.fuzzy_tooltip"}}">{{ctx.Locale.Tr "search.fuzzy"}}</div>
+		<div class="item" data-value="false" data-tooltip-content="{{ctx.Locale.Tr "search.match_tooltip"}}">{{ctx.Locale.Tr "search.match"}}</div>
+	</div>
+</div>

templates/shared/search/input.tmpl

@@ -0,0 +1,4 @@
+{{/* Value - value of the search field (for search results page) */}}
+{{/* Disabled (optional) - if search field has to be disabled */}}
+{{/* Placeholder (optional) - placeholder text to be used */}}
+<input type="search" spellcheck="false" name="q" maxlength="255" placeholder="{{with .Placeholder}}{{.}}{{else}}{{ctx.Locale.Tr "search.search"}}{{end}}"{{with .Value}} value="{{.}}"{{end}}{{if .Disabled}} disabled{{end}}>

templates/shared/searchinput.tmpl

@@ -1 +0,0 @@
-<input type="search" spellcheck="false" name="q" maxlength="255" placeholder="{{ctx.Locale.Tr "explore.search"}}…"{{if .Value}} value="{{.Value}}"{{end}}{{if .Disabled}} disabled{{end}}>

templates/user/code.tmpl

@@ -3,7 +3,7 @@
 	<div role="main" aria-label="{{.Title}}" class="page-content organization code">
 		{{template "org/header" .}}
 		<div class="ui container">
-			{{template "code/searchcombo" .}}
+			{{template "shared/search/code/search" .}}
 		</div>
 	</div>
 {{else}}
@@ -15,7 +15,7 @@
 				</div>
 				<div class="ui twelve wide column">
 					{{template "user/overview/header" .}}
-					{{template "code/searchcombo" .}}
+					{{template "shared/search/code/search" .}}
 				</div>
 			</div>
 		</div>

templates/user/dashboard/issues.tmpl

@@ -50,9 +50,9 @@
 							<input type="hidden" name="type" value="{{$.ViewType}}">
 							<input type="hidden" name="sort" value="{{$.SortType}}">
 							<input type="hidden" name="state" value="{{$.State}}">
-							{{template "shared/searchinput" dict "Value" $.Keyword}}
+							{{template "shared/search/input" dict "Value" $.Keyword}}
 							<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{ctx.Locale.Tr "explore.go_to"}}">{{svg "octicon-hash"}}</button>
-							<button class="ui small icon button" aria-label="{{ctx.Locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
+							{{template "shared/search/button"}}
 						</div>
 					</form>
 					<!-- Sort -->

templates/user/dashboard/milestones.tmpl

@@ -46,14 +46,11 @@
 						</a>
 					</div>
 					<form class="list-header-search ui form ignore-dirty">
-						<div class="ui small search fluid action input">
 						<input type="hidden" name="type" value="{{$.ViewType}}">
 							<input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}},{{end}}]">
 							<input type="hidden" name="sort" value="{{$.SortType}}">
 							<input type="hidden" name="state" value="{{$.State}}">
-							{{template "shared/searchinput" dict "Value" $.Keyword}}
+						{{template "shared/search/combo" dict "Value" $.Keyword}}
-							<button class="ui small icon button" type="submit" aria-label="{{ctx.Locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
-						</div>
 					</form>
 					<!-- Sort -->
 					<div class="list-header-sort ui dropdown type jump item">

templates/user/dashboard/repolist.tmpl

@@ -9,7 +9,7 @@ const data = {
 	textOrganization: {{ctx.Locale.Tr "organization"}},
 	textMyRepos: {{ctx.Locale.Tr "home.my_repos"}},
 	textNewRepo: {{ctx.Locale.Tr "new_repo"}},
-	textSearchRepos: {{ctx.Locale.Tr "home.search_repos"}},
+	textSearchRepos: {{ctx.Locale.Tr "search.repo_kind"}},
 	textFilter: {{ctx.Locale.Tr "home.filter"}},
 	textShowArchived: {{ctx.Locale.Tr "home.show_archived"}},
 	textShowPrivate: {{ctx.Locale.Tr "home.show_private"}},

web_src/css/base.css

@@ -282,16 +282,26 @@ ol.ui.list li,
 .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
   min-width: 10em;
 }
-
+.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
-.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus,:hover) {
+  border-right: none;
-  border-right-color: transparent;
+}
+.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
+  border-color: var(--color-input-border);
+}
+.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
-
 .ui.action.input:not([class*="left action"]) > input,
 .ui.action.input:not([class*="left action"]) > input:hover {
-  border-right: 1px solid transparent;
+  border-right: none;
+}
+.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
+.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
+.ui.action.input:not([class*="left action"]) > input:focus + .button,
+.ui.action.input:not([class*="left action"]) > input:focus + .button:hover {
+  border-left-color: var(--color-primary);
 }
-
 .ui.action.input:not([class*="left action"]) > input:focus {
   border-right-color: var(--color-primary);
 }
@@ -610,10 +620,6 @@ ol.ui.list li,
   border-color: var(--color-primary);
 }
 
-.ui.selection.dropdown .menu {
-  margin: 0 -1.25px;
-}
-
 .ui.pointing.dropdown > .menu:not(.hidden)::after {
   background: var(--color-menu);
   box-shadow: -1px -1px 0 0 var(--color-secondary);

web_src/css/form.css

@@ -41,6 +41,11 @@ textarea,
   color: var(--color-input-text);
 }
 
+/* fix fomantic small dropdown having inconsistent padding with input */
+.ui.small.selection.dropdown {
+  padding: .67857143em 3.2em .67857143em 1em;
+}
+
 input:hover,
 textarea:hover,
 .ui.input input:hover,

web_src/js/components/DashboardRepoList.vue

@@ -355,7 +355,7 @@ export default sfc; // activate the IDE's Vue plugin
         </a>
       </h4>
       <div class="ui attached segment repos-search">
-        <div class="ui fluid action left icon input" :class="{loading: isLoading}">
+        <div class="ui small fluid action left icon input" :class="{loading: isLoading}">
           <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
           <i class="icon"><svg-icon name="octicon-search" :size="16"/></i>
           <div class="ui dropdown icon button" :title="textFilter">