[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/modals/objects/download_pathway_image_modal.html

@@ -1,43 +1,57 @@
 {% load static %}
-<!-- Download Pathway -->
-<div id="download_pathway_image_modal" class="modal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3 class="modal-title">Download Pathway as Image</h3>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        By clicking on Download the Pathway will be saved as SVG.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
-          Close
-        </button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          id="download-pathway-image-modal-submit"
-        >
-          Download
-        </button>
-      </div>
+
+<dialog
+  id="download_pathway_image_modal"
+  class="modal"
+  x-data="modalForm()"
+  @close="reset()"
+>
+  <div class="modal-box">
+    <!-- Header -->
+    <h3 class="font-bold text-lg">Download Pathway as Image</h3>
+
+    <!-- Close button (X) -->
+    <form method="dialog">
+      <button
+        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+        :disabled="isSubmitting"
+      >
+        ✕
+      </button>
+    </form>
+
+    <!-- Body -->
+    <div class="py-4">
+      <p>By clicking on Download the Pathway will be saved as SVG.</p>
+    </div>
+
+    <!-- Footer -->
+    <div class="modal-action">
+      <button
+        type="button"
+        class="btn"
+        onclick="this.closest('dialog').close()"
+        :disabled="isSubmitting"
+      >
+        Close
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary"
+        @click="isSubmitting = true; downloadSVG(document.getElementById('pwsvg'), '{{ pathway.name.split|join:'_' }}.svg'); $el.closest('dialog').close();"
+        :disabled="isSubmitting"
+      >
+        <span x-show="!isSubmitting">Download</span>
+        <span
+          x-show="isSubmitting"
+          class="loading loading-spinner loading-sm"
+        ></span>
+      </button>
     </div>
   </div>
-</div>
-<script>
-  $(function () {
-    $("#download-pathway-image-modal-submit").click(function (e) {
-      e.preventDefault();
-      downloadSVG($("#pwsvg")[0], '{{ pathway.name.split|join:"_" }}.svg');
-      $("#download_pathway_image_modal").modal("hide");
-    });
-  });
-</script>
+
+  <!-- Backdrop -->
+  <form method="dialog" class="modal-backdrop">
+    <button :disabled="isSubmitting">close</button>
+  </form>
+</dialog>