Archive labels UI

[puni9869]

Followup #26478

Archived labels UI

Added:

• Implemented the structural framework for the user interface to accommodate archived labels.
• Introduced archived labels functionality to the UI, akin to the approach taken for closed milestones or projects. This functionality allows concealing information while retaining it, without resorting to deletion.
• Particularly advantageous for managing outdated labels that are no longer in use, offering a means to preserve them without cluttering the active label set.

Changed:

• Enhanced the Filtered UI page to seamlessly incorporate a list of archived labels.
• Introduced sorting capability specifically for archived labels.

Outsourced:

• Defer the implementation of specialized handling for archived labels to upcoming pull requests. This step will be undertaken subsequent to the successful merge of this pull request.

Note:
The Label page now showcases archived labels distinctly from unarchived/active labels. Sorting functionality is also extended to both categories, enhancing user experience and management of labels.

When no labels

When all labels are unarchived/active

When we have archived and unarchived labels both but unarchived/active label tab is active

When we have archived and unarchived labels both but unarchived label tab is active

Marking again archived label unarchive.

Sort Archived Label reversealphabetically

Tool Tip added for new feature indication near Archived Label Count on both archived and active/unarchived page

---

Part of #25237

[puni9869]

This PR was rebased to #26478. So thats why it contains previous commits.
We can squash merge.

[delvh]

Yep, you're absolutely right.
I missed that edge case.

[delvh]

Suggested change

	} else if isArchived && l.ArchivedUnix.IsZero() {
	} else if l.ArchivedUnix.IsZero() { // Only change the date when it is newly archived.

[delvh]

Suggested change

	<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=alphabetically&state={{$.State}}&archived_label={{if .IsPageArchivedLabels}}true{{end}}">{{.locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
	<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="{{$.Link}}?sort=reversealphabetically&state={{$.State}}&archived_label={{if .IsPageArchivedLabels}}true{{end}}">{{.locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
	<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}&archived_label={{if .IsPageArchivedLabels}}true{{end}}">{{.locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
	<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}&archived_label={{if .IsPageArchivedLabels}}true{{end}}">{{.locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
	<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=alphabetically&state={{$.State}}{{if .IsPageArchivedLabels}}&archived_label=true{{end}}">{{.locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
	<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="{{$.Link}}?sort=reversealphabetically&state={{$.State}}{{if .IsPageArchivedLabels}}&archived_label=true{{end}}">{{.locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
	<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}{{if .IsPageArchivedLabels}}&archived_label=true{{end}}">{{.locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
	<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}{{if .IsPageArchivedLabels}}&archived_label=true{{end}}">{{.locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>

[delvh]

Hmm… I've thought about what the best design for it is.
I think the winner is the following design:

(That can be created with the following changes:

<h4 class="ui top attached header gt-df">
  <span class="gt-f1">18 labels</span>
  <label class="gt-f1"><input type="checkbox" class="show-archived-labels-checkbox"> Show archived labels</label>
  <div class="gt-f1">…
</h4>

)
Where we only show the middle checkbox if there are archived labels.
It needs the following JS pseudocode:

document.querySelector('.show-archived-labels-checkbox').addEventListener('input',
  e => for(const archivedLabel of document.querySelectorAll('.archived-label'))
    toggleElem(archivedLabel, e.target.checked)
  )
);

We should highlight the archived labels, i.e. by using a different background for them.
Other than that, archived labels should not be treated differently on this page.

[delvh]

That way, we don't need a separate page, hide unnecessary information by default, add no technical debt but still allow configuring anything the user wants to configure.

[puni9869]

Correct, this UI is good and easy to use. here is the implementation https://github.com/go-gitea/gitea/pull/26511/files

[puni9869]

Fix moved in https://github.com/go-gitea/gitea/pull/26511/files