Bookings: Fix navigation bar collapsing (#16327)

Author: itsmeichigo

WooCommerce/Classes/Bookings/BookingList/BookingListContainerView.swift

@@ -16,19 +16,12 @@ struct BookingListContainerView: View {
     }
 
     var body: some View {
-        VStack(spacing: 0) {
+        BookingListView(
+            viewModel: viewModel.listViewModel(for: viewModel.selectedTab),
+            searchViewModel: viewModel.searchViewModel(for: viewModel.selectedTab),
+            selectedBooking: $selectedBooking
+        ) {
             headerView
-            TabView(selection: $viewModel.selectedTab) {
-                ForEach(BookingListTab.allCases, id: \.rawValue) { tab in
-                    BookingListView(
-                        viewModel: viewModel.listViewModel(for: tab),
-                        searchViewModel: viewModel.searchViewModel(for: tab),
-                        selectedBooking: $selectedBooking
-                    )
-                    .tag(tab)
-                }
-            }
-            .tabViewStyle(.page(indexDisplayMode: .never))
         }
         .navigationTitle(Localization.viewTitle)
         .if(isSearching, transform: { view in

WooCommerce/Classes/Bookings/BookingList/BookingListView.swift

@@ -1,7 +1,7 @@
 import SwiftUI
 import struct Yosemite.Booking
 
-struct BookingListView: View {
+struct BookingListView<Header: View>: View {
     @ObservedObject private var viewModel: BookingListViewModel
     @ObservedObject private var searchViewModel: BookingSearchViewModel
 
@@ -10,12 +10,16 @@ struct BookingListView: View {
 
     @Binding var selectedBooking: Booking?
 
+    private let header: Header
+
     init(viewModel: BookingListViewModel,
          searchViewModel: BookingSearchViewModel,
-         selectedBooking: Binding<Booking?>) {
+         selectedBooking: Binding<Booking?>,
+         @ViewBuilder header: () -> Header) {
         self.viewModel = viewModel
         self.searchViewModel = searchViewModel
         self._selectedBooking = selectedBooking
+        self.header = header()
     }
 
     var body: some View {
@@ -98,20 +102,25 @@ private extension BookingListView {
                      onNextPage: @escaping () -> Void,
                      onRefresh: @escaping () async -> Void) -> some View {
         List(selection: $selectedBooking) {
-            ForEach(bookings) { item in
-                bookingItem(item)
-                    .tag(item)
-            }
-
-            InfiniteScrollIndicator(showContent: viewModel.shouldShowBottomActivityIndicator)
-                .padding(.top, Layout.viewPadding)
-                .onAppear {
-                    onNextPage()
+            Section {
+                ForEach(bookings) { item in
+                    bookingItem(item)
+                        .tag(item)
                 }
+
+                InfiniteScrollIndicator(showContent: viewModel.shouldShowBottomActivityIndicator)
+                    .padding(.top, BookingListViewLayout.viewPadding)
+                    .onAppear {
+                        onNextPage()
+                    }
+            } header: {
+                header
+                    .listRowInsets(EdgeInsets())
+            }
         }
         .listStyle(.plain)
+        .listSectionSeparator(.hidden, edges: .top)
         .background(Color(.listBackground))
-        .accentColor(Color(.listSelectedBackground))
         .refreshable {
             await onRefresh()
         }
@@ -140,50 +149,20 @@ private extension BookingListView {
                 }
             }
         }
+        .listRowBackground(booking == selectedBooking ? Color(.listSelectedBackground) : Color(.listForeground(modal: false)))
     }
 
     func emptyStateView(isSearching: Bool, onRefresh: @escaping () async -> Void) -> some View {
         GeometryReader { proxy in
             ScrollView {
-                VStack(spacing: Layout.emptyStatePadding) {
-                    Spacer()
-                    Image(uiImage: isSearching ? .magnifyingGlassNotFound : .noBookings)
-                        .resizable()
-                        .aspectRatio(contentMode: .fit)
-                        .frame(width: Layout.emptyStateImageWidth * scale)
-                        .padding(.bottom, Layout.viewPadding)
-                    if isSearching {
-                        Text(Localization.emptySearchText)
-                            .font(.body)
-                            .foregroundStyle(Color.secondary)
-                    } else {
-                        VStack(spacing: Layout.textVerticalPadding) {
-                            Text(viewModel.emptyStateTitle)
-                                .font(.title2)
-                                .fontWeight(.semibold)
-                                .foregroundStyle(.primary)
-                            Text(viewModel.emptyStateDescription)
-                                .font(.title3)
-                                .foregroundStyle(.secondary)
-                        }
-                        if viewModel.hasFilters {
-                            VStack(spacing: Layout.textVerticalPadding) {
-                                Button("Change filters") {
-                                    // TODO
-                                }
-                                .buttonStyle(PrimaryButtonStyle())
-                                Button("Clear filters") {
-                                    // TODO
-                                }
-                                .buttonStyle(SecondaryButtonStyle())
-                            }
-                        }
+                LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
+                    Section {
+                        emptyStateContent(isSearching: isSearching)
+                            .frame(minWidth: proxy.size.width, minHeight: proxy.size.height)
+                    } header: {
+                        header
                     }
-                    Spacer()
                 }
-                .multilineTextAlignment(.center)
-                .padding(.horizontal, Layout.emptyStatePadding)
-                .frame(minWidth: proxy.size.width, minHeight: proxy.size.height)
             }
             .refreshable {
                 await onRefresh()
@@ -192,41 +171,79 @@ private extension BookingListView {
         .background(Color(.systemBackground))
     }
 
+    func emptyStateContent(isSearching: Bool) -> some View {
+        VStack(spacing: BookingListViewLayout.emptyStatePadding) {
+            Spacer()
+            Image(uiImage: isSearching ? .magnifyingGlassNotFound : .noBookings)
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .frame(width: BookingListViewLayout.emptyStateImageWidth * scale)
+                .padding(.bottom, BookingListViewLayout.viewPadding)
+            if isSearching {
+                Text(BookingListViewLocalization.emptySearchText)
+                    .font(.body)
+                    .foregroundStyle(Color.secondary)
+            } else {
+                VStack(spacing: BookingListViewLayout.textVerticalPadding) {
+                    Text(viewModel.emptyStateTitle)
+                        .font(.title2)
+                        .fontWeight(.semibold)
+                        .foregroundStyle(.primary)
+                    Text(viewModel.emptyStateDescription)
+                        .font(.title3)
+                        .foregroundStyle(.secondary)
+                }
+                if viewModel.hasFilters {
+                    VStack(spacing: BookingListViewLayout.textVerticalPadding) {
+                        Button("Change filters") {
+                            // TODO
+                        }
+                        .buttonStyle(PrimaryButtonStyle())
+                        Button("Clear filters") {
+                            // TODO
+                        }
+                    }
+                }
+            }
+            Spacer()
+        }
+        .multilineTextAlignment(.center)
+        .padding(.horizontal, BookingListViewLayout.emptyStatePadding)
+    }
+
     func errorSnackBar(onTap: @escaping () -> Void) -> some View {
-        Text(Localization.errorMessage)
+        Text(BookingListViewLocalization.errorMessage)
             .foregroundStyle(Color(.listForeground(modal: false)))
             .frame(maxWidth: .infinity, alignment: .leading)
-            .padding(Layout.viewPadding)
+            .padding(BookingListViewLayout.viewPadding)
             .background {
-                RoundedRectangle(cornerRadius: Layout.cornerRadius)
+                RoundedRectangle(cornerRadius: BookingListViewLayout.cornerRadius)
                     .fill(Color(.text))
             }
-            .padding(Layout.viewPadding)
+            .padding(BookingListViewLayout.viewPadding)
             .padding(.bottom, connectivityMonitor.isOffline ? OfflineBannerView.height : 0)
             .contentShape(Rectangle())
             .onTapGesture { onTap() }
     }
 }
 
-private extension BookingListView {
-    enum Layout {
-        static let textVerticalPadding: CGFloat = 8
-        static let viewPadding: CGFloat = 16
-        static let emptyStatePadding: CGFloat = 24
-        static let emptyStateImageWidth: CGFloat = 67
-        static let cornerRadius: CGFloat = 8
-    }
+fileprivate enum BookingListViewLayout {
+    static let textVerticalPadding: CGFloat = 8
+    static let viewPadding: CGFloat = 16
+    static let emptyStatePadding: CGFloat = 24
+    static let emptyStateImageWidth: CGFloat = 67
+    static let cornerRadius: CGFloat = 8
+}
 
-    enum Localization {
-        static let errorMessage = NSLocalizedString(
-            "bookingList.errorMessage",
-            value: "Error fetching bookings",
-            comment: "Error message when fetching bookings fails"
-        )
-        static let emptySearchText = NSLocalizedString(
-            "bookingList.emptySearchText",
-            value: "We couldn’t find any bookings with that name — try adjusting your search term to see more results.",
-            comment: "Message displayed when searching bookings by keyword yields no results."
-        )
-    }
+fileprivate enum BookingListViewLocalization {
+    static let errorMessage = NSLocalizedString(
+        "bookingList.errorMessage",
+        value: "Error fetching bookings",
+        comment: "Error message when fetching bookings fails"
+    )
+    static let emptySearchText = NSLocalizedString(
+        "bookingList.emptySearchText",
+        value: "We couldn't find any bookings with that name — try adjusting your search term to see more results.",
+        comment: "Message displayed when searching bookings by keyword yields no results."
+    )
 }