Suggestions view design improvements (#1955)

* snapshot tests

* making the padding of the composer internal

* setting the max width using the line fragment

* setting the max width using the line fragment

* Update ElementX/Sources/Screens/ComposerToolbar/View/CompletionSuggestionView.swift

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

* updated tests and pr suggestions

* better stencil

---------

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -262,7 +262,7 @@
     {
       "identity" : "swiftui-introspect",
       "kind" : "remoteSourceControl",
-      "location" : "https://github.com/siteline/SwiftUI-Introspect.git",
+      "location" : "https://github.com/siteline/SwiftUI-Introspect",
       "state" : {
         "revision" : "b94da693e57eaf79d16464b8b7c90d09cba4e290",
         "version" : "0.9.2"

ElementX/Sources/Other/AvatarSize.swift

@@ -51,6 +51,7 @@ enum UserAvatarSizeOnScreen {
     case inviteUsers
     case readReceipt
     case editUserDetails
+    case suggestions
 
     var value: CGFloat {
         switch self {
@@ -60,6 +61,8 @@ enum UserAvatarSizeOnScreen {
             return 32
         case .home:
             return 32
+        case .suggestions:
+            return 32
         case .settings:
             return 52
         case .roomDetails:

ElementX/Sources/Other/Pills/PillConstants.swift

@@ -25,5 +25,6 @@ enum PillConstants {
     /// Used by the WYSIWYG as the urlString value to identify @room mentions
     static let composerAtRoomURLString = "#"
     
-    static let maxWidth: CGFloat = 235
+    /// Used only to mock the max width in previews since the real max width is calculated by the line fragment width
+    static let mockMaxWidth: CGFloat = 235
 }

ElementX/Sources/Other/Pills/PillTextAttachment.swift

@@ -33,6 +33,7 @@ final class PillTextAttachment: NSTextAttachment {
         let fontData = pillData.fontData
         // Align the pill text vertically with the surrounding text.
         rect.origin.y = fontData.descender + (fontData.lineHeight - rect.height) / 2.0
+        rect.size.width = min(rect.size.width, lineFrag.width)
         return rect
     }
 }

ElementX/Sources/Other/Pills/PillView.swift

@@ -42,7 +42,6 @@ struct PillView: View {
         .padding(.trailing, 6)
         .padding(.vertical, 1)
         .background { Capsule().foregroundColor(backgroundColor) }
-        .frame(maxWidth: PillConstants.maxWidth)
         .onChange(of: context.viewState.displayText) { _ in
             didChangeText()
         }
@@ -55,18 +54,23 @@ struct PillView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadUser(isOwn: false))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loading")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadUser(isOwn: true))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loading Own")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadedUser(isOwn: false))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loaded Long")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadedUser(isOwn: true))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loaded Long Own")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .allUsers)) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("All Users")
     }
 }

ElementX/Sources/Screens/ComposerToolbar/View/CompletionSuggestionView.swift

@@ -23,19 +23,11 @@ struct CompletionSuggestionView: View {
     
     private enum Constants {
         static let topPadding: CGFloat = 8.0
-        static let listItemPadding: CGFloat = 4.0
-        static let lineSpacing: CGFloat = 10.0
-        static let maxHeight: CGFloat = 300.0
+        static let listItemPadding: CGFloat = 6.0
+        // added by the list itself when presenting the divider
+        static let listItemSpacing: CGFloat = 4.0
+        static let leadingPadding: CGFloat = 16.0
         static let maxVisibleRows = 4
-
-        /*
-         As of iOS 16.0, SwiftUI's List uses `UICollectionView` instead
-         of `UITableView` internally, this value is an adjustment to apply
-         to the list items in order to be as close as possible as the
-         `UITableView` display.
-         */
-        @available(iOS 16.0, *)
-        static let collectionViewPaddingCorrection: CGFloat = -5.0
     }
 
     // MARK: Public
@@ -73,16 +65,16 @@ struct CompletionSuggestionView: View {
                 }
             }
             .modifier(ListItemPaddingModifier(isFirst: items.first?.id == item.id))
+            .listRowInsets(.init(top: 0, leading: Constants.leadingPadding, bottom: 0, trailing: 0))
         }
         .listStyle(PlainListStyle())
-        .frame(height: min(Constants.maxHeight,
-                           min(contentHeightForRowCount(Constants.maxVisibleRows),
-                               contentHeightForRowCount(items.count))))
+        .frame(height: min(contentHeightForRowCount(Constants.maxVisibleRows),
+                           contentHeightForRowCount(items.count)))
         .background(Color.compound.bgCanvasDefault)
     }
     
     private func contentHeightForRowCount(_ count: Int) -> CGFloat {
-        (prototypeListItemFrame.height + (Constants.listItemPadding * 2) + Constants.lineSpacing) * CGFloat(count) + Constants.topPadding
+        (prototypeListItemFrame.height + Constants.listItemPadding * 2 + Constants.listItemSpacing) * CGFloat(count) - Constants.listItemSpacing / 2 + Constants.topPadding - Constants.listItemPadding
     }
 
     private struct ListItemPaddingModifier: ViewModifier {
@@ -93,12 +85,8 @@ struct CompletionSuggestionView: View {
         }
 
         func body(content: Content) -> some View {
-            var topPadding: CGFloat = isFirst ? Constants.listItemPadding + Constants.topPadding : Constants.listItemPadding
+            var topPadding: CGFloat = isFirst ? Constants.topPadding : Constants.listItemPadding
             var bottomPadding: CGFloat = Constants.listItemPadding
-            if #available(iOS 16.0, *) {
-                topPadding += Constants.collectionViewPaddingCorrection
-                bottomPadding += Constants.collectionViewPaddingCorrection
-            }
 
             return content
                 .padding(.top, topPadding)

ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift

@@ -46,6 +46,8 @@ struct ComposerToolbar: View {
                 bottomBar
             }
         }
+        .padding(.leading, 5)
+        .padding(.trailing, 8)
         .background {
             ViewFrameReader(frame: $frame)
         }

ElementX/Sources/Screens/ComposerToolbar/View/MentionSuggestionItemView.swift

@@ -21,13 +21,13 @@ struct MentionSuggestionItemView: View {
     let item: MentionSuggestionItem
     
     var body: some View {
-        HStack(alignment: .center) {
+        HStack(alignment: .center, spacing: 16) {
             LoadableAvatarImage(url: item.avatarURL,
                                 name: item.displayName,
                                 contentID: item.id,
-                                avatarSize: .custom(42),
+                                avatarSize: .user(on: .suggestions),
                                 imageProvider: imageProvider)
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 0) {
                 Text(item.displayName ?? item.id)
                     .font(.compound.bodyLG)
                     .foregroundColor(.compound.textPrimary)

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -35,8 +35,6 @@ struct RoomScreen: View {
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .safeAreaInset(edge: .bottom, spacing: 0) {
                 composerToolbar
-                    .padding(.leading, 5)
-                    .padding(.trailing, 8)
                     .padding(.bottom, composerToolbarContext.composerActionsEnabled ? 8 : 12)
                     .background {
                         if composerToolbarContext.composerActionsEnabled {

Tools/Prefire/PreviewTests.stencil

@@ -60,9 +60,7 @@ class PreviewTests: XCTestCase {
                                     file: file{% endif %},
                                     testName: testName)
 
-        if let failure,
-           !failure.contains("No reference was found on disk."),
-           !failure.contains("to test against the newly-recorded snapshot") {
+        if let failure {
             XCTFail(failure)
         }