Update the toolbars in the Chats/Spaces screens. (#6043)

* Fix an issue with macro compilation when using Xcode previews.

* Update the Chats/Spaces toolbars to match the Figma.

Fixes a bug with the status emoji in the liquid glass button.

ElementX/Sources/Other/Avatars.swift

@@ -61,7 +61,9 @@ enum Avatars {
 
 enum UserAvatarSizeOnScreen {
     case chats
+    case chatsCompact
     case spaces
+    case spacesCompact
     case timeline
     case settings
     case roomDetails
@@ -99,12 +101,14 @@ enum UserAvatarSizeOnScreen {
             24
         case .knockingUsersBannerStack:
             28
-        case .chats, .spaces, .map,
+        case .chatsCompact, .spacesCompact, .map,
              .timeline, .readReceiptSheet, .completionSuggestions,
              .blockedUsers, .roomMembersList, .knockingUserBanner:
             32
         case .startChat:
             36
+        case .chats, .spaces:
+            40
         case .roomDetails:
             44
         case .inviteUsers, .knockingUserList, .sessionVerification,

ElementX/Sources/Other/SwiftUI/Views/AvatarSettingsButtonLabel.swift

@@ -9,16 +9,24 @@ import Compound
 import SwiftUI
 
 struct AvatarSettingsButtonLabel: View {
+    @Environment(\.isInSidebar) private var isInSidebar
+    
     let userProfile: UserProfile
     let mediaProvider: MediaProviderProtocol?
     
+    var isCompact: Bool {
+        guard #available(iOS 26, *) else { return true }
+        return isInSidebar // iPad doesn't use glass buttons in the sidebar.
+    }
+    
     var body: some View {
         LoadableAvatarImage(url: userProfile.avatarURL,
                             name: userProfile.displayName,
                             contentID: userProfile.id,
-                            avatarSize: .user(on: .chats),
+                            avatarSize: .user(on: isCompact ? .chatsCompact : .chats),
                             mediaProvider: mediaProvider)
-            .modifier(StatusEmojiModifier(statusEmoji: userProfile.status.displayed?.emoji))
+            .modifier(StatusEmojiModifier(statusEmoji: userProfile.status.displayed?.emoji,
+                                          isCompact: isCompact))
             .geometryGroup()
             .accessibilityHidden(true) // Decorative, the enclosing button provides the description.
     }
@@ -26,6 +34,7 @@ struct AvatarSettingsButtonLabel: View {
 
 private struct StatusEmojiModifier: ViewModifier {
     let statusEmoji: Character?
+    let isCompact: Bool
     
     func body(content: Content) -> some View {
         if let emojiText {
@@ -46,17 +55,42 @@ private struct StatusEmojiModifier: ViewModifier {
     var emojiText: (some View)? {
         statusEmoji.map {
             Text(String($0))
-                // All values (inc font) scaled by 0.8 as our Liquid Glass avatar is 32pt and not 40pt.
-                .font(.compound.bodyXS)
+                .font(emojiFont)
                 .padding(.vertical, 1) // Match Figma's line height.
-                .alignmentGuide(.trailing) { $0.width - 6.5 }
-                .alignmentGuide(.bottom) { $0.height + 1.5 }
+                .alignmentGuide(.trailing) { $0.width - trailingOffset }
+                .alignmentGuide(.bottom) { $0.height + bottomOffset }
         }
     }
+    
+    // Values scaled by 0.8 in the compact layout for a button size of 32pt instead of 40pt.
+    
+    var emojiFont: Font {
+        isCompact ? .compound.bodyXS : .compound.bodyMD
+    }
+    
+    nonisolated var trailingOffset: CGFloat {
+        isCompact ? 6.5 : 8
+    }
+    
+    nonisolated var bottomOffset: CGFloat {
+        isCompact ? 1.5 : 2
+    }
 }
 
 struct AvatarSettingsButtonLabel_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
+        VStack(spacing: 24) {
+            states
+                .environment(\.isInSidebar, false)
+            
+            states
+                .environment(\.isInSidebar, true)
+        }
+        .padding(16)
+        .previewLayout(.sizeThatFits)
+    }
+    
+    static var states: some View {
         HStack(spacing: 16) {
             AvatarSettingsButtonLabel(userProfile: .mockAlice,
                                       mediaProvider: MediaProviderMock(.init()))
@@ -66,7 +100,5 @@ struct AvatarSettingsButtonLabel_Previews: PreviewProvider, TestablePreview {
                                                          status: .mock(text: "", emoji: "🌴")),
                                       mediaProvider: MediaProviderMock(.init()))
         }
-        .padding(16)
-        .previewLayout(.sizeThatFits)
     }
 }

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

@@ -12,6 +12,8 @@ import SentrySwiftUI
 import SwiftUI
 
 struct HomeScreen: View {
+    @Environment(\.isInSidebar) private var isInSidebar
+    
     @ObservedObject var context: HomeScreenViewModel.Context
     
     @State private var scrollViewAdapter = ScrollViewAdapter()
@@ -28,10 +30,12 @@ struct HomeScreen: View {
                    actions: leaveRoomAlertActions,
                    message: leaveRoomAlertMessage)
             .navigationTitle(title)
+            .navigationBarTitleDisplayMode(Compound.supportsGlass ? .inline : .automatic)
             .toolbar { toolbar }
+            .toolbarRole(Compound.supportsGlass ? .editor : .automatic)
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .track(screen: .Home)
-            .toolbarBloom(hasSearchBar: true)
+            .toolbarBloom(hasSearchBar: context.viewState.isRoomListSearchEnabled)
             .sentryTrace("\(Self.self)")
             .sheet(item: $context.spaceFiltersViewModel) { vm in
                 ChatsSpaceFiltersScreen(context: vm.context)
@@ -52,10 +56,21 @@ struct HomeScreen: View {
     
     @ToolbarContentBuilder
     private var toolbar: some ToolbarContent {
-        ToolbarItem(placement: .navigationBarLeading) {
-            settingsButton
-                .buttonStyle(.borderless)
+        ToolbarItem(placement: Compound.supportsGlass ? .title : .navigationBarLeading) {
+            HStack(spacing: isInSidebar ? 8 : 12) {
+                // The settings button is inside the title on iOS 26 to workaround a
+                // weird liquid glass transition when pushing/popping a room.
+                settingsButton
+                    .buttonStyle(.borderless)
+                
+                if #available(iOS 26, *) {
+                    Text(title)
+                        .font(isInSidebar ? .compound.bodyLGSemibold : .compound.headingLGBold)
+                        .foregroundStyle(.compound.textPrimary)
+                }
+            }
         }
+        .backportSharedBackgroundVisibility(.hidden)
         
         ToolbarItem(placement: .primaryAction) {
             if #available(iOS 26, *) {

ElementX/Sources/Screens/SearchScreen/View/SearchScreen.swift

@@ -33,7 +33,7 @@ struct SearchScreen: View {
         VStack(alignment: .leading, spacing: 0) {
             // Rendered as content rather than a navigation title so it stays visible while the search field is focused.
             Text(L10n.actionSearch)
-                .font(.compound.headingXLBold)
+                .font(.compound.headingLGBold)
                 .foregroundStyle(.compound.textPrimary)
                 .accessibilityAddTraits(.isHeader)
                 .frame(maxWidth: .infinity, alignment: .leading)

ElementX/Sources/Screens/Spaces/Common/SpaceHeaderView.swift

@@ -24,7 +24,7 @@ struct SpaceHeaderView: View {
             
             VStack(spacing: 8) {
                 Text(spaceServiceRoom.name)
-                    .font(.compound.headingLGBold)
+                    .font(.compound.headingMDBold)
                     .foregroundStyle(.compound.textPrimary)
                     .multilineTextAlignment(.center)
                 

ElementX/Sources/Screens/Spaces/SpacesScreen/View/SpacesScreen.swift

@@ -17,6 +17,7 @@ struct SpacesScreen: View {
             .navigationTitle(L10n.screenSpaceListTitle)
             .navigationBarTitleDisplayMode(.inline)
             .toolbar { toolbar }
+            .toolbarRole(Compound.supportsGlass ? .editor : .automatic)
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .toolbarBloom(hasSearchBar: false)
     }
@@ -54,7 +55,7 @@ struct SpacesScreen: View {
             
             VStack(spacing: 8) {
                 Text(L10n.screenSpaceListTitle)
-                    .font(.compound.headingLGBold)
+                    .font(.compound.headingMDBold)
                     .foregroundStyle(.compound.textPrimary)
                     .multilineTextAlignment(.center)
                 
@@ -92,7 +93,8 @@ struct SpacesScreen: View {
     
     @ToolbarContentBuilder
     private var toolbar: some ToolbarContent {
-        ToolbarItem(placement: .navigationBarLeading) {
+        // Use the title placement on iOS 26 to match the chats tab and fix a weird animation.
+        ToolbarItem(placement: Compound.supportsGlass ? .title : .navigationBarLeading) {
             Button {
                 context.send(viewAction: .showSettings)
             } label: {
@@ -103,14 +105,18 @@ struct SpacesScreen: View {
             .accessibilityLabel(L10n.commonSettings)
             .accessibilityIdentifier(A11yIdentifiers.homeScreen.userAvatar)
         }
-        
-        ToolbarItem(placement: .principal) {
-            // Hides the navigationTitle (which is set for the navigation stack label).
-            Text("").accessibilityHidden(true)
-        }
         .backportSharedBackgroundVisibility(.hidden)
         
-        ToolbarItem(placement: .navigationBarTrailing) {
+        // No need to hide the title on iOS 26, as we use the .title placement for the settings
+        // button to workaround a weird liquid glass transition.
+        if #unavailable(iOS 26) {
+            ToolbarItem(placement: .principal) {
+                // Hides the navigationTitle (which is set for the navigation stack label).
+                Text("").accessibilityHidden(true)
+            }
+        }
+        
+        ToolbarItem(placement: .primaryAction) {
             Button {
                 context.send(viewAction: .createSpace)
             } label: {