gitea source for verification 2026-05-22

web_src/js/modules/diff-file.test.ts

@@ -0,0 +1,51 @@
+import {diffTreeStoreSetViewed, reactiveDiffTreeStore} from './diff-file.ts';
+
+test('diff-tree', () => {
+  const store = reactiveDiffTreeStore({
+    'TreeRoot': {
+      'FullName': '',
+      'DisplayName': '',
+      'EntryMode': '',
+      'IsViewed': false,
+      'NameHash': '....',
+      'DiffStatus': '',
+      'FileIcon': '',
+      'Children': [
+        {
+          'FullName': 'dir1',
+          'DisplayName': 'dir1',
+          'EntryMode': 'tree',
+          'IsViewed': false,
+          'NameHash': '....',
+          'DiffStatus': '',
+          'FileIcon': '',
+          'Children': [
+            {
+              'FullName': 'dir1/test.txt',
+              'DisplayName': 'test.txt',
+              'DiffStatus': 'added',
+              'NameHash': '....',
+              'EntryMode': '',
+              'IsViewed': false,
+              'FileIcon': '',
+              'Children': null,
+            },
+          ],
+        },
+        {
+          'FullName': 'other.txt',
+          'DisplayName': 'other.txt',
+          'NameHash': '........',
+          'DiffStatus': 'added',
+          'EntryMode': '',
+          'IsViewed': false,
+          'FileIcon': '',
+          'Children': null,
+        },
+      ],
+    },
+  }, '', '');
+  diffTreeStoreSetViewed(store, 'dir1/test.txt', true);
+  expect(store.fullNameMap['dir1/test.txt'].IsViewed).toBe(true);
+  expect(store.fullNameMap['dir1'].IsViewed).toBe(true);
+});

web_src/js/modules/diff-file.ts

@@ -0,0 +1,82 @@
+import {reactive} from 'vue';
+import type {Reactive} from 'vue';
+
+const {pageData} = window.config;
+
+export type DiffStatus = '' | 'added' | 'modified' | 'deleted' | 'renamed' | 'copied' | 'typechange';
+
+export type DiffTreeEntry = {
+  FullName: string,
+  DisplayName: string,
+  NameHash: string,
+  DiffStatus: DiffStatus,
+  EntryMode: string,
+  IsViewed: boolean,
+  Children: DiffTreeEntry[],
+  FileIcon: string,
+  ParentEntry?: DiffTreeEntry,
+};
+
+type DiffFileTreeData = {
+  TreeRoot: DiffTreeEntry,
+};
+
+type DiffFileTree = {
+  folderIcon: string;
+  folderOpenIcon: string;
+  diffFileTree: DiffFileTreeData;
+  fullNameMap?: Record<string, DiffTreeEntry>
+  fileTreeIsVisible: boolean;
+  selectedItem: string;
+};
+
+let diffTreeStoreReactive: Reactive<DiffFileTree>;
+export function diffTreeStore() {
+  if (!diffTreeStoreReactive) {
+    diffTreeStoreReactive = reactiveDiffTreeStore(pageData.DiffFileTree, pageData.FolderIcon, pageData.FolderOpenIcon);
+  }
+  return diffTreeStoreReactive;
+}
+
+export function diffTreeStoreSetViewed(store: Reactive<DiffFileTree>, fullName: string, viewed: boolean) {
+  const entry = store.fullNameMap[fullName];
+  if (!entry) return;
+  entry.IsViewed = viewed;
+  for (let parent = entry.ParentEntry; parent; parent = parent.ParentEntry) {
+    parent.IsViewed = isEntryViewed(parent);
+  }
+}
+
+function fillFullNameMap(map: Record<string, DiffTreeEntry>, entry: DiffTreeEntry) {
+  map[entry.FullName] = entry;
+  if (!entry.Children) return;
+  entry.IsViewed = isEntryViewed(entry);
+  for (const child of entry.Children) {
+    child.ParentEntry = entry;
+    fillFullNameMap(map, child);
+  }
+}
+
+export function reactiveDiffTreeStore(data: DiffFileTreeData, folderIcon: string, folderOpenIcon: string): Reactive<DiffFileTree> {
+  const store = reactive({
+    diffFileTree: data,
+    folderIcon,
+    folderOpenIcon,
+    fileTreeIsVisible: false,
+    selectedItem: '',
+    fullNameMap: {},
+  });
+  fillFullNameMap(store.fullNameMap, data.TreeRoot);
+  return store;
+}
+
+function isEntryViewed(entry: DiffTreeEntry): boolean {
+  if (entry.Children) {
+    let count = 0;
+    for (const child of entry.Children) {
+      if (child.IsViewed) count++;
+    }
+    return count === entry.Children.length;
+  }
+  return entry.IsViewed;
+}

web_src/js/modules/fetch.test.ts

@@ -0,0 +1,10 @@
+import {GET, POST, PATCH, PUT, DELETE} from './fetch.ts';
+
+// tests here are only to satisfy the linter for unused functions
+test('exports', () => {
+  expect(GET).toBeTruthy();
+  expect(POST).toBeTruthy();
+  expect(PATCH).toBeTruthy();
+  expect(PUT).toBeTruthy();
+  expect(DELETE).toBeTruthy();
+});

web_src/js/modules/fetch.ts

@@ -0,0 +1,43 @@
+import {isObject} from '../utils.ts';
+import type {RequestOpts} from '../types.ts';
+
+const {csrfToken} = window.config;
+
+// safe HTTP methods that don't need a csrf token
+const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE']);
+
+// fetch wrapper, use below method name functions and the `data` option to pass in data
+// which will automatically set an appropriate headers. For json content, only object
+// and array types are currently supported.
+export function request(url: string, {method = 'GET', data, headers = {}, ...other}: RequestOpts = {}): Promise<Response> {
+  let body: string | FormData | URLSearchParams;
+  let contentType: string;
+  if (data instanceof FormData || data instanceof URLSearchParams) {
+    body = data;
+  } else if (isObject(data) || Array.isArray(data)) {
+    contentType = 'application/json';
+    body = JSON.stringify(data);
+  }
+
+  const headersMerged = new Headers({
+    ...(!safeMethods.has(method) && {'x-csrf-token': csrfToken}),
+    ...(contentType && {'content-type': contentType}),
+  });
+
+  for (const [name, value] of Object.entries(headers)) {
+    headersMerged.set(name, value);
+  }
+
+  return fetch(url, {
+    method,
+    headers: headersMerged,
+    ...other,
+    ...(body && {body}),
+  });
+}
+
+export const GET = (url: string, opts?: RequestOpts) => request(url, {method: 'GET', ...opts});
+export const POST = (url: string, opts?: RequestOpts) => request(url, {method: 'POST', ...opts});
+export const PATCH = (url: string, opts?: RequestOpts) => request(url, {method: 'PATCH', ...opts});
+export const PUT = (url: string, opts?: RequestOpts) => request(url, {method: 'PUT', ...opts});
+export const DELETE = (url: string, opts?: RequestOpts) => request(url, {method: 'DELETE', ...opts});

web_src/js/modules/fomantic.ts

@@ -0,0 +1,35 @@
+import $ from 'jquery';
+import {initAriaCheckboxPatch} from './fomantic/checkbox.ts';
+import {initAriaFormFieldPatch} from './fomantic/form.ts';
+import {initAriaDropdownPatch} from './fomantic/dropdown.ts';
+import {initAriaModalPatch} from './fomantic/modal.ts';
+import {initFomanticTransition} from './fomantic/transition.ts';
+import {initFomanticDimmer} from './fomantic/dimmer.ts';
+import {svg} from '../svg.ts';
+import {initFomanticTab} from './fomantic/tab.ts';
+
+export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
+
+export function initGiteaFomantic() {
+  // our extensions
+  $.fn.fomanticExt = {};
+  // By default, use "exact match" for full text search
+  $.fn.dropdown.settings.fullTextSearch = 'exact';
+  // Do not use "cursor: pointer" for dropdown labels
+  $.fn.dropdown.settings.className.label += ' tw-cursor-default';
+  // Always use Gitea's SVG icons
+  $.fn.dropdown.settings.templates.label = function(_value: any, text: any, preserveHTML: any, className: Record<string, string>) {
+    const escape = $.fn.dropdown.settings.templates.escape;
+    return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`);
+  };
+
+  initFomanticTransition();
+  initFomanticDimmer();
+  initFomanticTab();
+
+  // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
+  initAriaCheckboxPatch();
+  initAriaFormFieldPatch();
+  initAriaDropdownPatch();
+  initAriaModalPatch();
+}

web_src/js/modules/fomantic/aria.md

@@ -0,0 +1,117 @@
+# Background
+
+This document is used as aria/accessibility(a11y) reference for future developers.
+
+There are a lot of a11y problems in the Fomantic UI library. Files in 
+`web_src/js/modules/fomantic/` are used as a workaround to make the UI more accessible.
+
+The aria-related code is designed to avoid touching the official Fomantic UI library,
+and to be as independent as possible, so it can be easily modified/removed in the future.
+
+To test the aria/accessibility with screen readers, developers can use the following steps:
+
+* On macOS, you can use VoiceOver.
+  * Press `Command + F5` to turn on VoiceOver.
+  * Try to operate the UI with keyboard-only.
+  * Use Tab/Shift+Tab to switch focus between elements.
+  * Arrow keys (Option+Up/Down) to navigate between menu/combobox items (only aria-active, not really focused).
+  * Press Enter to trigger the aria-active element.
+* On Android, you can use TalkBack.
+  * Go to Settings -> Accessibility -> TalkBack, turn it on.
+  * Long-press or press+swipe to switch the aria-active element (not really focused).
+  * Double-tap means old single-tap on the aria-active element.
+  * Double-finger swipe means old single-finger swipe.
+* TODO: on Windows, on Linux, on iOS
+
+# Known Problems
+
+* Tested with Apple VoiceOver: If a dropdown menu/combobox is opened by mouse click, then arrow keys don't work.
+  But if the dropdown is opened by keyboard Tab, then arrow keys work, and from then on, the keys almost work with mouse click too.
+  The clue: when the dropdown is only opened by mouse click, VoiceOver doesn't send 'keydown' events of arrow keys to the DOM,
+  VoiceOver expects to use arrow keys to navigate between some elements, but it couldn't.
+  Users could use Option+ArrowKeys to navigate between menu/combobox items or selection labels if the menu/combobox is opened by mouse click.
+
+# Checkbox
+
+## Accessibility-friendly Checkbox
+
+The ideal checkboxes should be:
+
+```html
+<label><input type="checkbox"> ... </label>
+```
+
+However, the templates still have the Fomantic-style HTML layout:
+
+```html
+<div class="ui checkbox">
+  <input type="checkbox">
+  <label>...</label>
+</div>
+```
+
+We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the
+label etc. work. There is still a problem: These checkboxes are not friendly to screen readers,
+so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty,
+then the checkbox needs to get the `aria-label` attribute manually.
+
+# Fomantic Dropdown
+
+Fomantic Dropdown is designed to be used for many purposes:
+
+* Menu (the profile menu in navbar, the language menu in footer)
+* Popup (the branch/tag panel, the review box)
+* Simple `<select>` , used in many forms
+* Searchable option-list with static items (used in many forms)
+* Searchable option-list with dynamic items (ajax)
+* Searchable multiple selection option-list with dynamic items: the repo topic setting
+* More complex usages, like the Issue Label selector
+
+Fomantic Dropdown requires that the focus must be on its primary element.
+If the focus changes, it hides or panics.
+
+At the moment, the aria-related code only tries to partially resolve the a11y problems for dropdowns with items.
+
+There are different solutions:
+
+* combobox + listbox + option:
+  * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+  * A combobox is an input widget with an associated popup that enables users to select a value for the combobox from
+    a collection of possible values. In some implementations, the popup presents allowed values, while in other implementations,
+    the popup presents suggested values, and users may either select one of the suggestions or type a value.
+* menu + menuitem:
+  * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+  * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+
+The current approach is: detect if the dropdown has an input,
+if yes, it works like a combobox, otherwise it works like a menu.
+Multiple selection dropdown is not well-supported yet, it needs more work.
+
+Some important pages for dropdown testing:
+
+* Home(dashboard) page, the "Create Repo" / "Profile" / "Language" menu.
+* Create New Repo page, a lot of dropdowns as combobox.
+* Collaborators page, the "permission" dropdown (the old behavior was not quite good, it just works).
+
+```html
+<!-- read-only dropdown -->
+<div class="ui dropdown"> <!-- focused here, then it's not perfect to use aria-activedescendant to point to the menu item -->
+  <input type="hidden" ...>
+  <div class="text">Default</div>
+  <div class="menu" tabindex="-1"> <!-- "transition hidden|visible" classes will be added by $.dropdown() and when the dropdown is working -->
+    <div class="item active selected">Default</div>
+    <div class="item">...</div>
+  </div>
+</div>
+
+<!-- search input dropdown -->
+<div class="ui dropdown">
+  <input type="hidden" ...>
+  <input class="search" autocomplete="off" tabindex="0"> <!-- focused here -->
+  <div class="text"></div>
+  <div class="menu" tabindex="-1"> <!-- "transition hidden|visible" classes will be added by $.dropdown() and when the dropdown is working -->
+    <div class="item selected">...</div>
+    <div class="item">...</div>
+  </div>
+</div>
+```

web_src/js/modules/fomantic/base.ts

@@ -0,0 +1,17 @@
+import $ from 'jquery';
+import {generateElemId} from '../../utils/dom.ts';
+
+export function linkLabelAndInput(label: Element, input: Element) {
+  const labelFor = label.getAttribute('for');
+  const inputId = input.getAttribute('id');
+
+  if (inputId && !labelFor) { // missing "for"
+    label.setAttribute('for', inputId);
+  } else if (!inputId && !labelFor) { // missing both "id" and "for"
+    const id = generateElemId('_aria_label_input_');
+    input.setAttribute('id', id);
+    label.setAttribute('for', id);
+  }
+}
+
+export const fomanticQuery = $;

web_src/js/modules/fomantic/checkbox.ts

@@ -0,0 +1,13 @@
+import {linkLabelAndInput} from './base.ts';
+
+export function initAriaCheckboxPatch() {
+  // link the label and the input element so it's clickable and accessible
+  for (const el of document.querySelectorAll('.ui.checkbox')) {
+    if (el.hasAttribute('data-checkbox-patched')) continue;
+    const label = el.querySelector('label');
+    const input = el.querySelector('input');
+    if (!label || !input) continue;
+    linkLabelAndInput(label, input);
+    el.setAttribute('data-checkbox-patched', 'true');
+  }
+}

web_src/js/modules/fomantic/dimmer.ts

@@ -0,0 +1,32 @@
+import $ from 'jquery';
+import {queryElemChildren} from '../../utils/dom.ts';
+
+export function initFomanticDimmer() {
+  // stand-in for removed dimmer module
+  $.fn.dimmer = function (this: any, arg0: string, arg1: any) {
+    if (arg0 === 'add content') {
+      const $el = arg1;
+      const existingDimmer = document.querySelector('body > .ui.dimmer');
+      if (existingDimmer) {
+        queryElemChildren(existingDimmer, '*', (el) => el.classList.add('hidden'));
+        this._dimmer = existingDimmer;
+      } else {
+        this._dimmer = document.createElement('div');
+        this._dimmer.classList.add('ui', 'dimmer');
+        document.body.append(this._dimmer);
+      }
+      this._dimmer.append($el[0]);
+    } else if (arg0 === 'get dimmer') {
+      return $(this._dimmer);
+    } else if (arg0 === 'show') {
+      this._dimmer.classList.add('active');
+      document.body.classList.add('tw-overflow-hidden');
+    } else if (arg0 === 'hide') {
+      const cb = arg1;
+      this._dimmer.classList.remove('active');
+      document.body.classList.remove('tw-overflow-hidden');
+      cb();
+    }
+    return this;
+  };
+}

web_src/js/modules/fomantic/dropdown.test.ts

@@ -0,0 +1,76 @@
+import {createElementFromHTML} from '../../utils/dom.ts';
+import {hideScopedEmptyDividers} from './dropdown.ts';
+
+test('hideScopedEmptyDividers-simple', () => {
+  const container = createElementFromHTML(`<div>
+<div class="divider"></div>
+<div class="item">a</div>
+<div class="divider"></div>
+<div class="divider"></div>
+<div class="divider"></div>
+<div class="item">b</div>
+<div class="divider"></div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="divider hidden transition"></div>
+<div class="item">a</div>
+<div class="divider hidden transition"></div>
+<div class="divider hidden transition"></div>
+<div class="divider"></div>
+<div class="item">b</div>
+<div class="divider hidden transition"></div>
+`);
+});
+
+test('hideScopedEmptyDividers-items-all-filtered', () => {
+  const container = createElementFromHTML(`<div>
+<div class="any"></div>
+<div class="divider"></div>
+<div class="item filtered">a</div>
+<div class="item filtered">b</div>
+<div class="divider"></div>
+<div class="any"></div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="any"></div>
+<div class="divider hidden transition"></div>
+<div class="item filtered">a</div>
+<div class="item filtered">b</div>
+<div class="divider"></div>
+<div class="any"></div>
+`);
+});
+
+test('hideScopedEmptyDividers-hide-last', () => {
+  const container = createElementFromHTML(`<div>
+<div class="item">a</div>
+<div class="divider" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="item">a</div>
+<div class="divider hidden transition" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+`);
+});
+
+test('hideScopedEmptyDividers-scoped-items', () => {
+  const container = createElementFromHTML(`<div>
+<div class="item" data-scope="">a</div>
+<div class="divider" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+<div class="divider" data-scope=""></div>
+<div class="item" data-scope="">c</div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="item" data-scope="">a</div>
+<div class="divider hidden transition" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+<div class="divider hidden transition" data-scope=""></div>
+<div class="item" data-scope="">c</div>
+`);
+});

web_src/js/modules/fomantic/dropdown.ts

@@ -0,0 +1,365 @@
+import $ from 'jquery';
+import type {FomanticInitFunction} from '../../types.ts';
+import {generateElemId, queryElems} from '../../utils/dom.ts';
+
+const ariaPatchKey = '_giteaAriaPatchDropdown';
+const fomanticDropdownFn = $.fn.dropdown;
+
+// use our own `$().dropdown` function to patch Fomantic's dropdown module
+export function initAriaDropdownPatch() {
+  if ($.fn.dropdown === ariaDropdownFn) throw new Error('initAriaDropdownPatch could only be called once');
+  $.fn.dropdown = ariaDropdownFn;
+  $.fn.fomanticExt.onResponseKeepSelectedItem = onResponseKeepSelectedItem;
+  $.fn.fomanticExt.onDropdownAfterFiltered = onDropdownAfterFiltered;
+  (ariaDropdownFn as FomanticInitFunction).settings = fomanticDropdownFn.settings;
+}
+
+// the patched `$.fn.dropdown` function, it passes the arguments to Fomantic's `$.fn.dropdown` function, and:
+// * it does the one-time element event attaching on the first call
+// * it delegates the module internal functions like `onLabelCreate` to the patched functions to add more features.
+function ariaDropdownFn(this: any, ...args: Parameters<FomanticInitFunction>) {
+  const ret = fomanticDropdownFn.apply(this, args);
+
+  for (let el of this) {
+    // dropdown will replace '<select class="ui dropdown"/>' to '<div class="ui dropdown"><select (hidden)></select><div class="menu">...</div></div>'
+    // so we need to correctly find the closest '.ui.dropdown' element, it is the real fomantic dropdown module.
+    el = el.closest('.ui.dropdown');
+    if (!el[ariaPatchKey]) {
+      // the elements don't belong to the dropdown "module" and won't be reset
+      // so we only need to initialize them once.
+      attachInitElements(el);
+    }
+
+    // if the `$().dropdown()` is called without arguments, or it has non-string (object) argument,
+    // it means that such call will reset the dropdown "module" including internal settings,
+    // then we need to re-delegate the callbacks.
+    const $dropdown = $(el);
+    const dropdownModule = $dropdown.data('module-dropdown');
+    if (!dropdownModule.giteaDelegated) {
+      dropdownModule.giteaDelegated = true;
+      delegateDropdownModule($dropdown);
+    }
+  }
+  return ret;
+}
+
+// make the item has role=option/menuitem, add an id if there wasn't one yet, make items as non-focusable
+// the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element.
+function updateMenuItem(dropdown: HTMLElement, item: HTMLElement) {
+  if (!item.id) item.id = generateElemId('_aria_dropdown_item_');
+  item.setAttribute('role', (dropdown as any)[ariaPatchKey].listItemRole);
+  item.setAttribute('tabindex', '-1');
+  for (const el of item.querySelectorAll('a, input, button')) el.setAttribute('tabindex', '-1');
+}
+/**
+ * make the label item and its "delete icon" have correct aria attributes
+ * @param {HTMLElement} label
+ */
+function updateSelectionLabel(label: HTMLElement) {
+  // the "label" is like this: "<a|div class="ui label" data-value="1">the-label-name <i|svg class="delete icon"/></a>"
+  if (!label.id) {
+    label.id = generateElemId('_aria_dropdown_label_');
+  }
+  label.tabIndex = -1;
+
+  const deleteIcon = label.querySelector('.delete.icon');
+  if (deleteIcon) {
+    deleteIcon.setAttribute('aria-hidden', 'false');
+    deleteIcon.setAttribute('aria-label', window.config.i18n.remove_label_str.replace('%s', label.getAttribute('data-value')));
+    deleteIcon.setAttribute('role', 'button');
+  }
+}
+
+function onDropdownAfterFiltered(this: any) {
+  const $dropdown = $(this).closest('.ui.dropdown'); // "this" can be the "ui dropdown" or "<select>"
+  const hideEmptyDividers = $dropdown.dropdown('setting', 'hideDividers') === 'empty';
+  const itemsMenu = $dropdown[0].querySelector('.scrolling.menu') || $dropdown[0].querySelector('.menu');
+  if (hideEmptyDividers && itemsMenu) hideScopedEmptyDividers(itemsMenu);
+}
+
+// delegate the dropdown's template functions and callback functions to add aria attributes.
+function delegateDropdownModule($dropdown: any) {
+  const dropdownCall = fomanticDropdownFn.bind($dropdown);
+
+  // the "template" functions are used for dynamic creation (eg: AJAX)
+  const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
+  const dropdownTemplatesMenuOld = dropdownTemplates.menu;
+  dropdownTemplates.menu = function(response: any, fields: any, preserveHTML: any, className: Record<string, string>) {
+    // when the dropdown menu items are loaded from AJAX requests, the items are created dynamically
+    const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className);
+    const div = document.createElement('div');
+    div.innerHTML = menuItems;
+    const $wrapper = $(div);
+    const $items = $wrapper.find('> .item');
+    $items.each((_, item) => updateMenuItem($dropdown[0], item));
+    $dropdown[0][ariaPatchKey].deferredRefreshAriaActiveItem();
+    return $wrapper.html();
+  };
+  dropdownCall('setting', 'templates', dropdownTemplates);
+
+  // the `onLabelCreate` is used to add necessary aria attributes for dynamically created selection labels
+  const dropdownOnLabelCreateOld = dropdownCall('setting', 'onLabelCreate');
+  dropdownCall('setting', 'onLabelCreate', function(this: any, value: any, text: string) {
+    const $label = dropdownOnLabelCreateOld.call(this, value, text);
+    updateSelectionLabel($label[0]);
+    return $label;
+  });
+
+  const oldSet = dropdownCall('internal', 'set');
+  const oldSetDirection = oldSet.direction;
+  oldSet.direction = function($menu: any) {
+    oldSetDirection.call(this, $menu);
+    const classNames = dropdownCall('setting', 'className');
+    $menu = $menu || $dropdown.find('> .menu');
+    const elMenu = $menu[0];
+    // detect whether the menu is outside the viewport, and adjust the position
+    // there is a bug in fomantic's builtin `direction` function, in some cases (when the menu width is only a little larger) it wrongly opens the menu at right and triggers the scrollbar.
+    elMenu.classList.add(classNames.loading);
+    if (elMenu.getBoundingClientRect().right > document.documentElement.clientWidth) {
+      elMenu.classList.add(classNames.leftward);
+    }
+    elMenu.classList.remove(classNames.loading);
+  };
+}
+
+// for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes
+function attachStaticElements(dropdown: HTMLElement, focusable: HTMLElement, menu: HTMLElement) {
+  // prepare static dropdown menu list popup
+  if (!menu.id) {
+    menu.id = generateElemId('_aria_dropdown_menu_');
+  }
+
+  $(menu).find('> .item').each((_, item) => updateMenuItem(dropdown, item));
+
+  // this role could only be changed after its content is ready, otherwise some browsers+readers (like Chrome+AppleVoice) crash
+  menu.setAttribute('role', (dropdown as any)[ariaPatchKey].listPopupRole);
+
+  // prepare selection label items
+  for (const label of dropdown.querySelectorAll<HTMLElement>('.ui.label')) {
+    updateSelectionLabel(label);
+  }
+
+  // make the primary element (focusable) aria-friendly
+  focusable.setAttribute('role', focusable.getAttribute('role') ?? (dropdown as any)[ariaPatchKey].focusableRole);
+  focusable.setAttribute('aria-haspopup', (dropdown as any)[ariaPatchKey].listPopupRole);
+  focusable.setAttribute('aria-controls', menu.id);
+  focusable.setAttribute('aria-expanded', 'false');
+
+  // use tooltip's content as aria-label if there is no aria-label
+  const tooltipContent = dropdown.getAttribute('data-tooltip-content');
+  if (tooltipContent && !dropdown.getAttribute('aria-label')) {
+    dropdown.setAttribute('aria-label', tooltipContent);
+  }
+}
+
+function attachInitElements(dropdown: HTMLElement) {
+  (dropdown as any)[ariaPatchKey] = {};
+
+  // Dropdown has 2 different focusing behaviors
+  // * with search input: the input is focused, and it works with aria-activedescendant pointing another sibling element.
+  // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown
+  // Some desktop screen readers may change the focus, but dropdown requires that the focus must be on its primary element, then they don't work well.
+
+  // Expected user interactions for dropdown with aria support:
+  // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown
+  // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item)
+  // * user can use arrow key Up/Down to navigate between menu items
+  // * when user presses Enter:
+  //    - if the menu item is clickable (eg: <a>), then trigger the click event
+  //    - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu
+
+  // TODO: multiple selection is only partially supported. Check and test them one by one in the future.
+
+  const textSearch = dropdown.querySelector<HTMLElement>('input.search');
+  const focusable = textSearch || dropdown; // the primary element for focus, see comment above
+  if (!focusable) return;
+
+  // as a combobox, the input should not have autocomplete by default
+  if (textSearch && !textSearch.getAttribute('autocomplete')) {
+    textSearch.setAttribute('autocomplete', 'off');
+  }
+
+  let menu = $(dropdown).find('> .menu')[0];
+  if (!menu) {
+    // some "multiple selection" dropdowns don't have a static menu element in HTML, we need to pre-create it to make it have correct aria attributes
+    menu = document.createElement('div');
+    menu.classList.add('menu');
+    dropdown.append(menu);
+  }
+
+  // There are 2 possible solutions about the role: combobox or menu.
+  // The idea is that if there is an input, then it's a combobox, otherwise it's a menu.
+  // Since #19861 we have prepared the "combobox" solution, but didn't get enough time to put it into practice and test before.
+  const isComboBox = dropdown.querySelectorAll('input').length > 0;
+
+  (dropdown as any)[ariaPatchKey].focusableRole = isComboBox ? 'combobox' : 'menu';
+  (dropdown as any)[ariaPatchKey].listPopupRole = isComboBox ? 'listbox' : '';
+  (dropdown as any)[ariaPatchKey].listItemRole = isComboBox ? 'option' : 'menuitem';
+
+  attachDomEvents(dropdown, focusable, menu);
+  attachStaticElements(dropdown, focusable, menu);
+}
+
+function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HTMLElement) {
+  // when showing, it has class: ".animating.in"
+  // when hiding, it has class: ".visible.animating.out"
+  const isMenuVisible = () => (menu.classList.contains('visible') && !menu.classList.contains('out')) || menu.classList.contains('in');
+
+  // update aria attributes according to current active/selected item
+  const refreshAriaActiveItem = () => {
+    const menuVisible = isMenuVisible();
+    focusable.setAttribute('aria-expanded', menuVisible ? 'true' : 'false');
+
+    // if there is an active item, use it (the user is navigating between items)
+    // otherwise use the "selected" for combobox (for the last selected item)
+    const active = $(menu).find('> .item.active, > .item.selected')[0];
+    if (!active) return;
+    // if the popup is visible and has an active/selected item, use its id as aria-activedescendant
+    if (menuVisible) {
+      focusable.setAttribute('aria-activedescendant', active.id);
+    } else if ((dropdown as any)[ariaPatchKey].listPopupRole === 'menu') {
+      // for menu, when the popup is hidden, no need to keep the aria-activedescendant, and clear the active/selected item
+      focusable.removeAttribute('aria-activedescendant');
+      active.classList.remove('active', 'selected');
+    }
+  };
+
+  dropdown.addEventListener('keydown', (e: KeyboardEvent) => {
+    // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler
+    if (e.key === 'Enter') {
+      const elItem = menu.querySelector<HTMLElement>(':scope > .item.selected, .menu > .item.selected');
+      // if the selected item is clickable, then trigger the click event.
+      // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click.
+      if (elItem?.matches('a, .js-aria-clickable') && !elItem.matches('.tw-hidden, .filtered')) {
+        e.preventDefault();
+        elItem.click();
+      }
+    }
+  });
+
+  // use setTimeout to run the refreshAria in next tick (to make sure the Fomantic UI code has finished its work)
+  // do not return any value, jQuery has return-value related behaviors.
+  // when the popup is hiding, it's better to have a small "delay", because there is a Fomantic UI animation
+  // without the delay for hiding, the UI will be somewhat laggy and sometimes may get stuck in the animation.
+  const deferredRefreshAriaActiveItem = (delay = 0) => { setTimeout(refreshAriaActiveItem, delay) };
+  (dropdown as any)[ariaPatchKey].deferredRefreshAriaActiveItem = deferredRefreshAriaActiveItem;
+  dropdown.addEventListener('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAriaActiveItem(); });
+
+  // if the dropdown has been opened by focus, do not trigger the next click event again.
+  // otherwise the dropdown will be closed immediately, especially on Android with TalkBack
+  // * desktop event sequence: mousedown -> focus -> mouseup -> click
+  // * mobile event sequence: focus -> mousedown -> mouseup -> click
+  // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event
+  let ignoreClickPreEvents = 0, ignoreClickPreVisible = 0;
+  dropdown.addEventListener('mousedown', () => {
+    ignoreClickPreVisible += isMenuVisible() ? 1 : 0;
+    ignoreClickPreEvents++;
+  }, true);
+  dropdown.addEventListener('focus', () => {
+    ignoreClickPreVisible += isMenuVisible() ? 1 : 0;
+    ignoreClickPreEvents++;
+    deferredRefreshAriaActiveItem();
+  }, true);
+  dropdown.addEventListener('blur', () => {
+    ignoreClickPreVisible = ignoreClickPreEvents = 0;
+    deferredRefreshAriaActiveItem(100);
+  }, true);
+  dropdown.addEventListener('mouseup', () => {
+    setTimeout(() => {
+      ignoreClickPreVisible = ignoreClickPreEvents = 0;
+      deferredRefreshAriaActiveItem(100);
+    }, 0);
+  }, true);
+  dropdown.addEventListener('click', (e: MouseEvent) => {
+    if (isMenuVisible() &&
+      ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible
+      ignoreClickPreEvents === 2 // the click event is related to mousedown+focus
+    ) {
+      e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again
+    }
+    ignoreClickPreEvents = ignoreClickPreVisible = 0;
+  }, true);
+}
+
+// Although Fomantic Dropdown supports "hideDividers", it doesn't really work with our "scoped dividers"
+// At the moment, "label dropdown items" use scopes, a sample case is:
+// * a-label
+// * divider
+// * scope/1
+// * scope/2
+// * divider
+// * z-label
+// when the "scope/*" are filtered out, we'd like to see "a-label" and "z-label" without the divider.
+export function hideScopedEmptyDividers(container: Element) {
+  const visibleItems: Element[] = [];
+  const curScopeVisibleItems: Element[] = [];
+  let curScope: string = '', lastVisibleScope: string = '';
+  const isDivider = (item: Element) => item.classList.contains('divider');
+  const isScopedDivider = (item: Element) => isDivider(item) && item.hasAttribute('data-scope');
+  const hideDivider = (item: Element) => item.classList.add('hidden', 'transition'); // dropdown has its own classes to hide items
+  const showDivider = (item: Element) => item.classList.remove('hidden', 'transition');
+  const isHidden = (item: Element) => item.classList.contains('hidden') || item.classList.contains('filtered') || item.classList.contains('tw-hidden');
+  const handleScopeSwitch = (itemScope: string) => {
+    if (curScopeVisibleItems.length === 1 && isScopedDivider(curScopeVisibleItems[0])) {
+      hideDivider(curScopeVisibleItems[0]);
+    } else if (curScopeVisibleItems.length) {
+      if (isScopedDivider(curScopeVisibleItems[0]) && lastVisibleScope === curScope) {
+        hideDivider(curScopeVisibleItems[0]);
+        curScopeVisibleItems.shift();
+      }
+      visibleItems.push(...curScopeVisibleItems);
+      lastVisibleScope = curScope;
+    }
+    curScope = itemScope;
+    curScopeVisibleItems.length = 0;
+  };
+
+  // reset hidden dividers
+  queryElems(container, '.divider', showDivider);
+
+  // hide the scope dividers if the scope items are empty
+  for (const item of container.children) {
+    const itemScope = item.getAttribute('data-scope') || '';
+    if (itemScope !== curScope) {
+      handleScopeSwitch(itemScope);
+    }
+    if (!isHidden(item)) {
+      curScopeVisibleItems.push(item as HTMLElement);
+    }
+  }
+  handleScopeSwitch('');
+
+  // hide all leading and trailing dividers
+  while (visibleItems.length) {
+    if (!isDivider(visibleItems[0])) break;
+    hideDivider(visibleItems[0]);
+    visibleItems.shift();
+  }
+  while (visibleItems.length) {
+    if (!isDivider(visibleItems[visibleItems.length - 1])) break;
+    hideDivider(visibleItems[visibleItems.length - 1]);
+    visibleItems.pop();
+  }
+  // hide all duplicate dividers, hide current divider if next sibling is still divider
+  // no need to update "visibleItems" array since this is the last loop
+  for (let i = 0; i < visibleItems.length - 1; i++) {
+    if (!visibleItems[i].matches('.divider')) continue;
+    if (visibleItems[i + 1].matches('.divider')) hideDivider(visibleItems[i]);
+  }
+}
+
+function onResponseKeepSelectedItem(dropdown: typeof $ | HTMLElement, selectedValue: string) {
+  // There is a bug in fomantic dropdown when using "apiSettings" to fetch data
+  // * when there is a selected item, the dropdown insists on hiding the selected one from the list:
+  // * in the "filter" function: ('[data-value="'+value+'"]').addClass(className.filtered)
+  //
+  // When user selects one item, and click the dropdown again,
+  // then the dropdown only shows other items and will select another (wrong) one.
+  // It can't be easily fix by using setTimeout(patch, 0) in `onResponse` because the `onResponse` is called before another `setTimeout(..., timeLeft)`
+  // Fortunately, the "timeLeft" is controlled by "loadingDuration" which is always zero at the moment, so we can use `setTimeout(..., 10)`
+  const elDropdown = (dropdown instanceof HTMLElement) ? dropdown : (dropdown as any)[0];
+  setTimeout(() => {
+    queryElems(elDropdown, `.menu .item[data-value="${CSS.escape(selectedValue)}"].filtered`, (el) => el.classList.remove('filtered'));
+    $(elDropdown).dropdown('set selected', selectedValue ?? '');
+  }, 10);
+}

web_src/js/modules/fomantic/form.ts

@@ -0,0 +1,13 @@
+import {linkLabelAndInput} from './base.ts';
+
+export function initAriaFormFieldPatch() {
+  // link the label and the input element so it's clickable and accessible
+  for (const el of document.querySelectorAll('.ui.form .field')) {
+    if (el.hasAttribute('data-field-patched')) continue;
+    const label = el.querySelector(':scope > label');
+    const input = el.querySelector(':scope > input');
+    if (!label || !input) continue;
+    linkLabelAndInput(label, input);
+    el.setAttribute('data-field-patched', 'true');
+  }
+}

web_src/js/modules/fomantic/modal.ts

@@ -0,0 +1,63 @@
+import $ from 'jquery';
+import type {FomanticInitFunction} from '../../types.ts';
+import {queryElems} from '../../utils/dom.ts';
+import {hideToastsFrom} from '../toast.ts';
+
+const fomanticModalFn = $.fn.modal;
+
+// use our own `$.fn.modal` to patch Fomantic's modal module
+export function initAriaModalPatch() {
+  if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once');
+  $.fn.modal = ariaModalFn;
+  (ariaModalFn as FomanticInitFunction).settings = fomanticModalFn.settings;
+  $.fn.fomanticExt.onModalBeforeHidden = onModalBeforeHidden;
+  $.fn.modal.settings.onApprove = onModalApproveDefault;
+}
+
+// the patched `$.fn.modal` modal function
+// * it does the one-time attaching on the first call
+function ariaModalFn(this: any, ...args: Parameters<FomanticInitFunction>) {
+  const ret = fomanticModalFn.apply(this, args);
+  if (args[0] === 'show' || args[0]?.autoShow) {
+    for (const el of this) {
+      // If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default).
+      // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed.
+      // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form.
+      // So, all "cancel" buttons without "[type]" must be marked as "type=button".
+      for (const button of el.querySelectorAll('form button.cancel:not([type])')) {
+        button.setAttribute('type', 'button');
+      }
+    }
+  }
+  return ret;
+}
+
+function onModalBeforeHidden(this: any) {
+  const $modal = $(this);
+  const elModal = $modal[0];
+  hideToastsFrom(elModal.closest('.ui.dimmer') ?? document.body);
+
+  // reset the form after the modal is hidden, after other modal events and handlers (e.g. "onApprove", form submit)
+  setTimeout(() => {
+    queryElems(elModal, 'form', (form: HTMLFormElement) => form.reset());
+  }, 0);
+}
+
+function onModalApproveDefault(this: any) {
+  const $modal = $(this);
+  const selectors = $modal.modal('setting', 'selector');
+  const elModal = $modal[0];
+  const elApprove = elModal.querySelector(selectors.approve);
+  const elForm = elApprove?.closest('form');
+  if (!elForm) return true; // no form, just allow closing the modal
+
+  // "form-fetch-action" can handle network errors gracefully,
+  // so keep the modal dialog to make users can re-submit the form if anything wrong happens.
+  if (elForm.matches('.form-fetch-action')) return false;
+
+  // There is an abuse for the "modal" + "form" combination, the "Approve" button is a traditional form submit button in the form.
+  // Then "approve" and "submit" occur at the same time, the modal will be closed immediately before the form is submitted.
+  // So here we prevent the modal from closing automatically by returning false, add the "is-loading" class to the form element.
+  elForm.classList.add('is-loading');
+  return false;
+}

web_src/js/modules/fomantic/tab.ts

@@ -0,0 +1,19 @@
+import $ from 'jquery';
+import {queryElemSiblings} from '../../utils/dom.ts';
+
+export function initFomanticTab() {
+  $.fn.tab = function (this: any) {
+    for (const elBtn of this) {
+      const tabName = elBtn.getAttribute('data-tab');
+      if (!tabName) continue;
+      elBtn.addEventListener('click', () => {
+        const elTab = document.querySelector(`.ui.tab[data-tab="${tabName}"]`);
+        queryElemSiblings(elTab, `.ui.tab`, (el) => el.classList.remove('active'));
+        queryElemSiblings(elBtn, `[data-tab]`, (el) => el.classList.remove('active'));
+        elBtn.classList.add('active');
+        elTab.classList.add('active');
+      });
+    }
+    return this;
+  };
+}

web_src/js/modules/fomantic/transition.ts

@@ -0,0 +1,54 @@
+import $ from 'jquery';
+
+export function initFomanticTransition() {
+  const transitionNopBehaviors = new Set([
+    'clear queue', 'stop', 'stop all', 'destroy',
+    'force repaint', 'repaint', 'reset',
+    'looping', 'remove looping', 'disable', 'enable',
+    'set duration', 'save conditions', 'restore conditions',
+  ]);
+  // stand-in for removed transition module
+  $.fn.transition = function (arg0: any, arg1: any, arg2: any) {
+    if (arg0 === 'is supported') return true;
+    if (arg0 === 'is animating') return false;
+    if (arg0 === 'is inward') return false;
+    if (arg0 === 'is outward') return false;
+
+    let argObj: Record<string, any>;
+    if (typeof arg0 === 'string') {
+      // many behaviors are no-op now. https://fomantic-ui.com/modules/transition.html#/usage
+      if (transitionNopBehaviors.has(arg0)) return this;
+      // now, the arg0 is an animation name, the syntax: (animation, duration, complete)
+      argObj = {animation: arg0, ...(arg1 && {duration: arg1}), ...(arg2 && {onComplete: arg2})};
+    } else if (typeof arg0 === 'object') {
+      argObj = arg0;
+    } else {
+      throw new Error(`invalid argument: ${arg0}`);
+    }
+
+    const isAnimationIn = argObj.animation?.startsWith('show') || argObj.animation?.endsWith(' in');
+    const isAnimationOut = argObj.animation?.startsWith('hide') || argObj.animation?.endsWith(' out');
+    this.each((_, el) => {
+      let toShow = isAnimationIn;
+      if (!isAnimationIn && !isAnimationOut) {
+        // If the animation is not in/out, then it must be a toggle animation.
+        // Fomantic uses computed styles to check "visibility", but to avoid unnecessary arguments, here it only checks the class.
+        toShow = this.hasClass('hidden'); // maybe it could also check "!this.hasClass('visible')", leave it to the future until there is a real problem.
+      }
+      argObj.onStart?.call(el);
+      if (toShow) {
+        el.classList.remove('hidden');
+        el.classList.add('visible', 'transition');
+        if (argObj.displayType) el.style.setProperty('display', argObj.displayType, 'important');
+        argObj.onShow?.call(el);
+      } else {
+        el.classList.add('hidden');
+        el.classList.remove('visible'); // don't remove the transition class because the Fomantic animation style is `.hidden.transition`.
+        el.style.removeProperty('display');
+        argObj.onHidden?.call(el);
+      }
+      argObj.onComplete?.call(el);
+    });
+    return this;
+  };
+}

web_src/js/modules/init.ts

@@ -0,0 +1,26 @@
+export class InitPerformanceTracer {
+  results: {name: string, dur: number}[] = [];
+  recordCall(name: string, func: ()=>void) {
+    const start = performance.now();
+    func();
+    this.results.push({name, dur: performance.now() - start});
+  }
+  printResults() {
+    this.results = this.results.sort((a, b) => b.dur - a.dur);
+    for (let i = 0; i < 20 && i < this.results.length; i++) {
+      console.info(`performance trace: ${this.results[i].name} ${this.results[i].dur.toFixed(3)}`);
+    }
+  }
+}
+
+export function callInitFunctions(functions: (() => any)[]): InitPerformanceTracer | null {
+  // Start performance trace by accessing a URL by "https://localhost/?_ui_performance_trace=1" or "https://localhost/?key=value&_ui_performance_trace=1"
+  // It is a quick check, no side effect so no need to do slow URL parsing.
+  const perfTracer = !window.location.search.includes('_ui_performance_trace=1') ? null : new InitPerformanceTracer();
+  if (perfTracer) {
+    for (const func of functions) perfTracer.recordCall(func.name, func);
+  } else {
+    for (const func of functions) func();
+  }
+  return perfTracer;
+}

web_src/js/modules/observer.ts

@@ -0,0 +1,112 @@
+import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
+import type {Promisable} from '../types.ts';
+import type {InitPerformanceTracer} from './init.ts';
+
+let globalSelectorObserverInited = false;
+
+type SelectorHandler = {selector: string, handler: (el: HTMLElement) => void};
+const selectorHandlers: SelectorHandler[] = [];
+
+type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => Promisable<void>;
+const globalEventFuncs: Record<string, GlobalEventFunc<HTMLElement, Event>> = {};
+
+type GlobalInitFunc<T extends HTMLElement> = (el: T) => Promisable<void>;
+const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
+
+// It handles the global events for all `<div data-global-click="onSomeElemClick"></div>` elements.
+export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(event: string, name: string, func: GlobalEventFunc<T, E>) {
+  globalEventFuncs[`${event}:${name}`] = func as GlobalEventFunc<HTMLElement, Event>;
+}
+
+// It handles the global init functions by a selector, for example:
+// > registerGlobalSelectorObserver('.ui.dropdown:not(.custom)', (el) => { initDropdown(el, ...) });
+// ATTENTION: For most cases, it's recommended to use registerGlobalInitFunc instead,
+// Because this selector-based approach is less efficient and less maintainable.
+// But if there are already a lot of elements on many pages, this selector-based approach is more convenient for exiting code.
+export function registerGlobalSelectorFunc(selector: string, handler: (el: HTMLElement) => void) {
+  selectorHandlers.push({selector, handler});
+  // Then initAddedElementObserver will call this handler for all existing elements after all handlers are added.
+  // This approach makes the init stage only need to do one "querySelectorAll".
+  if (!globalSelectorObserverInited) return;
+  for (const el of document.querySelectorAll<HTMLElement>(selector)) {
+    handler(el);
+  }
+}
+
+// It handles the global init functions for all `<div data-global-int="initSomeElem"></div>` elements.
+export function registerGlobalInitFunc<T extends HTMLElement>(name: string, handler: GlobalInitFunc<T>) {
+  globalInitFuncs[name] = handler as GlobalInitFunc<HTMLElement>;
+  // The "global init" functions are managed internally and called by callGlobalInitFunc
+  // They must be ready before initGlobalSelectorObserver is called.
+  if (globalSelectorObserverInited) throw new Error('registerGlobalInitFunc() must be called before initGlobalSelectorObserver()');
+}
+
+function callGlobalInitFunc(el: HTMLElement) {
+  const initFunc = el.getAttribute('data-global-init');
+  const func = globalInitFuncs[initFunc];
+  if (!func) throw new Error(`Global init function "${initFunc}" not found`);
+
+  // when an element node is removed and added again, it should not be re-initialized again.
+  type GiteaGlobalInitElement = Partial<HTMLElement> & {_giteaGlobalInited: boolean};
+  if ((el as GiteaGlobalInitElement)._giteaGlobalInited) return;
+  (el as GiteaGlobalInitElement)._giteaGlobalInited = true;
+
+  func(el);
+}
+
+function attachGlobalEvents() {
+  // add global "[data-global-click]" event handler
+  document.addEventListener('click', (e) => {
+    const elem = (e.target as HTMLElement).closest<HTMLElement>('[data-global-click]');
+    if (!elem) return;
+    const funcName = elem.getAttribute('data-global-click');
+    const func = globalEventFuncs[`click:${funcName}`];
+    if (!func) throw new Error(`Global event function "click:${funcName}" not found`);
+    func(elem, e);
+  });
+}
+
+export function initGlobalSelectorObserver(perfTracer?: InitPerformanceTracer): void {
+  if (globalSelectorObserverInited) throw new Error('initGlobalSelectorObserver() already called');
+  globalSelectorObserverInited = true;
+
+  attachGlobalEvents();
+
+  selectorHandlers.push({selector: '[data-global-init]', handler: callGlobalInitFunc});
+  const observer = new MutationObserver((mutationList) => {
+    const len = mutationList.length;
+    for (let i = 0; i < len; i++) {
+      const mutation = mutationList[i];
+      const len = mutation.addedNodes.length;
+      for (let i = 0; i < len; i++) {
+        const addedNode = mutation.addedNodes[i] as HTMLElement;
+        if (!isDocumentFragmentOrElementNode(addedNode)) continue;
+
+        for (const {selector, handler} of selectorHandlers) {
+          if (addedNode.matches(selector)) {
+            handler(addedNode);
+          }
+          for (const el of addedNode.querySelectorAll<HTMLElement>(selector)) {
+            handler(el);
+          }
+        }
+      }
+    }
+  });
+  if (perfTracer) {
+    for (const {selector, handler} of selectorHandlers) {
+      perfTracer.recordCall(`initGlobalSelectorObserver ${selector}`, () => {
+        for (const el of document.querySelectorAll<HTMLElement>(selector)) {
+          handler(el);
+        }
+      });
+    }
+  } else {
+    for (const {selector, handler} of selectorHandlers) {
+      for (const el of document.querySelectorAll<HTMLElement>(selector)) {
+        handler(el);
+      }
+    }
+  }
+  observer.observe(document, {subtree: true, childList: true});
+}

web_src/js/modules/sortable.ts

@@ -0,0 +1,23 @@
+import type {SortableOptions, SortableEvent} from 'sortablejs';
+import type SortableType from 'sortablejs';
+
+export async function createSortable(el: Element, opts: {handle?: string} & SortableOptions = {}): Promise<SortableType> {
+  // @ts-expect-error: wrong type derived by typescript
+  const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs');
+
+  return new Sortable(el, {
+    animation: 150,
+    ghostClass: 'card-ghost',
+    onChoose: (e: SortableEvent) => {
+      const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
+      handle.classList.add('tw-cursor-grabbing');
+      opts.onChoose?.(e);
+    },
+    onUnchoose: (e: SortableEvent) => {
+      const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
+      handle.classList.remove('tw-cursor-grabbing');
+      opts.onUnchoose?.(e);
+    },
+    ...opts,
+  } satisfies SortableOptions);
+}

web_src/js/modules/tippy.ts

@@ -0,0 +1,215 @@
+import tippy, {followCursor} from 'tippy.js';
+import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
+import {formatDatetime} from '../utils/time.ts';
+import type {Content, Instance, Placement, Props} from 'tippy.js';
+import {html} from '../utils/html.ts';
+
+type TippyOpts = {
+  role?: string,
+  theme?: 'default' | 'tooltip' | 'menu' | 'box-with-header' | 'bare',
+} & Partial<Props>;
+
+const visibleInstances = new Set<Instance>();
+const arrowSvg = html`<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`;
+
+export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
+  // the callback functions should be destructured from opts,
+  // because we should use our own wrapper functions to handle them, do not let the user override them
+  const {onHide, onShow, onDestroy, role, theme, arrow, ...other} = opts;
+
+  const instance: Instance = tippy(target, {
+    appendTo: document.body,
+    animation: false,
+    allowHTML: false,
+    hideOnClick: false,
+    interactiveBorder: 20,
+    ignoreAttributes: true,
+    maxWidth: 500, // increase over default 350px
+    onHide: (instance: Instance) => {
+      visibleInstances.delete(instance);
+      return onHide?.(instance);
+    },
+    onDestroy: (instance: Instance) => {
+      visibleInstances.delete(instance);
+      return onDestroy?.(instance);
+    },
+    onShow: (instance: Instance) => {
+      // hide other tooltip instances so only one tooltip shows at a time
+      for (const visibleInstance of visibleInstances) {
+        if (visibleInstance.props.role === 'tooltip') {
+          visibleInstance.hide();
+        }
+      }
+      visibleInstances.add(instance);
+      target.setAttribute('aria-controls', instance.popper.id);
+      return onShow?.(instance);
+    },
+    arrow: arrow ?? (theme === 'bare' ? false : arrowSvg),
+    // HTML role attribute, ideally the default role would be "popover" but it does not exist
+    role: role || 'menu',
+    // CSS theme, either "default", "tooltip", "menu", "box-with-header" or "bare"
+    theme: theme || role || 'default',
+    offset: [0, arrow ? 10 : 6],
+    plugins: [followCursor],
+    ...other,
+  } satisfies Partial<Props>);
+
+  if (instance.props.role === 'menu') {
+    target.setAttribute('aria-haspopup', 'true');
+  }
+
+  return instance;
+}
+
+/**
+ * Attach a tooltip tippy to the given target element.
+ * If the target element already has a tooltip tippy attached, the tooltip will be updated with the new content.
+ * If the target element has no content, then no tooltip will be attached, and it returns null.
+ *
+ * Note: "tooltip" doesn't equal to "tippy". "tooltip" means a auto-popup content, it just uses tippy as the implementation.
+ */
+function attachTooltip(target: Element, content: Content = null): Instance {
+  switchTitleToTooltip(target);
+
+  content = content ?? target.getAttribute('data-tooltip-content');
+  if (!content) return null;
+
+  // when element has a clipboard target, we update the tooltip after copy
+  // in which case it is undesirable to automatically hide it on click as
+  // it would momentarily flash the tooltip out and in.
+  const hasClipboardTarget = target.hasAttribute('data-clipboard-target');
+  const hideOnClick = !hasClipboardTarget;
+
+  const props: TippyOpts = {
+    content,
+    delay: 100,
+    role: 'tooltip',
+    theme: 'tooltip',
+    hideOnClick,
+    placement: target.getAttribute('data-tooltip-placement') as Placement || 'top-start',
+    followCursor: target.getAttribute('data-tooltip-follow-cursor') as Props['followCursor'] || false,
+    ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
+  };
+
+  if (!target._tippy) {
+    createTippy(target, props);
+  } else {
+    target._tippy.setProps(props);
+  }
+  return target._tippy;
+}
+
+function switchTitleToTooltip(target: Element): void {
+  let title = target.getAttribute('title');
+  if (title) {
+    // apply custom formatting to relative-time's tooltips
+    if (target.tagName.toLowerCase() === 'relative-time') {
+      const datetime = target.getAttribute('datetime');
+      if (datetime) {
+        title = formatDatetime(new Date(datetime));
+      }
+    }
+    target.setAttribute('data-tooltip-content', title);
+    target.setAttribute('aria-label', title);
+    // keep the attribute, in case there are some other "[title]" selectors
+    // and to prevent infinite loop with <relative-time> which will re-add
+    // title if it is absent
+    target.setAttribute('title', '');
+  }
+}
+
+/**
+ * Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
+ * According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event
+ * Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)"
+ * The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
+ */
+function lazyTooltipOnMouseHover(this: HTMLElement, e: Event): void {
+  e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, true);
+  attachTooltip(this);
+}
+
+// Activate the tooltip for current element.
+// If the element has no aria-label, use the tooltip content as aria-label.
+function attachLazyTooltip(el: HTMLElement): void {
+  el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true});
+
+  // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
+  if (!el.hasAttribute('aria-label')) {
+    const content = el.getAttribute('data-tooltip-content');
+    if (content) {
+      el.setAttribute('aria-label', content);
+    }
+  }
+}
+
+// Activate the tooltip for all children elements.
+function attachChildrenLazyTooltip(target: HTMLElement): void {
+  for (const el of target.querySelectorAll<HTMLElement>('[data-tooltip-content]')) {
+    attachLazyTooltip(el);
+  }
+}
+
+export function initGlobalTooltips(): void {
+  // use MutationObserver to detect new "data-tooltip-content" elements added to the DOM, or attributes changed
+  const observerConnect = (observer: MutationObserver) => observer.observe(document, {
+    subtree: true,
+    childList: true,
+    attributeFilter: ['data-tooltip-content', 'title'],
+  });
+  const observer = new MutationObserver((mutationList, observer) => {
+    const pending = observer.takeRecords();
+    observer.disconnect();
+    for (const mutation of [...mutationList, ...pending]) {
+      if (mutation.type === 'childList') {
+        // mainly for Vue components and AJAX rendered elements
+        for (const el of mutation.addedNodes as NodeListOf<HTMLElement>) {
+          if (!isDocumentFragmentOrElementNode(el)) continue;
+          attachChildrenLazyTooltip(el);
+          if (el.hasAttribute('data-tooltip-content')) {
+            attachLazyTooltip(el);
+          }
+        }
+      } else if (mutation.type === 'attributes') {
+        attachTooltip(mutation.target as Element);
+      }
+    }
+    observerConnect(observer);
+  });
+  observerConnect(observer);
+
+  attachChildrenLazyTooltip(document.documentElement);
+}
+
+export function showTemporaryTooltip(target: Element, content: Content): void {
+  // if the target is inside a dropdown or tippy popup, the menu will be hidden soon
+  // so display the tooltip on the "aria-controls" element or dropdown instead
+  let refClientRect: DOMRect;
+  const popupTippyId = target.closest(`[data-tippy-root]`)?.id;
+  if (popupTippyId) {
+    // for example, the "Copy Permalink" button in the "File View" page for the selected lines
+    target = document.body;
+    refClientRect = document.querySelector(`[aria-controls="${CSS.escape(popupTippyId)}"]`)?.getBoundingClientRect();
+    refClientRect = refClientRect ?? new DOMRect(0, 0, 0, 0); // fallback to empty rect if not found, tippy doesn't accept null
+  } else {
+    // for example, the "Copy Link" button in the issue header dropdown menu
+    target = target.closest('.ui.dropdown') ?? target;
+    refClientRect = target.getBoundingClientRect();
+  }
+  const tooltipTippy = target._tippy ?? attachTooltip(target, content);
+  tooltipTippy.setContent(content);
+  tooltipTippy.setProps({getReferenceClientRect: () => refClientRect});
+  if (!tooltipTippy.state.isShown) tooltipTippy.show();
+  tooltipTippy.setProps({
+    onHidden: (tippy) => {
+      // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
+      if (!attachTooltip(target)) {
+        tippy.destroy();
+      }
+    },
+  });
+}
+
+export function getAttachedTippyInstance(el: Element): Instance | null {
+  return el._tippy ?? null;
+}

web_src/js/modules/toast.test.ts

@@ -0,0 +1,16 @@
+import {showInfoToast, showErrorToast, showWarningToast} from './toast.ts';
+
+test('showInfoToast', async () => {
+  showInfoToast('success 😀', {duration: -1});
+  expect(document.querySelector('.toastify')).toBeTruthy();
+});
+
+test('showWarningToast', async () => {
+  showWarningToast('warning 😐', {duration: -1});
+  expect(document.querySelector('.toastify')).toBeTruthy();
+});
+
+test('showErrorToast', async () => {
+  showErrorToast('error 🙁', {duration: -1});
+  expect(document.querySelector('.toastify')).toBeTruthy();
+});

web_src/js/modules/toast.ts

@@ -0,0 +1,108 @@
+import {htmlEscape} from '../utils/html.ts';
+import {svg} from '../svg.ts';
+import {animateOnce, queryElems, showElem} from '../utils/dom.ts';
+import Toastify from 'toastify-js'; // don't use "async import", because when network error occurs, the "async import" also fails and nothing is shown
+import type {Intent} from '../types.ts';
+import type {SvgName} from '../svg.ts';
+import type {Options} from 'toastify-js';
+import type StartToastifyInstance from 'toastify-js';
+
+export type Toast = ReturnType<typeof StartToastifyInstance>;
+
+type ToastLevels = {
+  [intent in Intent]: {
+    icon: SvgName,
+    background: string,
+    duration: number,
+  }
+};
+
+const levels: ToastLevels = {
+  info: {
+    icon: 'octicon-check',
+    background: 'var(--color-green)',
+    duration: 2500,
+  },
+  warning: {
+    icon: 'gitea-exclamation',
+    background: 'var(--color-orange)',
+    duration: -1, // requires dismissal to hide
+  },
+  error: {
+    icon: 'gitea-exclamation',
+    background: 'var(--color-red)',
+    duration: -1, // requires dismissal to hide
+  },
+};
+
+type ToastOpts = {
+  useHtmlBody?: boolean,
+  preventDuplicates?: boolean | string,
+} & Options;
+
+type ToastifyElement = HTMLElement & {_giteaToastifyInstance?: Toast};
+
+/** See https://github.com/apvarun/toastify-js#api for options */
+function showToast(message: string, level: Intent, {gravity, position, duration, useHtmlBody, preventDuplicates = true, ...other}: ToastOpts = {}): Toast {
+  const body = useHtmlBody ? message : htmlEscape(message);
+  const parent = document.querySelector('.ui.dimmer.active') ?? document.body;
+  const duplicateKey = preventDuplicates ? (preventDuplicates === true ? `${level}-${body}` : preventDuplicates) : '';
+
+  // prevent showing duplicate toasts with the same level and message, and give visual feedback for end users
+  if (preventDuplicates) {
+    const toastEl = parent.querySelector(`:scope > .toastify.on[data-toast-unique-key="${CSS.escape(duplicateKey)}"]`);
+    if (toastEl) {
+      const toastDupNumEl = toastEl.querySelector('.toast-duplicate-number');
+      showElem(toastDupNumEl);
+      toastDupNumEl.textContent = String(Number(toastDupNumEl.textContent) + 1);
+      animateOnce(toastDupNumEl, 'pulse-1p5-200');
+      return;
+    }
+  }
+
+  const {icon, background, duration: levelDuration} = levels[level ?? 'info'];
+  const toast = Toastify({
+    selector: parent,
+    text: `
+      <div class='toast-icon'>${svg(icon)}</div>
+      <div class='toast-body'><span class="toast-duplicate-number tw-hidden">1</span>${body}</div>
+      <button class='btn toast-close'>${svg('octicon-x')}</button>
+    `,
+    escapeMarkup: false,
+    gravity: gravity ?? 'top',
+    position: position ?? 'center',
+    duration: duration ?? levelDuration,
+    style: {background},
+    ...other,
+  });
+
+  toast.showToast();
+  toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
+  toast.toastElement.setAttribute('data-toast-unique-key', duplicateKey);
+  (toast.toastElement as ToastifyElement)._giteaToastifyInstance = toast;
+  return toast;
+}
+
+export function showInfoToast(message: string, opts?: ToastOpts): Toast {
+  return showToast(message, 'info', opts);
+}
+
+export function showWarningToast(message: string, opts?: ToastOpts): Toast {
+  return showToast(message, 'warning', opts);
+}
+
+export function showErrorToast(message: string, opts?: ToastOpts): Toast {
+  return showToast(message, 'error', opts);
+}
+
+function hideToastByElement(el: Element): void {
+  (el as ToastifyElement)?._giteaToastifyInstance?.hideToast();
+}
+
+export function hideToastsFrom(parent: Element): void {
+  queryElems(parent, ':scope > .toastify.on', hideToastByElement);
+}
+
+export function hideToastsAll(): void {
+  queryElems(document, '.toastify.on', hideToastByElement);
+}

web_src/js/modules/worker.ts

@@ -0,0 +1,9 @@
+import {sleep} from '../utils.ts';
+
+const {appSubUrl} = window.config;
+
+export async function logoutFromWorker(): Promise<void> {
+  // wait for a while because other requests (eg: logout) may be in the flight
+  await sleep(5000);
+  window.location.href = `${appSubUrl}/`;
+}