removed images in pills in favour of text decos

FIX

fix

ElementX/Sources/Other/Pills/PillConstants.swift

@@ -1,21 +0,0 @@
-//
-// Copyright 2023, 2024 New Vector Ltd.
-//
-// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-// Please see LICENSE files in the repository root for full details.
-//
-
-import Foundation
-
-enum PillConstants {
-    static let atRoom = "@room"
-    static var everyone: String {
-        L10n.commonEveryone
-    }
-
-    /// Used by the WYSIWYG as the urlString value to identify @room mentions
-    static let composerAtRoomURLString = "#"
-    
-    /// 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/PillContext.swift

@@ -39,13 +39,8 @@ extension PillContext {
 }
 
 enum PillViewState: Equatable {
-    enum PillImage: Equatable {
-        case link
-        case roomAvatar(RoomAvatar)
-    }
-    
     case mention(isOwnMention: Bool, displayText: String)
-    case reference(avatar: PillImage, displayText: String)
+    case reference(displayText: String)
     case undefined
     
     var isOwnMention: Bool {
@@ -59,7 +54,7 @@ enum PillViewState: Equatable {
     
     var displayText: String {
         switch self {
-        case .mention(_, let displayText), .reference(_, let displayText):
+        case .mention(_, let displayText), .reference(let displayText):
             return displayText
         case .undefined:
             return ""
@@ -74,13 +69,4 @@ enum PillViewState: Equatable {
             return false
         }
     }
-    
-    var image: PillImage? {
-        switch self {
-        case .reference(let avatar, _):
-            return avatar
-        default:
-            return nil
-        }
-    }
 }

ElementX/Sources/Other/Pills/PillUtilities.swift

@@ -0,0 +1,45 @@
+//
+// Copyright 2023, 2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Foundation
+
+enum PillUtilities {
+    static let atRoom = "@room"
+    static var everyone: String {
+        L10n.commonEveryone
+    }
+
+    /// Used by the WYSIWYG as the urlString value to identify @room mentions
+    static let composerAtRoomURLString = "#"
+    
+    /// 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
+    
+    private static let roomDecoration = "#"
+    static func roomPillDisplayText(roomName: String?, rawRoomText: String) -> String {
+        guard let roomName else {
+            return rawRoomText
+        }
+        return "\(roomDecoration)\(roomName)"
+    }
+    
+    private static let eventDecoration = "💬 > "
+    static func eventPillDisplayText(roomName: String?, rawRoomText: String) -> String {
+        guard let roomName else {
+            return "\(eventDecoration)\(rawRoomText)"
+        }
+        return "\(eventDecoration)\(roomDecoration)\(roomName)"
+    }
+    
+    private static let userDecoration = "@"
+    static func userPillDisplayText(username: String?, userID: String) -> String {
+        guard let username else {
+            return userID
+        }
+        return "\(userDecoration)\(username)"
+    }
+}

ElementX/Sources/Other/Pills/PillView.swift

@@ -31,33 +31,14 @@ struct PillView: View {
     
     @ViewBuilder
     private var mainContent: some View {
-        HStack(spacing: 4) {
-            image
-            Text(context.viewState.displayText)
-                .font(.compound.bodyLGSemibold)
-                .foregroundColor(textColor)
-                .lineLimit(1)
-        }
-        .padding(.leading, 4)
-        .padding(.trailing, 6)
-        .padding(.vertical, 1)
-        .background { Capsule().foregroundColor(backgroundColor) }
-    }
-    
-    @ViewBuilder
-    private var image: some View {
-        if let image = context.viewState.image {
-            switch image {
-            case .link:
-                CompoundIcon(\.link, size: .custom(12), relativeTo: .compound.bodyLGSemibold)
-                    .padding(2)
-                    .foregroundStyle(.compound.bgCanvasDefault)
-                    .background(.compound.textLinkExternal)
-                    .clipShape(Circle())
-            case .roomAvatar(let avatar):
-                RoomAvatarImage(avatar: avatar, avatarSize: .custom(16), mediaProvider: mediaProvider)
-            }
-        }
+        Text(context.viewState.displayText)
+            .font(.compound.bodyLGSemibold)
+            .foregroundColor(textColor)
+            .lineLimit(1)
+            .padding(.leading, 4)
+            .padding(.trailing, 6)
+            .padding(.vertical, 1)
+            .background { Capsule().foregroundColor(backgroundColor) }
     }
 }
 
@@ -67,26 +48,43 @@ struct PillView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
         PillView(mediaProvider: mockMediaProvider,
                  context: PillContext.mock(viewState: .mention(isOwnMention: false,
-                                                               displayText: "@Alice"))) { }
-            .frame(maxWidth: PillConstants.mockMaxWidth)
+                                                               displayText: PillUtilities.userPillDisplayText(username: "User",
+                                                                                                              userID: "@alice:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
             .previewDisplayName("User")
         PillView(mediaProvider: mockMediaProvider,
                  context: PillContext.mock(viewState: .mention(isOwnMention: false,
-                                                               displayText: "@Alice but with a very very long name"))) { }
-            .frame(maxWidth: PillConstants.mockMaxWidth)
+                                                               displayText: PillUtilities.userPillDisplayText(username: "Alice but with a very long name",
+                                                                                                              userID: "@alice:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
             .previewDisplayName("User with a long name")
+        PillView(mediaProvider: mockMediaProvider,
+                 context: PillContext.mock(viewState: .mention(isOwnMention: false,
+                                                               displayText: PillUtilities.userPillDisplayText(username: nil, userID: "@alice:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
+            .previewDisplayName("User with missing name")
         PillView(mediaProvider: mockMediaProvider,
                  context: PillContext.mock(viewState: .mention(isOwnMention: true,
-                                                               displayText: "@Alice"))) { }
-            .frame(maxWidth: PillConstants.mockMaxWidth)
+                                                               displayText: PillUtilities.userPillDisplayText(username: "Alice", userID: "@alice:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
             .previewDisplayName("Own user")
         PillView(mediaProvider: mockMediaProvider,
-                 context: PillContext.mock(viewState: .reference(avatar: .roomAvatar(.room(id: "roomID", name: "Room", avatarURL: nil)), displayText: "Room"))) { }
-            .frame(maxWidth: PillConstants.mockMaxWidth)
+                 context: PillContext.mock(viewState: .reference(displayText: PillUtilities.roomPillDisplayText(roomName: "Room",
+                                                                                                                rawRoomText: "#room:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
             .previewDisplayName("Room")
         PillView(mediaProvider: mockMediaProvider,
-                 context: PillContext.mock(viewState: .reference(avatar: .link, displayText: L10n.screenRoomEventPill("Room")))) { }
-            .frame(maxWidth: PillConstants.mockMaxWidth)
+                 context: PillContext.mock(viewState: .reference(displayText: PillUtilities.roomPillDisplayText(roomName: nil,
+                                                                                                                rawRoomText: "#room:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
+            .previewDisplayName("Room without name")
+        PillView(mediaProvider: mockMediaProvider,
+                 context: PillContext.mock(viewState: .reference(displayText: PillUtilities.eventPillDisplayText(roomName: "Room", rawRoomText: "#room:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
             .previewDisplayName("Message link")
+        PillView(mediaProvider: mockMediaProvider,
+                 context: PillContext.mock(viewState: .reference(displayText: PillUtilities.eventPillDisplayText(roomName: nil, rawRoomText: "#room:matrix.org")))) { }
+            .frame(maxWidth: PillUtilities.mockMaxWidth)
+            .previewDisplayName("Message link without room name")
     }
 }