Archive labels UI enhancement

options/locale/locale_en-US.ini

@@ -1510,6 +1510,7 @@ issues.label_archive_tooltip= Archived labels are excluded from the label search
 issues.label_exclusive_desc = Name the label <code>scope/item</code> to make it mutually exclusive with other <code>scope/</code> labels.
 issues.label_exclusive_warning = Any conflicting scoped labels will be removed when editing the labels of an issue or pull request.
 issues.label_count = %d labels
+issues.show_archived_labels = Show archived labels
 issues.label_open_issues = %d open issues/pull requests
 issues.label_edit = Edit
 issues.label_delete = Delete

templates/repo/issue/labels/label_list.tmpl

@@ -1,6 +1,14 @@
-<h4 class="ui top attached header">
-	{{.locale.Tr "repo.issues.label_count" .NumLabels}}
-	<div class="ui right">
+<h4 class="ui top attached header gt-df label-count">
+	<span class="gt-df">{{.locale.Tr "repo.issues.label_count" .NumLabels}}</span>
+	<label class="gt-df gt-ml-4" data-tooltip-content={{.locale.Tr "repo.issues.label_archive_tooltip"}}>
+		<input type="checkbox"
+			name="show_archived_labels"
+			class="show-archived-labels-checkbox gt-mt-0 gt-mr-2"
+		>
+		{{.locale.Tr "repo.issues.show_archived_labels"}}
+	</label>
+
+	<div class="gt-df">
 		<div class="ui right floated secondary filter menu">
 			<!-- Sort -->
 			<div class="ui dropdown type jump item">
@@ -30,9 +38,9 @@
 
 	<ul class="issue-label-list">
 		{{range .Labels}}
-		<li class="item">
+		<li class="item {{if not .ArchivedUnix.IsZero}}archived-label gt-hidden{{end}}">
 			<div class="label-title">
-				{{RenderLabel $.Context .}}
+				{{RenderLabel $.Context .}} {{if not .ArchivedUnix.IsZero}}<i class="gt-ml-3"> {{$.locale.Tr "home.show_archived"}}</i>{{end}}
 				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
 			</div>
 			<div class="label-issues">

web_src/css/repo/issue-label.css

@@ -42,3 +42,7 @@
 .issue-label-list .item.org-label {
   opacity: 0.7;
 }
+
+.label-count {
+  flex-direction: row;
+}

web_src/js/features/repo-issue-list.js

@@ -72,7 +72,7 @@ function initRepoIssueListCheckboxes() {
       url,
       action,
       issueIDs,
-      elementId
+      elementId,
     ).then(() => {
       window.location.reload();
     }).catch((reason) => {
@@ -203,3 +203,13 @@ export function initRepoIssueList() {
   initRepoIssueListAuthorDropdown();
   initIssuePinSort();
 }
+
+export function initHighlightArchivedLabels() {
+  const showArchivedLabel = document.querySelector('.show-archived-labels-checkbox');
+  if (!showArchivedLabel) return;
+  showArchivedLabel.addEventListener('input', (e) => {
+    for (const archivedLabel of document.querySelectorAll('.archived-label')) {
+      toggleElem(archivedLabel, e.target.checked);
+    }
+  });
+}

web_src/js/index.js

@@ -31,7 +31,7 @@ import {
   initRepoIssueWipTitle,
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestAllowMaintainerEdit,
-  initRepoPullRequestReview, initRepoIssueSidebarList
+  initRepoPullRequestReview, initRepoIssueSidebarList,
 } from './features/repo-issue.js';
 import {
   initRepoEllipsisButton,
@@ -81,7 +81,7 @@ import {initRepositoryActionView} from './components/RepoActionView.vue';
 import {initGlobalTooltips} from './modules/tippy.js';
 import {initGiteaFomantic} from './modules/fomantic.js';
 import {onDomReady} from './utils/dom.js';
-import {initRepoIssueList} from './features/repo-issue-list.js';
+import {initRepoIssueList, initHighlightArchivedLabels} from './features/repo-issue-list.js';
 import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
 
@@ -149,6 +149,7 @@ onDomReady(() => {
   initRepoIssueContentHistory();
   initRepoIssueDue();
   initRepoIssueList();
+  initHighlightArchivedLabels();
   initRepoIssueSidebarList();
   initRepoIssueReferenceRepositorySearch();
   initRepoIssueTimeTracking();