From b6142cee4443ceb369a806a4b578b787eddc6f49 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 22:21:55 +0200
Subject: [PATCH] feat(trip): add ascending/descending sort toggle button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Button sits in the right filter group alongside Stats/Cycling.
Default state: ascending (↑ Oldest first, no highlight).
Toggled state: descending (↓ Newest first, is-active pill style).
DOM reversal uses insertBefore against the anchored #feed-filter-empty
so the empty-state message stays last regardless of sort direction.
Interacts safely with the type filter (show/hide by data-type).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/templates/trip.html.twig | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 83dc042..06b2bd1 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -132,6 +132,7 @@
                     {% if has_gpx %}
                     <button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
                     {% endif %}
+                    <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
                 </div>
             </div>
         </div>
@@ -327,6 +328,23 @@ setTimeout(function () { tripMap.resize(); }, 100);
     });
 })();
 
+(function() {
+    var sortBtn = document.getElementById('trip-sort-toggle');
+    if (!sortBtn) return;
+    var feed = document.querySelector('.feed');
+    var emptyMsg = document.getElementById('feed-filter-empty');
+    var ascending = true;
+
+    sortBtn.addEventListener('click', function() {
+        ascending = !ascending;
+        var entries = Array.from(feed.querySelectorAll('[data-type]'));
+        entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
+        sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
+        sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
+        sortBtn.classList.toggle('is-active', !ascending);
+    });
+})();
+
 var STATS_GPS = {{ gps_points|json_encode|raw }};
 var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};