Make sure the Tab Rail's background matches the split view's detail background. (#6003)

ElementX/Sources/Application/Navigation/NavigationCoordinators.swift

@@ -385,15 +385,18 @@ private struct NavigationSplitCoordinatorView: View {
     /// The NavigationSplitView that will be used in non-compact layouts
     var navigationSplitView: some View {
         NavigationSplitView(columnVisibility: $navigationSplitCoordinator.columnVisibility) {
-            if let sidebarModule = navigationSplitCoordinator.sidebarModule {
-                sidebarModule.coordinator?.toPresentable()
-                    .environment(\.isInSidebar, true)
-                    .id(sidebarModule.id)
-            } else {
-                navigationSplitCoordinator.placeholderModule.coordinator?.toPresentable()
-                    .environment(\.isInSidebar, true)
-                    .id(navigationSplitCoordinator.placeholderModule.id)
+            Group {
+                if let sidebarModule = navigationSplitCoordinator.sidebarModule {
+                    sidebarModule.coordinator?.toPresentable()
+                        .id(sidebarModule.id)
+                } else {
+                    navigationSplitCoordinator.placeholderModule.coordinator?.toPresentable()
+                        .id(navigationSplitCoordinator.placeholderModule.id)
+                }
             }
+            .environment(\.isInSidebar, true)
+            // The tab rail's background tracks the detail module, so exclude the sidebar's background value.
+            .transformPreference(CompoundBackgroundPreferenceKey.self) { $0 = nil }
         } detail: {
             if let detailModule = navigationSplitCoordinator.detailModule {
                 detailModule.coordinator?.toPresentable()

ElementX/Sources/Application/Navigation/NavigationTabCoordinator.swift

@@ -316,6 +316,7 @@ private struct NavigationTabCoordinatorView<Tag: Hashable>: View {
     @State private var window: UIWindow?
     @State private var isFullScreen = true
     @State private var isRailVisible = true
+    @State private var railBackgroundColor: Color = .compound.bgCanvasDefault
     
     var body: some View {
         tabView
@@ -362,6 +363,8 @@ private struct NavigationTabCoordinatorView<Tag: Hashable>: View {
         HStack(spacing: 0) {
             if isRailVisible {
                 TabRailView(navigationTabCoordinator: navigationTabCoordinator, isFullScreen: isFullScreen)
+                    .background(railBackgroundColor.ignoresSafeArea())
+                    .animation(.easeInOut(duration: 0.4).disabledDuringTests(), value: railBackgroundColor)
             }
             
             if let module = navigationTabCoordinator.tabModules.first(where: { $0.details.tag == navigationTabCoordinator.selectedTab }) {
@@ -369,6 +372,10 @@ private struct NavigationTabCoordinatorView<Tag: Hashable>: View {
                     .id(module.id)
             }
         }
+        // Match the rail's background to the colour of the split view's detail (or the root if there isn't a split).
+        .onPreferenceChange(CompoundBackgroundPreferenceKey.self) { background in
+            railBackgroundColor = background?.colorValue ?? .compound.bgCanvasDefault
+        }
         .introspect(.window, on: .supportedVersions) { window in
             guard self.window !== window else { return }