[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/collections/joblog.html

@@ -1,49 +1,33 @@
-{% extends "framework.html" %}
+{% extends "framework_modern.html" %}
 {% load static %}
 {% load envipytags %}
 {% block content %}
-  <div class="panel-group" id="reviewListAccordion">
-    <div class="panel panel-default">
-      <div
-        class="panel-heading"
-        id="headingPanel"
-        style="font-size:2rem;height: 46px"
-      >
-        Jobs
-      </div>
-      <div class="panel-body">
-        <p>Job Logs Desc</p>
+  <div class="space-y-2 p-4">
+    <!-- Header Section -->
+    <div class="card bg-base-100">
+      <div class="card-body">
+        <h2 class="card-title text-2xl">User Prediction Jobs</h2>
+        <p class="mt-2">Job Logs Desc</p>
       </div>
+    </div>
 
-      <div
-        class="panel panel-default panel-heading list-group-item"
-        style="background-color:silver"
-      >
-        <h4 class="panel-title">
-          <a
-            id="job-accordion-link"
-            data-toggle="collapse"
-            data-parent="#job-accordion"
-            href="#jobs"
-          >
-            Jobs
-          </a>
-        </h4>
-      </div>
-      <div id="jobs" class="panel-collapse in collapse">
-        <div class="panel-body list-group-item" id="job-content">
-          <table class="table-bordered table-hover table">
-            <tr style="background-color: rgba(0, 0, 0, 0.08);">
-              {% if meta.user.is_superuser %}
-                <th scope="col">User</th>
-              {% endif %}
-              <th scope="col">ID</th>
-              <th scope="col">Name</th>
-              <th scope="col">Status</th>
-              <th scope="col">Queued</th>
-              <th scope="col">Done</th>
-              <th scope="col">Result</th>
-            </tr>
+    <!-- Jobs -->
+    <div class="collapse-arrow bg-base-200 collapse">
+      <input type="checkbox" checked />
+      <div class="collapse-title text-xl font-medium">Recent Jobs</div>
+      <div class="collapse-content" id="job-content">
+        <div class="overflow-x-auto">
+          <table class="table-zebra table">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Queued</th>
+                <th>Done</th>
+                <th>Result</th>
+              </tr>
+            </thead>
             <tbody>
               {% for job in jobs %}
                 <tr>
@@ -58,7 +42,11 @@
                   <td>{{ job.created }}</td>
                   <td>{{ job.done_at }}</td>
                   {% if job.task_result and job.task_result|is_url == True %}
-                    <td><a href="{{ job.task_result }}">Result</a></td>
+                    <td>
+                      <a href="{{ job.task_result }}" class="link link-primary"
+                        >Result</a
+                      >
+                    </td>
                   {% elif job.task_result %}
                     <td>{{ job.task_result|slice:"40" }}...</td>
                   {% else %}
@@ -70,19 +58,31 @@
           </table>
         </div>
       </div>
-
-      <!-- Unreviewable objects such as User / Group / Setting -->
-      <ul class="list-group">
-        {% for obj in objects %}
-          {% if object_type == 'user' %}
-            <a class="list-group-item" href="{{ obj.url }}"
-              >{{ obj.username }}</a
-            >
-          {% else %}
-            <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
-          {% endif %}
-        {% endfor %}
-      </ul>
     </div>
+
+    {% if objects %}
+      <!-- Unreviewable objects such as User / Group / Setting -->
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+          <ul class="menu bg-base-200 rounded-box">
+            {% for obj in objects %}
+              {% if object_type == 'user' %}
+                <li>
+                  <a href="{{ obj.url }}" class="hover:bg-base-300"
+                    >{{ obj.username }}</a
+                  >
+                </li>
+              {% else %}
+                <li>
+                  <a href="{{ obj.url }}" class="hover:bg-base-300"
+                    >{{ obj.name }}</a
+                  >
+                </li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    {% endif %}
   </div>
 {% endblock content %}