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)
     }
 }