From 12cb3707b65261f01fb1e8e6be9e8f678891237a Mon Sep 17 00:00:00 2001
From: FuelBoard Contributor <contributor@example.com>
Date: Tue, 11 Aug 2026 21:49:18 +0100
Subject: [PATCH] Nav bar: show compact gas-pump+title only when scrolled
 (large title at rest); drop icons from fuel picker

---
 FuelBoard/StationsView.swift | 46 +++++++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/FuelBoard/StationsView.swift b/FuelBoard/StationsView.swift
index 36c2f78..d8de826 100644
--- a/FuelBoard/StationsView.swift
+++ b/FuelBoard/StationsView.swift
@@ -22,10 +22,23 @@ struct StationsView: View {
     /// which station is "best".
     @State private var pageSize = 10
     @State private var visibleCount = 10
+    /// True once the list has scrolled — drives the compact gas-pump+title bar
+    /// in the nav bar (large title is shown at rest, bar only after scrolling).
+    @State private var isScrolled = false
 
     var body: some View {
         NavigationStack {
             List {
+                GeometryReader { proxy in
+                    Color.clear.preference(
+                        key: ScrollOffsetKey.self,
+                        value: proxy.frame(in: .named("stationsScroll")).minY
+                    )
+                }
+                .frame(height: 0)
+                .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
+                .listRowSeparator(.hidden)
+
                 Section {
                     if let location {
                         if sortMode == .closest {
@@ -47,12 +60,7 @@ struct StationsView: View {
                 Section("Fuel type") {
                     Picker("Fuel type", selection: $selectedFuel) {
                         ForEach(FuelType.allCases) { fuel in
-                            HStack(spacing: 4) {
-                                Image(systemName: "fuelpump.fill")
-                                    .foregroundStyle(fuel.tintColor)
-                                Text(fuel.shortName)
-                            }
-                            .tag(fuel)
+                            Text(fuel.shortName).tag(fuel)
                         }
                     }
                     .pickerStyle(.segmented)
@@ -185,13 +193,20 @@ struct StationsView: View {
                 // New fetch or filter switch → back to the first page.
                 visibleCount = pageSize
             }
+            .coordinateSpace(name: "stationsScroll")
+            .onPreferenceChange(ScrollOffsetKey.self) { minY in
+                isScrolled = minY < 0
+            }
             .toolbar {
                 ToolbarItem(placement: .principal) {
-                    HStack(spacing: 6) {
-                        Image(systemName: "fuelpump.fill")
-                            .foregroundStyle(selectedFuel.tintColor)
-                        Text("FuelBoard")
-                            .font(.headline)
+                    if isScrolled {
+                        HStack(spacing: 6) {
+                            Image(systemName: "fuelpump.fill")
+                                .foregroundStyle(selectedFuel.tintColor)
+                            Text("FuelBoard")
+                                .font(.headline)
+                        }
+                        .transition(.opacity)
                     }
                 }
             }
@@ -202,6 +217,15 @@ struct StationsView: View {
 
 // MARK: - Fuel-type iconography (app target only — FuelStore.swift is Foundation-only)
 
+/// Scroll offset preference — the zero-height row at the top of the List
+/// reports its position so we know when the large title has collapsed.
+private struct ScrollOffsetKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = nextValue()
+    }
+}
+
 extension FuelType {
     /// Short segment label ("Unleaded" / "Premium" / "Diesel") for the picker.
     var shortName: String {