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/Settings/View/SettingsScreen.swift

@@ -19,9 +19,12 @@ import SwiftUI
 struct SettingsScreen: View {
     // MARK: Private
 
-    @State private var showingLogoutConfirmation = false
     @Environment(\.colorScheme) private var colorScheme
     @ObservedObject private var settings = ElementSettings.shared
+
+    @ScaledMetric private var avatarSize = 60.0
+    @ScaledMetric private var menuIconSize = 30.0
+    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
     
     // MARK: Public
     
@@ -31,6 +34,12 @@ struct SettingsScreen: View {
     
     var body: some View {
         Form {
+            userSection
+                .listRowBackground(rowBackgroundColor)
+
+            appearanceSection
+                .listRowBackground(rowBackgroundColor)
+
             analyticsSection
                 .listRowBackground(rowBackgroundColor)
 
@@ -44,7 +53,13 @@ struct SettingsScreen: View {
             tableView.backgroundColor = .clear
         }
         .navigationTitle(ElementL10n.settings)
+        .navigationBarTitleDisplayMode(.inline)
         .background(backgroundColor, ignoresSafeAreaEdges: .all)
+        .toolbar {
+            ToolbarItem(placement: .navigationBarLeading) {
+                closeButton
+            }
+        }
     }
 
     private var versionText: some View {
@@ -52,25 +67,85 @@ struct SettingsScreen: View {
     }
 
     private var backgroundColor: Color {
-        colorScheme == .light ? .element.system : .element.background
+        .element.systemGray6
     }
 
     private var rowBackgroundColor: Color {
         colorScheme == .light ? .element.background : .element.system
     }
+
+    private var userSection: some View {
+        Section {
+            HStack(spacing: 13) {
+                userAvatar
+                VStack(alignment: .leading, spacing: 4) {
+                    Text(context.viewState.userDisplayName ?? "")
+                        .font(.title3)
+                    Text(context.viewState.userID)
+                        .font(.subheadline)
+                }
+            }
+            .listRowInsets(listRowInsets)
+        }
+    }
+
+    private var appearanceSection: some View {
+        Section {
+            Button(action: appearance) {
+                HStack {
+                    Image(systemName: "paintpalette")
+                        .foregroundColor(.element.systemGray)
+                        .padding(4)
+                        .background(Color.element.systemGray6)
+                        .clipShape(Circle())
+                        .frame(width: menuIconSize, height: menuIconSize)
+                    Text(ElementL10n.settingsAppearance)
+                    Spacer()
+                    Image(systemName: "chevron.forward")
+                        .foregroundColor(.element.tertiaryContent)
+                }
+            }
+            .listRowInsets(listRowInsets)
+            .foregroundColor(.element.primaryContent)
+            .accessibilityIdentifier("appearanceButton")
+        }
+    }
+
+    @ViewBuilder
+    private var userAvatar: some View {
+        if let avatar = context.viewState.userAvatar {
+            Image(uiImage: avatar)
+                .resizable()
+                .scaledToFill()
+                .frame(width: avatarSize, height: avatarSize)
+                .clipShape(Circle())
+        } else {
+            PlaceholderAvatarImage(text: context.viewState.userDisplayName ?? context.viewState.userID, contentId: context.viewState.userID)
+                .clipShape(Circle())
+                .frame(width: avatarSize, height: avatarSize)
+        }
+    }
     
     private var analyticsSection: some View {
-        Section(ElementL10n.settingsAnalytics) {
+        Section {
             Button { context.send(viewAction: .reportBug) } label: {
-                Text(ElementL10n.sendBugReport)
+                HStack {
+                    Text(ElementL10n.sendBugReport)
+                    Spacer()
+                    Image(systemName: "chevron.forward")
+                        .foregroundColor(.element.tertiaryContent)
+                }
             }
+            .listRowInsets(listRowInsets)
+            .listRowSeparator(.hidden)
             .foregroundColor(.element.primaryContent)
             .accessibilityIdentifier("reportBugButton")
 
             if BuildSettings.settingsCrashButtonVisible {
-                Button("Crash the app",
+                Button("Crash app",
                        role: .destructive) { context.send(viewAction: .crash)
                 }
+                .listRowInsets(listRowInsets)
                 .accessibilityIdentifier("crashButton")
             }
         }
@@ -79,13 +154,14 @@ struct SettingsScreen: View {
     @ViewBuilder
     private var userInterfaceSection: some View {
         if BuildSettings.settingsShowTimelineStyle {
-            Section(ElementL10n.settingsUserInterface) {
+            Section {
                 Picker(ElementL10n.settingsTimelineStyle, selection: $settings.timelineStyle) {
                     ForEach(TimelineStyle.allCases, id: \.self) { style in
                         Text(style.description)
                             .tag(style)
                     }
                 }
+                .listRowInsets(listRowInsets)
                 .accessibilityIdentifier("timelineStylePicker")
             }
         }
@@ -93,23 +169,52 @@ struct SettingsScreen: View {
     
     private var logoutSection: some View {
         Section {
-            Button { showingLogoutConfirmation = true } label: {
-                Text(ElementL10n.actionSignOut)
-            }
-            .frame(maxWidth: .infinity)
-            .foregroundColor(.element.primaryContent)
-            .accessibilityIdentifier("logoutButton")
-            .confirmationDialog(ElementL10n.actionSignOutConfirmationSimple,
-                                isPresented: $showingLogoutConfirmation,
-                                titleVisibility: .visible) {
-                Button(ElementL10n.actionSignOut,
-                       role: .destructive) { context.send(viewAction: .logout)
+            Button(action: logout) {
+                HStack {
+                    Image(systemName: "rectangle.portrait.and.arrow.right")
+                        .foregroundColor(.element.systemGray)
+                        .padding(4)
+                        .background(Color.element.systemGray6)
+                        .clipShape(Circle())
+                        .frame(width: menuIconSize, height: menuIconSize)
+                    Text(ElementL10n.actionSignOut)
+                    Spacer()
+                    Image(systemName: "chevron.forward")
+                        .foregroundColor(.element.tertiaryContent)
                 }
             }
+            .listRowInsets(listRowInsets)
+            .foregroundColor(.element.primaryContent)
+            .accessibilityIdentifier("logoutButton")
         } footer: {
             versionText
+                .frame(maxWidth: .infinity)
         }
     }
+
+    private var closeButton: some View {
+        Button(action: close) {
+            HStack {
+                Image(systemName: "xmark")
+                    .font(.title3.bold())
+                    .foregroundColor(.element.secondaryContent)
+                    .padding(4)
+            }
+        }
+        .accessibilityIdentifier("closeButton")
+    }
+
+    private func appearance() {
+        #warning("Not implemented")
+    }
+
+    private func close() {
+        context.send(viewAction: .close)
+    }
+
+    private func logout() {
+        context.send(viewAction: .logout)
+    }
 }
 
 extension TimelineStyle: CustomStringConvertible {
@@ -133,8 +238,13 @@ struct Settings_Previews: PreviewProvider {
 
     @ViewBuilder
     static var body: some View {
-        let viewModel = SettingsViewModel()
-        SettingsScreen(context: viewModel.context)
-            .previewInterfaceOrientation(.portrait)
+        let userSession = MockUserSession(clientProxy: MockClientProxy(userIdentifier: "@userid:example.com"),
+                                          mediaProvider: MockMediaProvider())
+        let viewModel = SettingsViewModel(withUserSession: userSession)
+
+        return NavigationView {
+            SettingsScreen(context: viewModel.context)
+                .previewInterfaceOrientation(.portrait)
+        }
     }
 }