UX Update for user profile screen and room member details (#2822)

ElementX/Resources/Localizations/en.lproj/Localizable.strings

@@ -63,6 +63,7 @@
 "action_leave_room" = "Leave room";
 "action_manage_account" = "Manage account";
 "action_manage_devices" = "Manage devices";
+"action_message" = "Message";
 "action_next" = "Next";
 "action_no" = "No";
 "action_not_now" = "Not now";

ElementX/Sources/FlowCoordinators/RoomFlowCoordinator.swift

@@ -176,6 +176,14 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
         }
     }
     
+    private func presentCallScreen(roomID: String) async {
+        guard let roomProxy = await userSession.clientProxy.roomForIdentifier(roomID) else {
+            return
+        }
+        
+        actionsSubject.send(.presentCallScreen(roomProxy: roomProxy))
+    }
+    
     private func handleRoomRoute(roomID: String, focussedEventID: String? = nil, animated: Bool) async {
         guard roomID == self.roomID else { fatalError("Navigation route doesn't belong to this room flow.") }
         
@@ -1064,6 +1072,8 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
                 stateMachine.tryEvent(.presentUserProfile(userID: userID))
             case .openDirectChat(let roomID):
                 stateMachine.tryEvent(.startChildFlow(roomID: roomID, entryPoint: .room))
+            case .startCall(let roomID):
+                Task { await self.presentCallScreen(roomID: roomID) }
             }
         }
         .store(in: &cancellables)
@@ -1087,6 +1097,8 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
             switch action {
             case .openDirectChat(let roomID):
                 stateMachine.tryEvent(.startChildFlow(roomID: roomID, entryPoint: .room))
+            case .startCall(let roomID):
+                Task { await self.presentCallScreen(roomID: roomID) }
             case .dismiss:
                 break // Not supported when pushed.
             }
@@ -1094,11 +1106,14 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
         .store(in: &cancellables)
         
         // Replace the RoomMemberDetailsScreen without any animation.
-        navigationStackCoordinator.pop(animated: false)
+        // If this pop and push happens before the previous navigation is completed it might break screen presentation logic
-        navigationStackCoordinator.push(coordinator, animated: false) { [weak self] in
+        DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(500)) {
+            self.navigationStackCoordinator.pop(animated: false)
+            self.navigationStackCoordinator.push(coordinator, animated: false) { [weak self] in
                 self?.stateMachine.tryEvent(.dismissUserProfile)
             }
         }
+    }
     
     private func presentMessageForwarding(with forwardingItem: MessageForwardingItem) {
         guard let roomSummaryProvider = userSession.clientProxy.alternateRoomSummaryProvider else {

ElementX/Sources/FlowCoordinators/UserSessionFlowCoordinator.swift

@@ -238,10 +238,10 @@ class UserSessionFlowCoordinator: FlowCoordinatorProtocol {
             stateMachine.processEvent(.showUserProfileScreen(userID: userID), userInfo: .init(animated: animated))
         case .genericCallLink(let url):
             navigationSplitCoordinator.setSheetCoordinator(GenericCallLinkCoordinator(parameters: .init(url: url)), animated: animated)
-        case .oidcCallback:
-            break
         case .settings, .chatBackupSettings:
             settingsFlowCoordinator.handleAppRoute(appRoute, animated: animated)
+        case .oidcCallback:
+            break
         }
     }
     
@@ -595,6 +595,14 @@ class UserSessionFlowCoordinator: FlowCoordinatorProtocol {
         navigationSplitCoordinator.setSheetCoordinator(callScreenCoordinator, animated: true)
     }
     
+    private func presentCallScreen(roomID: String) async {
+        guard let roomProxy = await userSession.clientProxy.roomForIdentifier(roomID) else {
+            return
+        }
+        
+        presentCallScreen(roomProxy: roomProxy)
+    }
+    
     // MARK: Secure backup confirmation
     
     private func presentSecureBackupLogoutConfirmationScreen() {
@@ -706,6 +714,8 @@ class UserSessionFlowCoordinator: FlowCoordinatorProtocol {
             case .openDirectChat(let roomID):
                 navigationSplitCoordinator.setSheetCoordinator(nil)
                 stateMachine.processEvent(.selectRoom(roomID: roomID, entryPoint: .room))
+            case .startCall(let roomID):
+                Task { await self.presentCallScreen(roomID: roomID) }
             case .dismiss:
                 navigationSplitCoordinator.setSheetCoordinator(nil)
             }

ElementX/Sources/Generated/Strings.swift

@@ -160,6 +160,8 @@ internal enum L10n {
   internal static var actionManageAccount: String { return L10n.tr("Localizable", "action_manage_account") }
   /// Manage devices
   internal static var actionManageDevices: String { return L10n.tr("Localizable", "action_manage_devices") }
+  /// Message
+  internal static var actionMessage: String { return L10n.tr("Localizable", "action_message") }
   /// Next
   internal static var actionNext: String { return L10n.tr("Localizable", "action_next") }
   /// No

ElementX/Sources/Other/SwiftUI/Form Styles/FormButtonStyles.swift

@@ -22,19 +22,22 @@ struct FormActionButtonStyle: ButtonStyle {
     let title: String
     
     func makeBody(configuration: Configuration) -> some View {
-        VStack(spacing: 8) {
+        VStack(spacing: 4) {
             configuration.label
                 .buttonStyle(.plain)
-                .foregroundColor(.compound.textPrimary)
+                .foregroundColor(.compound.iconSecondary)
-                .scaledFrame(size: 54)
+                .scaledFrame(size: 24)
-                .background {
-                    RoundedRectangle(cornerRadius: 16)
-                        .fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1)
-                }
             
             Text(title)
-                .foregroundColor(.compound.textSecondary)
+                .foregroundColor(.compound.textPrimary)
-                .font(.compound.bodyMD)
+                .font(.compound.bodyLG)
+        }
+        .padding(.horizontal, 4)
+        .padding(.vertical, 8)
+        .frame(maxWidth: .infinity)
+        .background {
+            RoundedRectangle(cornerRadius: 14)
+                .fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1)
         }
     }
 }

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

@@ -106,6 +106,10 @@ struct AvatarHeaderView<Footer: View>: View {
         }
         .frame(maxWidth: .infinity, alignment: .center)
         .listRowBackground(Color.clear)
+        .listRowInsets(EdgeInsets(top: 11,
+                                  leading: 0,
+                                  bottom: 11,
+                                  trailing: 0))
     }
 }
 

ElementX/Sources/Screens/RoomDetailsScreen/View/RoomDetailsScreen.swift

@@ -97,7 +97,7 @@ struct RoomDetailsScreen: View {
     
     @ViewBuilder
     private var headerSectionShortcuts: some View {
-        HStack(spacing: 32) {
+        HStack(spacing: 8) {
             ForEach(context.viewState.shortcuts, id: \.self) { shortcut in
                 switch shortcut {
                 case .mute:

ElementX/Sources/Screens/RoomMemberDetailsScreen/RoomMemberDetailsScreenCoordinator.swift

@@ -29,6 +29,7 @@ struct RoomMemberDetailsScreenCoordinatorParameters {
 enum RoomMemberDetailsScreenCoordinatorAction {
     case openUserProfile
     case openDirectChat(roomID: String)
+    case startCall(roomID: String)
 }
 
 final class RoomMemberDetailsScreenCoordinator: CoordinatorProtocol {
@@ -59,6 +60,8 @@ final class RoomMemberDetailsScreenCoordinator: CoordinatorProtocol {
                 actionsSubject.send(.openUserProfile)
             case .openDirectChat(let roomID):
                 actionsSubject.send(.openDirectChat(roomID: roomID))
+            case .startCall(let roomID):
+                actionsSubject.send(.startCall(roomID: roomID))
             }
         }
         .store(in: &cancellables)

ElementX/Sources/Screens/RoomMemberDetailsScreen/RoomMemberDetailsScreenModels.swift

@@ -19,6 +19,7 @@ import Foundation
 enum RoomMemberDetailsScreenViewModelAction {
     case openUserProfile
     case openDirectChat(roomID: String)
+    case startCall(roomID: String)
 }
 
 struct RoomMemberDetailsScreenViewState: BindableState {
@@ -26,6 +27,7 @@ struct RoomMemberDetailsScreenViewState: BindableState {
     var memberDetails: RoomMemberDetails?
     var isOwnMemberDetails = false
     var isProcessingIgnoreRequest = false
+    var dmRoomID: String?
 
     var bindings: RoomMemberDetailsScreenViewStateBindings
 }
@@ -83,6 +85,7 @@ enum RoomMemberDetailsScreenViewAction {
     case unignoreConfirmed
     case displayAvatar
     case openDirectChat
+    case startCall(roomID: String)
 }
 
 enum RoomMemberDetailsScreenError: Hashable {

ElementX/Sources/Screens/RoomMemberDetailsScreen/RoomMemberDetailsScreenViewModel.swift

@@ -61,6 +61,12 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
                 roomMemberProxy = member
                 state.memberDetails = RoomMemberDetails(withProxy: member)
                 state.isOwnMemberDetails = member.userID == roomProxy.ownUserID
+                switch await clientProxy.directRoomForUserID(member.userID) {
+                case .success(let roomID):
+                    state.dmRoomID = roomID
+                case .failure:
+                    break
+                }
             case .failure(let error):
                 MXLog.warning("Failed to find member: \(error)")
                 actionsSubject.send(.openUserProfile)
@@ -91,6 +97,8 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
             Task { await displayFullScreenAvatar() }
         case .openDirectChat:
             Task { await openDirectChat() }
+        case .startCall(let roomID):
+            actionsSubject.send(.startCall(roomID: roomID))
         }
     }
 

ElementX/Sources/Screens/RoomMemberDetailsScreen/View/RoomMemberDetailsScreen.swift

@@ -25,7 +25,6 @@ struct RoomMemberDetailsScreen: View {
             headerSection
             
             if context.viewState.memberDetails != nil, !context.viewState.isOwnMemberDetails {
-                directChatSection
                 blockUserSection
             }
         }
@@ -39,6 +38,38 @@ struct RoomMemberDetailsScreen: View {
     
     // MARK: - Private
     
+    @ViewBuilder
+    private var otherUserFooter: some View {
+        HStack(spacing: 8) {
+            if context.viewState.memberDetails != nil, !context.viewState.isOwnMemberDetails {
+                Button {
+                    context.send(viewAction: .openDirectChat)
+                } label: {
+                    CompoundIcon(\.chat)
+                }
+                .buttonStyle(FormActionButtonStyle(title: L10n.commonMessage))
+                .accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
+            }
+            
+            if let roomID = context.viewState.dmRoomID {
+                Button {
+                    context.send(viewAction: .startCall(roomID: roomID))
+                } label: {
+                    CompoundIcon(\.videoCall)
+                }
+                .buttonStyle(FormActionButtonStyle(title: L10n.actionCall))
+            }
+            
+            if let permalink = context.viewState.memberDetails?.permalink {
+                ShareLink(item: permalink) {
+                    CompoundIcon(\.shareIos)
+                }
+                .buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
+            }
+        }
+        .padding(.top, 32)
+    }
+    
     @ViewBuilder
     private var headerSection: some View {
         if let memberDetails = context.viewState.memberDetails {
@@ -47,15 +78,7 @@ struct RoomMemberDetailsScreen: View {
                              imageProvider: context.imageProvider) {
                 context.send(viewAction: .displayAvatar)
             } footer: {
-                if let permalink = memberDetails.permalink {
+                otherUserFooter
-                    HStack(spacing: 32) {
-                        ShareLink(item: permalink) {
-                            CompoundIcon(\.shareIos)
-                        }
-                        .buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
-                    }
-                    .padding(.top, 32)
-                }
             }
         } else {
             AvatarHeaderView(user: UserProfileProxy(userID: context.viewState.userID),
@@ -65,17 +88,6 @@ struct RoomMemberDetailsScreen: View {
         }
     }
     
-    private var directChatSection: some View {
-        Section {
-            ListRow(label: .default(title: L10n.commonDirectChat,
-                                    icon: \.chat),
-                    kind: .button {
-                        context.send(viewAction: .openDirectChat)
-                    })
-                    .accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
-        }
-    }
-
     @ViewBuilder
     private var blockUserSection: some View {
         if let memberDetails = context.viewState.memberDetails {
@@ -134,9 +146,16 @@ struct RoomMemberDetailsScreen_Previews: PreviewProvider, TestablePreview {
         let roomProxyMock = RoomProxyMock(with: .init(name: ""))
         roomProxyMock.getMemberUserIDReturnValue = .success(member)
         
+        let clientProxyMock = ClientProxyMock(.init())
+        
+        // to avoid mock the call state for the account owner test case
+        if member.userID != RoomMemberProxyMock.mockMe.userID {
+            clientProxyMock.directRoomForUserIDReturnValue = .success("roomID")
+        }
+        
         return RoomMemberDetailsScreenViewModel(userID: member.userID,
                                                 roomProxy: roomProxyMock,
-                                                clientProxy: ClientProxyMock(.init()),
+                                                clientProxy: clientProxyMock,
                                                 mediaProvider: MockMediaProvider(),
                                                 userIndicatorController: ServiceLocator.shared.userIndicatorController,
                                                 analytics: ServiceLocator.shared.analytics)

ElementX/Sources/Screens/UserProfileScreen/UserProfileScreenCoordinator.swift

@@ -28,6 +28,7 @@ struct UserProfileScreenCoordinatorParameters {
 
 enum UserProfileScreenCoordinatorAction {
     case openDirectChat(roomID: String)
+    case startCall(roomID: String)
     case dismiss
 }
 
@@ -57,6 +58,8 @@ final class UserProfileScreenCoordinator: CoordinatorProtocol {
             switch action {
             case .openDirectChat(let roomID):
                 actionsSubject.send(.openDirectChat(roomID: roomID))
+            case .startCall(let roomID):
+                actionsSubject.send(.startCall(roomID: roomID))
             case .dismiss:
                 actionsSubject.send(.dismiss)
             }

ElementX/Sources/Screens/UserProfileScreen/UserProfileScreenModels.swift

@@ -18,6 +18,7 @@ import Foundation
 
 enum UserProfileScreenViewModelAction {
     case openDirectChat(roomID: String)
+    case startCall(roomID: String)
     case dismiss
 }
 
@@ -28,6 +29,7 @@ struct UserProfileScreenViewState: BindableState {
     
     var userProfile: UserProfileProxy?
     var permalink: URL?
+    var dmRoomID: String?
 
     var bindings: UserProfileScreenViewStateBindings
 }
@@ -42,6 +44,7 @@ struct UserProfileScreenViewStateBindings {
 enum UserProfileScreenViewAction {
     case displayAvatar
     case openDirectChat
+    case startCall(roomID: String)
     case dismiss
 }
 

ElementX/Sources/Screens/UserProfileScreen/UserProfileScreenViewModel.swift

@@ -59,6 +59,12 @@ class UserProfileScreenViewModel: UserProfileScreenViewModelType, UserProfileScr
             case .success(let userProfile):
                 state.userProfile = userProfile
                 state.permalink = (try? matrixToUserPermalink(userId: userID)).flatMap(URL.init(string:))
+                switch await clientProxy.directRoomForUserID(userProfile.userID) {
+                case .success(let roomID):
+                    state.dmRoomID = roomID
+                case .failure:
+                    break
+                }
             case .failure(let error):
                 state.bindings.alertInfo = .init(id: .unknown)
                 MXLog.error("Failed to find user profile: \(error)")
@@ -81,6 +87,8 @@ class UserProfileScreenViewModel: UserProfileScreenViewModelType, UserProfileScr
             Task { await displayFullScreenAvatar() }
         case .openDirectChat:
             Task { await openDirectChat() }
+        case .startCall(let roomID):
+            actionsSubject.send(.startCall(roomID: roomID))
         case .dismiss:
             actionsSubject.send(.dismiss)
         }

ElementX/Sources/Screens/UserProfileScreen/View/UserProfileScreen.swift

@@ -23,10 +23,6 @@ struct UserProfileScreen: View {
     var body: some View {
         Form {
             headerSection
-            
-            if context.viewState.userProfile != nil, !context.viewState.isOwnUser {
-                directChatSection
-            }
         }
         .compoundList()
         .navigationTitle(L10n.screenRoomMemberDetailsTitle)
@@ -39,6 +35,38 @@ struct UserProfileScreen: View {
     
     // MARK: - Private
     
+    @ViewBuilder
+    private var otherUserFooter: some View {
+        HStack(spacing: 8) {
+            if context.viewState.userProfile != nil, !context.viewState.isOwnUser {
+                Button {
+                    context.send(viewAction: .openDirectChat)
+                } label: {
+                    CompoundIcon(\.chat)
+                }
+                .buttonStyle(FormActionButtonStyle(title: L10n.commonMessage))
+                .accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
+            }
+            
+            if let roomID = context.viewState.dmRoomID {
+                Button {
+                    context.send(viewAction: .startCall(roomID: roomID))
+                } label: {
+                    CompoundIcon(\.videoCall)
+                }
+                .buttonStyle(FormActionButtonStyle(title: L10n.actionCall))
+            }
+            
+            if let permalink = context.viewState.permalink {
+                ShareLink(item: permalink) {
+                    CompoundIcon(\.shareIos)
+                }
+                .buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
+            }
+        }
+        .padding(.top, 32)
+    }
+    
     @ViewBuilder
     private var headerSection: some View {
         if let userProfile = context.viewState.userProfile {
@@ -47,15 +75,7 @@ struct UserProfileScreen: View {
                              imageProvider: context.imageProvider) {
                 context.send(viewAction: .displayAvatar)
             } footer: {
-                if let permalink = context.viewState.permalink {
+                otherUserFooter
-                    HStack(spacing: 32) {
-                        ShareLink(item: permalink) {
-                            CompoundIcon(\.shareIos)
-                        }
-                        .buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
-                    }
-                    .padding(.top, 32)
-                }
             }
         } else {
             AvatarHeaderView(user: UserProfileProxy(userID: context.viewState.userID),
@@ -65,17 +85,6 @@ struct UserProfileScreen: View {
         }
     }
     
-    private var directChatSection: some View {
-        Section {
-            ListRow(label: .default(title: L10n.commonDirectChat,
-                                    icon: \.chat),
-                    kind: .button {
-                        context.send(viewAction: .openDirectChat)
-                    })
-                    .accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
-        }
-    }
-    
     @ToolbarContentBuilder
     private var toolbar: some ToolbarContent {
         if context.viewState.isPresentedModally {
@@ -104,9 +113,13 @@ struct UserProfileScreen_Previews: PreviewProvider, TestablePreview {
     }
     
     static func makeViewModel(userID: String) -> UserProfileScreenViewModel {
-        UserProfileScreenViewModel(userID: userID,
+        let clientProxyMock = ClientProxyMock(.init())
+        if userID != RoomMemberProxyMock.mockMe.userID {
+            clientProxyMock.directRoomForUserIDReturnValue = .success("roomID")
+        }
+        return UserProfileScreenViewModel(userID: userID,
                                           isPresentedModally: false,
-                                   clientProxy: ClientProxyMock(.init()),
+                                          clientProxy: clientProxyMock,
                                           mediaProvider: MockMediaProvider(),
                                           userIndicatorController: ServiceLocator.shared.userIndicatorController,
                                           analytics: ServiceLocator.shared.analytics)

changelog.d/2816.change

@@ -0,0 +1 @@
+The UX of the profile of other users has been updated.