From ea6f272047375b3bda92574f85e9e08f0979b48a Mon Sep 17 00:00:00 2001
From: Andrew Godwin <andrew@aeracode.org>
Date: Thu, 29 Dec 2022 11:33:41 -0700
Subject: [PATCH] Infinite scroll, and footer in sidebar if exists

---
 core/models/config.py                   |  1 +
 static/css/style.css                    | 59 ++++++++++++++++++++++---
 templates/activities/home.html          |  2 +-
 templates/activities/local.html         |  2 +-
 templates/activities/notifications.html |  2 +-
 templates/activities/tag.html           |  2 +-
 users/views/settings/interface.py       |  6 ++-
 7 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/core/models/config.py b/core/models/config.py
index 3ccfbf8..a05c33a 100644
--- a/core/models/config.py
+++ b/core/models/config.py
@@ -248,5 +248,6 @@ class Config(models.Model):
         # wellness Options
         visible_reaction_counts: bool = True
         expand_linked_cws: bool = True
+        infinite_scroll: bool = True
 
         custom_css: str | None
diff --git a/static/css/style.css b/static/css/style.css
index d44b9be..e1ac792 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -136,11 +136,31 @@ footer {
     font-size: 90%;
 }
 
+body:not(.no-sidebar) footer {
+    position: fixed;
+    bottom: 0;
+    right: calc((100vw - 920px)/2);
+    width: 250px;
+    margin: 0;
+    padding: 5px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+body:not(.no-sidebar) footer a {
+    flex-basis: 50%;
+    flex-grow: 1;
+}
+
+body:not(.no-sidebar) footer a:hover {
+    color: var(--color-text-dull);
+}
+
 .no-sidebar footer {
     max-width: 800px;
 }
 
-footer a {
+.no-sidebar footer a {
     border-bottom: 1px solid var(--color-text-duller);
     margin-right: 5px;
 }
@@ -867,22 +887,52 @@ button:hover,
     border: 3px solid rgba(255, 255, 255, 0.3);
 }
 
+button.htmx-request,
+.button.htmx-request {
+    background: var(--color-button-disabled);
+}
+
+button.htmx-request::before,
+.button.htmx-request::before {
+    display: inline-block;
+    content: "\f2f1";
+    font: var(--fa-font-solid);
+    margin-right: 8px;
+    -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);
+}
+
 .right-column button,
 .right-column .button {
     padding: 2px 6px;
 }
+
 form .field.multi-option {
     margin-bottom: 10px;
 }
+
 form .field.multi-option {
     margin-bottom: 10px;
 }
+
 form .option.option-row {
     margin: 0px 0px 5px 0px;
 }
+
 .option-row .right {
     float: right;
 }
+
 form .option-row .option-field {
     vertical-align: middle;
     display: inline-block;
@@ -983,6 +1033,7 @@ h1.identity small {
     text-align: right;
     color: var(--color-text-dull);
 }
+
 .identity-metadata .metadata-pair .metadata-name::after {
     padding-left: 3px;
 
@@ -1461,13 +1512,7 @@ form .post {
     }
 
     body:not(.no-sidebar) footer {
-        position: fixed;
-        bottom: 0;
         right: 0;
-        width: 250px;
-        margin: 0;
-        padding: 5px;
-        text-align: right;
     }
 
     body:not(.no-sidebar) footer a {
diff --git a/templates/activities/home.html b/templates/activities/home.html
index 493b120..497295a 100644
--- a/templates/activities/home.html
+++ b/templates/activities/home.html
@@ -28,7 +28,7 @@
         {% endif %}
 
         {% if page_obj.has_next %}
-            <a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML">Next Page</a>
+            <a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML" {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}>Next Page</a>
         {% endif %}
     </div>
 {% endblock %}
diff --git a/templates/activities/local.html b/templates/activities/local.html
index 4430906..84895ee 100644
--- a/templates/activities/local.html
+++ b/templates/activities/local.html
@@ -15,7 +15,7 @@
         {% endif %}
 
         {% if page_obj.has_next %}
-            <a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML">Next Page</a>
+            <a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML" {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}>Next Page</a>
         {% endif %}
     </div>
 {% endblock %}
diff --git a/templates/activities/notifications.html b/templates/activities/notifications.html
index 2193b11..9103b16 100644
--- a/templates/activities/notifications.html
+++ b/templates/activities/notifications.html
@@ -38,7 +38,7 @@
         {% endif %}
 
         {% if page_obj.has_next %}
-            <a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML">Next Page</a>
+            <a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML" {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}>Next Page</a>
         {% endif %}
     </div>
 {% endblock %}
diff --git a/templates/activities/tag.html b/templates/activities/tag.html
index f0684f0..1a2b5d7 100644
--- a/templates/activities/tag.html
+++ b/templates/activities/tag.html
@@ -16,7 +16,7 @@
         {% endif %}
 
         {% if page_obj.has_next %}
-            <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }} {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}">Next Page</a></div>
         {% endif %}
     </div>
 {% endblock %}
diff --git a/users/views/settings/interface.py b/users/views/settings/interface.py
index ca9a4f5..716c17c 100644
--- a/users/views/settings/interface.py
+++ b/users/views/settings/interface.py
@@ -29,10 +29,14 @@ class InterfacePage(SettingsPage):
             "title": "Expand linked Content Warnings",
             "help_text": "Expands all CWs of the same type at once, rather than one at a time.",
         },
+        "infinite_scroll": {
+            "title": "Infinite Scroll",
+            "help_text": "Automatically loads more posts when you get to the bottom of a timeline.",
+        },
     }
 
     layout = {
         "Posting": ["toot_mode", "default_post_visibility"],
-        "Wellness": ["visible_reaction_counts", "expand_linked_cws"],
+        "Wellness": ["infinite_scroll", "visible_reaction_counts", "expand_linked_cws"],
         "Appearance": ["custom_css"],
     }