[mod] theme/simple: migrate codebase to TypeScript

TypeScript is a superset of JavaScript, converting the entire theme to
TypeScript allows us to receive much more feedback on possible issues made in
package updates or our own typos, furthermore, it allows to transpile properly
to lower specs. This PR couldn't be done in smaller commits, a lot of work
needed to make everything *work properly*:

- A browser baseline has been set that requires minimum **Chromium 93, Firefox
  92 and Safari 15** (proper visuals/operation on older browser versions is not
  guaranteed)
- LightningCSS now handles minification and prefix creation for CSS.
- All hardcoded polyfills and support for previous browser baseline versions
  have been removed.
- Convert codebase to TypeScript.
- Convert IIFE to ESM, handling globals with IIFE is cumbersome, ESM is the
  standard for virtually any use of JS nowadays.
- Vite now builds the theme without the need for `vite-plugin-static-copy`.
- `searxng.ready` now accepts an array of conditions for the callback to be
  executed.
- Replace `leaflet` with `ol` as there were some issues with proper Vite
  bundling.
- Merged `head` with `main` script, as head was too small now.
- Add `assertElement` to properly check the existence of critical DOM elements.
- `searxng.on` renamed to `searxng.listen` with some handling improvements.

client/simple/src/js/main/search.ts

@@ -0,0 +1,233 @@
+import { assertElement, searxng } from "./00_toolkit.ts";
+
+const submitIfQuery = (qInput: HTMLInputElement): void => {
+  if (qInput.value.length > 0) {
+    const search = document.getElementById("search") as HTMLFormElement | null;
+    search?.submit();
+  }
+};
+
+const updateClearButton = (qInput: HTMLInputElement, cs: HTMLElement): void => {
+  cs.classList.toggle("empty", qInput.value.length === 0);
+};
+
+const createClearButton = (qInput: HTMLInputElement): void => {
+  const cs = document.getElementById("clear_search");
+  assertElement(cs);
+
+  updateClearButton(qInput, cs);
+
+  searxng.listen("click", cs, (event: MouseEvent) => {
+    event.preventDefault();
+    qInput.value = "";
+    qInput.focus();
+    updateClearButton(qInput, cs);
+  });
+
+  searxng.listen("input", qInput, () => updateClearButton(qInput, cs), { passive: true });
+};
+
+const fetchResults = async (qInput: HTMLInputElement, query: string): Promise<void> => {
+  try {
+    let res: Response;
+
+    if (searxng.settings.method === "GET") {
+      res = await searxng.http("GET", `./autocompleter?q=${query}`);
+    } else {
+      res = await searxng.http("POST", "./autocompleter", new URLSearchParams({ q: query }));
+    }
+
+    const results = await res.json();
+
+    const autocomplete = document.querySelector<HTMLElement>(".autocomplete");
+    assertElement(autocomplete);
+
+    const autocompleteList = document.querySelector<HTMLUListElement>(".autocomplete ul");
+    assertElement(autocompleteList);
+
+    autocomplete.classList.add("open");
+    autocompleteList.replaceChildren();
+
+    // show an error message that no result was found
+    if (!results?.[1]?.length) {
+      const noItemFoundMessage = Object.assign(document.createElement("li"), {
+        className: "no-item-found",
+        textContent: searxng.settings.translations?.no_item_found ?? "No results found"
+      });
+      autocompleteList.append(noItemFoundMessage);
+      return;
+    }
+
+    const fragment = new DocumentFragment();
+
+    for (const result of results[1]) {
+      const li = Object.assign(document.createElement("li"), { textContent: result });
+
+      searxng.listen("mousedown", li, () => {
+        qInput.value = result;
+
+        const form = document.querySelector<HTMLFormElement>("#search");
+        form?.submit();
+
+        autocomplete.classList.remove("open");
+      });
+
+      fragment.append(li);
+    }
+
+    autocompleteList.append(fragment);
+  } catch (error) {
+    console.error("Error fetching autocomplete results:", error);
+  }
+};
+
+searxng.ready(
+  () => {
+    const qInput = document.getElementById("q") as HTMLInputElement | null;
+    assertElement(qInput);
+
+    const isMobile = window.matchMedia("(max-width: 50em)").matches;
+    const isResultsPage = document.querySelector("main")?.id === "main_results";
+
+    // focus search input on large screens
+    if (!isMobile && !isResultsPage) {
+      qInput.focus();
+    }
+
+    createClearButton(qInput);
+
+    // autocompleter
+    if (searxng.settings.autocomplete) {
+      let timeoutId: number;
+
+      searxng.listen("input", qInput, () => {
+        clearTimeout(timeoutId);
+
+        const query = qInput.value;
+        const minLength = searxng.settings.autocomplete_min ?? 2;
+
+        if (query.length < minLength) return;
+
+        timeoutId = window.setTimeout(async () => {
+          if (query === qInput.value) {
+            await fetchResults(qInput, query);
+          }
+        }, 300);
+      });
+
+      const autocomplete = document.querySelector<HTMLElement>(".autocomplete");
+      const autocompleteList = document.querySelector<HTMLUListElement>(".autocomplete ul");
+      if (autocompleteList) {
+        searxng.listen("keyup", qInput, (event: KeyboardEvent) => {
+          const listItems = [...autocompleteList.children] as HTMLElement[];
+
+          const currentIndex = listItems.findIndex((item) => item.classList.contains("active"));
+          let newCurrentIndex = -1;
+
+          switch (event.key) {
+            case "ArrowUp": {
+              const currentItem = listItems[currentIndex];
+              if (currentItem && currentIndex >= 0) {
+                currentItem.classList.remove("active");
+              }
+              // we need to add listItems.length to the index calculation here because the JavaScript modulos
+              // operator doesn't work with negative numbers
+              newCurrentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
+              break;
+            }
+            case "ArrowDown": {
+              const currentItem = listItems[currentIndex];
+              if (currentItem && currentIndex >= 0) {
+                currentItem.classList.remove("active");
+              }
+              newCurrentIndex = (currentIndex + 1) % listItems.length;
+              break;
+            }
+            case "Tab":
+            case "Enter":
+              if (autocomplete) {
+                autocomplete.classList.remove("open");
+              }
+              break;
+          }
+
+          if (newCurrentIndex !== -1) {
+            const selectedItem = listItems[newCurrentIndex];
+            if (selectedItem) {
+              selectedItem.classList.add("active");
+
+              if (!selectedItem.classList.contains("no-item-found")) {
+                const qInput = document.getElementById("q") as HTMLInputElement | null;
+                if (qInput) {
+                  qInput.value = selectedItem.textContent ?? "";
+                }
+              }
+            }
+          }
+        });
+      }
+    }
+
+    // Additionally to searching when selecting a new category, we also
+    // automatically start a new search request when the user changes a search
+    // filter (safesearch, time range or language) (this requires JavaScript
+    // though)
+    if (
+      searxng.settings.search_on_category_select &&
+      // If .search_filters is undefined (invisible) we are on the homepage and
+      // hence don't have to set any listeners
+      document.querySelector(".search_filters")
+    ) {
+      const safesearchElement = document.getElementById("safesearch");
+      if (safesearchElement) {
+        searxng.listen("change", safesearchElement, () => submitIfQuery(qInput));
+      }
+
+      const timeRangeElement = document.getElementById("time_range");
+      if (timeRangeElement) {
+        searxng.listen("change", timeRangeElement, () => submitIfQuery(qInput));
+      }
+
+      const languageElement = document.getElementById("language");
+      if (languageElement) {
+        searxng.listen("change", languageElement, () => submitIfQuery(qInput));
+      }
+    }
+
+    const categoryButtons = [...document.querySelectorAll<HTMLButtonElement>("button.category_button")];
+    for (const button of categoryButtons) {
+      searxng.listen("click", button, (event: MouseEvent) => {
+        if (event.shiftKey) {
+          event.preventDefault();
+          button.classList.toggle("selected");
+          return;
+        }
+
+        // deselect all other categories
+        for (const categoryButton of categoryButtons) {
+          categoryButton.classList.toggle("selected", categoryButton === button);
+        }
+      });
+    }
+
+    const form = document.querySelector<HTMLFormElement>("#search");
+    assertElement(form);
+
+    // override form submit action to update the actually selected categories
+    searxng.listen("submit", form, (event: Event) => {
+      event.preventDefault();
+
+      const categoryValuesInput = document.querySelector<HTMLInputElement>("#selected-categories");
+      if (categoryValuesInput) {
+        const categoryValues = categoryButtons
+          .filter((button) => button.classList.contains("selected"))
+          .map((button) => button.name.replace("category_", ""));
+
+        categoryValuesInput.value = categoryValues.join(",");
+      }
+
+      form.submit();
+    });
+  },
+  { on: [searxng.endpoint === "index" || searxng.endpoint === "results"] }
+);