Add manual HTMX refresh of timelines

Refs #33

activities/views/timelines.py

@@ -46,6 +46,7 @@ class Home(FormView):
             context["events"], self.request.identity
         )
         context["current_page"] = "home"
+        context["allows_refresh"] = True
         return context
 
     def form_valid(self, form):
@@ -60,7 +61,10 @@ class Home(FormView):
 class Local(ListView):
 
     template_name = "activities/local.html"
-    extra_context = {"current_page": "local"}
+    extra_context = {
+        "current_page": "local",
+        "allows_refresh": True,
+    }
     paginate_by = 50
 
     def get_queryset(self):
@@ -76,7 +80,10 @@ class Local(ListView):
 class Federated(ListView):
 
     template_name = "activities/federated.html"
-    extra_context = {"current_page": "federated"}
+    extra_context = {
+        "current_page": "federated",
+        "allows_refresh": True,
+    }
     paginate_by = 50
 
     def get_queryset(self):
@@ -92,7 +99,10 @@ class Federated(ListView):
 class Notifications(ListView):
 
     template_name = "activities/notifications.html"
-    extra_context = {"current_page": "notifications"}
+    extra_context = {
+        "current_page": "notifications",
+        "allows_refresh": True,
+    }
     paginate_by = 50
 
     def get_queryset(self):

core/htmx.py

@@ -0,0 +1,11 @@
+from typing import Optional
+
+
+class HTMXMixin:
+    template_name_htmx: Optional[str] = None
+
+    def get_template_name(self):
+        if self.request.htmx and self.template_name_htmx:
+            return self.template_name_htmx
+        else:
+            return self.template_name

static/css/style.css

@@ -187,6 +187,22 @@ header menu a i {
     vertical-align: middle;
 }
 
+header menu a.htmx-request i {
+    -webkit-animation-delay: var(--fa-animation-delay, 0s);
+    animation-delay: var(--fa-animation-delay, 0s);
+    -webkit-animation-direction: var(--fa-animation-direction, normal);
+    animation-direction: var(--fa-animation-direction, normal);
+    -webkit-animation-name: fa-spin;
+    animation-name: fa-spin;
+    -webkit-animation-duration: var(--fa-animation-duration, 2s);
+    animation-duration: var(--fa-animation-duration, 2s);
+    -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+    -webkit-animation-timing-function: var(--fa-animation-timing, linear);
+    animation-timing-function: var(--fa-animation-timing, linear);
+}
+
+
 header menu .gap {
     flex-grow: 1;
 }

templates/base.html

@@ -34,9 +34,11 @@
                     <a href="{% url "search" %}" title="Search" {% if top_section == "search" %}class="selected"{% endif %}>
                         <i class="fa-solid fa-search"></i>
                     </a>
-                    <a href="{% url "settings" %}" title="Settings" {% if top_section == "settings" %}class="selected"{% endif %}>
+                    {% if allows_refresh %}
-                        <i class="fa-solid fa-gear"></i>
+                        <a href="." title="Refresh" hx-get="." hx-select=".left-column" hx-target=".left-column" hx-swap="outerHTML">
+                            <i class="fa-solid fa-rotate"></i>
                         </a>
+                    {% endif %}
                     <div class="gap"></div>
                     <a href="/identity/select/" class="identity">
                         {% if not request.identity %}