From 0478a18fa8415e63cdeaa83ca261fb8f89f5e70f Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 21:29:33 +0200
Subject: [PATCH] feat: add filter bar markup and pill button styles to trip
 page

Replace the old trip-nav links with a new filter bar component featuring:
- Three pill buttons for filtering (All content, Journal, Stories)
- "All content" button active by default with teal accent styling
- Separate Stats button with matching pill styling
- CSS for buttons with hover and active states
- Responsive flexbox layout that wraps on narrow screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RB86BaJBG3eGiMdfhmHRrQ
---
 themes/intotheeast/css/style.css            | 44 +++++++++++++++++++++
 themes/intotheeast/templates/trip.html.twig | 13 +++---
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index b35cdf9..16376cc 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -693,6 +693,50 @@ body::after {
     color: var(--color-ink-muted);
 }
 
+/* ── Trip page filter bar ────────────────────────────────────────────────────── */
+
+.trip-filter-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    margin-top: var(--space-4);
+    flex-wrap: wrap;
+}
+
+.trip-filter-group {
+    display: flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.trip-filter-btn,
+.trip-stats-btn {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink-muted);
+    background: transparent;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    padding: var(--space-1) var(--space-4);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.trip-filter-btn:hover,
+.trip-stats-btn:hover {
+    color: var(--color-ink);
+    border-color: var(--color-ink-muted);
+}
+
+.trip-filter-btn.is-active,
+.trip-stats-btn.is-active {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+    background: var(--color-accent-light);
+}
+
 @media (max-width: 768px) {
     .home-layout { display: flex; flex-direction: column; }
     .home-map-col { position: static; height: 40vh; align-self: stretch; }
diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 6fa1b59..b10f1a3 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -55,11 +55,14 @@
                 {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
                 {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
             </span>
-            <nav class="trip-nav">
-                <a href="{{ page.route }}/dailies">Journal</a>
-                <a href="{{ page.route }}/stats">Stats</a>
-                <a href="{{ page.route }}/stories">Stories</a>
-            </nav>
+            <div class="trip-filter-bar">
+                <div class="trip-filter-group">
+                    <button class="trip-filter-btn is-active" data-filter="all">All content</button>
+                    <button class="trip-filter-btn" data-filter="journal">Journal</button>
+                    <button class="trip-filter-btn" data-filter="story">Stories</button>
+                </div>
+                <button class="trip-stats-btn" id="trip-stats-toggle">Stats</button>
+            </div>
         </div>
 
         <div class="feed">