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.
This commit is contained in:
Doug
2025-04-16 16:36:19 +01:00
committed by GitHub
parent fdd3dc46bc
commit 5ba070d4d0
9 changed files with 234 additions and 143 deletions
@@ -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 {