Refactor sidebar label selector (#32460)

Introduce `issueSidebarLabelsData` to handle all sidebar labels related data.

3 files changed, 70 insertions, 8 deletions

diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl
new file mode 100644
index 0000000000..e9f4baa433
--- /dev/null
+++ b/templates/repo/issue/sidebar/label_list.tmpl
@@ -0,0 +1,51 @@
+{{$data := .}}
+{{$canChange := and ctx.RootData.HasIssuesOrPullsWritePermission (not $data.Repository.IsArchived)}}
+<div class="issue-sidebar-combo" {{if $data.IssueID}}data-update-url="{{$data.RepoLink}}/issues/labels?issue_ids={{$data.IssueID}}"{{end}}>
+	<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
+	<div class="ui dropdown {{if not $canChange}}disabled{{end}}">
+		<a class="text muted">
+			<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $canChange}}{{svg "octicon-gear"}}{{end}}
+		</a>
+		<div class="menu">
+			{{if not $data.AllLabels}}
+				<div class="item disabled">{{ctx.Locale.Tr "repo.issues.new.no_items"}}</div>
+			{{else}}
+				<div class="ui icon search input">
+					<i class="icon">{{svg "octicon-search" 16}}</i>
+					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
+				</div>
+				<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
+				{{$previousExclusiveScope := "_no_scope"}}
+				{{range .RepoLabels}}
+					{{$exclusiveScope := .ExclusiveScope}}
+					{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
+						<div class="divider"></div>
+					{{end}}
+					{{$previousExclusiveScope = $exclusiveScope}}
+					{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}
+				{{end}}
+				<div class="divider"></div>
+				{{$previousExclusiveScope = "_no_scope"}}
+				{{range .OrgLabels}}
+					{{$exclusiveScope := .ExclusiveScope}}
+					{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
+						<div class="divider"></div>
+					{{end}}
+					{{$previousExclusiveScope = $exclusiveScope}}
+					{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}
+				{{end}}
+			{{end}}
+		</div>
+	</div>
+
+	<div class="ui list labels-list tw-my-2 tw-flex tw-gap-2">
+		<span class="item empty-list {{if $data.SelectedLabelIDs}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
+		{{range $data.AllLabels}}
+			{{if .IsChecked}}
+				<a class="item" href="{{$data.RepoLink}}/{{if $data.IsPullRequest}}pulls{{else}}issues{{end}}?labels={{.ID}}">
+					{{- ctx.RenderUtils.RenderLabel . -}}
+				</a>
+			{{end}}
+		{{end}}
+	</div>
+</div>
diff --git a/templates/repo/issue/sidebar/label_list_item.tmpl b/templates/repo/issue/sidebar/label_list_item.tmpl
new file mode 100644
index 0000000000..ad878e918b
--- /dev/null
+++ b/templates/repo/issue/sidebar/label_list_item.tmpl
@@ -0,0 +1,11 @@
+{{$label := .Label}}
+<a class="item {{if $label.IsChecked}}checked{{else if $label.IsArchived}}tw-hidden{{end}}" href="#"
+	data-scope="{{$label.ExclusiveScope}}" data-value="{{$label.ID}}" {{if $label.IsArchived}}data-is-archived{{end}}
+>
+	<span class="item-check-mark">{{svg (Iif $label.ExclusiveScope "octicon-dot-fill" "octicon-check")}}</span>
+	{{ctx.RenderUtils.RenderLabel $label}}
+	<div class="item-secondary-info">
+		{{if $label.Description}}<div class="tw-pl-[20px]"><small>{{$label.Description | ctx.RenderUtils.RenderEmoji}}</small></div>{{end}}
+		<div class="archived-label-hint">{{template "repo/issue/labels/label_archived" $label}}</div>
+	</div>
+</a>
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index 2d3218e927..cf7b97c02b 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -1,11 +1,9 @@
-{{$data := .IssueSidebarReviewersData}}
+{{$data := .}}
 {{$hasCandidates := or $data.Reviewers $data.TeamReviewers}}
-<div class="issue-sidebar-combo" data-sidebar-combo-for="reviewers"
-		{{if $data.IssueID}}data-update-url="{{$data.RepoLink}}/issues/request_review?issue_ids={{$data.IssueID}}"{{end}}
->
+<div class="issue-sidebar-combo" {{if $data.IssueID}}data-update-url="{{$data.RepoLink}}/issues/request_review?issue_ids={{$data.IssueID}}"{{end}}>
 	<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
-	<div class="ui dropdown custom {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
-		<a class="muted text">
+	<div class="ui dropdown {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
+		<a class="text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if and $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
 		</a>
 		<div class="menu flex-items-menu">
@@ -19,7 +17,8 @@
 				{{if .User}}
 					<a class="item muted {{if .Requested}}checked{{end}}" href="{{.User.HomeLink}}" data-value="{{.ItemID}}" data-can-change="{{.CanChange}}"
 						{{if not .CanChange}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
-						{{svg "octicon-check"}} {{ctx.AvatarUtils.Avatar .User 20}} {{template "repo/search_name" .User}}
+						<span class="item-check-mark">{{svg "octicon-check"}}</span>
+						{{ctx.AvatarUtils.Avatar .User 20}} {{template "repo/search_name" .User}}
 					</a>
 				{{end}}
 			{{end}}
@@ -29,7 +28,8 @@
 					{{if .Team}}
 						<a class="item muted {{if .Requested}}checked{{end}}" href="#" data-value="{{.ItemID}}" data-can-change="{{.CanChange}}"
 							{{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
-							{{svg "octicon-check"}} {{svg "octicon-people" 20}} {{$data.RepoOwnerName}}/{{.Team.Name}}
+							<span class="item-check-mark">{{svg "octicon-check"}}</span>
+							{{svg "octicon-people" 20}} {{$data.RepoOwnerName}}/{{.Team.Name}}
 						</a>
 					{{end}}
 				{{end}}