From 9c424d9bb6aa0eb606128bcce3e33816967a2e8d Mon Sep 17 00:00:00 2001
From: Andrew Godwin <andrew@aeracode.org>
Date: Tue, 22 Nov 2022 19:21:01 -0700
Subject: [PATCH] Add manual HTMX refresh of timelines

Refs #33
---
 activities/views/timelines.py | 16 +++++++++++++---
 core/htmx.py                  | 11 +++++++++++
 static/css/style.css          | 16 ++++++++++++++++
 templates/base.html           |  8 +++++---
 4 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 core/htmx.py

diff --git a/activities/views/timelines.py b/activities/views/timelines.py
index e8e74ed..e4c9920 100644
--- a/activities/views/timelines.py
+++ b/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):
diff --git a/core/htmx.py b/core/htmx.py
new file mode 100644
index 0000000..c83fba9
--- /dev/null
+++ b/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
diff --git a/static/css/style.css b/static/css/style.css
index 83ea194..63d94d4 100644
--- a/static/css/style.css
+++ b/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;
 }
diff --git a/templates/base.html b/templates/base.html
index 49e3909..1269fad 100644
--- a/templates/base.html
+++ b/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 %}>
-                        <i class="fa-solid fa-gear"></i>
-                    </a>
+                    {% if allows_refresh %}
+                        <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 %}