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>
Conflicts:
	routers/web/repo/search.go
	templates/repo/home.tmpl
	templates/repo/search.tmpl
	templates/shared/repo_search.tmpl

options/locale/locale_en-US.ini

@@ -156,6 +156,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
@@ -336,7 +357,6 @@ my_orgs = Organizations
 show_more_repos = Show more repositories…
 collaborative_repos = Collaborative Repositories
 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"
@@ -361,20 +381,8 @@ stars_few = %d stars
 forks_one = %d fork
 forks_few = %d forks
 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>.
@@ -1343,9 +1351,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
@@ -1521,7 +1528,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
@@ -2062,17 +2068,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
@@ -2241,7 +2236,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
@@ -2249,7 +2243,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.
@@ -2403,9 +2396,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:
@@ -2650,7 +2641,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:
@@ -2797,7 +2787,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

@@ -35,12 +35,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

@@ -21,12 +21,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 == "" {
@@ -34,7 +33,7 @@ func Search(ctx *context.Context) {
 		return
 	}
 
-	ctx.Data["SourcePath"] = ctx.Repo.Repository.Link()
+	ctx.Data["Repo"] = ctx.Repo.Repository
 
 	page := ctx.FormInt("page")
 	if page <= 0 {

routers/web/user/code.go

@@ -40,12 +40,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="search" value="true" type="hidden">
-				<input name="q" value="{{.Keyword}}" placeholder="{{ctx.Locale.Tr "repo.adopt_search"}}" autofocus>
+					<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

@@ -60,7 +60,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}}">
-			<input type="hidden" name="state" value="{{$.State}}">
+		{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.project_kind")}}
-			{{template "shared/searchinput" 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 small dropdown type jump item">

templates/repo/branch/list.tmpl

@@ -67,140 +67,136 @@
 			</div>
 		{{end}}
 
-		{{if .Branches}}
+		<h4 class="ui top attached header gt-df gt-ac gt-sb">
-			<h4 class="ui top attached header gt-df gt-ac gt-sb">
+			<div class="gt-df gt-ac">
-				<div class="gt-df gt-ac">
+				{{ctx.Locale.Tr "repo.branches"}}
-					{{ctx.Locale.Tr "repo.branches"}}
-				</div>
-				<div class="tw-whitespace-nowrap">
-					<form class="ignore-dirty" method="get">
-						<div class="ui tiny search input">
-							<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">
-					<tbody>
-						{{range .Branches}}
-							<tr>
-								<td class="eight wide">
-								{{if .DBBranch.IsDeleted}}
-									<div class="flex-text-block">
-										<a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
-										<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
-									</div>
-									<p class="info">{{ctx.Locale.Tr "repo.branch.deleted_by" .DBBranch.DeletedBy.Name}} {{TimeSinceUnix .DBBranch.DeletedUnix ctx.Locale}}</p>
-								{{else}}
-									<div class="flex-text-block">
-										{{if .IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
-										<a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
-										<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
-										{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DBBranch.CommitID)}}
-									</div>
-									<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .DBBranch.CommitID}}">{{ShortSha .DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DBBranch.CommitMessage ($.Repository.ComposeMetas ctx)}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DBBranch.Pusher}} &nbsp;{{template "shared/user/namelink" .DBBranch.Pusher}}{{end}}</p>
-								{{end}}
-								</td>
-								<td class="two wide ui">
-									{{if and (not .DBBranch.IsDeleted) $.DefaultBranchBranch}}
-									<div class="commit-divergence">
-										<div class="bar-group">
-											<div class="count count-behind">{{.CommitsBehind}}</div>
-											{{/* old code bears 0/0.0 = NaN output, so it might output invalid "width: NaNpx", it just works and doesn't caues any problem. */}}
-											<div class="bar bar-behind" style="width: {{Eval 100 "*" .CommitsBehind "/" "(" .CommitsBehind "+" .CommitsAhead "+" 0.0 ")"}}%"></div>
-										</div>
-										<div class="bar-group">
-											<div class="count count-ahead">{{.CommitsAhead}}</div>
-											<div class="bar bar-ahead" style="width: {{Eval 100 "*" .CommitsAhead "/" "(" .CommitsBehind "+" .CommitsAhead "+" 0.0 ")"}}%"></div>
-										</div>
-									</div>
-									{{end}}
-								</td>
-								<td class="two wide right aligned">
-									{{if not .LatestPullRequest}}
-										{{if .IsIncluded}}
-											<span class="ui orange large label" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.included_desc"}}">
-												{{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.branch.included"}}
-											</span>
-										{{else if and (not .DBBranch.IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
-										<a href="{{$.RepoLink}}/compare/{{PathEscapeSegments $.DefaultBranchBranch.DBBranch.Name}}...{{if ne $.Repository.Owner.Name $.Owner.Name}}{{PathEscape $.Owner.Name}}:{{end}}{{PathEscapeSegments .DBBranch.Name}}">
-											<button id="new-pull-request" class="ui compact basic button gt-mr-0">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</button>
-										</a>
-										{{end}}
-									{{else if and .LatestPullRequest.HasMerged .MergeMovedOn}}
-										{{if and (not .DBBranch.IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
-										<a href="{{$.RepoLink}}/compare/{{PathEscapeSegments $.DefaultBranchBranch.DBBranch.Name}}...{{if ne $.Repository.Owner.Name $.Owner.Name}}{{PathEscape $.Owner.Name}}:{{end}}{{PathEscapeSegments .DBBranch.Name}}">
-											<button id="new-pull-request" class="ui compact basic button gt-mr-0">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</button>
-										</a>
-										{{end}}
-									{{else}}
-										<a href="{{.LatestPullRequest.Issue.Link}}" class="gt-vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
-										{{if .LatestPullRequest.HasMerged}}
-											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui purple large label">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.pulls.merged"}}</a>
-										{{else if .LatestPullRequest.Issue.IsClosed}}
-											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui red large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.issues.closed_title"}}</a>
-										{{else}}
-											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui green large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.issues.open_title"}}</a>
-										{{end}}
-									{{end}}
-								</td>
-								<td class="three wide right aligned overflow-visible">
-									{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted)}}
-										<button class="btn interact-bg gt-p-3 show-modal show-create-branch-modal"
-											data-branch-from="{{.DBBranch.Name}}"
-											data-branch-from-urlcomponent="{{PathEscapeSegments .DBBranch.Name}}"
-											data-tooltip-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" .DBBranch.Name}}"
-											data-modal="#create-branch-modal" data-name="{{.DBBranch.Name}}"
-										>
-											{{svg "octicon-git-branch"}}
-										</button>
-									{{end}}
-									{{if $.EnableFeed}}
-										<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DBBranch.Name}}">{{svg "octicon-rss"}}</a>
-									{{end}}
-									{{if and (not .DBBranch.IsDeleted) (not $.DisableDownloadSourceArchives)}}
-										<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.download" (.DBBranch.Name)}}">
-											{{svg "octicon-download"}}
-											<div class="menu">
-												<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .DBBranch.Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
-												<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .DBBranch.Name}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
-											</div>
-										</div>
-									{{end}}
-									{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted) (not $.IsMirror)}}
-										<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal"
-											data-is-default-branch="false"
-											data-old-branch-name="{{.DBBranch.Name}}"
-											data-modal="#rename-branch-modal"
-											data-tooltip-content="{{ctx.Locale.Tr "repo.branch.rename" (.DBBranch.Name)}}"
-										>
-											{{svg "octicon-pencil"}}
-										</button>
-									{{end}}
-									{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
-										{{if .DBBranch.IsDeleted}}
-											<button class="btn interact-bg gt-p-3 link-action restore-branch-button" data-url="{{$.Link}}/restore?branch_id={{.DBBranch.ID}}&name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.restore" (.DBBranch.Name)}}">
-												<span class="text blue">
-													{{svg "octicon-reply"}}
-												</span>
-											</button>
-										{{else}}
-											<button class="btn interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.delete" (.DBBranch.Name)}}" data-name="{{.DBBranch.Name}}">
-												{{svg "octicon-trash"}}
-											</button>
-										{{end}}
-									{{end}}
-								</td>
-							</tr>
-						{{end}}
-					</tbody>
-				</table>
 			</div>
-			{{template "base/paginate" .}}
+		</h4>
-		{{end}}
+
+		<div class="ui attached segment">
+			<form class="ignore-dirty" method="get">
+				{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.branch_kind")}}
+			</form>
+		</div>
+
+		<div class="ui attached table segment">
+			<table class="ui very basic striped fixed table single line">
+				<tbody>
+					{{range .Branches}}
+						<tr>
+							<td class="eight wide">
+							{{if .DBBranch.IsDeleted}}
+								<div class="flex-text-block">
+									<a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
+									<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
+								</div>
+								<p class="info">{{ctx.Locale.Tr "repo.branch.deleted_by" .DBBranch.DeletedBy.Name}} {{TimeSinceUnix .DBBranch.DeletedUnix ctx.Locale}}</p>
+							{{else}}
+								<div class="flex-text-block">
+									{{if .IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
+									<a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
+									<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
+									{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DBBranch.CommitID)}}
+								</div>
+								<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .DBBranch.CommitID}}">{{ShortSha .DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DBBranch.CommitMessage ($.Repository.ComposeMetas ctx)}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DBBranch.Pusher}} &nbsp;{{template "shared/user/namelink" .DBBranch.Pusher}}{{end}}</p>
+							{{end}}
+							</td>
+							<td class="two wide ui">
+								{{if and (not .DBBranch.IsDeleted) $.DefaultBranchBranch}}
+								<div class="commit-divergence">
+									<div class="bar-group">
+										<div class="count count-behind">{{.CommitsBehind}}</div>
+										{{/* old code bears 0/0.0 = NaN output, so it might output invalid "width: NaNpx", it just works and doesn't caues any problem. */}}
+										<div class="bar bar-behind" style="width: {{Eval 100 "*" .CommitsBehind "/" "(" .CommitsBehind "+" .CommitsAhead "+" 0.0 ")"}}%"></div>
+									</div>
+									<div class="bar-group">
+										<div class="count count-ahead">{{.CommitsAhead}}</div>
+										<div class="bar bar-ahead" style="width: {{Eval 100 "*" .CommitsAhead "/" "(" .CommitsBehind "+" .CommitsAhead "+" 0.0 ")"}}%"></div>
+									</div>
+								</div>
+								{{end}}
+							</td>
+							<td class="two wide right aligned">
+								{{if not .LatestPullRequest}}
+									{{if .IsIncluded}}
+										<span class="ui orange large label" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.included_desc"}}">
+											{{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.branch.included"}}
+										</span>
+									{{else if and (not .DBBranch.IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
+									<a href="{{$.RepoLink}}/compare/{{PathEscapeSegments $.DefaultBranchBranch.DBBranch.Name}}...{{if ne $.Repository.Owner.Name $.Owner.Name}}{{PathEscape $.Owner.Name}}:{{end}}{{PathEscapeSegments .DBBranch.Name}}">
+										<button id="new-pull-request" class="ui compact basic button gt-mr-0">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</button>
+									</a>
+									{{end}}
+								{{else if and .LatestPullRequest.HasMerged .MergeMovedOn}}
+									{{if and (not .DBBranch.IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
+									<a href="{{$.RepoLink}}/compare/{{PathEscapeSegments $.DefaultBranchBranch.DBBranch.Name}}...{{if ne $.Repository.Owner.Name $.Owner.Name}}{{PathEscape $.Owner.Name}}:{{end}}{{PathEscapeSegments .DBBranch.Name}}">
+										<button id="new-pull-request" class="ui compact basic button gt-mr-0">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</button>
+									</a>
+									{{end}}
+								{{else}}
+									<a href="{{.LatestPullRequest.Issue.Link}}" class="gt-vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
+									{{if .LatestPullRequest.HasMerged}}
+										<a href="{{.LatestPullRequest.Issue.Link}}" class="ui purple large label">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.pulls.merged"}}</a>
+									{{else if .LatestPullRequest.Issue.IsClosed}}
+										<a href="{{.LatestPullRequest.Issue.Link}}" class="ui red large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.issues.closed_title"}}</a>
+									{{else}}
+										<a href="{{.LatestPullRequest.Issue.Link}}" class="ui green large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.issues.open_title"}}</a>
+									{{end}}
+								{{end}}
+							</td>
+							<td class="three wide right aligned overflow-visible">
+								{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted)}}
+									<button class="btn interact-bg gt-p-3 show-modal show-create-branch-modal"
+										data-branch-from="{{.DBBranch.Name}}"
+										data-branch-from-urlcomponent="{{PathEscapeSegments .DBBranch.Name}}"
+										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" .DBBranch.Name}}"
+										data-modal="#create-branch-modal" data-name="{{.DBBranch.Name}}"
+									>
+										{{svg "octicon-git-branch"}}
+									</button>
+								{{end}}
+								{{if $.EnableFeed}}
+									<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DBBranch.Name}}">{{svg "octicon-rss"}}</a>
+								{{end}}
+								{{if and (not .DBBranch.IsDeleted) (not $.DisableDownloadSourceArchives)}}
+									<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.download" (.DBBranch.Name)}}">
+										{{svg "octicon-download"}}
+										<div class="menu">
+											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .DBBranch.Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
+											<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .DBBranch.Name}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
+										</div>
+									</div>
+								{{end}}
+								{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted) (not $.IsMirror)}}
+									<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal"
+										data-is-default-branch="false"
+										data-old-branch-name="{{.DBBranch.Name}}"
+										data-modal="#rename-branch-modal"
+										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.rename" (.DBBranch.Name)}}"
+									>
+										{{svg "octicon-pencil"}}
+									</button>
+								{{end}}
+								{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
+									{{if .DBBranch.IsDeleted}}
+										<button class="btn interact-bg gt-p-3 link-action restore-branch-button" data-url="{{$.Link}}/restore?branch_id={{.DBBranch.ID}}&name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.restore" (.DBBranch.Name)}}">
+											<span class="text blue">
+												{{svg "octicon-reply"}}
+											</span>
+										</button>
+									{{else}}
+										<button class="btn interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.delete" (.DBBranch.Name)}}" data-name="{{.DBBranch.Name}}">
+											{{svg "octicon-trash"}}
+										</button>
+									{{end}}
+								{{end}}
+							</td>
+						</tr>
+					{{end}}
+				</tbody>
+			</table>
+		</div>
+		{{template "base/paginate" .}}
 	</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>
-	<div class="commits-table-right tw-whitespace-nowrap">
+	{{if .IsDiffCompare}}
-		{{if .PageIsCommits}}
+		<div class="commits-table-right tw-whitespace-nowrap">
-			<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>
-	</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

@@ -14,8 +14,8 @@
 			<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}}

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,61 +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"}}">
-					{{if .CodeIndexerEnabled}}
-						<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>
-					{{end}}
-					<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/{{if $.CodeIndexerEnabled}}commit{{else}}branch{{end}}/{{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 "IsIndexer" $.CodeIndexerEnabled "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,18 +1,18 @@
-<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}}
 		{{if .TopicOnly}}<input hidden name="topic" value="{{.TopicOnly}}">{{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>
@@ -37,7 +37,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>
@@ -66,3 +66,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,16 +10,20 @@
 </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">
-				<span class="file gt-f1">
+				{{if not $.Repo}}
-					<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
+					<span class="file gt-f1">
+						<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
 						{{if $repo.IsArchived}}
 							<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
 						{{end}}
-					- {{.Filename}}
+						- {{.Filename}}
-				</span>
+					</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="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

@@ -6,7 +6,7 @@ const data = {
 	isStarsEnabled: {{not .IsDisableStars}},
 
 	textMyRepos: {{ctx.Locale.Tr "home.my_repos"}},
-	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

@@ -277,16 +277,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);
 }
@@ -538,10 +548,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,