Improve protected branch setting page (#24379)

Main changes:

1. Change html structure of protected branch page, use [`grouped
fields`](https://fomantic-ui.com/collections/form.html#grouped-fields)
instead of `fields` for better margin, and wrap `grouped fields` around
related `field`s, remove unnecessary `<div id="protection_box"
class="fields">` outer div

2. Changed some order of field to make them more categorized, used `ui
dividing header` for categorization and fine tune css.

Before:

<img width="1907" alt="Screen Shot 2023-04-27 at 14 56 19"
src="https://user-images.githubusercontent.com/17645053/234783731-bce8a7ce-dfc9-4d47-a3a8-b962ebea9467.png">
<img width="1849" alt="Screen Shot 2023-04-27 at 14 56 30"
src="https://user-images.githubusercontent.com/17645053/234783740-c47d314e-5e2d-4854-98fd-c88f85ef3584.png">
<img width="1872" alt="Screen Shot 2023-04-27 at 14 56 36"
src="https://user-images.githubusercontent.com/17645053/234783745-18e35a75-07e8-451d-b001-f9bcf16fcab5.png">

After:


https://user-images.githubusercontent.com/17645053/235114568-da010aad-7654-4410-ab8c-5d0fce7edadb.mov



3. Changed "Enable Merge Whitelist" to radio checkbox, and added "Enable
Merge" radio checkbox, which are exclusive

Before:

<img width="926" alt="Screen Shot 2023-04-28 at 13 08 29"
src="https://user-images.githubusercontent.com/17645053/235059233-75790f7a-e5ea-4e1c-82c6-509fef8b84b3.png">

After:

<img width="942" alt="Screen Shot 2023-04-28 at 13 09 28"
src="https://user-images.githubusercontent.com/17645053/235059367-852d1f61-8407-4126-8c79-315b9c1ffada.png">


4. Add a link to set default branch on branch list page (with reference
to github)


https://user-images.githubusercontent.com/17645053/234787404-61c1c7b6-aabf-429f-a109-5b690e4e0b5a.mov

5. Removed dead codes.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>

9 files changed, 181 insertions, 212 deletions

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 0072ac6fc3..32d9bebc8b 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1901,6 +1901,7 @@ settings.sync_mirror = Synchronize Now
 settings.mirror_sync_in_progress = Mirror synchronization is in progress. Check back in a minute.
 settings.site = Website
 settings.update_settings = Update Settings
+settings.branches.switch_default_branch = Switch Default Branch
 settings.branches.update_default_branch = Update Default Branch
 settings.branches.add_new_rule = Add New Rule
 settings.advanced_settings = Advanced Settings
@@ -2096,6 +2097,8 @@ settings.event_pull_request_review = Pull Request Reviewed
 settings.event_pull_request_review_desc = Pull request approved, rejected, or review comment.
 settings.event_pull_request_sync = Pull Request Synchronized
 settings.event_pull_request_sync_desc = Pull request synchronized.
+settings.event_pull_request_approvals = Pull Request Approvals
+settings.event_pull_request_merge = Pull Request Merge
 settings.event_package = Package
 settings.event_package_desc = Package created or deleted in a repository.
 settings.branch_filter = Branch filter
@@ -2151,13 +2154,15 @@ settings.protected_branch.delete_rule = Delete Rule
 settings.protected_branch_can_push = Allow push?
 settings.protected_branch_can_push_yes = You can push
 settings.protected_branch_can_push_no = You cannot push
-settings.branch_protection = Branch Protection for Branch '<b>%s</b>'
+settings.branch_protection = Branch Protection Rules for Branch '<b>%s</b>'
 settings.protect_this_branch = Enable Branch Protection
 settings.protect_this_branch_desc = Prevents deletion and restricts Git pushing and merging to the branch.
 settings.protect_disable_push = Disable Push
 settings.protect_disable_push_desc = No pushing will be allowed to this branch.
 settings.protect_enable_push = Enable Push
 settings.protect_enable_push_desc = Anyone with write access will be allowed to push to this branch (but not force push).
+settings.protect_enable_merge = Enable Merge
+settings.protect_enable_merge_desc = Anyone with write access will be allowed to merge the pull requests into this branch.
 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.
@@ -2183,6 +2188,7 @@ settings.dismiss_stale_approvals_desc = When new commits that change the content
 settings.require_signed_commits = Require Signed Commits
 settings.require_signed_commits_desc = Reject pushes to this branch if they are unsigned or unverifiable.
 settings.protect_branch_name_pattern = Protected Branch Name Pattern
+settings.protect_patterns = Patterns
 settings.protect_protected_file_patterns = "Protected file patterns (separated using semicolon ';'):"
 settings.protect_protected_file_patterns_desc = "Protected files are not allowed to be changed directly even if user has rights to add, edit, or delete files in this branch. Multiple patterns can be separated using semicolon (';'). See <a href='https://pkg.go.dev/github.com/gobwas/glob#Compile'>github.com/gobwas/glob</a> documentation for pattern syntax. Examples: <code>.drone.yml</code>, <code>/docs/**/*.txt</code>."
 settings.protect_unprotected_file_patterns = "Unprotected file patterns (separated using semicolon ';'):"
diff --git a/routers/web/repo/setting_protected_branch.go b/routers/web/repo/setting_protected_branch.go
index 34e84c4656..3beb79f20f 100644
--- a/routers/web/repo/setting_protected_branch.go
+++ b/routers/web/repo/setting_protected_branch.go
@@ -130,15 +130,6 @@ func SettingsProtectedBranch(c *context.Context) {
 	}
 
 	c.Data["branch_status_check_contexts"] = contexts
-	c.Data["is_context_required"] = func(context string) bool {
-		for _, c := range rule.StatusCheckContexts {
-			if c == context {
-				return true
-			}
-		}
-		return false
-	}
-
 	if c.Repo.Owner.IsOrganization() {
 		teams, err := organization.OrgFromUser(c.Repo.Owner).TeamsWithAccessToRepo(c.Repo.Repository.ID, perm.AccessModeRead)
 		if err != nil {
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 596d9ae78b..40d6351301 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -5,8 +5,13 @@
 		{{template "base/alert" .}}
 		{{template "repo/sub_menu" .}}
 		{{if .DefaultBranchBranch}}
-			<h4 class="ui top attached header gt-mt-4">
+			<h4 class="ui top attached header">
 				{{.locale.Tr "repo.default_branch"}}
+				{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
+				<a role="button" class="right" href="{{.RepoLink}}/settings/branches" data-tooltip-content="{{.locale.Tr "repo.settings.branches.switch_default_branch"}}">
+					{{svg "octicon-arrow-switch"}}
+				</a>
+				{{end}}
 			</h4>
 
 			<div class="ui attached table segment">
diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
index f74a2a837d..8023d39fed 100644
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@@ -12,18 +12,13 @@
 				<p>
 					{{.locale.Tr "repo.settings.default_branch_desc"}}
 				</p>
-				<form class="ui form" action="{{.Link}}" method="post">
+				<form class="gt-df" action="{{.Link}}" method="post">
 					{{.CsrfTokenHtml}}
 					<input type="hidden" name="action" value="default_branch">
 					{{if not .Repository.IsEmpty}}
-					<div class="required inline field">
-						<div class="ui dropdown selection" tabindex="0">
-							<select name="branch">
-								<option value="{{.Repository.DefaultBranch}}">{{.Repository.DefaultBranch}}</option>
-								{{range .Branches}}
-									<option value="{{.}}">{{.}}</option>
-								{{end}}
-							</select>{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="ui dropdown selection gt-f1 gt-mr-3 gt-max-width-24rem">
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+							<input type="hidden" name="branch" value="{{.Repository.DefaultBranch}}">
 							<div class="default text">{{.Repository.DefaultBranch}}</div>
 							<div class="menu">
 								{{range .Branches}}
@@ -32,7 +27,6 @@
 							</div>
 						</div>
 						<button class="ui green button">{{$.locale.Tr "repo.settings.branches.update_default_branch"}}</button>
-					</div>
 					{{end}}
 				</form>
 			</div>
diff --git a/templates/repo/settings/protected_branch.tmpl b/templates/repo/settings/protected_branch.tmpl
index 31ba0bf888..2102dac641 100644
--- a/templates/repo/settings/protected_branch.tmpl
+++ b/templates/repo/settings/protected_branch.tmpl
@@ -5,39 +5,49 @@
 				{{.locale.Tr "repo.settings.branch_protection" (.Rule.RuleName|Escape) | Str2html}}
 			</h4>
 			<div class="ui attached segment branch-protection">
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.protect_patterns"}}</h5>
 				<div class="field">
-					<label for="protected_file_patterns">{{.locale.Tr "repo.settings.protect_branch_name_pattern"}}</label>
+					<label>{{.locale.Tr "repo.settings.protect_branch_name_pattern"}}</label>
 					<input name="rule_name" type="text" value="{{.Rule.RuleName}}">
 					<input name="rule_id" type="hidden" value="{{.Rule.ID}}">
 				</div>
-
-				<div class="ui divider"></div>
+				<div class="field">
+					<label>{{.locale.Tr "repo.settings.protect_protected_file_patterns"}}</label>
+					<input name="protected_file_patterns" type="text" value="{{.Rule.ProtectedFilePatterns}}">
+					<p class="help gt-ml-0">{{.locale.Tr "repo.settings.protect_protected_file_patterns_desc" | Safe}}</p>
+				</div>
+				<div class="field">
+					<label>{{.locale.Tr "repo.settings.protect_unprotected_file_patterns"}}</label>
+					<input name="unprotected_file_patterns" type="text" value="{{.Rule.UnprotectedFilePatterns}}">
+					<p class="help gt-ml-0">{{.locale.Tr "repo.settings.protect_unprotected_file_patterns_desc" | Safe}}</p>
+				</div>
 
 				{{.CsrfTokenHtml}}
-				<div id="protection_box" class="fields">
-					<div class="field">
-						<div class="ui radio checkbox">
-							<input name="enable_push" type="radio" value="none" class="disable-whitelist" data-target="#whitelist_box" {{if not .Rule.CanPush}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_disable_push"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_disable_push_desc"}}</p>
-						</div>
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.event_push"}}</h5>
+				<div class="field">
+					<div class="ui radio checkbox">
+						<input name="enable_push" type="radio" value="none" class="toggle-target-disabled" data-target="#whitelist_box" {{if not .Rule.CanPush}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.protect_disable_push"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.protect_disable_push_desc"}}</p>
 					</div>
-					<div class="field">
-						<div class="ui radio checkbox">
-							<input name="enable_push" type="radio" value="all" class="disable-whitelist" data-target="#whitelist_box" {{if and (.Rule.CanPush) (not .Rule.EnableWhitelist)}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_enable_push"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_enable_push_desc"}}</p>
-						</div>
+				</div>
+				<div class="field">
+					<div class="ui radio checkbox">
+						<input name="enable_push" type="radio" value="all" class="toggle-target-disabled" data-target="#whitelist_box" {{if and (.Rule.CanPush) (not .Rule.EnableWhitelist)}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.protect_enable_push"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.protect_enable_push_desc"}}</p>
 					</div>
+				</div>
+				<div class="grouped fields">
 					<div class="field">
 						<div class="ui radio checkbox">
-							<input name="enable_push" type="radio" value="whitelist" class="enable-whitelist" data-target="#whitelist_box" {{if and (.Rule.CanPush) (.Rule.EnableWhitelist)}}checked{{end}}>
+							<input name="enable_push" type="radio" value="whitelist" class="toggle-target-enabled" data-target="#whitelist_box" {{if and (.Rule.CanPush) (.Rule.EnableWhitelist)}}checked{{end}}>
 							<label>{{.locale.Tr "repo.settings.protect_whitelist_committers"}}</label>
 							<p class="help">{{.locale.Tr "repo.settings.protect_whitelist_committers_desc"}}</p>
 						</div>
 					</div>
-					<div id="whitelist_box" class="fields {{if not .Rule.EnableWhitelist}}disabled{{end}}">
-						<div class="whitelist field">
+					<div id="whitelist_box" class="grouped fields {{if not .Rule.EnableWhitelist}}disabled{{end}}">
+						<div class="checkbox-sub-item field">
 							<label>{{.locale.Tr "repo.settings.protect_whitelist_users"}}</label>
 							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="whitelist_users" value="{{.whitelist_users}}">
@@ -52,8 +62,7 @@
 							</div>
 						</div>
 						{{if .Owner.IsOrganization}}
-							<br>
-							<div class="whitelist field">
+							<div class="checkbox-sub-item field">
 								<label>{{.locale.Tr "repo.settings.protect_whitelist_teams"}}</label>
 								<div class="ui multiple search selection dropdown">
 									<input type="hidden" name="whitelist_teams" value="{{.whitelist_teams}}">
@@ -69,105 +78,37 @@
 								</div>
 							</div>
 						{{end}}
-						<br>
-						<div class="whitelist field">
+						<div class="checkbox-sub-item field">
 							<div class="ui checkbox">
 								<input type="checkbox" name="whitelist_deploy_keys" {{if .Rule.WhitelistDeployKeys}}checked{{end}}>
-								<label for="whitelist_deploy_keys">{{.locale.Tr "repo.settings.protect_whitelist_deploy_keys"}}</label>
-							</div>
-						</div>
-					</div>
-
-					<div class="ui divider"></div>
-
-					<div class="field">
-						<div class="ui checkbox">
-							<input class="enable-whitelist" name="enable_merge_whitelist" type="checkbox" data-target="#merge_whitelist_box" {{if .Rule.EnableMergeWhitelist}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_committers"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_merge_whitelist_committers_desc"}}</p>
-						</div>
-					</div>
-					<div id="merge_whitelist_box" class="fields {{if not .Rule.EnableMergeWhitelist}}disabled{{end}}">
-						<div class="whitelist field">
-							<label>{{.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">{{.locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
-								<div class="menu">
-								{{range .Users}}
-									<div class="item" data-value="{{.ID}}">
-										{{avatar $.Context . 28 "mini"}}{{template "repo/search_name" .}}
-									</div>
-								{{end}}
-								</div>
+								<label>{{.locale.Tr "repo.settings.protect_whitelist_deploy_keys"}}</label>
 							</div>
 						</div>
-					{{if .Owner.IsOrganization}}
-						<br>
-						<div class="whitelist field">
-							<label>{{.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">{{.locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
-								<div class="menu">
-								{{range .Teams}}
-									<div class="item" data-value="{{.ID}}">
-										{{svg "octicon-people"}}
-									{{.Name}}
-									</div>
-								{{end}}
-								</div>
-							</div>
-						</div>
-					{{end}}
-					</div>
-
-					<div class="field">
-						<div class="ui checkbox">
-							<input class="enable-statuscheck" name="enable_status_check" type="checkbox" data-target="#statuscheck_contexts_box" {{if eq (len .branch_status_check_contexts) 0}}disabled{{end}} {{if .Rule.EnableStatusCheck}}checked{{end}}>
-							<label>{{.locale.Tr "repo.settings.protect_check_status_contexts"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.protect_check_status_contexts_desc"}}</p>
-						</div>
-					</div>
-
-					<div id="statuscheck_contexts_box" class="fields {{if not .Rule.EnableStatusCheck}}disabled{{end}}">
-						<div class="field">
-							<table class="ui celled table six column">
-								<thead>
-									<tr><th>
-										{{.locale.Tr "repo.settings.protect_check_status_contexts_list"}}
-									</th>
-									</tr>
-								</thead>
-								<tbody>
-								{{range $.branch_status_check_contexts}}
-									<tr><td>
-										<span class="ui checkbox">
-											<input class="enable-whitelist" name="status_check_contexts" value="{{.}}" type="checkbox" {{if $.is_context_required}}{{if call $.is_context_required .}}checked{{end}}{{end}}>
-										</span>
-										{{.}}
-										{{if $.is_context_required}}{{if call $.is_context_required .}}<div class="ui label right">Required</div>{{end}}{{end}}
-									</td></tr>
-								{{end}}
-								</tbody>
-							</table>
-						</div>
 					</div>
-
-					<div class="field">
-						<label for="required-approvals">{{.locale.Tr "repo.settings.protect_required_approvals"}}</label>
-						<input name="required_approvals" id="required-approvals" type="number" value="{{.Rule.RequiredApprovals}}">
-						<p class="help">{{.locale.Tr "repo.settings.protect_required_approvals_desc"}}</p>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="require_signed_commits" type="checkbox" {{if .Rule.RequireSignedCommits}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.require_signed_commits"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.require_signed_commits_desc"}}</p>
 					</div>
+				</div>
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.event_pull_request_approvals"}}</h5>
+				<div class="field">
+					<label>{{.locale.Tr "repo.settings.protect_required_approvals"}}</label>
+					<input name="required_approvals" type="number" value="{{.Rule.RequiredApprovals}}">
+					<p class="help gt-ml-0">{{.locale.Tr "repo.settings.protect_required_approvals_desc"}}</p>
+				</div>
+				<div class="grouped fields">
 					<div class="field">
 						<div class="ui checkbox">
-							<input class="enable-whitelist" name="enable_approvals_whitelist" type="checkbox" data-target="#approvals_whitelist_box" {{if .Rule.EnableApprovalsWhitelist}}checked{{end}}>
+							<input name="enable_approvals_whitelist" type="checkbox" class="toggle-target-enabled" data-target="#approvals_whitelist_box" {{if .Rule.EnableApprovalsWhitelist}}checked{{end}}>
 							<label>{{.locale.Tr "repo.settings.protect_approvals_whitelist_enabled"}}</label>
 							<p class="help">{{.locale.Tr "repo.settings.protect_approvals_whitelist_enabled_desc"}}</p>
 						</div>
 					</div>
-					<div id="approvals_whitelist_box" class="fields {{if not .Rule.EnableApprovalsWhitelist}}disabled{{end}}">
-						<div class="whitelist field">
+					<div id="approvals_whitelist_box" class="grouped fields {{if not .Rule.EnableApprovalsWhitelist}}disabled{{end}}">
+						<div class="checkbox-sub-item field">
 							<label>{{.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}}">
@@ -182,8 +123,7 @@
 							</div>
 						</div>
 						{{if .Owner.IsOrganization}}
-							<br>
-							<div class="whitelist field">
+							<div class="checkbox-sub-item field">
 								<label>{{.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}}">
@@ -200,53 +140,117 @@
 							</div>
 						{{end}}
 					</div>
-					<div class="field">
-						<div class="ui checkbox">
-							<input name="block_on_rejected_reviews" type="checkbox" {{if .Rule.BlockOnRejectedReviews}}checked{{end}}>
-							<label for="block_on_rejected_reviews">{{.locale.Tr "repo.settings.block_rejected_reviews"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.block_rejected_reviews_desc"}}</p>
-						</div>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="dismiss_stale_approvals" type="checkbox" {{if .Rule.DismissStaleApprovals}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.dismiss_stale_approvals"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.dismiss_stale_approvals_desc"}}</p>
 					</div>
+				</div>
+				<div class="grouped fields">
 					<div class="field">
 						<div class="ui checkbox">
-							<input name="block_on_official_review_requests" type="checkbox" {{if .Rule.BlockOnOfficialReviewRequests}}checked{{end}}>
-							<label for="block_on_official_review_requests">{{.locale.Tr "repo.settings.block_on_official_review_requests"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.block_on_official_review_requests_desc"}}</p>
+							<input name="enable_status_check" type="checkbox" class="toggle-target-enabled" data-target="#statuscheck_contexts_box" {{if .Rule.EnableStatusCheck}}checked{{end}}>
+							<label>{{.locale.Tr "repo.settings.protect_check_status_contexts"}}</label>
+							<p class="help">{{.locale.Tr "repo.settings.protect_check_status_contexts_desc"}}</p>
 						</div>
 					</div>
+					<div id="statuscheck_contexts_box" class="checkbox-sub-item field {{if not .Rule.EnableStatusCheck}}disabled{{end}}">
+						<table class="ui celled table">
+							<thead>
+								<tr>
+									<th>{{.locale.Tr "repo.settings.protect_check_status_contexts_list"}}</th>
+								</tr>
+							</thead>
+							<tbody>
+							{{range $.branch_status_check_contexts}}
+								<tr>
+									<td>
+										<span class="ui checkbox">
+											<label>{{.}}</label>
+											<input name="status_check_contexts" value="{{.}}" type="checkbox" {{if SliceUtils.Contains $.Rule.StatusCheckContexts .}}checked{{end}}>
+										</span>
+									</td>
+								</tr>
+							{{else}}
+								<tr><td>N/A</td></tr>
+							{{end}}
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<h5 class="ui dividing header">{{.locale.Tr "repo.settings.event_pull_request_merge"}}</h5>
+				<div class="grouped fields">
 					<div class="field">
-						<div class="ui checkbox">
-							<input name="dismiss_stale_approvals" type="checkbox" {{if .Rule.DismissStaleApprovals}}checked{{end}}>
-							<label for="dismiss_stale_approvals">{{.locale.Tr "repo.settings.dismiss_stale_approvals"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.dismiss_stale_approvals_desc"}}</p>
+						<div class="ui radio checkbox">
+							<input name="enable_merge_whitelist" type="radio" value="false" class="toggle-target-disabled" data-target="#merge_whitelist_box" {{if not .Rule.EnableMergeWhitelist}}checked{{end}}>
+							<label>{{.locale.Tr "repo.settings.protect_enable_merge"}}</label>
+							<p class="help">{{.locale.Tr "repo.settings.protect_enable_merge_desc"}}</p>
 						</div>
 					</div>
 					<div class="field">
-						<div class="ui checkbox">
-							<input name="require_signed_commits" type="checkbox" {{if .Rule.RequireSignedCommits}}checked{{end}}>
-							<label for="require_signed_commits">{{.locale.Tr "repo.settings.require_signed_commits"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.require_signed_commits_desc"}}</p>
+						<div class="ui radio checkbox">
+							<input name="enable_merge_whitelist" type="radio" value="true" class="toggle-target-enabled" data-target="#merge_whitelist_box" {{if .Rule.EnableMergeWhitelist}}checked{{end}}>
+							<label>{{.locale.Tr "repo.settings.protect_merge_whitelist_committers"}}</label>
+							<p class="help">{{.locale.Tr "repo.settings.protect_merge_whitelist_committers_desc"}}</p>
 						</div>
 					</div>
-					<div class="field">
-						<div class="ui checkbox">
-							<input name="block_on_outdated_branch" type="checkbox" {{if .Rule.BlockOnOutdatedBranch}}checked{{end}}>
-							<label for="block_on_outdated_branch">{{.locale.Tr "repo.settings.block_outdated_branch"}}</label>
-							<p class="help">{{.locale.Tr "repo.settings.block_outdated_branch_desc"}}</p>
+					<div id="merge_whitelist_box" class="grouped fields {{if not .Rule.EnableMergeWhitelist}}disabled{{end}}">
+						<div class="checkbox-sub-item field">
+							<label>{{.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">{{.locale.Tr "repo.settings.protect_whitelist_search_users"}}</div>
+								<div class="menu">
+								{{range .Users}}
+									<div class="item" data-value="{{.ID}}">
+										{{avatar $.Context . 28 "mini"}}{{template "repo/search_name" .}}
+									</div>
+								{{end}}
+								</div>
+							</div>
 						</div>
+					{{if .Owner.IsOrganization}}
+						<div class="checkbox-sub-item field">
+							<label>{{.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">{{.locale.Tr "repo.settings.protect_whitelist_search_teams"}}</div>
+								<div class="menu">
+								{{range .Teams}}
+									<div class="item" data-value="{{.ID}}">
+										{{svg "octicon-people"}}
+									{{.Name}}
+									</div>
+								{{end}}
+								</div>
+							</div>
+						</div>
+					{{end}}
 					</div>
-					<div class="field">
-						<label for="protected_file_patterns">{{.locale.Tr "repo.settings.protect_protected_file_patterns"}}</label>
-						<input name="protected_file_patterns" id="protected_file_patterns" type="text" value="{{.Rule.ProtectedFilePatterns}}">
-						<p class="help">{{.locale.Tr "repo.settings.protect_protected_file_patterns_desc" | Safe}}</p>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="block_on_rejected_reviews" type="checkbox" {{if .Rule.BlockOnRejectedReviews}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.block_rejected_reviews"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.block_rejected_reviews_desc"}}</p>
 					</div>
-					<div class="field">
-						<label for="unprotected_file_patterns">{{.locale.Tr "repo.settings.protect_unprotected_file_patterns"}}</label>
-						<input name="unprotected_file_patterns" id="unprotected_file_patterns" type="text" value="{{.Rule.UnprotectedFilePatterns}}">
-						<p class="help">{{.locale.Tr "repo.settings.protect_unprotected_file_patterns_desc" | Safe}}</p>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="block_on_official_review_requests" type="checkbox" {{if .Rule.BlockOnOfficialReviewRequests}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.block_on_official_review_requests"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.block_on_official_review_requests_desc"}}</p>
+					</div>
+				</div>
+				<div class="field">
+					<div class="ui checkbox">
+						<input name="block_on_outdated_branch" type="checkbox" {{if .Rule.BlockOnOutdatedBranch}}checked{{end}}>
+						<label>{{.locale.Tr "repo.settings.block_outdated_branch"}}</label>
+						<p class="help">{{.locale.Tr "repo.settings.block_outdated_branch_desc"}}</p>
 					</div>
 				</div>
-
 				<div class="ui divider"></div>
 
 				<div class="field">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c7ea0e47c8..95f83ef00a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2533,12 +2533,12 @@ a.ui.basic.label:hover {
   right: 0.78571429rem;
   top: 0;
   bottom: 0;
-  height: 30px;
-  margin-top: auto;
-  margin-bottom: auto;
+  display: flex;
+  align-items: center;
 }
 
-/* https://github.com/go-gitea/gitea/issues/10210 */
+/* if a .top.attached.header is followed by a .segment, add some margin */
+.ui.segments ~ .ui.top.attached.header,
 .ui.attached.segment ~ .ui.top.attached.header {
   margin-top: 1rem;
 }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 22a284d43c..0b4b47f560 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -60,6 +60,8 @@ Gitea's private styles use `g-` prefix.
   text-overflow: ellipsis;
 }
 
+.gt-max-width-24rem { max-width: 24rem !important; }
+
 /* below class names match Tailwind CSS */
 .gt-break-all { word-break: break-all !important; }
 .gt-content-center { align-content: center !important; }
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 8b25775bb4..af2dd2be24 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -2012,35 +2012,10 @@
   margin-top: -3px;
 }
 
-.repository.settings.branches .protected-branches .selection.dropdown {
-  width: 300px;
-}
-
-.repository.settings.branches .protected-branches .item {
-  border: 1px solid var(--color-secondary);
-  padding: 10px 15px;
-}
-
-.repository.settings.branches .protected-branches .item:not(:last-child) {
-  border-bottom: 0;
-}
-
-.repository.settings.branches .branch-protection .help {
-  margin-left: 26px;
-  padding-top: 0;
-}
-
-.repository.settings.branches .branch-protection .fields {
-  margin-left: 20px;
-  display: block;
-}
-
-.repository.settings.branches .branch-protection .whitelist {
-  margin-left: 26px;
-}
-
-.repository.settings.branches .branch-protection .whitelist .dropdown img {
-  display: inline-block;
+/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */
+.repository.settings.branches .branch-protection .ui.checkbox .help,
+.repository.settings.branches .branch-protection .checkbox-sub-item {
+  padding-left: 26px;
 }
 
 .repository.settings.webhook .events .column {
diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js
index 3d02a82bb6..9f094cd2d1 100644
--- a/web_src/js/features/repo-settings.js
+++ b/web_src/js/features/repo-settings.js
@@ -1,6 +1,5 @@
 import $ from 'jquery';
 import {createMonaco} from './codeeditor.js';
-import {initRepoCommonFilterSearchDropdown} from './repo-common.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -73,20 +72,13 @@ export function initRepoSettingGitHook() {
 }
 
 export function initRepoSettingBranches() {
-  // Branches
-  if ($('.repository.settings.branches').length > 0) {
-    initRepoCommonFilterSearchDropdown('.protected-branches .dropdown');
-    $('.enable-protection, .enable-whitelist, .enable-statuscheck').on('change', function () {
-      if (this.checked) {
-        $($(this).data('target')).removeClass('disabled');
-      } else {
-        $($(this).data('target')).addClass('disabled');
-      }
-    });
-    $('.disable-whitelist').on('change', function () {
-      if (this.checked) {
-        $($(this).data('target')).addClass('disabled');
-      }
-    });
-  }
+  if (!$('.repository.settings.branches').length) return;
+  $('.toggle-target-enabled').on('change', function () {
+    const $target = $($(this).attr('data-target'));
+    $target.toggleClass('disabled', !this.checked);
+  });
+  $('.toggle-target-disabled').on('change', function () {
+    const $target = $($(this).attr('data-target'));
+    if (this.checked) $target.addClass('disabled'); // only disable, do not auto enable
+  });
 }