Improve the list header in milestone page (go-gitea#27302)

The ui of list header in milestone page is not same as issue and pr list
page.
And they are using different template codes which can be merged into
one.

Before:

![image](https://github.com/go-gitea/gitea/assets/18380374/29eb426c-2dd6-4cf2-96e0-82339fb631bb)

![image](https://github.com/go-gitea/gitea/assets/18380374/b36c4dff-469a-4395-8a02-a8c54e17ab21)



![image](https://github.com/go-gitea/gitea/assets/18380374/d882c74a-451b-431d-b58e-3635a15d9718)

![image](https://github.com/go-gitea/gitea/assets/18380374/292cd38d-1b50-47f1-b32c-9b5de90ce5fb)


After:

![image](https://github.com/go-gitea/gitea/assets/18380374/4529234e-67dc-4e17-9440-e638be4fbc41)

![image](https://github.com/go-gitea/gitea/assets/18380374/c15b4d86-0762-497b-b28d-72d09443d629)

---------

Co-authored-by: puni9869 <[email protected]>

Author: yp05327

routers/web/repo/issue.go

@@ -246,6 +246,8 @@ func issues(ctx *context.Context, milestoneID, projectID int64, isPullOption uti
 		isShowClosed = true
 	}
 
+	archived := ctx.FormBool("archived")
+
 	page := ctx.FormInt("page")
 	if page <= 1 {
 		page = 1
@@ -417,6 +419,15 @@ func issues(ctx *context.Context, milestoneID, projectID int64, isPullOption uti
 	ctx.Data["PinnedIssues"] = pinned
 	ctx.Data["IsRepoAdmin"] = ctx.IsSigned && (ctx.Repo.IsAdmin() || ctx.Doer.IsAdmin)
 	ctx.Data["IssueStats"] = issueStats
+	ctx.Data["OpenCount"] = issueStats.OpenCount
+	ctx.Data["ClosedCount"] = issueStats.ClosedCount
+	linkStr := "%s?q=%s&type=%s&sort=%s&state=%s&labels=%s&milestone=%d&project=%d&assignee=%d&poster=%d&archived=%t"
+	ctx.Data["OpenLink"] = fmt.Sprintf(linkStr, ctx.Link,
+		url.QueryEscape(keyword), url.QueryEscape(viewType), url.QueryEscape(sortType), "open", url.QueryEscape(selectLabels),
+		mentionedID, projectID, assigneeID, posterID, archived)
+	ctx.Data["ClosedLink"] = fmt.Sprintf(linkStr, ctx.Link,
+		url.QueryEscape(keyword), url.QueryEscape(viewType), url.QueryEscape(sortType), "closed", url.QueryEscape(selectLabels),
+		mentionedID, projectID, assigneeID, posterID, archived)
 	ctx.Data["SelLabelIDs"] = labelIDs
 	ctx.Data["SelectLabels"] = selectLabels
 	ctx.Data["ViewType"] = viewType
@@ -432,6 +443,7 @@ func issues(ctx *context.Context, milestoneID, projectID int64, isPullOption uti
 	} else {
 		ctx.Data["State"] = "open"
 	}
+	ctx.Data["ShowArchivedLabels"] = archived
 
 	pager.AddParam(ctx, "q", "Keyword")
 	pager.AddParam(ctx, "type", "ViewType")
@@ -442,11 +454,8 @@ func issues(ctx *context.Context, milestoneID, projectID int64, isPullOption uti
 	pager.AddParam(ctx, "project", "ProjectID")
 	pager.AddParam(ctx, "assignee", "AssigneeID")
 	pager.AddParam(ctx, "poster", "PosterID")
+	pager.AddParam(ctx, "archived", "ShowArchivedLabels")
 
-	if ctx.FormBool("archived") {
-		ctx.Data["ShowArchivedLabels"] = true
-		pager.AddParam(ctx, "archived", "ShowArchivedLabels")
-	}
 	ctx.Data["Page"] = pager
 }
 

routers/web/repo/milestone.go

@@ -4,6 +4,7 @@
 package repo
 
 import (
+	"fmt"
 	"net/http"
 	"net/url"
 	"time"
@@ -72,6 +73,11 @@ func Milestones(ctx *context.Context) {
 	}
 	ctx.Data["OpenCount"] = stats.OpenCount
 	ctx.Data["ClosedCount"] = stats.ClosedCount
+	linkStr := "%s/milestones?state=%s&q=%s&sort=%s"
+	ctx.Data["OpenLink"] = fmt.Sprintf(linkStr, ctx.Repo.RepoLink, "open",
+		url.QueryEscape(keyword), url.QueryEscape(sortType))
+	ctx.Data["ClosedLink"] = fmt.Sprintf(linkStr, ctx.Repo.RepoLink, "closed",
+		url.QueryEscape(keyword), url.QueryEscape(sortType))
 
 	if ctx.Repo.Repository.IsTimetrackerEnabled(ctx) {
 		if err := miles.LoadTotalTrackedTimes(ctx); err != nil {

templates/repo/issue/filter_list.tmpl

@@ -0,0 +1,15 @@
+<!-- Sort -->
+<div class="list-header-sort ui small dropdown type jump item">
+	<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 "closestduedate") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=closestduedate&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.earliest_due_data"}}</a>
+		<a class="{{if eq .SortType "furthestduedate"}}active {{end}}item" href="{{$.Link}}?sort=furthestduedate&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.latest_due_date"}}</a>
+		<a class="{{if eq .SortType "leastcomplete"}}active {{end}}item" href="{{$.Link}}?sort=leastcomplete&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_complete"}}</a>
+		<a class="{{if eq .SortType "mostcomplete"}}active {{end}}item" href="{{$.Link}}?sort=mostcomplete&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_complete"}}</a>
+		<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
+		<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
+	</div>
+</div>

templates/repo/issue/filters.tmpl

@@ -2,53 +2,17 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository milestones">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar gt-mb-4">
+		{{template "base/alert" .}}
+
+		<div class="list-header">
 			{{template "repo/issue/navbar" .}}
+			{{template "repo/issue/search" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 				<a class="ui small primary button" href="{{$.Link}}/new">{{ctx.Locale.Tr "repo.milestones.new"}}</a>
 			{{end}}
 		</div>
-		{{template "base/alert" .}}
 
-		<div class="list-header">
-			<div class="small-menu-items ui compact tiny menu list-header-toggle">
-				<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
-					{{svg "octicon-milestone" 16 "gt-mr-3"}}
-					{{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
-				</a>
-				<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed&q={{$.Keyword}}">
-					{{svg "octicon-check" 16 "gt-mr-3"}}
-					{{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
-				</a>
-			</div>
-
-			<!-- 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}}">
-					{{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">
-				<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 "closestduedate") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=closestduedate&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.earliest_due_data"}}</a>
-					<a class="{{if eq .SortType "furthestduedate"}}active {{end}}item" href="{{$.Link}}?sort=furthestduedate&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.latest_due_date"}}</a>
-					<a class="{{if eq .SortType "leastcomplete"}}active {{end}}item" href="{{$.Link}}?sort=leastcomplete&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_complete"}}</a>
-					<a class="{{if eq .SortType "mostcomplete"}}active {{end}}item" href="{{$.Link}}?sort=mostcomplete&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_complete"}}</a>
-					<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
-					<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
-				</div>
-			</div>
-		</div>
+		{{template "repo/issue/filters" .}}
 
 		<!-- milestone list -->
 		<div class="milestone-list">

templates/repo/issue/milestone/filter_list.tmpl

@@ -1,14 +1,16 @@
 <div class="small-menu-items ui compact tiny menu">
-	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&project={{.ProjectID}}&assignee={{.AssigneeID}}&poster={{.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
-		{{if .PageIsPullList}}
+	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{.OpenLink}}">
+		{{if .PageIsMilestones}}
+			{{svg "octicon-milestone" 16 "gt-mr-3"}}
+		{{else if .PageIsPullList}}
 			{{svg "octicon-git-pull-request" 16 "gt-mr-3"}}
 		{{else}}
 			{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 		{{end}}
-		{{ctx.Locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
+		{{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
 	</a>
-	<a class="{{if .IsShowClosed}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&project={{.ProjectID}}&assignee={{.AssigneeID}}&poster={{.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
+	<a class="{{if .IsShowClosed}}active {{end}}item" href="{{.ClosedLink}}">
 		{{svg "octicon-check" 16 "gt-mr-3"}}
-		{{ctx.Locale.PrettyNumber .IssueStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
+		{{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
 	</a>
 </div>

templates/repo/issue/milestones.tmpl

@@ -1,12 +1,14 @@
 <form class="list-header-search ui form ignore-dirty issue-list-search">
 	<div class="ui small search fluid action input">
-		<input type="hidden" name="type" value="{{$.ViewType}}">
 		<input type="hidden" name="state" value="{{$.State}}">
-		<input type="hidden" name="labels" value="{{.SelectLabels}}">
-		<input type="hidden" name="milestone" value="{{$.MilestoneID}}">
-		<input type="hidden" name="project" value="{{$.ProjectID}}">
-		<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
-		<input type="hidden" name="poster" value="{{$.PosterID}}">
+		{{if not .PageIsMilestones}}
+			<input type="hidden" name="type" value="{{$.ViewType}}">
+			<input type="hidden" name="labels" value="{{.SelectLabels}}">
+			<input type="hidden" name="milestone" value="{{$.MilestoneID}}">
+			<input type="hidden" name="project" value="{{$.ProjectID}}">
+			<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
+			<input type="hidden" name="poster" value="{{$.PosterID}}">
+		{{end}}
 		{{template "shared/searchinput" 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>