From 2b8ea1963b3a47dc2d5ef81bd5c4d5092fed3bb3 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 22:58:28 +0200
Subject: [PATCH] =?UTF-8?q?refactor(trip):=20declutter=20filter=20bar=20?=
 =?UTF-8?q?=E2=80=94=20move=20Stats/Cycling=20to=20panel=20toggles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Filter bar now has one job: content type (All/Journal/Stories) + sort icon (↑/↓).
Stats and Cycling move to a lean text-button row below the bar with a
rotating ▾ caret — CSS handles expand/collapse state via .is-active,
no JS changes needed for the caret animation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/css/style.css            | 32 +++++++++++++++++++++
 themes/intotheeast/templates/trip.html.twig | 16 +++++------
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 322bb44..5c22e8c 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -959,6 +959,38 @@ body::after {
     background: var(--color-accent-light);
 }
 
+.trip-panel-toggles {
+    display: flex;
+    gap: var(--space-5);
+    margin-top: var(--space-3);
+}
+
+.trip-panel-toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    transition: color 0.15s;
+}
+
+.trip-panel-toggle:hover { color: var(--color-ink); }
+.trip-panel-toggle.is-active { color: var(--color-accent); }
+
+.trip-panel-caret {
+    display: inline-block;
+    font-size: 0.75em;
+    transition: transform 0.2s ease;
+}
+
+.trip-panel-toggle.is-active .trip-panel-caret { transform: rotate(180deg); }
+
 @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 06b2bd1..486f482 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -127,13 +127,13 @@
                     <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
                     <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
                 </div>
-                <div class="trip-filter-group">
-                    <button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
-                    {% 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>
+                <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
+            </div>
+            <div class="trip-panel-toggles">
+                <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
+                {% if has_gpx %}
+                <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
+                {% endif %}
             </div>
         </div>
 
@@ -339,7 +339,7 @@ setTimeout(function () { tripMap.resize(); }, 100);
         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.textContent = ascending ? '↑' : '↓';
         sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
         sortBtn.classList.toggle('is-active', !ascending);
     });