fix htmx process, remove bfcache support

Author: wxiaoguang

web_src/js/features/notification.ts

@@ -1,36 +1,10 @@
 import {GET} from '../modules/fetch.ts';
-import {toggleElem, type DOMEvent, createElementFromHTML} from '../utils/dom.ts';
+import {toggleElem, createElementFromHTML} from '../utils/dom.ts';
 import {logoutFromWorker} from '../modules/worker.ts';
 
 const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
 let notificationSequenceNumber = 0;
 
-export function initNotificationsTable() {
-  const table = document.querySelector('#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.querySelector('#notification_table');
-      const unreadCountEl = document.querySelector<HTMLElement>('.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 = String(unreadCount);
-    }
-  });
-
-  // mark clicked unread links for deletion on bfcache restore
-  for (const link of table.querySelectorAll<HTMLAnchorElement>('.notifications-item[data-status="1"] .notifications-link')) {
-    link.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
-      e.target.closest('.notifications-item').setAttribute('data-remove', 'true');
-    });
-  }
-}
-
 async function receiveUpdateCount(event: MessageEvent) {
   try {
     const data = event.data;
@@ -143,11 +117,11 @@ async function updateNotificationCountWithCallback(callback: (timeout: number, n
 }
 
 async function updateNotificationTable() {
-  const notificationDiv = document.querySelector('#notification_div');
+  let notificationDiv = document.querySelector('#notification_div');
   if (notificationDiv) {
     try {
       const params = new URLSearchParams(window.location.search);
-      params.set('div-only', String(true));
+      params.set('div-only', 'true');
       params.set('sequence-number', String(++notificationSequenceNumber));
       const response = await GET(`${appSubUrl}/notifications?${params.toString()}`);
 
@@ -159,7 +133,8 @@ async function updateNotificationTable() {
       const el = createElementFromHTML(data);
       if (parseInt(el.getAttribute('data-sequence-number')) === notificationSequenceNumber) {
         notificationDiv.outerHTML = data;
-        initNotificationsTable();
+        notificationDiv = document.querySelector('#notification_div');
+        window.htmx.process(notificationDiv); // when using htmx, we must always remember to process the new content changed by us
       }
     } catch (error) {
       console.error(error);

web_src/js/index-domready.ts

@@ -15,7 +15,7 @@ import {initTableSort} from './features/tablesort.ts';
 import {initAdminUserListSearchForm} from './features/admin/users.ts';
 import {initAdminConfigs} from './features/admin/config.ts';
 import {initMarkupAnchors} from './markup/anchors.ts';
-import {initNotificationCount, initNotificationsTable} from './features/notification.ts';
+import {initNotificationCount} from './features/notification.ts';
 import {initRepoIssueContentHistory} from './features/repo-issue-content.ts';
 import {initStopwatch} from './features/stopwatch.ts';
 import {initFindFileInRepo} from './features/repo-findfile.ts';
@@ -117,7 +117,6 @@ const initPerformanceTracer = callInitFunctions([
   initDashboardRepoList,
 
   initNotificationCount,
-  initNotificationsTable,
 
   initOrgTeam,