ios: fix chat list layout (#1094)

* ios: fix chat list layout

* set chat row height depending on dynamic type size

* update chat list layout sizes for ios15/16

apps/ios/Shared/Views/ChatList/ChatListNavLink.swift

@@ -9,8 +9,24 @@
 import SwiftUI
 import SimpleXChat
 
+private let rowHeights: [DynamicTypeSize: CGFloat] = [
+    .xSmall: 68,
+    .small: 72,
+    .medium: 76,
+    .large: 80,
+    .xLarge: 88,
+    .xxLarge: 94,
+    .xxxLarge: 104,
+    .accessibility1: 90,
+    .accessibility2: 100,
+    .accessibility3: 120,
+    .accessibility4: 130,
+    .accessibility5: 140
+]
+
 struct ChatListNavLink: View {
     @EnvironmentObject var chatModel: ChatModel
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     @State var chat: Chat
     @State private var showContactRequestDialog = false
     @State private var showJoinGroupDialog = false
@@ -53,7 +69,7 @@ struct ChatListNavLink: View {
             }
             .tint(.red)
         }
-        .frame(height: 80)
+        .frame(height: rowHeights[dynamicTypeSize])
 
         if contact.ready {
             v
@@ -68,7 +84,7 @@ struct ChatListNavLink: View {
         switch (groupInfo.membership.memberStatus) {
         case .memInvited:
             ChatPreviewView(chat: chat)
-                .frame(height: 80)
+                .frame(height: rowHeights[dynamicTypeSize])
                 .swipeActions(edge: .trailing, allowsFullSwipe: true) {
                     joinGroupButton(groupInfo.hostConnCustomUserProfileId)
                     if groupInfo.canDelete {
@@ -84,7 +100,7 @@ struct ChatListNavLink: View {
                 }
         case .memAccepted:
             ChatPreviewView(chat: chat)
-                .frame(height: 80)
+                .frame(height: rowHeights[dynamicTypeSize])
                 .onTapGesture {
                     AlertManager.shared.showAlert(groupInvitationAcceptedAlert())
                 }
@@ -95,7 +111,7 @@ struct ChatListNavLink: View {
                 label: { ChatPreviewView(chat: chat) },
                 disabled: !groupInfo.ready
             )
-            .frame(height: 80)
+            .frame(height: rowHeights[dynamicTypeSize])
             .swipeActions(edge: .leading, allowsFullSwipe: true) {
                 if chat.chatStats.unreadCount > 0 {
                     markReadButton()
@@ -170,7 +186,7 @@ struct ChatListNavLink: View {
             }
             .tint(.red)
         }
-        .frame(height: 80)
+        .frame(height: rowHeights[dynamicTypeSize])
         .onTapGesture { showContactRequestDialog = true }
         .confirmationDialog("Connection request", isPresented: $showContactRequestDialog, titleVisibility: .visible) {
             Button(chatModel.incognito ? "Accept incognito" : "Accept contact") { Task { await acceptContactRequest(contactRequest) } }
@@ -188,7 +204,7 @@ struct ChatListNavLink: View {
             }
             .tint(.red)
         }
-        .frame(height: 80)
+        .frame(height: rowHeights[dynamicTypeSize])
         .onTapGesture {
             AlertManager.shared.showAlertMsg(
                 title:
@@ -385,6 +401,6 @@ struct ChatListNavLink_Previews: PreviewProvider {
                 chatItems: []
             ))
         }
-        .previewLayout(.fixed(width: 360, height: 80))
+        .previewLayout(.fixed(width: 360, height: 82))
     }
 }

apps/ios/Shared/Views/ChatList/ChatPreviewView.swift

@@ -37,7 +37,7 @@ struct ChatPreviewView: View {
                         .foregroundColor(.secondary)
                         .padding(.top, 4)
                 }
-                .padding(.top, 4)
+                .padding(.bottom, 4)
                 .padding(.horizontal, 8)
 
                 ZStack(alignment: .topTrailing) {
@@ -45,14 +45,16 @@ struct ChatPreviewView: View {
                     if case .direct = chat.chatInfo {
                         chatStatusImage()
                             .padding(.top, 24)
-                            .padding(.bottom, 4)
                             .frame(maxWidth: .infinity, alignment: .trailing)
                     }
                 }
-
                 .padding(.trailing, 8)
+                
+                Spacer()
             }
+            .frame(maxHeight: .infinity)
         }
+        .padding(.bottom, -8)
     }
 
     @ViewBuilder private func chatPreviewImageOverlayIcon() -> some View {
@@ -82,7 +84,7 @@ struct ChatPreviewView: View {
             .font(.title3)
             .fontWeight(.bold)
             .lineLimit(1)
-            .frame(maxHeight: .infinity, alignment: .topLeading)
+            .frame(alignment: .topLeading)
         switch (chat.chatInfo) {
         case .direct:
             v.foregroundColor(chat.chatInfo.ready ? .primary : .secondary)
@@ -102,10 +104,11 @@ struct ChatPreviewView: View {
         if let cItem = cItem {
             ZStack(alignment: .topTrailing) {
                 (itemStatusMark(cItem) + messageText(cItem.text, cItem.formattedText, cItem.memberDisplayName, preview: true))
-                    .frame(maxWidth: .infinity, minHeight: 44, maxHeight: 44, alignment: .topLeading)
+                    .lineLimit(2)
+                    .multilineTextAlignment(.leading)
+                    .frame(maxWidth: .infinity, alignment: .topLeading)
                     .padding(.leading, 8)
                     .padding(.trailing, 36)
-                    .padding(.bottom, 4)
                 if unread > 0 {
                     unreadCountText(unread)
                         .font(.caption)

apps/ios/Shared/Views/ChatList/ContactConnectionView.swift

@@ -21,15 +21,14 @@ struct ContactConnectionView: View {
                 .frame(width: 48, height: 48)
                 .frame(width: 63, height: 63)
                 .padding(.leading, 4)
-            VStack(alignment: .leading, spacing: 4) {
+            VStack(alignment: .leading, spacing: 0) {
                 HStack(alignment: .top) {
                     Text(contactConnection.chatViewName)
                         .font(.title3)
                         .fontWeight(.bold)
                         .foregroundColor(.secondary)
                         .padding(.leading, 8)
-                        .padding(.top, 4)
-                        .frame(maxHeight: .infinity, alignment: .topLeading)
+                        .frame(alignment: .topLeading)
                     Spacer()
                     formatTimestampText(contactConnection.updatedAt)
                         .font(.subheadline)
@@ -38,12 +37,15 @@ struct ContactConnectionView: View {
                         .frame(minWidth: 60, alignment: .trailing)
                         .foregroundColor(.secondary)
                 }
+                .padding(.bottom, 2)
+
                 Text(contactConnection.description)
-                    .frame(minHeight: 44, maxHeight: 44, alignment: .topLeading)
+                    .frame(alignment: .topLeading)
                     .padding([.leading, .trailing], 8)
-                    .padding(.bottom, 4)
-                    .padding(.top, 1)
+
+                Spacer()
             }
+            .frame(maxHeight: .infinity)
         }
     }
 }

apps/ios/Shared/Views/ChatList/ContactRequestView.swift

@@ -15,19 +15,18 @@ struct ContactRequestView: View {
     @ObservedObject var chat: Chat
 
     var body: some View {
-        return HStack(spacing: 8) {
+        HStack(spacing: 8) {
             ChatInfoImage(chat: chat)
                 .frame(width: 63, height: 63)
                 .padding(.leading, 4)
-            VStack(alignment: .leading, spacing: 4) {
+            VStack(alignment: .leading, spacing: 0) {
                 HStack(alignment: .top) {
                     Text(contactRequest.chatViewName)
                         .font(.title3)
                         .fontWeight(.bold)
                         .foregroundColor(chatModel.incognito ? .indigo : .accentColor)
                         .padding(.leading, 8)
-                        .padding(.top, 4)
-                        .frame(maxHeight: .infinity, alignment: .topLeading)
+                        .frame(alignment: .topLeading)
                     Spacer()
                     formatTimestampText(contactRequest.updatedAt)
                         .font(.subheadline)
@@ -36,12 +35,15 @@ struct ContactRequestView: View {
                         .frame(minWidth: 60, alignment: .trailing)
                         .foregroundColor(.secondary)
                 }
+                .padding(.bottom, 2)
+
                 Text("wants to connect to you!")
-                    .frame(minHeight: 44, maxHeight: 44, alignment: .topLeading)
+                    .frame(alignment: .topLeading)
                     .padding([.leading, .trailing], 8)
-                    .padding(.bottom, 4)
-                    .padding(.top, 1)
+                
+                Spacer()
             }
+            .frame(maxHeight: .infinity)
         }
     }
 }