From 662db4a69c3b78022efcd189f6f32d271f40be04 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 30 Jun 2025 10:15:39 +0800
Subject: [PATCH] Improve tags list page (#34898)

---
 templates/repo/tag/list.tmpl               | 85 ++++++++++------------
 web_src/css/repo/release-tag.css           |  4 -
 web_src/js/features/common-fetch-action.ts | 42 +++++++----
 web_src/js/features/comp/ConfirmModal.ts   | 35 +++++----
 4 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/templates/repo/tag/list.tmpl b/templates/repo/tag/list.tmpl
index 9789943b49..8b33b96f86 100644
--- a/templates/repo/tag/list.tmpl
+++ b/templates/repo/tag/list.tmpl
@@ -5,9 +5,7 @@
 		{{template "base/alert" .}}
 		{{template "repo/release_tag_header" .}}
 		<h4 class="ui top attached header">
-			<div class="five wide column tw-flex tw-items-center">
-				{{.TagCount}} {{ctx.Locale.Tr "repo.release.tags"}}
-			</div>
+			{{.TagCount}} {{ctx.Locale.Tr "repo.release.tags"}}
 		</h4>
 		{{$canReadReleases := $.Permission.CanRead ctx.Consts.RepoUnitTypeReleases}}
 		<div class="ui attached segment">
@@ -15,53 +13,49 @@
 				{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.tag_kind") "Tooltip" (ctx.Locale.Tr "search.tag_tooltip")}}
 			</form>
 		</div>
-		<div class="ui attached table segment">
+		<div class="ui attached segment tw-p-0">
 			{{if .Releases}}
-			<table class="ui very basic striped fixed table single line" id="tags-table">
-				<tbody class="tag-list">
-					{{range $idx, $release := .Releases}}
-						<tr>
-							<td class="tag-list-row">
-								<h3 class="tag-list-row-title tw-mb-2">
-									{{if $canReadReleases}}
-										<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
-									{{else}}
-										<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
-									{{end}}
-								</h3>
-								<div class="download tw-flex tw-items-center">
-									{{if $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
-										{{if .CreatedUnix}}
-											<span class="tw-mr-2">{{svg "octicon-clock" 16 "tw-mr-1"}}{{DateUtils.TimeSince .CreatedUnix}}</span>
-										{{end}}
+				<div class="ui divided list" id="tags-table">
+				{{range $idx, $release := .Releases}}
+					<div class="item tag-list-row tw-p-4">
+						<h3 class="tag-list-row-title tw-mb-2">
+							{{if $canReadReleases}}
+								<a class="tag-list-row-link" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
+							{{else}}
+								<a class="tag-list-row-link" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
+							{{end}}
+						</h3>
+						<div class="flex-text-block muted-links tw-gap-4 tw-flex-wrap">
+							{{if $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
+								{{if .CreatedUnix}}
+									<span class="flex-text-inline">{{svg "octicon-clock"}}{{DateUtils.TimeSince .CreatedUnix}}</span>
+								{{end}}
 
-										<a class="tw-mr-2 tw-font-mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha .Sha1}}</a>
+								<a class="flex-text-inline tw-font-mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit"}}{{ShortSha .Sha1}}</a>
 
-										{{if not $.DisableDownloadSourceArchives}}
-											<a class="archive-link tw-mr-2 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-1"}}ZIP</a>
-											<a class="archive-link tw-mr-2 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-1"}}TAR.GZ</a>
-										{{end}}
+								{{if not $.DisableDownloadSourceArchives}}
+									<a class="archive-link flex-text-inline" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}ZIP</a>
+									<a class="archive-link flex-text-inline" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}TAR.GZ</a>
+								{{end}}
 
-										{{if (and $canReadReleases $.CanCreateRelease $release.IsTag)}}
-											<a class="tw-mr-2 muted" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.new_release"}}</a>
-										{{end}}
+								{{if (and $canReadReleases $.CanCreateRelease $release.IsTag)}}
+									<a class="flex-text-inline" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.release.new_release"}}</a>
+								{{end}}
 
-										{{if (and ($.Permission.CanWrite ctx.Consts.RepoUnitTypeCode) $release.IsTag)}}
-											<a class="ui delete-button tw-mr-2 muted" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
-												{{svg "octicon-trash" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.delete_tag"}}
-											</a>
-										{{end}}
+								{{if (and ($.Permission.CanWrite ctx.Consts.RepoUnitTypeCode) $release.IsTag)}}
+									<a class="flex-text-inline link-action" data-url="{{$.RepoLink}}/tags/delete?id={{.ID}}" data-modal-confirm="#confirm-delete-tag-modal">
+										{{svg "octicon-trash"}}{{ctx.Locale.Tr "repo.release.delete_tag"}}
+									</a>
+								{{end}}
 
-										{{if and $canReadReleases (not $release.IsTag)}}
-											<a class="tw-mr-2 muted" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.detail"}}</a>
-										{{end}}
-									{{end}}
-								</div>
-							</td>
-						</tr>
-					{{end}}
-				</tbody>
-			</table>
+								{{if and $canReadReleases (not $release.IsTag)}}
+									<a class="flex-text-inline" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.release.detail"}}</a>
+								{{end}}
+							{{end}}
+						</div>
+					</div>
+				{{end}}
+				</div>
 			{{else}}
 				{{if .NumTags}}
 					<p class="tw-p-4">{{ctx.Locale.Tr "no_results_found"}}</p>
@@ -73,9 +67,8 @@
 </div>
 
 {{if $.Permission.CanWrite ctx.Consts.RepoUnitTypeCode}}
-<div class="ui g-modal-confirm delete modal">
+<div id="confirm-delete-tag-modal" class="ui small modal">
 	<div class="header">
-		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "repo.release.delete_tag"}}
 	</div>
 	<div class="content">
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index 1e3a26d80e..4b42c992ef 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -91,10 +91,6 @@
   border-bottom: none;
 }
 
-#tags-table .tag-list-row {
-  padding: 8px 12px;
-}
-
 #tags-table .tag-list-row-title {
   font-size: 18px;
   font-weight: var(--font-weight-normal);
diff --git a/web_src/js/features/common-fetch-action.ts b/web_src/js/features/common-fetch-action.ts
index a372216ae6..3ca361b6e2 100644
--- a/web_src/js/features/common-fetch-action.ts
+++ b/web_src/js/features/common-fetch-action.ts
@@ -1,7 +1,7 @@
 import {request} from '../modules/fetch.ts';
 import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
-import {addDelegatedEventListener, submitEventSubmitter} from '../utils/dom.ts';
-import {confirmModal} from './comp/ConfirmModal.ts';
+import {addDelegatedEventListener, createElementFromHTML, submitEventSubmitter} from '../utils/dom.ts';
+import {confirmModal, createConfirmModal} from './comp/ConfirmModal.ts';
 import type {RequestOpts} from '../types.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 
@@ -111,28 +111,44 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt
 async function onLinkActionClick(el: HTMLElement, e: Event) {
   // A "link-action" can post AJAX request to its "data-url"
   // Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
-  // If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action.
+  // If the "link-action" has "data-modal-confirm" attribute, a "confirm modal dialog" will be shown before taking action.
+  // Attribute "data-modal-confirm" can be a modal element by "#the-modal-id", or a string content for the modal dialog.
   e.preventDefault();
   const url = el.getAttribute('data-url');
   const doRequest = async () => {
-    if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but A doesn't have disabled attribute
+    if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but "A" doesn't have the "disabled" attribute
     await fetchActionDoRequest(el, url, {method: el.getAttribute('data-link-action-method') || 'POST'});
     if ('disabled' in el) el.disabled = false;
   };
 
-  const modalConfirmContent = el.getAttribute('data-modal-confirm') ||
-    el.getAttribute('data-modal-confirm-content') || '';
-  if (!modalConfirmContent) {
+  let elModal: HTMLElement | null = null;
+  const dataModalConfirm = el.getAttribute('data-modal-confirm') || '';
+  if (dataModalConfirm.startsWith('#')) {
+    // eslint-disable-next-line unicorn/prefer-query-selector
+    elModal = document.getElementById(dataModalConfirm.substring(1));
+    if (elModal) {
+      elModal = createElementFromHTML(elModal.outerHTML);
+      elModal.removeAttribute('id');
+    }
+  }
+  if (!elModal) {
+    const modalConfirmContent = dataModalConfirm || el.getAttribute('data-modal-confirm-content') || '';
+    if (modalConfirmContent) {
+      const isRisky = el.classList.contains('red') || el.classList.contains('negative');
+      elModal = createConfirmModal({
+        header: el.getAttribute('data-modal-confirm-header') || '',
+        content: modalConfirmContent,
+        confirmButtonColor: isRisky ? 'red' : 'primary',
+      });
+    }
+  }
+
+  if (!elModal) {
     await doRequest();
     return;
   }
 
-  const isRisky = el.classList.contains('red') || el.classList.contains('negative');
-  if (await confirmModal({
-    header: el.getAttribute('data-modal-confirm-header') || '',
-    content: modalConfirmContent,
-    confirmButtonColor: isRisky ? 'red' : 'primary',
-  })) {
+  if (await confirmModal(elModal)) {
     await doRequest();
   }
 }
diff --git a/web_src/js/features/comp/ConfirmModal.ts b/web_src/js/features/comp/ConfirmModal.ts
index 1ce490ec2e..81ea09476b 100644
--- a/web_src/js/features/comp/ConfirmModal.ts
+++ b/web_src/js/features/comp/ConfirmModal.ts
@@ -5,20 +5,29 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
 const {i18n} = window.config;
 
-export function confirmModal({header = '', content = '', confirmButtonColor = 'primary'} = {}): Promise<boolean> {
+type ConfirmModalOptions = {
+  header?: string;
+  content?: string;
+  confirmButtonColor?: 'primary' | 'red' | 'green' | 'blue';
+}
+
+export function createConfirmModal({header = '', content = '', confirmButtonColor = 'primary'}:ConfirmModalOptions = {}): HTMLElement {
+  const headerHtml = header ? `<div class="header">${htmlEscape(header)}</div>` : '';
+  return createElementFromHTML(`
+<div class="ui g-modal-confirm modal">
+  ${headerHtml}
+  <div class="content">${htmlEscape(content)}</div>
+  <div class="actions">
+    <button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
+    <button class="ui ${confirmButtonColor} ok button">${svg('octicon-check')} ${htmlEscape(i18n.modal_confirm)}</button>
+  </div>
+</div>
+`);
+}
+
+export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<boolean> {
+  if (!(modal instanceof HTMLElement)) modal = createConfirmModal(modal);
   return new Promise((resolve) => {
-    const headerHtml = header ? `<div class="header">${htmlEscape(header)}</div>` : '';
-    const modal = createElementFromHTML(`
-      <div class="ui g-modal-confirm modal">
-        ${headerHtml}
-        <div class="content">${htmlEscape(content)}</div>
-        <div class="actions">
-          <button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
-          <button class="ui ${confirmButtonColor} ok button">${svg('octicon-check')} ${htmlEscape(i18n.modal_confirm)}</button>
-        </div>
-      </div>
-    `);
-    document.body.append(modal);
     const $modal = fomanticQuery(modal);
     $modal.modal({
       onApprove() {