Sliding Sync + New Timeline API (#189)

* Begin adopting new Timeline API.

* Add edited indicator and reactions.

* vector-im/element-x-ios/issues/65 - Sliding sync support
* Fix missing room display name, wrong placeholder avatar text color and various other warnings that would fail the build on the CI

* Various tweaks:
* using release version of the demo branch of the sdk
* enabled home screen last room messages
* switched debug mode rust logging to warn
* enabled redactions
* enabled new logout flows and soft logout
* enabled replies

* Fix room member display name and avatar crashes / race condition, fix unit tests
* Make the ClientProxy and the UserSession MainActors
* Remove unused MatrixRustSDK imports, we should strive to keep these only in top level services and proxies
* Don't start either of the syncs while in soft logout

* #181: Style the session verification banner to match Figma.
* #181: Update verification modal.
* #181: Update snapshot tests.

* Make session verification state machine less pedantic
* Remove unnecessary weak selfs
* Various tweaks following code review:
* add start and stop sync client proxy methods
* move ss proxy url the build settings
* made media provider load results discardable
* added publishers for the roomSummaryProvider's total number of rooms and state

* Fix when sender details are shown
* Disable sync v2, causes duplicates in the timeline (as expected)
* Move ClientProxy media loading off the main queue and into a detached task
* Another attempt at moving image loading off the main queue
* Moved home screen diffing and latest room fetching to the background
* Prevent the timeline composer from becoming the first responder when not needed

* Bump to a newer version of the RustSDK

* Fixes vector-im/element-x-ios/issues/107 - New home screen design
* Implement thumbnail loading instead of full image avatars.
* Revert "Disable sync v2, causes duplicates in the timeline (as expected)"
* Add support for local echoes, dispatching detached tasks to a concurrenc GCD queue
* Move the session verification banner to a List Section to avoid UI glitches
* Optimise room mapping after sliding sync updates and thumbnail fetching
* Replace home screen List with a LazyVStack in an attempt to fix performance. Moved move summary provider room updating to a background thread

* Fixes vector-im/element-x-ios/issues/177 - New Bubbles Design
* Define in group state for timeline items
* Add replies into the bubble
* Add timeline width environment value
* Add `RoundedCorner` shape with specific corners rounding
* Add in group state for previews
* Implement bubble grouping logic
* Timeline avatar layout changes
* Fix placeholder avatars for dark mode
* New bubbles design
* Update mock timeline items
* Update timeline separator design
* Update room screen reference screenshots
* Add changelog
* Formatting fixes
* Add some space before single or beginning outgoing items

* Redesign the message composer

* Handle the msgtype enum.

* Update room name label line limit and incoming bubble background. Disabled syncv2, ss withCommonExtensions and session verification controller checking

* Increase default back pagination limit.
* Stop parsing links and tidy up composer button.
* Also fix the frame of an image whilst loading.
* Bump SDK package version.

* Remove app states about settings
* Add strings
* Use colors on placeholder avatars
* Tiny changes for placeholder avatars
* Update settings screen design
* Provide a user display name from the mock client
* Settings screen presentation logic
* Add changelog
* Update reference screenshots

Co-authored-by: Doug <douglase@element.io>
Co-authored-by: ismailgulek <ismailgulek@users.noreply.github.com>
Co-authored-by: ismailgulek <ismailg@matrix.org>

ElementX/Sources/Screens/SessionVerification/SessionVerificationModels.swift

@@ -27,12 +27,34 @@ enum SessionVerificationViewModelAction {
 struct SessionVerificationViewState: BindableState {
     var verificationState: SessionVerificationStateMachine.State = .initial
     
-    var shouldDisableDismissButton: Bool {
-        verificationState != .verified
+    var title: String? {
+        switch verificationState {
+        case .showingChallenge:
+            return ElementL10n.sessionVerificationScreenEmojisTitle
+        default:
+            return nil
+        }
     }
     
-    var shouldDisableCancelButton: Bool {
-        verificationState == .verified
+    var message: String {
+        switch verificationState {
+        case .initial:
+            return ElementL10n.verificationOpenOtherToVerify
+        case .requestingVerification:
+            return ElementL10n.verificationRequestWaiting
+        case .acceptingChallenge:
+            return ElementL10n.verificationRequestWaiting
+        case .decliningChallenge:
+            return ElementL10n.verificationRequestWaiting
+        case .cancelling:
+            return ElementL10n.verificationRequestWaiting
+        case .showingChallenge:
+            return ElementL10n.sessionVerificationScreenEmojisMessage
+        case .verified:
+            return ElementL10n.verificationConclusionOkSelfNotice
+        case .cancelled:
+            return ElementL10n.verificationCancelled
+        }
     }
 }
 
@@ -41,6 +63,5 @@ enum SessionVerificationViewAction {
     case restart
     case accept
     case decline
-    case dismiss
-    case cancel
+    case close
 }

ElementX/Sources/Screens/SessionVerification/SessionVerificationStateMachine.swift

@@ -66,22 +66,10 @@ class SessionVerificationStateMachine {
         stateMachine.state
     }
 
-    // swiftlint:disable cyclomatic_complexity
     init() {
         stateMachine = StateMachine(state: .initial) { machine in
             machine.addRoutes(event: .requestVerification, transitions: [.initial => .requestingVerification])
             machine.addRoutes(event: .didFail, transitions: [.requestingVerification => .initial])
-            
-            machine.addRoutes(event: .cancel, transitions: [.requestingVerification => .cancelling])
-            machine.addRoutes(event: .didCancel, transitions: [.requestingVerification => .cancelled])
-            
-            // Cancellation request from the other party should either take us from `.cancelling`
-            // to `.cancelled` or keep us in `.cancelled` if already there. There is more `.didCancel`
-            // handling in `addRouteMapping` for states containing associated values
-            machine.addRoutes(event: .didCancel, transitions: [.cancelling => .cancelled])
-            machine.addRoutes(event: .didCancel, transitions: [.cancelled => .cancelled])
-            machine.addRoutes(event: .didFail, transitions: [.cancelled => .cancelled])
-            
             machine.addRoutes(event: .restart, transitions: [.cancelled => .initial])
             
             // Transitions with associated values need to be handled through `addRouteMapping`
@@ -103,18 +91,9 @@ class SessionVerificationStateMachine {
                 case (.didFail, .decliningChallenge(let emojis)):
                     return .showingChallenge(emojis: emojis)
                 
-                case (.cancel, .showingChallenge):
+                case (.cancel, _):
                     return .cancelling
-                case (.cancel, .acceptingChallenge):
-                    return .cancelling
-                case (.cancel, .decliningChallenge):
-                    return .cancelling
-                
-                case (.didCancel, .showingChallenge):
-                    return .cancelled
-                case (.didCancel, .acceptingChallenge):
-                    return .cancelled
-                case (.didCancel, .decliningChallenge):
+                case (.didCancel, _):
                     return .cancelled
                     
                 default:
@@ -123,8 +102,6 @@ class SessionVerificationStateMachine {
             }
         }
     }
-
-    // swiftlint:enable cyclomatic_complexity
     
     /// Attempt to move the state machine to another state through an event
     /// It will either invoke the `transitionHandler` or the `errorHandler` depending on its current state

ElementX/Sources/Screens/SessionVerification/SessionVerificationViewModel.swift

@@ -74,9 +74,7 @@ class SessionVerificationViewModel: SessionVerificationViewModelType, SessionVer
             stateMachine.processEvent(.requestVerification)
         case .restart:
             stateMachine.processEvent(.restart)
-        case .dismiss:
-            callback?(.finished)
-        case .cancel:
+        case .close:
             guard stateMachine.state == .initial ||
                 stateMachine.state == .verified ||
                 stateMachine.state == .cancelled else {
@@ -115,7 +113,7 @@ class SessionVerificationViewModel: SessionVerificationViewModelType, SessionVer
         }
         
         stateMachine.addErrorHandler { context in
-            fatalError("Failed transition with context: \(context)")
+            MXLog.error("Failed transition with context: \(context)")
         }
     }
     

ElementX/Sources/Screens/SessionVerification/View/SessionVerificationScreen.swift

@@ -14,7 +14,6 @@
 // limitations under the License.
 //
 
-import MatrixRustSDK
 import SwiftUI
 
 struct SessionVerificationScreen: View {
@@ -24,127 +23,132 @@ struct SessionVerificationScreen: View {
     
     var body: some View {
         NavigationView {
-            VStack(spacing: 32.0) {
-                Text(heading)
-                    .font(.body)
-                    .multilineTextAlignment(.center)
-                    .foregroundColor(.element.primaryContent)
-                    .accessibilityIdentifier("titleLabel")
-                
-                switch context.viewState.verificationState {
-                case .initial:
-                    StateIcon(systemName: "lock.shield")
-                    Button(ElementL10n.startVerification) {
-                        context.send(viewAction: .start)
-                    }
-                    .buttonStyle(.elementAction(.regular))
-                    .accessibilityIdentifier("startButton")
-                    
-                case .cancelled:
-                    StateIcon(systemName: "xmark.shield")
-                        .accessibilityIdentifier("sessionVerificationFailedIcon")
-                    
-                    Button(ElementL10n.globalRetry) {
-                        context.send(viewAction: .restart)
-                    }
-                    .buttonStyle(.elementAction(.regular))
-                    .accessibilityIdentifier("restartButton")
-                    
-                case .requestingVerification:
-                    ProgressView()
-                        .accessibilityIdentifier("requestingVerificationProgressView")
-                case .cancelling:
-                    ProgressView()
-                        .accessibilityIdentifier("cancellingVerificationProgressView")
-                case .acceptingChallenge:
-                    ProgressView()
-                        .accessibilityIdentifier("acceptingChallengeProgressView")
-                case .decliningChallenge:
-                    ProgressView()
-                        .accessibilityIdentifier("decliningChallengeProgressView")
-                    
-                case .showingChallenge(let emojis):
-                    HStack(spacing: 8.0) {
-                        ForEach(emojis.prefix(4), id: \.self) { emoji in
-                            EmojiView(emoji: emoji)
-                        }
-                    }
-                    HStack(spacing: 8.0) {
-                        ForEach(emojis.suffix(from: 4), id: \.self) { emoji in
-                            EmojiView(emoji: emoji)
-                        }
+            ScrollView {
+                VStack(spacing: 32.0) {
+                    if let title = context.viewState.title {
+                        Text(title)
+                            .font(.element.headlineBold)
+                            .foregroundColor(.element.systemPrimaryLabel)
+                            .multilineTextAlignment(.center)
                     }
                     
-                    actionButtons
-                case .verified:
-                    StateIcon(systemName: "checkmark.shield")
-                        .accessibilityIdentifier("sessionVerificationSucceededIcon")
-                }
-                
-                Spacer()
-            }
-            .padding()
-            .padding(.top, 64)
-            .navigationBarTitleDisplayMode(.inline)
-            .navigationTitle(ElementL10n.verificationVerifyDevice)
-            .toolbar {
-                ToolbarItem(placement: .confirmationAction) {
-                    Button(ElementL10n.done) {
-                        context.send(viewAction: .dismiss)
-                    }
-                    .disabled(context.viewState.shouldDisableDismissButton)
-                    .accessibilityIdentifier("dismissButton")
-                }
-                ToolbarItem(placement: .cancellationAction) {
-                    Button(ElementL10n.actionCancel) {
-                        context.send(viewAction: .cancel)
-                    }
-                    .disabled(context.viewState.shouldDisableCancelButton)
-                    .accessibilityIdentifier("cancelButton")
+                    Text(context.viewState.message)
+                        .font(.body)
+                        .multilineTextAlignment(.center)
+                        .foregroundColor(.element.systemPrimaryLabel)
+                        .accessibilityIdentifier("titleLabel")
+                    
+                    mainContent
                 }
+                .padding()
+                .padding(.top, 64)
+                .frame(maxWidth: .infinity)
+                .navigationBarTitleDisplayMode(.inline)
+                .navigationTitle(ElementL10n.verificationProfileVerify)
+                .toolbar { toolbarContent }
             }
+            .background(Color.element.systemSecondaryBackground)
+            .safeAreaInset(edge: .bottom) { actionButtons.padding() }
         }
-        .navigationViewStyle(StackNavigationViewStyle())
+        .navigationViewStyle(.stack)
     }
     
     // MARK: - Private
     
-    private var heading: String {
+    @ViewBuilder
+    private var mainContent: some View {
         switch context.viewState.verificationState {
         case .initial:
-            return ElementL10n.verificationOpenOtherToVerify
-        case .requestingVerification:
-            return ElementL10n.verificationRequestWaiting
-        case .acceptingChallenge:
-            return ElementL10n.verificationRequestWaiting
-        case .decliningChallenge:
-            return ElementL10n.verificationRequestWaiting
-        case .cancelling:
-            return ElementL10n.verificationRequestWaiting
-        case .showingChallenge:
-            return ElementL10n.verificationEmojiNotice
-        case .verified:
-            return ElementL10n.verificationConclusionOkSelfNotice
+            StateIcon(systemName: "lock.shield")
+            
         case .cancelled:
-            return ElementL10n.verificationCancelled
+            StateIcon(systemName: "xmark.shield")
+                .accessibilityIdentifier("sessionVerificationFailedIcon")
+            
+        case .requestingVerification:
+            ProgressView()
+                .accessibilityIdentifier("requestingVerificationProgressView")
+        case .cancelling:
+            ProgressView()
+                .accessibilityIdentifier("cancellingVerificationProgressView")
+        case .acceptingChallenge:
+            ProgressView()
+                .accessibilityIdentifier("acceptingChallengeProgressView")
+        case .decliningChallenge:
+            ProgressView()
+                .accessibilityIdentifier("decliningChallengeProgressView")
+            
+        case .showingChallenge(let emojis):
+            HStack(spacing: 16) {
+                ForEach(emojis.prefix(4), id: \.self) { emoji in
+                    EmojiView(emoji: emoji)
+                }
+            }
+            HStack(spacing: 16) {
+                ForEach(emojis.suffix(from: 4), id: \.self) { emoji in
+                    EmojiView(emoji: emoji)
+                }
+            }
+        case .verified:
+            StateIcon(systemName: "checkmark.shield")
+                .accessibilityIdentifier("sessionVerificationSucceededIcon")
         }
     }
     
+    @ViewBuilder
     private var actionButtons: some View {
-        HStack(spacing: 16.0) {
-            Button(ElementL10n.verificationSasDoNotMatch) {
-                context.send(viewAction: .decline)
+        switch context.viewState.verificationState {
+        case .initial:
+            Button(ElementL10n.startVerification) {
+                context.send(viewAction: .start)
             }
-            .buttonStyle(.elementAction(.regular, color: .red))
-            .accessibilityLabel("challengeDeclineButton")
-            
-            Button(ElementL10n.verificationSasMatch) {
-                context.send(viewAction: .accept)
+            .buttonStyle(.elementAction(.xLarge))
+            .accessibilityIdentifier("startButton")
+        
+        case .cancelled:
+            Button(ElementL10n.globalRetry) {
+                context.send(viewAction: .restart)
             }
-            .buttonStyle(.elementAction(.regular))
-            .accessibilityLabel("challengeAcceptButton")
+            .buttonStyle(.elementAction(.xLarge))
+            .accessibilityIdentifier("restartButton")
+        
+        case .showingChallenge:
+            VStack(spacing: 30) {
+                Button { context.send(viewAction: .accept) } label: {
+                    Label(ElementL10n.actionMatch, systemImage: "checkmark")
+                }
+                .buttonStyle(.elementAction(.xLarge))
+                .accessibilityLabel("challengeAcceptButton")
+                
+                Button(ElementL10n.no) {
+                    context.send(viewAction: .decline)
+                }
+                .font(.element.bodyBold)
+                .accessibilityLabel("challengeDeclineButton")
+            }
+        
+        case .verified:
+            Button(ElementL10n.finish) {
+                context.send(viewAction: .close)
+            }
+            .buttonStyle(.elementAction(.xLarge))
+            .accessibilityIdentifier("finishButton")
+        
+        default:
+            EmptyView()
+        }
+    }
+    
+    @ToolbarContentBuilder
+    private var toolbarContent: some ToolbarContent {
+        ToolbarItem(placement: .cancellationAction) {
+            Button { context.send(viewAction: .close) } label: {
+                Image(systemName: "xmark")
+            }
+            .font(.element.bodyBold)
+            .foregroundColor(.element.systemSecondaryLabel)
+            .accessibilityIdentifier("closeButton")
         }
-        .padding(32.0)
     }
     
     struct EmojiView: View {
@@ -153,9 +157,10 @@ struct SessionVerificationScreen: View {
         var body: some View {
             VStack(spacing: 16.0) {
                 Text(emoji.symbol)
-                    .font(.largeTitle)
+                    .font(.element.largeTitleBold)
                 Text(emoji.description)
-                    .font(.body)
+                    .font(.element.caption2)
+                    .foregroundColor(.element.systemSecondaryLabel)
             }
             .padding(8.0)
         }
@@ -167,6 +172,7 @@ struct SessionVerificationScreen: View {
         var body: some View {
             Image(systemName: systemName)
                 .resizable()
+                .font(.element.body.weight(.light))
                 .scaledToFit()
                 .foregroundColor(.element.accent)
                 .frame(width: 100, height: 100)
@@ -181,23 +187,24 @@ struct SessionVerification_Previews: PreviewProvider {
         body.preferredColorScheme(.light)
         body.preferredColorScheme(.dark)
     }
-
+    
     @ViewBuilder
     static var body: some View {
         Group {
             sessionVerificationScreen(state: .initial)
             sessionVerificationScreen(state: .requestingVerification)
             sessionVerificationScreen(state: .cancelled)
-             
+            
             sessionVerificationScreen(state: .showingChallenge(emojis: MockSessionVerificationControllerProxy.emojis))
             sessionVerificationScreen(state: .verified)
         }
+        .tint(Color.element.accent)
     }
-
+    
     static func sessionVerificationScreen(state: SessionVerificationStateMachine.State) -> some View {
         let viewModel = SessionVerificationViewModel(sessionVerificationControllerProxy: MockSessionVerificationControllerProxy(),
                                                      initialState: SessionVerificationViewState(verificationState: state))
-
+        
         return SessionVerificationScreen(context: viewModel.context)
     }
 }