chore(ui): remove fomantic's dimmer module (#7416)

- Fomantic's dimmer module is responsible for dimming the page and make some element the primary focus on the page (e.g. modal). This module is only used by Fomantic's modal module.
- Remove it and replace the javascript with our own `Dimmer` class that is able to provide Fomantic's modal module with everything it needs.
- Replace the CSS with our own bare minimum CSS.
- No functionality or visual is affected by this replacement.
- E2E test added.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7416
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>

web_src/js/modules/dimmer.ts

@@ -0,0 +1,47 @@
+import $ from 'jquery';
+
+class Dimmer {
+  dimmerEl: HTMLDivElement;
+  active: boolean;
+
+  constructor() {
+    this.dimmerEl = document.querySelector('body > div.ui.dimmer') as HTMLDivElement;
+    if (!this.dimmerEl) {
+      this.dimmerEl = document.createElement('div');
+      this.dimmerEl.classList.add('ui', 'dimmer', 'transition');
+      document.body.append(this.dimmerEl);
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dimmer(functionName: string, ...args: any[]) {
+    if (functionName === 'add content') {
+      this.dimmerEl.append(args[0][0]);
+    } else if (functionName === 'get dimmer') {
+      return $(this.dimmerEl);
+    } else if (functionName === 'show') {
+      this.dimmerEl.classList.add('active');
+      this.dimmerEl.classList.remove('hidden');
+      this.active = true;
+    } else if (functionName === 'hide') {
+      this.dimmerEl.classList.remove('active');
+      this.dimmerEl.classList.add('hidden');
+      this.active = false;
+    } else if (functionName === 'is active') {
+      return this.active;
+    }
+  }
+
+  // JQuery compatibility functions.
+  get(_index: number): HTMLElement {
+    return document.body;
+  }
+  removeClass() {}
+  hasClass() {}
+}
+
+export function initDimmer() {
+  $.fn.dimmer = (arg: string | object) => {
+    if (typeof arg === 'object') return new Dimmer();
+  };
+}

web_src/js/modules/fomantic.js

@@ -6,6 +6,7 @@ import {initAriaDropdownPatch} from './fomantic/dropdown.js';
 import {initAriaModalPatch} from './fomantic/modal.js';
 import {initFomanticTransition} from './fomantic/transition.js';
 import {svg} from '../svg.js';
+import {initDimmer} from './dimmer.ts';
 
 export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
 
@@ -31,4 +32,5 @@ export function initGiteaFomantic() {
   initAriaFormFieldPatch();
   initAriaDropdownPatch();
   initAriaModalPatch();
+  initDimmer();
 }