mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-04 10:33:45 +00:00
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>
This commit is contained in:
@@ -29,36 +29,20 @@ struct HomeScreen: View {
|
||||
ProgressView()
|
||||
}
|
||||
} else {
|
||||
if context.viewState.showSessionVerificationBanner {
|
||||
HStack {
|
||||
Text(ElementL10n.verificationVerifyDevice)
|
||||
Spacer()
|
||||
Button(ElementL10n.startVerification) {
|
||||
context.send(viewAction: .verifySession)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(Color.element.quaternaryContent)
|
||||
.padding(.top, 1)
|
||||
}
|
||||
|
||||
List {
|
||||
Section(ElementL10n.rooms) {
|
||||
ForEach(context.viewState.visibleRooms) { room in
|
||||
RoomCell(room: room, context: context)
|
||||
.listRowBackground(Color.clear)
|
||||
}
|
||||
ScrollView {
|
||||
if context.viewState.showSessionVerificationBanner {
|
||||
sessionVerificationBanner
|
||||
}
|
||||
|
||||
Section(ElementL10n.bottomActionPeople) {
|
||||
ForEach(context.viewState.visibleDMs) { room in
|
||||
RoomCell(room: room, context: context)
|
||||
.listRowBackground(Color.clear)
|
||||
LazyVStack {
|
||||
ForEach(context.viewState.visibleRooms) { room in
|
||||
HomeScreenRoomCell(room: room, context: context)
|
||||
}
|
||||
}
|
||||
.searchable(text: $context.searchQuery)
|
||||
.animation(.default, value: context.viewState.visibleRooms)
|
||||
.padding(.horizontal)
|
||||
}
|
||||
.listStyle(.plain)
|
||||
.searchable(text: $context.searchQuery)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
@@ -66,7 +50,7 @@ struct HomeScreen: View {
|
||||
.transition(.slide)
|
||||
.animation(.elementDefault, value: context.viewState.showSessionVerificationBanner)
|
||||
.ignoresSafeArea(.all, edges: .bottom)
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.navigationTitle(ElementL10n.homeScreenAllChats)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .navigationBarLeading) {
|
||||
userMenuButton
|
||||
@@ -119,6 +103,37 @@ struct HomeScreen: View {
|
||||
return .empty
|
||||
}
|
||||
}
|
||||
|
||||
private var sessionVerificationBanner: some View {
|
||||
VStack(alignment: .leading, spacing: 16) {
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(ElementL10n.sessionVerificationBannerTitle)
|
||||
.font(.element.subheadlineBold)
|
||||
.foregroundColor(.element.systemPrimaryLabel)
|
||||
Text(ElementL10n.sessionVerificationBannerMessage)
|
||||
.font(.element.footnote)
|
||||
.foregroundColor(.element.systemSecondaryLabel)
|
||||
}
|
||||
|
||||
HStack(spacing: 16) {
|
||||
Button(ElementL10n.actionSkip) {
|
||||
context.send(viewAction: .skipSessionVerification)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.buttonStyle(.elementCapsule)
|
||||
|
||||
Button(ElementL10n.continue) {
|
||||
context.send(viewAction: .verifySession)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.buttonStyle(.elementCapsuleProminent)
|
||||
}
|
||||
}
|
||||
.padding(16)
|
||||
.background(Color.element.systemSecondaryBackground)
|
||||
.cornerRadius(14)
|
||||
.padding(.horizontal, 16)
|
||||
}
|
||||
|
||||
private func settings() {
|
||||
context.send(viewAction: .userMenu(action: .settings))
|
||||
@@ -137,62 +152,6 @@ struct HomeScreen: View {
|
||||
}
|
||||
}
|
||||
|
||||
struct RoomCell: View {
|
||||
@ScaledMetric private var avatarSize = 32.0
|
||||
|
||||
let room: HomeScreenRoom
|
||||
let context: HomeScreenViewModel.Context
|
||||
|
||||
var body: some View {
|
||||
Button {
|
||||
context.send(viewAction: .selectRoom(roomIdentifier: room.id))
|
||||
} label: {
|
||||
HStack(spacing: 16.0) {
|
||||
if let avatar = room.avatar {
|
||||
Image(uiImage: avatar)
|
||||
.resizable()
|
||||
.scaledToFill()
|
||||
.frame(width: avatarSize, height: avatarSize)
|
||||
.clipShape(Circle())
|
||||
} else {
|
||||
PlaceholderAvatarImage(text: room.displayName ?? room.id)
|
||||
.clipShape(Circle())
|
||||
.frame(width: avatarSize, height: avatarSize)
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 2.0) {
|
||||
Text(roomName(room))
|
||||
.foregroundStyle(.primary)
|
||||
|
||||
if let roomTopic = room.topic, roomTopic.count > 0 {
|
||||
Text(roomTopic)
|
||||
.font(.footnote.weight(.semibold))
|
||||
.lineLimit(1)
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
|
||||
if let lastMessage = room.lastMessage {
|
||||
Text(lastMessage)
|
||||
.font(.callout)
|
||||
.lineLimit(1)
|
||||
.foregroundStyle(.secondary)
|
||||
.padding(.top, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
.animation(.elementDefault, value: room)
|
||||
.frame(minHeight: 60.0)
|
||||
.task {
|
||||
context.send(viewAction: .loadRoomData(roomIdentifier: room.id))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func roomName(_ room: HomeScreenRoom) -> String {
|
||||
room.displayName ?? room.id + (room.isEncrypted ? "🛡" : "")
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Previews
|
||||
|
||||
struct HomeScreen_Previews: PreviewProvider {
|
||||
@@ -202,28 +161,13 @@ struct HomeScreen_Previews: PreviewProvider {
|
||||
body.preferredColorScheme(.dark)
|
||||
.tint(.element.accent)
|
||||
}
|
||||
|
||||
|
||||
static var body: some View {
|
||||
let viewModel = HomeScreenViewModel(attributedStringBuilder: AttributedStringBuilder())
|
||||
let userSession = MockUserSession(clientProxy: MockClientProxy(userIdentifier: "John Doe"),
|
||||
mediaProvider: MockMediaProvider())
|
||||
|
||||
let eventBrief = EventBrief(eventId: "id",
|
||||
senderId: "senderId",
|
||||
senderDisplayName: "Sender",
|
||||
body: "Some message",
|
||||
htmlBody: nil,
|
||||
date: .now)
|
||||
|
||||
let roomSummaries = [MockRoomSummary(displayName: "Alpha", topic: "Topic"),
|
||||
MockRoomSummary(displayName: "Beta"),
|
||||
MockRoomSummary(displayName: "Omega", lastMessage: eventBrief)]
|
||||
|
||||
viewModel.updateWithRoomSummaries(roomSummaries)
|
||||
|
||||
if let avatarImage = UIImage(systemName: "person.fill") {
|
||||
viewModel.updateWithUserAvatar(avatarImage)
|
||||
}
|
||||
|
||||
viewModel.showSessionVerificationBanner()
|
||||
let viewModel = HomeScreenViewModel(userSession: userSession,
|
||||
attributedStringBuilder: AttributedStringBuilder())
|
||||
|
||||
return NavigationView {
|
||||
HomeScreen(context: viewModel.context)
|
||||
|
||||
Reference in New Issue
Block a user