Refactor sidebar assignee&milestone&project selectors (#32465)

Follow #32460

Now the code could be much clearer than before and easier to maintain. A
lot of legacy code is removed.

Manually tested.

This PR is large enough, that fine tunes could be deferred to the future if
there is no bug found or design problem.

Screenshots:

<details>

![image](https://github.com/user-attachments/assets/35f4ab7b-1bc0-4bad-a73c-a4569328303c)

</details>

10 files changed, 151 insertions, 285 deletions

diff --git a/templates/repo/issue/milestone/select_menu.tmpl b/templates/repo/issue/milestone/select_menu.tmpl
deleted file mode 100644
index 9b0492ce52..0000000000
--- a/templates/repo/issue/milestone/select_menu.tmpl
+++ /dev/null
@@ -1,38 +0,0 @@
-{{if or .OpenMilestones .ClosedMilestones}}
-	<div class="ui icon search input">
-		<i class="icon">{{svg "octicon-search" 16}}</i>
-		<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_milestones"}}">
-	</div>
-	<div class="divider"></div>
-{{end}}
-<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
-{{if and (not .OpenMilestones) (not .ClosedMilestones)}}
-	<div class="disabled item">
-		{{ctx.Locale.Tr "repo.issues.new.no_items"}}
-	</div>
-{{else}}
-	{{if .OpenMilestones}}
-		<div class="divider"></div>
-		<div class="header">
-			{{ctx.Locale.Tr "repo.issues.new.open_milestone"}}
-		</div>
-		{{range .OpenMilestones}}
-			<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-				{{svg "octicon-milestone" 16 "tw-mr-1"}}
-				{{.Name}}
-			</a>
-		{{end}}
-	{{end}}
-	{{if .ClosedMilestones}}
-		<div class="divider"></div>
-		<div class="header">
-			{{ctx.Locale.Tr "repo.issues.new.closed_milestone"}}
-		</div>
-		{{range .ClosedMilestones}}
-			<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-				{{svg "octicon-milestone" 16 "tw-mr-1"}}
-				{{.Name}}
-			</a>
-		{{end}}
-	{{end}}
-{{end}}
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 65d359e9dc..ceaaebc4d5 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -49,142 +49,22 @@
 	<div class="issue-content-right ui segment">
 		{{template "repo/issue/branch_selector_field" $}}
 		{{if .PageIsComparePull}}
-			{{template "repo/issue/sidebar/reviewer_list" $.IssueSidebarReviewersData}}
+			{{template "repo/issue/sidebar/reviewer_list" $.IssuePageMetaData}}
 			<div class="divider"></div>
 		{{end}}
 
-		{{template "repo/issue/sidebar/label_list" $.IssueSidebarLabelsData}}
-
-		<div class="divider"></div>
-
-		<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
-		<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
-			<span class="text flex-text-block">
-				<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong>
-				{{if .HasIssuesOrPullsWritePermission}}
-					{{svg "octicon-gear" 16 "tw-ml-1"}}
-				{{end}}
-			</span>
-			<div class="menu">
-				{{template "repo/issue/milestone/select_menu" .}}
-			</div>
-		</div>
-		<div class="ui select-milestone list">
-			<span class="no-select item {{if .Milestone}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_milestone"}}</span>
-			<div class="selected">
-				{{if .Milestone}}
-					<a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}">
-						{{svg "octicon-milestone" 18 "tw-mr-2"}}
-						{{.Milestone.Name}}
-					</a>
-				{{end}}
-			</div>
-		</div>
-
+		{{template "repo/issue/sidebar/label_list" $.IssuePageMetaData}}
+		{{template "repo/issue/sidebar/milestone_list" $.IssuePageMetaData}}
 		{{if .IsProjectsEnabled}}
-		<div class="divider"></div>
-
-		<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
-		<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
-			<span class="text flex-text-block">
-				<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong>
-				{{if .HasIssuesOrPullsWritePermission}}
-					{{svg "octicon-gear" 16 "tw-ml-1"}}
-				{{end}}
-			</span>
-			<div class="menu">
-				{{if or .OpenProjects .ClosedProjects}}
-				<div class="ui icon search input">
-					<i class="icon">{{svg "octicon-search" 16}}</i>
-					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_projects"}}">
-				</div>
-				{{end}}
-				<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
-				{{if and (not .OpenProjects) (not .ClosedProjects)}}
-					<div class="disabled item">
-						{{ctx.Locale.Tr "repo.issues.new.no_items"}}
-					</div>
-				{{else}}
-					{{if .OpenProjects}}
-						<div class="divider"></div>
-						<div class="header">
-							{{ctx.Locale.Tr "repo.issues.new.open_projects"}}
-						</div>
-						{{range .OpenProjects}}
-							<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{.Link ctx}}">
-								{{svg .IconName 18 "tw-mr-2"}}{{.Title}}
-							</a>
-						{{end}}
-					{{end}}
-					{{if .ClosedProjects}}
-						<div class="divider"></div>
-						<div class="header">
-							{{ctx.Locale.Tr "repo.issues.new.closed_projects"}}
-						</div>
-						{{range .ClosedProjects}}
-							<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{.Link ctx}}">
-								{{svg .IconName 18 "tw-mr-2"}}{{.Title}}
-							</a>
-						{{end}}
-					{{end}}
-				{{end}}
-			</div>
-		</div>
-		<div class="ui select-project list">
-			<span class="no-select item {{if .Project}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_projects"}}</span>
-			<div class="selected">
-				{{if .Project}}
-					<a class="item muted sidebar-item-link" href="{{.Project.Link ctx}}">
-						{{svg .Project.IconName 18 "tw-mr-2"}}{{.Project.Title}}
-					</a>
-				{{end}}
-			</div>
-		</div>
+			{{template "repo/issue/sidebar/project_list" $.IssuePageMetaData}}
 		{{end}}
-		<div class="divider"></div>
-			<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
-			<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
-				<span class="text flex-text-block">
-					<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong>
-					{{if .HasIssuesOrPullsWritePermission}}
-						{{svg "octicon-gear" 16 "tw-ml-1"}}
-					{{end}}
-				</span>
-				<div class="filter menu" data-id="#assignee_ids">
-					<div class="ui icon search input">
-						<i class="icon">{{svg "octicon-search" 16}}</i>
-						<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_assignees"}}">
-					</div>
-					<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
-					{{range .Assignees}}
-						<a class="{{if SliceUtils.Contains $.SelectedAssigneeIDs .ID}}checked{{end}} item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
-							<span class="octicon-check {{if not (SliceUtils.Contains $.SelectedAssigneeIDs .ID)}}tw-invisible{{end}}">{{svg "octicon-check"}}</span>
-							<span class="text">
-								{{ctx.AvatarUtils.Avatar . 28 "tw-mr-2"}}{{template "repo/search_name" .}}
-							</span>
-						</a>
-					{{end}}
-				</div>
-			</div>
-			<div class="ui assignees list">
-				<span class="no-select item {{if .HasSelectedAssignee}}tw-hidden{{end}}">
-					{{ctx.Locale.Tr "repo.issues.new.no_assignees"}}
-				</span>
-				<div class="selected">
-				{{range .Assignees}}
-					<a class="item tw-p-1 muted {{if not (SliceUtils.Contains $.SelectedAssigneeIDs .ID)}}tw-hidden{{end}}" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
-						{{ctx.AvatarUtils.Avatar . 28 "tw-mr-2 tw-align-middle"}}{{.GetDisplayName}}
-					</a>
-				{{end}}
-				</div>
-			</div>
+		{{template "repo/issue/sidebar/assignee_list" $.IssuePageMetaData}}
+
 		{{if and .PageIsComparePull (not (eq .HeadRepo.FullName .BaseCompareRepo.FullName)) .CanWriteToHeadRepo}}
 			<div class="divider"></div>
-			<div class="inline field">
-				<div class="ui checkbox">
-					<label data-tooltip-content="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"><strong>{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers"}}</strong></label>
-					<input name="allow_maintainer_edit" type="checkbox" {{if .AllowMaintainerEdit}}checked{{end}}>
-				</div>
+			<div class="ui checkbox">
+				<label data-tooltip-content="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"><strong>{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers"}}</strong></label>
+				<input name="allow_maintainer_edit" type="checkbox" {{if .AllowMaintainerEdit}}checked{{end}}>
 			</div>
 		{{end}}
 	</div>
diff --git a/templates/repo/issue/sidebar/assignee_list.tmpl b/templates/repo/issue/sidebar/assignee_list.tmpl
index 260f7c5be4..bee6123e52 100644
--- a/templates/repo/issue/sidebar/assignee_list.tmpl
+++ b/templates/repo/issue/sidebar/assignee_list.tmpl
@@ -1,46 +1,35 @@
+{{$pageMeta := .}}
+{{$data := .AssigneesData}}
+{{$issueAssignees := NIL}}{{if $pageMeta.Issue}}{{$issueAssignees = $pageMeta.Issue.Assignees}}{{end}}
 <div class="divider"></div>
-<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
-<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
-	<a class="text muted flex-text-block">
-		<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong>
-		{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-			{{svg "octicon-gear" 16 "tw-ml-1"}}
-		{{end}}
-	</a>
-	<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
-		<div class="ui icon search input">
-			<i class="icon">{{svg "octicon-search" 16}}</i>
-			<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_assignees"}}">
+<div class="issue-sidebar-combo" data-selection-mode="multiple" data-update-algo="diff"
+		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/assignee?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
+>
+	<input class="combo-value" name="assignee_ids" type="hidden" value="{{$data.SelectedAssigneeIDs}}">
+	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
+		<a class="text muted">
+			<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
+		</a>
+		<div class="menu">
+			<div class="ui icon search input">
+				<i class="icon">{{svg "octicon-search" 16}}</i>
+				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_assignees"}}">
+			</div>
+			<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
+			{{range $data.CandidateAssignees}}
+				<a class="item muted" href="#" data-value="{{.ID}}">
+					<span class="item-check-mark">{{svg "octicon-check"}}</span>
+					{{ctx.AvatarUtils.Avatar . 20}} {{template "repo/search_name" .}}
+				</a>
+			{{end}}
 		</div>
-		<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
-		{{range .Assignees}}
-
-			{{$AssigneeID := .ID}}
-			<a class="item{{range $.Issue.Assignees}}{{if eq .ID $AssigneeID}} checked{{end}}{{end}}" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
-				{{$checked := false}}
-				{{range $.Issue.Assignees}}
-					{{if eq .ID $AssigneeID}}
-						{{$checked = true}}
-					{{end}}
-				{{end}}
-				<span class="octicon-check {{if not $checked}}tw-invisible{{end}}">{{svg "octicon-check"}}</span>
-				<span class="text">
-					{{ctx.AvatarUtils.Avatar . 20 "tw-mr-2"}}{{template "repo/search_name" .}}
-				</span>
-			</a>
-		{{end}}
 	</div>
-</div>
-<div class="ui assignees list">
-	<span class="no-select item {{if .Issue.Assignees}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_assignees"}}</span>
-	<div class="selected">
-		{{range .Issue.Assignees}}
-			<div class="item">
-				<a class="muted sidebar-item-link" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
-					{{ctx.AvatarUtils.Avatar . 28 "tw-mr-2"}}
-					{{.GetDisplayName}}
-				</a>
-			</div>
+	<div class="ui list tw-flex tw-flex-row tw-gap-2">
+		<span class="item empty-list {{if $issueAssignees}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_assignees"}}</span>
+		{{range $issueAssignees}}
+			<a class="item muted" href="{{$pageMeta.RepoLink}}/{{if $pageMeta.IsPullRequest}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
+					{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
+			</a>
 		{{end}}
 	</div>
 </div>
diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl
index e9f4baa433..ed80047661 100644
--- a/templates/repo/issue/sidebar/label_list.tmpl
+++ b/templates/repo/issue/sidebar/label_list.tmpl
@@ -1,10 +1,12 @@
-{{$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}}>
+{{$pageMeta := .}}
+{{$data := .LabelsData}}
+<div class="issue-sidebar-combo" data-selection-mode="multiple" data-update-algo="diff"
+		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/labels?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
+>
 	<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
-	<div class="ui dropdown {{if not $canChange}}disabled{{end}}">
+	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
 		<a class="text muted">
-			<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $canChange}}{{svg "octicon-gear"}}{{end}}
+			<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
 		</a>
 		<div class="menu">
 			{{if not $data.AllLabels}}
@@ -16,7 +18,7 @@
 				</div>
 				<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
 				{{$previousExclusiveScope := "_no_scope"}}
-				{{range .RepoLabels}}
+				{{range $data.RepoLabels}}
 					{{$exclusiveScope := .ExclusiveScope}}
 					{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
 						<div class="divider"></div>
@@ -26,7 +28,7 @@
 				{{end}}
 				<div class="divider"></div>
 				{{$previousExclusiveScope = "_no_scope"}}
-				{{range .OrgLabels}}
+				{{range $data.OrgLabels}}
 					{{$exclusiveScope := .ExclusiveScope}}
 					{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
 						<div class="divider"></div>
@@ -42,7 +44,7 @@
 		<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}}">
+				<a class="item" href="{{$pageMeta.RepoLink}}/{{if $pageMeta.IsPullRequest}}pulls{{else}}issues{{end}}?labels={{.ID}}">
 					{{- ctx.RenderUtils.RenderLabel . -}}
 				</a>
 			{{end}}
diff --git a/templates/repo/issue/sidebar/label_list_item.tmpl b/templates/repo/issue/sidebar/label_list_item.tmpl
index ad878e918b..5c6808d95b 100644
--- a/templates/repo/issue/sidebar/label_list_item.tmpl
+++ b/templates/repo/issue/sidebar/label_list_item.tmpl
@@ -1,5 +1,5 @@
 {{$label := .Label}}
-<a class="item {{if $label.IsChecked}}checked{{else if $label.IsArchived}}tw-hidden{{end}}" href="#"
+<a class="item muted {{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>
diff --git a/templates/repo/issue/sidebar/milestone_list.tmpl b/templates/repo/issue/sidebar/milestone_list.tmpl
index e9ca02f77a..4f2b4cb06f 100644
--- a/templates/repo/issue/sidebar/milestone_list.tmpl
+++ b/templates/repo/issue/sidebar/milestone_list.tmpl
@@ -1,22 +1,52 @@
+{{$pageMeta := .}}
+{{$data := .MilestonesData}}
+{{$issueMilestone := NIL}}{{if and $pageMeta.Issue $pageMeta.Issue.Milestone}}{{$issueMilestone = $pageMeta.Issue.Milestone}}{{end}}
 <div class="divider"></div>
-<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
-	<a class="text muted flex-text-block">
-		<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong>
-		{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-			{{svg "octicon-gear" 16 "tw-ml-1"}}
-		{{end}}
-	</a>
-	<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
-		{{template "repo/issue/milestone/select_menu" .}}
+<div class="issue-sidebar-combo" data-selection-mode="single" data-update-algo="all"
+		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/milestone?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
+>
+	<input class="combo-value" name="milestone_id" type="hidden" value="{{$data.SelectedMilestoneID}}">
+	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}} ">
+		<a class="text muted">
+			<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
+		</a>
+		<div class="menu">
+			{{if and (not $data.OpenMilestones) (not $data.ClosedMilestones)}}
+				<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"}}</i>
+					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_milestones"}}">
+				</div>
+				<div class="divider"></div>
+				<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
+				{{if $data.OpenMilestones}}
+					<div class="divider"></div>
+					<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_milestone"}}</div>
+					{{range $data.OpenMilestones}}
+						<a class="item muted" data-value="{{.ID}}" href="{{$pageMeta.RepoLink}}/issues?milestone={{.ID}}">
+							{{svg "octicon-milestone" 18}} {{.Name}}
+						</a>
+					{{end}}
+				{{end}}
+				{{if $data.ClosedMilestones}}
+					<div class="divider"></div>
+					<div class="header">{{ctx.Locale.Tr "repo.issues.new.closed_milestone"}}</div>
+					{{range $data.ClosedMilestones}}
+						<a class="item muted" data-value="{{.ID}}" href="{{$pageMeta.RepoLink}}/issues?milestone={{.ID}}">
+							{{svg "octicon-milestone" 18}} {{.Name}}
+						</a>
+					{{end}}
+				{{end}}
+			{{end}}
+		</div>
 	</div>
-</div>
-<div class="ui select-milestone list">
-	<span class="no-select item {{if .Issue.Milestone}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_milestone"}}</span>
-	<div class="selected">
-		{{if .Issue.Milestone}}
-			<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
-				{{svg "octicon-milestone" 18 "tw-mr-2"}}
-				{{.Issue.Milestone.Name}}
+
+	<div class="ui list">
+		<span class="item empty-list {{if $issueMilestone}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_milestone"}}</span>
+		{{if $issueMilestone}}
+			<a class="item muted" href="{{$pageMeta.RepoLink}}/milestone/{{$issueMilestone.ID}}">
+				{{svg "octicon-milestone" 18}} {{$issueMilestone.Name}}
 			</a>
 		{{end}}
 	</div>
diff --git a/templates/repo/issue/sidebar/participant_list.tmpl b/templates/repo/issue/sidebar/participant_list.tmpl
index 91c36fc01e..11debf95c4 100644
--- a/templates/repo/issue/sidebar/participant_list.tmpl
+++ b/templates/repo/issue/sidebar/participant_list.tmpl
@@ -4,7 +4,7 @@
 	<div class="ui list tw-flex tw-flex-wrap">
 		{{range .Participants}}
 			<a {{if gt .ID 0}}href="{{.HomeLink}}"{{end}} data-tooltip-content="{{.GetDisplayName}}">
-				{{ctx.AvatarUtils.Avatar . 28 "tw-my-0.5 tw-mr-1"}}
+				{{ctx.AvatarUtils.Avatar . 20 "tw-my-0.5 tw-mr-1"}}
 			</a>
 		{{end}}
 	</div>
diff --git a/templates/repo/issue/sidebar/project_list.tmpl b/templates/repo/issue/sidebar/project_list.tmpl
index ec79f8032f..ab1243cadd 100644
--- a/templates/repo/issue/sidebar/project_list.tmpl
+++ b/templates/repo/issue/sidebar/project_list.tmpl
@@ -1,53 +1,49 @@
-{{if .IsProjectsEnabled}}
-	<div class="divider"></div>
-
-	<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
-		<a class="text muted flex-text-block">
-			<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong>
-			{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-				{{svg "octicon-gear" 16 "tw-ml-1"}}
-			{{end}}
+{{$pageMeta := .}}
+{{$data := .ProjectsData}}
+{{$issueProject := NIL}}{{if and $pageMeta.Issue $pageMeta.Issue.Project}}{{$issueProject = $pageMeta.Issue.Project}}{{end}}
+<div class="divider"></div>
+<div class="issue-sidebar-combo" data-selection-mode="single" data-update-algo="all"
+		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
+>
+	<input class="combo-value" name="project_id" type="hidden" value="{{$data.SelectedProjectID}}">
+	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
+		<a class="text muted">
+			<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
 		</a>
-		<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/projects">
-			{{if or .OpenProjects .ClosedProjects}}
+		<div class="menu">
+			{{if or $data.OpenProjects $data.ClosedProjects}}
 			<div class="ui icon search input">
 				<i class="icon">{{svg "octicon-search" 16}}</i>
 				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_projects"}}">
 			</div>
 			{{end}}
-			<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
-			{{if .OpenProjects}}
+			<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
+			{{if $data.OpenProjects}}
 				<div class="divider"></div>
-				<div class="header">
-					{{ctx.Locale.Tr "repo.issues.new.open_projects"}}
-				</div>
-				{{range .OpenProjects}}
-					<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{.Link ctx}}">
-						{{svg .IconName 18 "tw-mr-2"}}{{.Title}}
+				<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_projects"}}</div>
+				{{range $data.OpenProjects}}
+					<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">
+						{{svg .IconName 18}} {{.Title}}
 					</a>
 				{{end}}
 			{{end}}
-			{{if .ClosedProjects}}
+			{{if $data.ClosedProjects}}
 				<div class="divider"></div>
-				<div class="header">
-					{{ctx.Locale.Tr "repo.issues.new.closed_projects"}}
-				</div>
-				{{range .ClosedProjects}}
-					<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{.Link ctx}}">
-						{{svg .IconName 18 "tw-mr-2"}}{{.Title}}
+				<div class="header">{{ctx.Locale.Tr "repo.issues.new.closed_projects"}}</div>
+				{{range $data.ClosedProjects}}
+					<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">
+						{{svg .IconName 18}} {{.Title}}
 					</a>
 				{{end}}
 			{{end}}
 		</div>
 	</div>
-	<div class="ui select-project list">
-		<span class="no-select item {{if .Issue.Project}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_projects"}}</span>
-		<div class="selected">
-			{{if .Issue.Project}}
-				<a class="item muted sidebar-item-link" href="{{.Issue.Project.Link ctx}}">
-					{{svg .Issue.Project.IconName 18 "tw-mr-2"}}{{.Issue.Project.Title}}
-				</a>
-			{{end}}
-		</div>
+	<div class="ui list">
+		<span class="item empty-list {{if $issueProject}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_projects"}}</span>
+		{{if $issueProject}}
+			<a class="item muted" href="{{$issueProject.Link ctx}}">
+				{{svg $issueProject.IconName 18}} {{$issueProject.Title}}
+			</a>
+		{{end}}
 	</div>
-{{end}}
+</div>
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index cf7b97c02b..e990fc5afc 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -1,10 +1,14 @@
-{{$data := .}}
+{{$pageMeta := .}}
+{{$data := .ReviewersData}}
+{{$repoOwnerName := $pageMeta.Repository.OwnerName}}
 {{$hasCandidates := or $data.Reviewers $data.TeamReviewers}}
-<div class="issue-sidebar-combo" {{if $data.IssueID}}data-update-url="{{$data.RepoLink}}/issues/request_review?issue_ids={{$data.IssueID}}"{{end}}>
+<div class="issue-sidebar-combo" data-selection-mode="multiple" data-update-algo="diff"
+		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/request_review?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
+>
 	<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
 	<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}}
+			<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
 		</a>
 		<div class="menu flex-items-menu">
 			{{if $hasCandidates}}
@@ -29,7 +33,7 @@
 						<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}}>
 							<span class="item-check-mark">{{svg "octicon-check"}}</span>
-							{{svg "octicon-people" 20}} {{$data.RepoOwnerName}}/{{.Team.Name}}
+							{{svg "octicon-people" 20}} {{$repoOwnerName}}/{{.Team.Name}}
 						</a>
 					{{end}}
 				{{end}}
@@ -47,7 +51,7 @@
 					{{if .User}}
 						<a class="muted flex-text-inline" href="{{.User.HomeLink}}">{{ctx.AvatarUtils.Avatar .User 20}} {{.User.GetDisplayName}}</a>
 					{{else if .Team}}
-						{{svg "octicon-people" 20}} {{$data.RepoOwnerName}}/{{.Team.Name}}
+						{{svg "octicon-people" 20}} {{$repoOwnerName}}/{{.Team.Name}}
 					{{end}}
 				</div>
 				<div class="flex-text-inline">
@@ -64,13 +68,13 @@
 						{{if .Requested}}
 							<a href="#" class="ui muted icon link-action"
 								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review"}}"
-								data-url="{{$data.RepoLink}}/issues/request_review?action=detach&issue_ids={{$data.IssueID}}&id={{.ItemID}}">
+								data-url="{{$pageMeta.RepoLink}}/issues/request_review?action=detach&issue_ids={{$pageMeta.Issue.ID}}&id={{.ItemID}}">
 								{{svg "octicon-trash"}}
 							</a>
 						{{else}}
 							<a href="#" class="ui muted icon link-action"
 								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.re_request_review"}}"
-								data-url="{{$data.RepoLink}}/issues/request_review?action=attach&issue_ids={{$data.IssueID}}&id={{.ItemID}}">
+								data-url="{{$pageMeta.RepoLink}}/issues/request_review?action=attach&issue_ids={{$pageMeta.Issue.ID}}&id={{.ItemID}}">
 								{{svg "octicon-sync"}}
 							</a>
 						{{end}}
@@ -84,8 +88,8 @@
 		{{range $data.OriginalReviews}}
 			<div class="item">
 				<div class="flex-text-inline tw-flex-1">
-					{{$originalURLHostname := $data.Repository.GetOriginalURLHostname}}
-					{{$originalURL := $data.Repository.OriginalURL}}
+					{{$originalURLHostname := $pageMeta.Repository.GetOriginalURLHostname}}
+					{{$originalURL := $pageMeta.Repository.OriginalURL}}
 					<a class="muted flex-text-inline" href="{{$originalURL}}" data-tooltip-content="{{ctx.Locale.Tr "repo.migrated_from_fake" $originalURLHostname}}">
 						{{svg (MigrationIcon $originalURLHostname) 20}} {{.OriginalAuthor}}
 					</a>
@@ -108,7 +112,7 @@
 			<div class="ui warning message">
 				{{ctx.Locale.Tr "repo.issues.dismiss_review_warning"}}
 			</div>
-			<form class="ui form" action="{{$data.RepoLink}}/issues/dismiss_review" method="post">
+			<form class="ui form" action="{{$pageMeta.RepoLink}}/issues/dismiss_review" method="post">
 				{{ctx.RootData.CsrfTokenHtml}}
 				<input type="hidden" class="reviewer-id" name="review_id">
 				<div class="field">
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 0fae1e9e1c..02f5d3e2df 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -2,16 +2,19 @@
 	{{template "repo/issue/branch_selector_field" $}}
 
 	{{if .Issue.IsPull}}
-		{{template "repo/issue/sidebar/reviewer_list" $.IssueSidebarReviewersData}}
+		{{template "repo/issue/sidebar/reviewer_list" $.IssuePageMetaData}}
 		{{template "repo/issue/sidebar/wip_switch" $}}
 		<div class="divider"></div>
 	{{end}}
 
-	{{template "repo/issue/sidebar/label_list" $.IssueSidebarLabelsData}}
+	{{template "repo/issue/sidebar/label_list" $.IssuePageMetaData}}
+
+	{{template "repo/issue/sidebar/milestone_list" $.IssuePageMetaData}}
+	{{if .IsProjectsEnabled}}
+		{{template "repo/issue/sidebar/project_list" $.IssuePageMetaData}}
+	{{end}}
+	{{template "repo/issue/sidebar/assignee_list" $.IssuePageMetaData}}
 
-	{{template "repo/issue/sidebar/milestone_list" $}}
-	{{template "repo/issue/sidebar/project_list" $}}
-	{{template "repo/issue/sidebar/assignee_list" $}}
 	{{template "repo/issue/sidebar/participant_list" $}}
 	{{template "repo/issue/sidebar/watch_notification" $}}
 	{{template "repo/issue/sidebar/stopwatch_timetracker" $}}