Refactor issue sidebar and fix various problems (#37045)

Fix various legacy problems, including:

* Don't create default column when viewing an empty project
* Fix layouts for Windows
* Fix (partially) #15509
* Fix (partially) #17705

The sidebar refactoring: it is a clear partial-reloading approach,
brings better user experiences, and it makes "Multiple projects" /
"Project column on issue sidebar" feature easy to be added.

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

templates/base/head_navbar.tmpl

@@ -47,7 +47,7 @@
 				<span class="text">
 					{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
 					<span class="only-mobile">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="not-mobile flex-text-block">{{svg "octicon-triangle-down"}}</span>
 				</span>
 				<div class="menu user-menu">
 					<div class="header">
@@ -64,9 +64,9 @@
 		{{else if .IsSigned}}
 			{{template "base/head_navbar_icons" dict "ItemExtraClass" "not-mobile" "PageGlobalData" .PageGlobalData}}
 			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
-				<span class="text">
+				<span class="flex-text-block">
 					{{svg "octicon-plus"}}
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="not-mobile flex-text-block">{{svg "octicon-triangle-down"}}</span>
 					<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
 				</span>
 				<div class="menu">
@@ -93,7 +93,7 @@
 						{{if .IsAdmin}}{{svg "octicon-shield-check" 16 "navbar-admin-badge"}}{{end}}
 					</span>
 					<span class="only-mobile">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="not-mobile flex-text-block">{{svg "octicon-triangle-down"}}</span>
 				</span>
 				<div class="menu user-menu">
 					<div class="header">

templates/base/head_navbar_icons.tmpl

@@ -5,14 +5,14 @@
 	{{- $notificationUnreadCount := call $data.GetNotificationUnreadCount -}}
 	{{if $activeStopwatch}}
 	<a class="item active-stopwatch {{$itemExtraClass}}" href="{{$activeStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{$activeStopwatch.Seconds}}">
-		<div class="tw-relative">
+		<div class="tw-relative flex-text-block">
 			{{svg "octicon-stopwatch"}}
 			<span class="header-stopwatch-dot"></span>
 		</div>
 	</a>
 	{{end}}
 	<a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}">
-		<div class="tw-relative">
+		<div class="tw-relative flex-text-block">
 			{{svg "octicon-bell"}}
 			<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
 		</div>

templates/repo/issue/new_form.tmpl

@@ -46,7 +46,7 @@
 		</div>
 	</div>
 
-	<div class="issue-content-right ui segment">
+	<div class="issue-content-right ui segment" data-global-init="initRepoIssueSidebar">
 		{{template "repo/issue/branch_selector_field" $}}{{/* TODO: RemoveIssueRef: template "repo/issue/branch_selector_field" $*/}}
 
 		{{if .PageIsComparePull}}

templates/repo/issue/sidebar/project_list.tmpl

@@ -5,7 +5,7 @@
 <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}}">
+	<input class="combo-value" name="project_id" type="hidden" value="{{if and $pageMeta.CanModifyIssueOrPull $data.SelectedProjectIDs}}{{index $data.SelectedProjectIDs 0}}{{end}}">
 	<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
 		<a class="fixed-text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}

templates/repo/issue/view_content.tmpl

@@ -66,6 +66,7 @@
 			</div>
 
 			{{template "repo/issue/view_content/comments" .}}
+			<div class="timeline-item tw-hidden" id="timeline-comments-end"></div>
 
 			{{if and .Issue.IsPull (not $.Repository.IsArchived)}}
 				{{template "repo/issue/view_content/pull_merge_box".}}

templates/repo/issue/view_content/sidebar.tmpl

@@ -1,4 +1,4 @@
-<div class="issue-content-right ui segment">
+<div class="issue-content-right ui segment" data-global-init="initRepoIssueSidebar">
 	{{template "repo/issue/branch_selector_field" $}}{{/* TODO: RemoveIssueRef: template "repo/issue/branch_selector_field" $*/}}
 
 	{{if .Issue.IsPull}}

templates/repo/issue/view_content/watching.tmpl

@@ -2,10 +2,10 @@
 	<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
 	<button class="fluid ui button">
 		{{if $.IssueWatch.IsWatching}}
-			{{svg "octicon-mute" 16 "tw-mr-2"}}
+			{{svg "octicon-mute" 16}}
 			{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
 		{{else}}
-			{{svg "octicon-unmute" 16 "tw-mr-2"}}
+			{{svg "octicon-unmute" 16}}
 			{{ctx.Locale.Tr "repo.issues.subscribe"}}
 		{{end}}
 	</button>

templates/shared/issuelist.tmpl

@@ -5,7 +5,7 @@
 
 			<div class="flex-item-leading">
 				{{/* using some tw helpers is the only way to align the checkbox */}}
-				<div class="flex-text-inline tw-mt-[2px]">
+				<div class="flex-text-inline tw-mt-[3px]">
 					{{if $.CanWriteIssuesOrPulls}}
 						<input type="checkbox" autocomplete="off" class="issue-checkbox tw-mr-[14px]" data-issue-id={{.ID}} aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
 					{{end}}