[Feature] Modern UI roll out (#236)

This PR moves all the collection pages into the new UI in a rough push.
I did not put the same amount of care into these as into search, index, and predict.

## Major changes

- All modals are now migrated to a state based alpine.js implementation.
- jQuery is no longer present in the base layout; ajax is replace by native fetch api
- most of the pps.js is now obsolte (as I understand it; the code is not referenced any more @jebus  please double check)
- in-memory pagination for large result lists (set to 50; we can make that configurable later; performance degrades at around 1k) stukk a bit rough tracked in #235

## Minor things

- Sarch and index also use alpine now
- The loading spinner is now CSS animated (not sure if it currently gets correctly called)

## Not done

- Ihave not even cheked the admin pages. Not sure If these need migrations
- The temporary migration pages still use the old template. Not sure what is supposed to happen with those? @jebus

## What I did to test

- opend all pages in browse, and user ; plus all pages reachable from there.
- Interacted and tested the functionality of each modal superfically with exception of the API key modal (no functional test).

---
This PR is massive sorry for that; just did not want to push half-brokenn state.
@jebus @liambrydon I would be glad if you could click around and try to break it :)

Finally closes #133

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#236
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>

templates/framework_modern.html

@@ -21,8 +21,14 @@
       type="text/css"
     />
 
-    {# jQuery - Keep for compatibility with existing JS #}
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    {# Alpine.js - For reactive components #}
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
+    ></script>
+    <script src="{% static 'js/alpine/index.js' %}"></script>
+    <script src="{% static 'js/alpine/search.js' %}"></script>
+    <script src="{% static 'js/alpine/pagination.js' %}"></script>
 
     {# Font Awesome #}
     <link
@@ -35,21 +41,10 @@
 
     <script>
       const csrftoken = document.querySelector("[name=csrf-token]").content;
-
-      // Setup CSRF header for all jQuery AJAX requests
-      $.ajaxSetup({
-        beforeSend: function (xhr, settings) {
-          if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
-            xhr.setRequestHeader("X-CSRFToken", csrftoken);
-          }
-        },
-      });
     </script>
 
     {# General EP JS #}
     <script src="{% static 'js/pps.js' %}"></script>
-    {# Modal Steps for Stepwise Modal Wizards #}
-    <script src="{% static 'js/jquery-bootstrap-modal-steps.js' %}"></script>
 
     {% if not debug %}
       <!-- Matomo -->
@@ -171,10 +166,11 @@
     {% endblock %}
 
     <script>
-      $(function () {
-        // Hide actionsbutton if there's no action defined
-        if ($("#actionsButton ul").children().length > 0) {
-          $("#actionsButton").show();
+      document.addEventListener("DOMContentLoaded", function () {
+        // Show actions button if there are actions defined
+        const actionsButtonUl = document.querySelector("#actionsButton ul");
+        if (actionsButtonUl && actionsButtonUl.children.length > 0) {
+          document.getElementById("actionsButton").style.display = "";
         }
       });