Add the new bloom style under a feature flag. (#4033)

* Refactor the bloom into a modifier.

It currently depends on the home screen context but that will be removed in the future.

* Add an initial implementation of the new bloom using an image on the navigation item's appearance.

* Add a feature flag to control the new bloom.

ElementX/Sources/Application/AppSettings.swift

@@ -48,6 +48,7 @@ final class AppSettings {
         case hideUnreadMessagesBadge
         case hideInviteAvatars
         case timelineMediaVisibility
+        case isNewBloomEnabled
         
         case elementCallBaseURLOverride
         
@@ -361,6 +362,9 @@ final class AppSettings {
     
     @UserPreference(key: UserDefaultsKeys.timelineMediaVisibility, defaultValue: TimelineMediaVisibility.always, storageType: .userDefaults(store))
     var timelineMediaVisibility
+    
+    @UserPreference(key: UserDefaultsKeys.isNewBloomEnabled, defaultValue: false, storageType: .userDefaults(store))
+    var isNewBloomEnabled
 }
 
 extension AppSettings: CommonSettingsProtocol { }

ElementX/Sources/Screens/HomeScreen/HomeScreenModels.swift

@@ -105,6 +105,10 @@ struct HomeScreenViewState: BindableState {
     
     var reportRoomEnabled = false
     
+    // Intentionally not mutable so that we don't have to reset the navigation bar's
+    // appearance whenever the feature flag is toggled (requires a restart).
+    let isNewBloomEnabled: Bool
+    
     var visibleRooms: [HomeScreenRoom] {
         if roomListMode == .skeletons {
             return placeholderRooms

ElementX/Sources/Screens/HomeScreen/HomeScreenViewModel.swift

@@ -37,7 +37,7 @@ class HomeScreenViewModel: HomeScreenViewModelType, HomeScreenViewModelProtocol
         
         roomSummaryProvider = userSession.clientProxy.roomSummaryProvider
         
-        super.init(initialViewState: .init(userID: userSession.clientProxy.userID),
+        super.init(initialViewState: .init(userID: userSession.clientProxy.userID, isNewBloomEnabled: appSettings.isNewBloomEnabled),
                    mediaProvider: userSession.mediaProvider)
         
         userSession.clientProxy.userAvatarURLPublisher

ElementX/Sources/Screens/HomeScreen/View/BloomModifier.swift

@@ -0,0 +1,211 @@
+//
+// Copyright 2023, 2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+import SwiftUIIntrospect
+
+extension View {
+    // Note: The dependency on HomeScreenViewModel.Context will be removed in the next iteration.
+    @ViewBuilder
+    func bloom(context: HomeScreenViewModel.Context, scrollViewAdapter: ScrollViewAdapter, isNewBloomEnabled: Bool) -> some View {
+        if isNewBloomEnabled {
+            modifier(NewBloomModifier())
+        } else {
+            modifier(BloomModifier(context: context, scrollViewAdapter: scrollViewAdapter))
+        }
+    }
+}
+
+struct NewBloomModifier: ViewModifier {
+    @State private var standardAppearance = UINavigationBarAppearance()
+    @State private var scrollEdgeAppearance = UINavigationBarAppearance()
+    
+    @State private var bloomGradientImage: UIImage?
+    
+    func body(content: Content) -> some View {
+        content
+            .introspect(.viewController, on: .supportedVersions, customize: configureBloom)
+    }
+    
+    private func configureBloom(controller: UIViewController) {
+        guard controller.navigationItem.standardAppearance != standardAppearance,
+              controller.navigationItem.scrollEdgeAppearance != scrollEdgeAppearance else {
+            return
+        }
+        
+        let image = makeBloomImage()
+        
+        standardAppearance.configureWithDefaultBackground()
+        standardAppearance.backgroundImage = image
+        standardAppearance.backgroundImageContentMode = .scaleToFill
+        controller.navigationItem.standardAppearance = standardAppearance
+        
+        scrollEdgeAppearance.configureWithTransparentBackground()
+        scrollEdgeAppearance.backgroundImage = image
+        scrollEdgeAppearance.backgroundImageContentMode = .scaleToFill
+        scrollEdgeAppearance.backgroundColor = .compound.bgCanvasDefault
+        controller.navigationItem.scrollEdgeAppearance = scrollEdgeAppearance
+    }
+    
+    private func makeBloomImage() -> UIImage? {
+        if let bloomGradientImage {
+            return bloomGradientImage
+        }
+        
+        let newImage = ImageRenderer(content: bloomGradient).uiImage
+        Task { bloomGradientImage = newImage }
+        return newImage
+    }
+    
+    private var bloomGradient: some View {
+        LinearGradient(colors: [.compound._bgOwnPill, .clear], // This isn't the final gradient.
+                       startPoint: .top,
+                       endPoint: .bottom)
+            .ignoresSafeArea(edges: .all)
+            .frame(width: 100, height: 100)
+    }
+}
+
+struct BloomModifier: ViewModifier {
+    @ObservedObject var context: HomeScreenViewModel.Context
+    
+    let scrollViewAdapter: ScrollViewAdapter
+    
+    // Bloom components
+    @State private var bloomView: UIView?
+    @State private var leftBarButtonView: UIView?
+    @State private var gradientView: UIView?
+    @State private var navigationBarContainer: UIView?
+    @State private var hairlineView: UIView?
+    
+    func body(content: Content) -> some View {
+        content
+            .introspect(.viewController, on: .supportedVersions) { controller in
+                Task {
+                    if bloomView == nil {
+                        makeBloomView(controller: controller)
+                    }
+                }
+                let isTopController = controller.navigationController?.topViewController != controller
+                let isHidden = isTopController || context.isSearchFieldFocused
+                if let bloomView {
+                    bloomView.isHidden = isHidden
+                    UIView.transition(with: bloomView, duration: 1.75, options: .curveEaseInOut) {
+                        bloomView.alpha = isTopController ? 0 : 1
+                    }
+                }
+                gradientView?.isHidden = isHidden
+                navigationBarContainer?.clipsToBounds = !isHidden
+                hairlineView?.isHidden = isHidden || !scrollViewAdapter.isAtTopEdge.value
+                if !isHidden {
+                    updateBloomCenter()
+                }
+            }
+            .onReceive(scrollViewAdapter.isAtTopEdge.removeDuplicates()) { value in
+                hairlineView?.isHidden = !value
+                guard let gradientView else {
+                    return
+                }
+                if value {
+                    UIView.transition(with: gradientView, duration: 0.3, options: .curveEaseIn) {
+                        gradientView.alpha = 0
+                    }
+                } else {
+                    gradientView.alpha = 1
+                }
+            }
+    }
+    
+    private var bloomGradient: some View {
+        LinearGradient(colors: [.clear, .compound.bgCanvasDefault], startPoint: .top, endPoint: .bottom)
+            .mask {
+                LinearGradient(stops: [.init(color: .white, location: 0.75), .init(color: .clear, location: 1.0)],
+                               startPoint: .leading,
+                               endPoint: .trailing)
+            }
+            .ignoresSafeArea(edges: .all)
+    }
+            
+    private func makeBloomView(controller: UIViewController) {
+        guard let navigationBarContainer = controller.navigationController?.navigationBar.subviews.first,
+              let leftBarButtonView = controller.navigationItem.leadingItemGroups.first?.barButtonItems.first?.customView else {
+            return
+        }
+        
+        let bloomController = UIHostingController(rootView: bloom)
+        bloomController.view.translatesAutoresizingMaskIntoConstraints = true
+        bloomController.view.backgroundColor = .clear
+        navigationBarContainer.insertSubview(bloomController.view, at: 0)
+        self.leftBarButtonView = leftBarButtonView
+        bloomView = bloomController.view
+        self.navigationBarContainer = navigationBarContainer
+        updateBloomCenter()
+        
+        let gradientController = UIHostingController(rootView: bloomGradient)
+        gradientController.view.backgroundColor = .clear
+        gradientController.view.translatesAutoresizingMaskIntoConstraints = false
+        navigationBarContainer.insertSubview(gradientController.view, aboveSubview: bloomController.view)
+        
+        let constraints = [gradientController.view.bottomAnchor.constraint(equalTo: navigationBarContainer.bottomAnchor),
+                           gradientController.view.trailingAnchor.constraint(equalTo: navigationBarContainer.trailingAnchor),
+                           gradientController.view.leadingAnchor.constraint(equalTo: navigationBarContainer.leadingAnchor),
+                           gradientController.view.heightAnchor.constraint(equalToConstant: 40)]
+        constraints.forEach { $0.isActive = true }
+        gradientView = gradientController.view
+        
+        let dividerController = UIHostingController(rootView: Divider().ignoresSafeArea())
+        dividerController.view.translatesAutoresizingMaskIntoConstraints = false
+        navigationBarContainer.addSubview(dividerController.view)
+        let dividerConstraints = [dividerController.view.bottomAnchor.constraint(equalTo: gradientController.view.bottomAnchor),
+                                  dividerController.view.widthAnchor.constraint(equalTo: gradientController.view.widthAnchor),
+                                  dividerController.view.leadingAnchor.constraint(equalTo: gradientController.view.leadingAnchor)]
+        dividerConstraints.forEach { $0.isActive = true }
+        hairlineView = dividerController.view
+    }
+
+    private func updateBloomCenter() {
+        guard let leftBarButtonView,
+              let bloomView,
+              let navigationBarContainer = bloomView.superview else {
+            return
+        }
+        
+        let center = leftBarButtonView.convert(leftBarButtonView.center, to: navigationBarContainer.coordinateSpace)
+        bloomView.center = center
+    }
+    
+    private var bloom: some View {
+        BloomView(context: context)
+    }
+}
+
+private struct BloomView: View {
+    @ObservedObject var context: HomeScreenViewModel.Context
+    @Environment(\.colorScheme) private var colorScheme
+    
+    var body: some View {
+        ZStack {
+            avatar
+                .blur(radius: 64)
+                .blendMode(colorScheme == .dark ? .exclusion : .hardLight)
+                .opacity(colorScheme == .dark ? 0.50 : 0.20)
+            avatar
+                .blur(radius: 64)
+                .blendMode(.color)
+                .opacity(colorScheme == .dark ? 0.20 : 0.80)
+        }
+    }
+    
+    private var avatar: some View {
+        LoadableAvatarImage(url: context.viewState.userAvatarURL,
+                            name: context.viewState.userDisplayName,
+                            contentID: context.viewState.userID,
+                            avatarSize: .custom(256),
+                            mediaProvider: context.mediaProvider)
+    }
+}

ElementX/Sources/Screens/HomeScreen/View/BloomView.swift

@@ -1,34 +0,0 @@
-//
-// Copyright 2023, 2024 New Vector Ltd.
-//
-// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-// Please see LICENSE files in the repository root for full details.
-//
-
-import SwiftUI
-
-struct BloomView: View {
-    @ObservedObject var context: HomeScreenViewModel.Context
-    @Environment(\.colorScheme) private var colorScheme
-    
-    var body: some View {
-        ZStack {
-            avatar
-                .blur(radius: 64)
-                .blendMode(colorScheme == .dark ? .exclusion : .hardLight)
-                .opacity(colorScheme == .dark ? 0.50 : 0.20)
-            avatar
-                .blur(radius: 64)
-                .blendMode(.color)
-                .opacity(colorScheme == .dark ? 0.20 : 0.80)
-        }
-    }
-    
-    private var avatar: some View {
-        LoadableAvatarImage(url: context.viewState.userAvatarURL,
-                            name: context.viewState.userDisplayName,
-                            contentID: context.viewState.userID,
-                            avatarSize: .custom(256),
-                            mediaProvider: context.mediaProvider)
-    }
-}

ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift

@@ -7,21 +7,14 @@
 
 import Combine
 import Compound
+import SentrySwiftUI
 import SwiftUI
-import SwiftUIIntrospect
 
 struct HomeScreen: View {
     @ObservedObject var context: HomeScreenViewModel.Context
     
     @State private var scrollViewAdapter = ScrollViewAdapter()
     
-    // Bloom components
-    @State private var bloomView: UIView?
-    @State private var leftBarButtonView: UIView?
-    @State private var gradientView: UIView?
-    @State private var navigationBarContainer: UIView?
-    @State private var hairlineView: UIView?
-    
     var body: some View {
         HomeScreenContent(context: context, scrollViewAdapter: scrollViewAdapter)
             .alert(item: $context.alertInfo)
@@ -32,102 +25,13 @@ struct HomeScreen: View {
             .toolbar { toolbar }
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .track(screen: .Home)
-            .introspect(.viewController, on: .supportedVersions) { controller in
-                Task {
-                    if bloomView == nil {
-                        makeBloomView(controller: controller)
-                    }
-                }
-                let isTopController = controller.navigationController?.topViewController != controller
-                let isHidden = isTopController || context.isSearchFieldFocused
-                if let bloomView {
-                    bloomView.isHidden = isHidden
-                    UIView.transition(with: bloomView, duration: 1.75, options: .curveEaseInOut) {
-                        bloomView.alpha = isTopController ? 0 : 1
-                    }
-                }
-                gradientView?.isHidden = isHidden
-                navigationBarContainer?.clipsToBounds = !isHidden
-                hairlineView?.isHidden = isHidden || !scrollViewAdapter.isAtTopEdge.value
-                if !isHidden {
-                    updateBloomCenter()
-                }
-            }
-            .onReceive(scrollViewAdapter.isAtTopEdge.removeDuplicates()) { value in
-                hairlineView?.isHidden = !value
-                guard let gradientView else {
-                    return
-                }
-                if value {
-                    UIView.transition(with: gradientView, duration: 0.3, options: .curveEaseIn) {
-                        gradientView.alpha = 0
-                    }
-                } else {
-                    gradientView.alpha = 1
-                }
-            }
+            .bloom(context: context,
+                   scrollViewAdapter: scrollViewAdapter,
+                   isNewBloomEnabled: context.viewState.isNewBloomEnabled)
             .sentryTrace("\(Self.self)")
     }
     
     // MARK: - Private
-    
-    private var bloomGradient: some View {
-        LinearGradient(colors: [.clear, .compound.bgCanvasDefault], startPoint: .top, endPoint: .bottom)
-            .mask {
-                LinearGradient(stops: [.init(color: .white, location: 0.75), .init(color: .clear, location: 1.0)],
-                               startPoint: .leading,
-                               endPoint: .trailing)
-            }
-            .ignoresSafeArea(edges: .all)
-    }
-            
-    private func makeBloomView(controller: UIViewController) {
-        guard let navigationBarContainer = controller.navigationController?.navigationBar.subviews.first,
-              let leftBarButtonView = controller.navigationItem.leadingItemGroups.first?.barButtonItems.first?.customView else {
-            return
-        }
-        
-        let bloomController = UIHostingController(rootView: bloom)
-        bloomController.view.translatesAutoresizingMaskIntoConstraints = true
-        bloomController.view.backgroundColor = .clear
-        navigationBarContainer.insertSubview(bloomController.view, at: 0)
-        self.leftBarButtonView = leftBarButtonView
-        bloomView = bloomController.view
-        self.navigationBarContainer = navigationBarContainer
-        updateBloomCenter()
-        
-        let gradientController = UIHostingController(rootView: bloomGradient)
-        gradientController.view.backgroundColor = .clear
-        gradientController.view.translatesAutoresizingMaskIntoConstraints = false
-        navigationBarContainer.insertSubview(gradientController.view, aboveSubview: bloomController.view)
-        
-        let constraints = [gradientController.view.bottomAnchor.constraint(equalTo: navigationBarContainer.bottomAnchor),
-                           gradientController.view.trailingAnchor.constraint(equalTo: navigationBarContainer.trailingAnchor),
-                           gradientController.view.leadingAnchor.constraint(equalTo: navigationBarContainer.leadingAnchor),
-                           gradientController.view.heightAnchor.constraint(equalToConstant: 40)]
-        constraints.forEach { $0.isActive = true }
-        gradientView = gradientController.view
-        
-        let dividerController = UIHostingController(rootView: Divider().ignoresSafeArea())
-        dividerController.view.translatesAutoresizingMaskIntoConstraints = false
-        navigationBarContainer.addSubview(dividerController.view)
-        let dividerConstraints = [dividerController.view.bottomAnchor.constraint(equalTo: gradientController.view.bottomAnchor),
-                                  dividerController.view.widthAnchor.constraint(equalTo: gradientController.view.widthAnchor),
-                                  dividerController.view.leadingAnchor.constraint(equalTo: gradientController.view.leadingAnchor)]
-        dividerConstraints.forEach { $0.isActive = true }
-        hairlineView = dividerController.view
-    }
-
-    private func updateBloomCenter() {
-        guard let leftBarButtonView,
-              let bloomView,
-              let navigationBarContainer = bloomView.superview else {
-            return
-        }
-        
-        let center = leftBarButtonView.convert(leftBarButtonView.center, to: navigationBarContainer.coordinateSpace)
-        bloomView.center = center
-    }
         
     @ToolbarContentBuilder
     private var toolbar: some ToolbarContent {
@@ -152,10 +56,6 @@ struct HomeScreen: View {
         }
     }
     
-    private var bloom: some View {
-        BloomView(context: context)
-    }
-    
     @ViewBuilder
     private var newRoomButton: some View {
         switch context.viewState.roomListMode {

ElementX/Sources/Screens/Settings/DeveloperOptionsScreen/DeveloperOptionsScreenModels.swift

@@ -47,6 +47,7 @@ protocol DeveloperOptionsProtocol: AnyObject {
     var reportRoomEnabled: Bool { get set }
     var reportInviteEnabled: Bool { get set }
     var threadsEnabled: Bool { get set }
+    var isNewBloomEnabled: Bool { get set }
 }
 
 extension AppSettings: DeveloperOptionsProtocol { }

ElementX/Sources/Screens/Settings/DeveloperOptionsScreen/View/DeveloperOptionsScreen.swift

@@ -49,6 +49,11 @@ struct DeveloperOptionsScreen: View {
                 Toggle(isOn: $context.fuzzyRoomListSearchEnabled) {
                     Text("Fuzzy searching")
                 }
+                
+                Toggle(isOn: $context.isNewBloomEnabled) {
+                    Text("New bloom appearance")
+                    Text("Requires app reboot")
+                }
             }
             
             Section("Join rules") {