Pin large title above list so it fades+collapses in place on scroll (Mail-style cross-fade)

FuelBoard/StationsView.swift

@@ -28,12 +28,12 @@ struct StationsView: View {
 
     var body: some View {
         NavigationStack {
-            List {
+            VStack(spacing: 0) {
-                // Large title header (icon + title). Native navigation titles
+                // Large pinned title — Mail-style. It stays in place above the
-                // can't carry an icon, so this is a real row at the top of the
+                // list (content scrolls beneath it) and fades out in place
-                // list. It cross-fades with the compact bar: once the list
+                // once scrolling starts, while the compact icon+title bar fades
-                // scrolls, this large title fades out in place while the
+                // in below the nav bar. Keeping it OUT of the List means the
-                // smaller icon+title bar fades in below the nav bar (Mail-style).
+                // fade isn't masked by the row scrolling away.
                 HStack(spacing: 10) {
                     Image(systemName: "fuelpump.fill")
                         .font(.system(size: 34))
@@ -42,13 +42,15 @@ struct StationsView: View {
                         .font(.largeTitle.bold())
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.horizontal, 16)
                 .padding(.vertical, 6)
-                .listRowSeparator(.hidden)
+                .frame(height: isScrolled ? 0 : 54, alignment: .top)
-                .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
+                .clipped()
-                .listRowBackground(Color.clear)
+                .background(Color(.systemGroupedBackground))
                 .opacity(isScrolled ? 0 : 1)
                 .animation(.easeInOut(duration: 0.2), value: isScrolled)
 
+                List {
                 Section {
                     if let location {
                         if sortMode == .closest {
@@ -218,6 +220,7 @@ struct StationsView: View {
                 }
             }
             .navigationBarTitleDisplayMode(.inline)
+            }
         }
     }
 }