From eb739d80abc0067354f8ae27a263f102d0b48539 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 21:32:13 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20wire=20up=20feed=20filter=20=E2=80=94?=
 =?UTF-8?q?=20All=20content=20/=20Journal=20/=20Stories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added JavaScript to the trip.html.twig template that:
- Adds event listeners to filter buttons (.trip-filter-btn)
- Shows/hides article cards based on data-type attribute (journal/story)
- Manages active state of filter buttons
- Displays empty state message when no results match the filter
- Uses ES5 syntax (no arrow functions, const/let, or template literals)

Also added hidden feed-filter-empty element to display appropriate
empty messages for each filter type.

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

diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index b10f1a3..9bf0f10 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -137,6 +137,7 @@
             {% else %}
                 <p class="feed-empty">No entries yet. The journey is about to begin.</p>
             {% endif %}
+            <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
         </div>
     </div>
 </div>
@@ -189,5 +190,38 @@ if (TRIP_ENTRIES.length === 0) {
     map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
 }
 setTimeout(function() { map.invalidateSize(); }, 100);
+
+(function() {
+    var filterBtns = document.querySelectorAll('.trip-filter-btn');
+    var cards = document.querySelectorAll('[data-type]');
+    var filterEmpty = document.getElementById('feed-filter-empty');
+
+    filterBtns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            filterBtns.forEach(function(b) { b.classList.remove('is-active'); });
+            btn.classList.add('is-active');
+
+            var filter = btn.getAttribute('data-filter');
+            var visible = 0;
+
+            cards.forEach(function(card) {
+                var show = filter === 'all' || card.getAttribute('data-type') === filter;
+                card.style.display = show ? '' : 'none';
+                if (show) visible++;
+            });
+
+            if (filterEmpty) {
+                if (visible === 0) {
+                    filterEmpty.textContent = filter === 'story'
+                        ? 'No stories yet for this trip.'
+                        : 'No entries yet.';
+                    filterEmpty.style.display = '';
+                } else {
+                    filterEmpty.style.display = 'none';
+                }
+            }
+        });
+    });
+})();
 </script>
 {% endblock %}