feat: remove fomantic's tab module (#8587)

In similar vein of forgejo/forgejo#7416

- Fomantic's tab module is responsible for showing the right content when a tab is clicked upon. Most notably the Write/Preview tabs on the comment editor.
- Remove it and replace the javascript with our own function that is able to provide everything Forgejo 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/8587
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>

web_src/js/modules/tab.ts

@@ -0,0 +1,36 @@
+export function initTab(parentEl: Element) {
+  if (!parentEl) {
+    return;
+  }
+
+  // Keep track of which tab is active for this element.
+  let activeTabPath = parentEl.querySelector('.item.active')?.getAttribute('data-tab');
+  if (!activeTabPath) {
+    return;
+  }
+
+  for (const el of parentEl.querySelectorAll('.item')) {
+    el.addEventListener('click', (ev) => {
+      // There's no data-tab attribute we can't do anything, ignore.
+      const tabPath = el.getAttribute('data-tab');
+      if (!tabPath) {
+        return;
+      }
+
+      // The item is already active, ignore.
+      if (el.classList.contains('active')) {
+        return;
+      }
+
+      // Make the current item active and the previous item inactive.
+      parentEl.querySelector('.item.active').classList.remove('active');
+      document.querySelector(`.tab.active[data-tab=${activeTabPath}]`).classList.remove('active');
+      el.classList.add('active');
+      document.querySelector(`.tab[data-tab=${tabPath}]`).classList.add('active');
+      activeTabPath = tabPath;
+
+      // Not really sure if this is useful, it is kept from how Fomantic did it.
+      ev.preventDefault();
+    }, {passive: false});
+  }
+}