Move the status emoji placement on the home screen. (#6260)

* Minor tweaks to User Status. - Change the layout of the status emoji on the Setting button. - Remove the status emoji from the Settings screen (it's shown directly below in the status row).
2026-10-31 16:24:11 +00:00 · 2026-10-05 10:18:23 +01:00
parent 57f5498da0
commit 9ce3bd97d8
23 changed files with 66 additions and 112 deletions
@@ -59,8 +59,8 @@ extension AccessibilityTests {
        try await performAccessibilityAudit(named: "AvatarHeaderView_Previews")
    }

-    func testAvatarSettingsButtonLabel() async throws {
-        try await performAccessibilityAudit(named: "AvatarSettingsButtonLabel_Previews")
+    func testAvatarSettingsButton() async throws {
+        try await performAccessibilityAudit(named: "AvatarSettingsButton_Previews")
    }

    func testBadgeLabel() async throws {
@@ -8,11 +8,12 @@
 import Compound
 import SwiftUI

-struct AvatarSettingsButtonLabel: View {
+struct AvatarSettingsButton: View {
    @Environment(\.isInSidebar) private var isInSidebar
    
    let userProfile: UserProfile
    let mediaProvider: MediaProviderProtocol?
+    let action: () -> Void
    
    var isCompact: Bool {
        guard #available(iOS 26, *) else { return true }
@@ -20,64 +21,27 @@ struct AvatarSettingsButtonLabel: View {
    }
    
    var body: some View {
-        LoadableAvatarImage(url: userProfile.avatarURL,
-                            name: userProfile.displayName,
-                            contentID: userProfile.id,
-                            avatarSize: .user(on: isCompact ? .chatsCompact : .chats),
-                            mediaProvider: mediaProvider)
-            .modifier(StatusEmojiModifier(statusEmoji: userProfile.status.displayed?.emoji,
-                                          isCompact: isCompact))
-            .geometryGroup()
-            .accessibilityHidden(true) // Decorative, the enclosing button provides the description.
+        HStack(spacing: 4) {
+            Button(action: action) {
+                LoadableAvatarImage(url: userProfile.avatarURL,
+                                    name: userProfile.displayName,
+                                    contentID: userProfile.id,
+                                    avatarSize: .user(on: isCompact ? .chatsCompact : .chats),
+                                    mediaProvider: mediaProvider)
+            }
+            
+            if let statusEmoji = userProfile.status.displayed?.emoji {
+                Text(String(statusEmoji))
+                    .font(isCompact ? .compound.bodyXSSemibold : .compound.bodyLGSemibold)
+                    .foregroundStyle(.compound.textPrimary)
+            }
+        }
+        .geometryGroup()
+        .accessibilityHidden(true) // Decorative, the enclosing button provides the description.
    }
 }

-private struct StatusEmojiModifier: ViewModifier {
-    let statusEmoji: Character?
-    let isCompact: Bool
-    
-    func body(content: Content) -> some View {
-        if let emojiText {
-            content
-                .inverseMask(alignment: .bottomTrailing) {
-                    emojiText
-                        .hidden()
-                        .overlay { Circle().inset(by: -3) }
-                }
-                .overlay(alignment: .bottomTrailing) {
-                    emojiText
-                }
-        } else {
-            content
-        }
-    }
-    
-    var emojiText: (some View)? {
-        statusEmoji.map {
-            Text(String($0))
-                .font(emojiFont)
-                .padding(.vertical, 1) // Match Figma's line height.
-                .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 {
+struct AvatarSettingsButton_Previews: PreviewProvider, TestablePreview {
    static var previews: some View {
        VStack(spacing: 24) {
            states
@@ -92,13 +56,13 @@ struct AvatarSettingsButtonLabel_Previews: PreviewProvider, TestablePreview {
    
    static var states: some View {
        HStack(spacing: 16) {
-            AvatarSettingsButtonLabel(userProfile: .mockAlice,
-                                      mediaProvider: MediaProviderMock(.init()))
+            AvatarSettingsButton(userProfile: .mockAlice,
+                                 mediaProvider: MediaProviderMock(.init())) { }
            
-            AvatarSettingsButtonLabel(userProfile: .init(userID: "",
-                                                         avatarURL: .mockMXCUserAvatar,
-                                                         status: .mock(text: "", emoji: "🌴")),
-                                      mediaProvider: MediaProviderMock(.init()))
+            AvatarSettingsButton(userProfile: .init(userID: "",
+                                                    avatarURL: .mockMXCUserAvatar,
+                                                    status: .mock(text: "", emoji: "🌴")),
+                                 mediaProvider: MediaProviderMock(.init())) { }
        }
    }
 }
@@ -23,7 +23,7 @@ enum TestablePreviewsDictionary {
            "AuthenticationClassicAppBackupInstructionsView_Previews" : AuthenticationClassicAppBackupInstructionsView_Previews.self,
            "AuthenticationStartScreen_Previews" : AuthenticationStartScreen_Previews.self,
            "AvatarHeaderView_Previews" : AvatarHeaderView_Previews.self,
-            "AvatarSettingsButtonLabel_Previews" : AvatarSettingsButtonLabel_Previews.self,
+            "AvatarSettingsButton_Previews" : AvatarSettingsButton_Previews.self,
            "BadgeLabel_Previews" : BadgeLabel_Previews.self,
            "BlockedUsersScreen_Previews" : BlockedUsersScreen_Previews.self,
            "BloomModifier_Previews" : BloomModifier_Previews.self,
@@ -98,11 +98,9 @@ struct HomeScreen: View {
    }
    
    private var settingsButton: some View {
-        Button {
+        AvatarSettingsButton(userProfile: context.viewState.userProfile,
+                             mediaProvider: context.mediaProvider) {
            context.send(viewAction: .showSettings)
-        } label: {
-            AvatarSettingsButtonLabel(userProfile: context.viewState.userProfile,
-                                      mediaProvider: context.mediaProvider)
        }
        .accessibilityLabel(L10n.commonSettings)
        .accessibilityIdentifier(A11yIdentifiers.homeScreen.userAvatar)
@@ -70,15 +70,9 @@ struct SettingsScreen: View {
                            .accessibilityHidden(true)
                        
                        VStack(alignment: .leading, spacing: 2) {
-                            HStack(spacing: 6) {
-                                Text(context.viewState.userProfile.displayName ?? "")
-                                
-                                if let statusEmoji = context.viewState.userProfile.status.displayed?.emoji {
-                                    Text(String(statusEmoji))
-                                }
-                            }
-                            .font(.compound.headingMD)
-                            .foregroundColor(.compound.textPrimary)
+                            Text(context.viewState.userProfile.displayName ?? "")
+                                .font(.compound.headingMD)
+                                .foregroundColor(.compound.textPrimary)
                            
                            Text(context.viewState.userProfile.id)
                                .font(.compound.bodySM)
@@ -95,11 +95,9 @@ struct SpacesScreen: View {
    private var toolbar: some ToolbarContent {
        // Use the title placement on iOS 26 to match the chats tab and fix a weird animation.
        ToolbarItem(placement: Compound.supportsGlass ? .title : .navigationBarLeading) {
-            Button {
+            AvatarSettingsButton(userProfile: context.viewState.userProfile,
+                                 mediaProvider: context.mediaProvider) {
                context.send(viewAction: .showSettings)
-            } label: {
-                AvatarSettingsButtonLabel(userProfile: context.viewState.userProfile,
-                                          mediaProvider: context.mediaProvider)
            }
            .buttonStyle(.borderless)
            .accessibilityLabel(L10n.commonSettings)
@@ -103,8 +103,8 @@ extension PreviewTests {
    }

    @Test
-    func avatarSettingsButtonLabel() async throws {
-        for (index, preview) in AvatarSettingsButtonLabel_Previews._allPreviews.enumerated() {
+    func avatarSettingsButton() async throws {
+        for (index, preview) in AvatarSettingsButton_Previews._allPreviews.enumerated() {
            try await assertSnapshots(matching: preview, step: index)
        }
    }
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e36de594a67364a2071d2fd72db4ef89b2ae1826f5866f208c6567e2400ff790
+size 53547
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e36de594a67364a2071d2fd72db4ef89b2ae1826f5866f208c6567e2400ff790
+size 53547
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:967befb8403f30aeeab62558ff9b357ae63a56cc6e2314c7376820ccacf4db61
+size 45156
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:967befb8403f30aeeab62558ff9b357ae63a56cc6e2314c7376820ccacf4db61
+size 45156
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:98f8f2905fba799bb4251ae337dac5c9844abf2e15505ad3042735e368a21f88
-size 47717
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:98f8f2905fba799bb4251ae337dac5c9844abf2e15505ad3042735e368a21f88
-size 47717
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:673d0a2be9e6d68d50ce38a55123cc657b17d3d084f966a373bc2a9361e207b8
-size 39613
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:673d0a2be9e6d68d50ce38a55123cc657b17d3d084f966a373bc2a9361e207b8
-size 39613
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e3b0842a0b00bfd427cb7f7306da9ec60a8949b7a01317453a928c9780304ce1
-size 197636
+oid sha256:5b862b4039fe3d4cfdb10e98cd208f7502b8563d8b74ddf5a8de5d62bbcd66d2
+size 192952
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e163836c26dc9adbdd0e33c1b198b28d7405a8ecf4772ae3fe03936b9b28832f
-size 208231
+oid sha256:a9b1af97b7b27bf112b82055645b1dcb346db02b0ac8025c1bf5d128837fe622
+size 203581
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6b0343b5343163f550c96c8310e7cae29ce6e8d250d1de21640a5d705702bb0b
-size 128544
+oid sha256:a057099df1dc12a7fbcfccc11326447217feefe07a0ac635e3c26ef5eb1b154d
+size 124227
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c6bcb30126b04c6e8a166de62ceb1177447ad39f2ec7d01d0f57eaba19e3a948
-size 143298
+oid sha256:0ee44d9ff3620ebfd247c21e9c7b4770cb92de8a8e4ccc5a0d4c912a334ba74c
+size 139069
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a68cbb83b8030545295dbf4afd31f5812cc811e4a519a2068ff97177f5892009
-size 208475
+oid sha256:f0e31993f675ad48f19a22124114238910b1985b52d17dd47874f4b64b35b727
+size 203814
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2e154301807315b63a5a925e6570c8418c62eba03217a9743bcf11d7edd36a49
-size 220095
+oid sha256:5a0ca5db21d954937ccae99541c396cdaa0efd2b7b7111ff1d95e2481db0bc42
+size 215504
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e499f90120f22e694cb6ac08e4b60643b31a0f944af369332e82d7878afa1b6b
-size 136046
+oid sha256:34c1c30fb77417e9318dca1d6011606511d7d7fdc12288f8746060aeb754bc76
+size 131742
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6d10b2674b11be0209d30147f50e6eec812eea12c355e113f466e6b66b8d8192
-size 153831
+oid sha256:d6d7547adae45069046fd76f57e0897b0af8e7b319e4f515aa2869d3a0b1d5ba
+size 149600