Read Receipts display with the user avatar (#1038)

* added the read receipt into the code

* fixed some things lost during merge

* implemented the status view to be always at the trailing side

* preview code for better testing

* removed timelineStyle modifier

* removed also the group style

* added some UI tests for the read receipts

ElementX/Sources/Screens/RoomScreen/RoomScreenViewModel.swift

@@ -44,6 +44,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                                                          roomTitle: roomProxy.roomTitle,
                                                          roomAvatarURL: roomProxy.avatarURL,
                                                          timelineStyle: ServiceLocator.shared.settings.timelineStyle,
+                                                         readReceiptsEnabled: ServiceLocator.shared.settings.readReceiptsEnabled,
                                                          bindings: .init(composerText: "", composerFocused: false)),
                    imageProvider: mediaProvider)
         
@@ -88,6 +89,19 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
         ServiceLocator.shared.settings.$timelineStyle
             .weakAssign(to: \.state.timelineStyle, on: self)
             .store(in: &cancellables)
+
+        ServiceLocator.shared.settings.$readReceiptsEnabled
+            .weakAssign(to: \.state.readReceiptsEnabled, on: self)
+            .store(in: &cancellables)
+
+        roomProxy.membersPublisher
+            .map { members in
+                members.reduce(into: [String: RoomMemberState]()) { dictionary, member in
+                    dictionary[member.userID] = RoomMemberState(displayName: member.displayName, avatarURL: member.avatarURL)
+                }
+            }
+            .weakAssign(to: \.state.members, on: self)
+            .store(in: &cancellables)
                 
         buildTimelineViews()
     }