Archive labels UI enhancement

models/issues/label.go

@@ -113,10 +113,11 @@ func (l *Label) CalOpenIssues() {
 
 // SetArchived set the label as archived
 func (l *Label) SetArchived(isArchived bool) {
-	if isArchived && l.ArchivedUnix.IsZero() {
-		l.ArchivedUnix = timeutil.TimeStampNow()
-	} else {
+	if !isArchived {
 		l.ArchivedUnix = timeutil.TimeStamp(0)
+	} else if isArchived && l.ArchivedUnix.IsZero() {
+		// Only change the date when it is newly archived.
+		l.ArchivedUnix = timeutil.TimeStampNow()
 	}
 }
 

options/locale/locale_en-US.ini

@@ -1496,6 +1496,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">
+	<span class="gt-f1">{{.locale.Tr "repo.issues.label_count" .NumLabels}}</span>
+	<label class="gt-f1" data-tooltip-content={{.locale.Tr "repo.issues.label_archive_tooltip"}}>
+		<input type="checkbox"
+			name="show_archived_labels"
+			class="show-archived-labels-checkbox"
+		>
+		{{.locale.Tr "repo.issues.show_archived_labels"}}
+	</label>
+
+	<div class="ui right gt-f1">
 		<div class="ui right floated secondary filter menu">
 			<!-- Sort -->
 			<div class="ui dropdown type jump item">
@@ -30,7 +38,7 @@
 
 	<ul class="issue-label-list">
 		{{range .Labels}}
-		<li class="item">
+		<li class="item" {{if gt .ArchivedUnix 0}}data-archived-label{{end}}>
 			<div class="label-title">
 				{{RenderLabel $.Context .}}
 				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}

web_src/css/repo/issue-label.css

@@ -42,3 +42,7 @@
 .issue-label-list .item.org-label {
   opacity: 0.7;
 }
+
+.archived-label {
+  border-right: 4px solid var(--color-yellow-badge);
+}

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() {
+  if (!document.querySelectorAll('.show-archived-labels-checkbox').length) return;
+  document.querySelector('.show-archived-labels-checkbox')
+    .addEventListener('input', () => {
+      for (const archivedLabel of document.querySelectorAll('[data-archived-label]')) {
+        archivedLabel.classList.toggle('archived-label');
+      }
+    });
+}

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();