Rework notifications list (#24812)

- Replace `<table>` with flexbox
- Add issue modification time and issue number
- Remove big title
- Replace tabs with menu items
- Add clicked item deletion on back button cache restoration

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

4 files changed, 77 insertions, 23 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index eee364bf1d..a6576a4fe9 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -8,6 +8,7 @@
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
+  --font-weight-bold: 700;
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@@ -373,6 +374,7 @@ a.muted:hover [class*="color-text"],
 
 a.silenced:hover {
   color: inherit;
+  text-decoration: none;
 }
 
 .delete-button,
@@ -1417,6 +1419,18 @@ img.ui.avatar,
   color: var(--color-text-light) !important;
 }
 
+.text.light {
+  color: var(--color-text-light) !important;
+}
+
+.text.light-2 {
+  color: var(--color-text-light-2) !important;
+}
+
+.text.light-3 {
+  color: var(--color-text-light-3) !important;
+}
+
 .text.light.grey {
   color: var(--color-grey-light) !important;
 }
@@ -2201,7 +2215,7 @@ a.ui.active.label:hover {
   border-left: none;
 }
 
-/* a ghost button can be used as inline text, it doesn't have obvious styles */
+/* a ghost button is a button without border */
 .button.button-ghost {
   background: transparent;
   border: none;
@@ -2211,7 +2225,11 @@ a.ui.active.label:hover {
 }
 
 .button.button-ghost:hover {
-  color: var(--color-primary);
+  background: var(--color-hover);
+}
+
+.button.button-ghost:active {
+  background: var(--color-active);
 }
 
 .two-toggle-buttons .button:not(.active):first-of-type {
@@ -2538,8 +2556,8 @@ a.ui.basic.label:hover {
   padding: 2.75px;
   border-radius: 1em;
   font-size: 11px;
-  font-weight: var(--font-weight-semibold);
-  line-height: .67em;
+  font-weight: var(--font-weight-bold);
+  line-height: .7;
 }
 
 .rss-icon {
@@ -2751,7 +2769,3 @@ table th[data-sortt-desc] .svg {
   width: 15px;
   height: 15px;
 }
-
-.color-text-light-2 {
-  color: var(--color-text-light-2);
-}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index a415670afe..73829dbca8 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -73,6 +73,8 @@ Gitea's private styles use `g-` prefix.
 .gt-whitespace-pre-wrap { white-space: pre-wrap !important; }
 .gt-object-contain { object-fit: contain !important; }
 .gt-self-center { align-self: center !important; }
+.gt-self-start { align-self: flex-start !important; }
+.gt-self-end { align-self: flex-end !important; }
 
 .gt-overflow-x-auto { overflow-x: auto !important; }
 .gt-overflow-x-scroll { overflow-x: scroll !important; }
@@ -88,6 +90,7 @@ Gitea's private styles use `g-` prefix.
 .gt-font-normal { font-weight: var(--font-weight-normal) !important };
 .gt-font-medium { font-weight: var(--font-weight-medium) !important };
 .gt-font-semibold { font-weight: var(--font-weight-semibold) !important };
+.gt-font-bold { font-weight: var(--font-weight-bold) !important };
 
 .gt-rounded { border-radius: var(--border-radius) !important; }
 .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
@@ -249,6 +252,13 @@ Gitea's private styles use `g-` prefix.
 
 .gt-shrink-0 { flex-shrink: 0 !important; }
 
+.gt-font-13 { font-size: 13px !important }
+.gt-font-14 { font-size: 14px !important }
+.gt-font-15 { font-size: 15px !important }
+.gt-font-16 { font-size: 16px !important }
+.gt-font-17 { font-size: 17px !important }
+.gt-font-18 { font-size: 18px !important }
+
 @media (max-width: 767px) {
   .gt-db-small { display: block !important; }
   .gt-w-100-small { width: 100% !important; }
diff --git a/web_src/css/user.css b/web_src/css/user.css
index 252e595f3b..7b6db8f2f8 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -121,30 +121,36 @@
   object-fit: contain;
 }
 
-#notification_div .tab.segment {
-  overflow-x: auto;
+#readme_profile {
+  padding: 10px;
+  border-radius: 0.28571429rem;
+  background: var(--color-card);
+  border: 1px solid var(--color-secondary);
 }
 
-#notification_div .tabular.menu .active.item {
+#notification_table {
   background: var(--color-box-body);
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
 }
 
-#notification_table {
-  border: none;
+.notifications-item:hover {
+  background: var(--color-hover);
 }
 
-#readme_profile {
-  padding: 10px;
-  border-radius: 0.28571429rem;
-  background: var(--color-card);
-  border: 1px solid var(--color-secondary);
+.notifications-buttons {
+  display: none;
+  min-width: 74px;
 }
 
-#notification_table tr {
-  cursor: default;
+.notifications-updated {
+  display: flex;
 }
 
-#notification_table td a {
-  width: 100%;
-  display: inline-block;
+.notifications-item:hover .notifications-buttons {
+  display: flex;
+}
+
+.notifications-item:hover .notifications-updated {
+  display: none;
 }
diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 6c056c6d14..0c24d36e56 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -4,6 +4,30 @@ const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window
 let notificationSequenceNumber = 0;
 
 export function initNotificationsTable() {
+  const table = document.getElementById('notification_table');
+  if (!table) return;
+
+  // when page restores from bfcache, delete previously clicked items
+  window.addEventListener('pageshow', (e) => {
+    if (e.persisted) { // page was restored from bfcache
+      const table = document.getElementById('notification_table');
+      const unreadCountEl = document.querySelector('.notifications-unread-count');
+      let unreadCount = parseInt(unreadCountEl.textContent);
+      for (const item of table.querySelectorAll('.notifications-item[data-remove="true"]')) {
+        item.remove();
+        unreadCount -= 1;
+      }
+      unreadCountEl.textContent = unreadCount;
+    }
+  });
+
+  // mark clicked unread links for deletion on bfcache restore
+  for (const link of table.querySelectorAll('.notifications-item[data-status="1"] .notifications-link')) {
+    link.addEventListener('click', (e) => {
+      e.target.closest('.notifications-item').setAttribute('data-remove', 'true');
+    });
+  }
+
   $('#notification_table .button').on('click', function () {
     (async () => {
       const data = await updateNotification(