Refactor htmx and fetch-action related code (#37186)

This is the first step (the hardest part):

* repo file list last commit message lazy load
* admin server status monitor
* watch/unwatch (normal page, watchers page)
* star/unstar (normal page, watchers page)
* project view, delete column
* workflow dispatch, switch the branch
* commit page: load branches and tags referencing this commit

The legacy "data-redirect" attribute is removed, it only makes the page
reload (sometimes using an incorrect link).

Also did cleanup for some devtest pages.

web_src/js/modules/devtest.ts

@@ -1,20 +1,57 @@
 import {showInfoToast, showWarningToast, showErrorToast} from './toast.ts';
 import type {Toast} from './toast.ts';
 import {registerGlobalInitFunc} from './observer.ts';
+import {fomanticQuery} from './fomantic/base.ts';
+import {createElementFromHTML} from '../utils/dom.ts';
+import {html} from '../utils/html.ts';
 
 type LevelMap = Record<string, (message: string) => Toast | null>;
 
-export function initDevtest() {
-  registerGlobalInitFunc('initDevtestPage', () => {
-    const els = document.querySelectorAll('.toast-test-button');
-    if (!els.length) return;
+function initDevtestPage() {
+  const toastButtons = document.querySelectorAll('.toast-test-button');
+  if (toastButtons.length) {
     const levelMap: LevelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast};
-    for (const el of els) {
+    for (const el of toastButtons) {
       el.addEventListener('click', () => {
         const level = el.getAttribute('data-toast-level')!;
         const message = el.getAttribute('data-toast-message')!;
         levelMap[level](message);
       });
     }
-  });
+  }
+
+  const modalButtons = document.querySelector('.modal-buttons');
+  if (modalButtons) {
+    for (const el of document.querySelectorAll('.ui.modal:not([data-skip-button])')) {
+      const btn = createElementFromHTML(html`<button class="ui button">${el.id}</button`);
+      btn.addEventListener('click', () => fomanticQuery(el).modal('show'));
+      modalButtons.append(btn);
+    }
+  }
+
+  const sampleButtons = document.querySelectorAll('#devtest-button-samples button.ui.button');
+  if (sampleButtons.length) {
+    const buttonStyles = document.querySelectorAll<HTMLInputElement>('input[name*="button-style"]');
+    for (const elStyle of buttonStyles) {
+      elStyle.addEventListener('click', () => {
+        for (const btn of sampleButtons) {
+          for (const el of buttonStyles) {
+            if (el.value) btn.classList.toggle(el.value, el.checked);
+          }
+        }
+      });
+    }
+    const buttonStates = document.querySelectorAll<HTMLInputElement>('input[name*="button-state"]');
+    for (const elState of buttonStates) {
+      elState.addEventListener('click', () => {
+        for (const btn of sampleButtons) {
+          (btn as any)[elState.value] = elState.checked;
+        }
+      });
+    }
+  }
+}
+
+export function initDevtest() {
+  registerGlobalInitFunc('initDevtestPage', initDevtestPage);
 }