4 files changed, 84 insertions, 19 deletions
diff --git a/web_src/js/modules/fomantic/dropdown.ts b/web_src/js/modules/fomantic/dropdown.ts
index 0360b8ef95..ccc22073d7 100644
--- a/web_src/js/modules/fomantic/dropdown.ts
+++ b/web_src/js/modules/fomantic/dropdown.ts
@@ -9,9 +9,9 @@ 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.settings.onAfterFiltered = onAfterFiltered;
   $.fn.dropdown = ariaDropdownFn;
   $.fn.fomanticExt.onResponseKeepSelectedItem = onResponseKeepSelectedItem;
+  $.fn.fomanticExt.onDropdownAfterFiltered = onDropdownAfterFiltered;
   (ariaDropdownFn as FomanticInitFunction).settings = fomanticDropdownFn.settings;
 }
 
@@ -71,11 +71,11 @@ function updateSelectionLabel(label: HTMLElement) {
   }
 }
 
-function onAfterFiltered(this: any) {
-  const $dropdown = $(this);
+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) hideScopedEmptyDividers(itemsMenu);
+  if (hideEmptyDividers && itemsMenu) hideScopedEmptyDividers(itemsMenu);
 }
 
 // delegate the dropdown's template functions and callback functions to add aria attributes.
diff --git a/web_src/js/modules/fomantic/modal.ts b/web_src/js/modules/fomantic/modal.ts
index 6a2c558890..a96c7785e1 100644
--- a/web_src/js/modules/fomantic/modal.ts
+++ b/web_src/js/modules/fomantic/modal.ts
@@ -1,5 +1,7 @@
 import $ from 'jquery';
 import type {FomanticInitFunction} from '../../types.ts';
+import {queryElems} from '../../utils/dom.ts';
+import {hideToastsFrom} from '../toast.ts';
 
 const fomanticModalFn = $.fn.modal;
 
@@ -8,6 +10,8 @@ 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
@@ -27,3 +31,33 @@ function ariaModalFn(this: any, ...args: Parameters<FomanticInitFunction>) {
   }
   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;
+}
diff --git a/web_src/js/modules/tippy.ts b/web_src/js/modules/tippy.ts
index af715f48b9..2a1d998d76 100644
--- a/web_src/js/modules/tippy.ts
+++ b/web_src/js/modules/tippy.ts
@@ -2,6 +2,7 @@ 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,
@@ -9,7 +10,7 @@ type TippyOpts = {
 } & Partial<Props>;
 
 const visibleInstances = new Set<Instance>();
-const arrowSvg = `<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>`;
+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,
@@ -40,6 +41,7 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
         }
       }
       visibleInstances.add(instance);
+      target.setAttribute('aria-controls', instance.popper.id);
       return onShow?.(instance);
     },
     arrow: arrow ?? (theme === 'bare' ? false : arrowSvg),
@@ -180,13 +182,25 @@ export function initGlobalTooltips(): void {
 }
 
 export function showTemporaryTooltip(target: Element, content: Content): void {
-  // if the target is inside a dropdown, the menu will be hidden soon
-  // so display the tooltip on the dropdown instead
-  target = target.closest('.ui.dropdown') || target;
-  const tippy = target._tippy ?? attachTooltip(target, content);
-  tippy.setContent(content);
-  if (!tippy.state.isShown) tippy.show();
-  tippy.setProps({
+  // 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)) {
diff --git a/web_src/js/modules/toast.ts b/web_src/js/modules/toast.ts
index 36e2321743..ed807a4977 100644
--- a/web_src/js/modules/toast.ts
+++ b/web_src/js/modules/toast.ts
@@ -1,6 +1,6 @@
-import {htmlEscape} from 'escape-goat';
+import {htmlEscape} from '../utils/html.ts';
 import {svg} from '../svg.ts';
-import {animateOnce, showElem} from '../utils/dom.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';
@@ -37,17 +37,20 @@ const levels: ToastLevels = {
 
 type ToastOpts = {
   useHtmlBody?: boolean,
-  preventDuplicates?: 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 ? String(message) : htmlEscape(message);
-  const key = `${level}-${body}`;
+  const parent = document.querySelector('.ui.dimmer.active') ?? document.body;
+  const duplicateKey = preventDuplicates ? (preventDuplicates === true ? `${level}-${body}` : preventDuplicates) : '';
 
-  // prevent showing duplicate toasts with same level and message, and give a visual feedback for end users
+  // prevent showing duplicate toasts with the same level and message, and give visual feedback for end users
   if (preventDuplicates) {
-    const toastEl = document.querySelector(`.toastify[data-toast-unique-key="${CSS.escape(key)}"]`);
+    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);
@@ -59,6 +62,7 @@ function showToast(message: string, level: Intent, {gravity, position, duration,
 
   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>
@@ -74,7 +78,8 @@ function showToast(message: string, level: Intent, {gravity, position, duration,
 
   toast.showToast();
   toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
-  toast.toastElement.setAttribute('data-toast-unique-key', key);
+  toast.toastElement.setAttribute('data-toast-unique-key', duplicateKey);
+  (toast.toastElement as ToastifyElement)._giteaToastifyInstance = toast;
   return toast;
 }
 
@@ -89,3 +94,15 @@ export function showWarningToast(message: string, opts?: ToastOpts): Toast {
 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);
+}