removed images in pills in favour of text decos

FIX fix
2026-11-02 12:07:55 +00:00 · 2025-03-17 11:37:50 +01:00
parent bbcb7e3641
commit f248bdfd92
41 changed files with 201 additions and 200 deletions
@@ -27,7 +27,7 @@ enum MatrixEntityRegex: String {
        case .uri:
            return "matrix:(r|u|roomid)\\/[A-Z0-9\\-._~:/?#\\[\\]@!$&'()*+,;=%]*(?:\\?[A-Z0-9\\-._~:/?#\\[\\]@!$&'()*+,;=%]*)?"
        case .allUsers:
-            return PillConstants.atRoom
+            return PillUtilities.atRoom
        }
    }
    
@@ -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
-}
@@ -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
-        }
-    }
 }
@@ -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)"
+    }
+}
@@ -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")
    }
 }
@@ -81,7 +81,7 @@ final class CompletionSuggestionService: CompletionSuggestionServiceProtocol {
        
        if canMentionAllUsers,
           !roomProxy.isDirectOneToOneRoom,
-           Self.shouldIncludeMember(userID: PillConstants.atRoom, displayName: PillConstants.everyone, searchText: suggestionTrigger.text) {
+           Self.shouldIncludeMember(userID: PillUtilities.atRoom, displayName: PillUtilities.everyone, searchText: suggestionTrigger.text) {
            membersSuggestion
                .insert(SuggestionItem(suggestionType: .allUsers(roomProxy.details.avatar), range: suggestionTrigger.range, rawSuggestionText: suggestionTrigger.text), at: 0)
        }
@@ -49,7 +49,7 @@ struct SuggestionItem: Identifiable, Equatable {
        case .user(let user):
            user.id
        case .allUsers:
-            PillConstants.atRoom
+            PillUtilities.atRoom
        case .room(let room):
            room.id
        }
@@ -58,7 +58,7 @@ struct SuggestionItem: Identifiable, Equatable {
    var displayName: String {
        switch suggestionType {
        case .allUsers:
-            return PillConstants.everyone
+            return PillUtilities.everyone
        case .user(let user):
            return user.displayName ?? user.id
        case .room(let room):
@@ -69,7 +69,7 @@ struct SuggestionItem: Identifiable, Equatable {
    var subtitle: String? {
        switch suggestionType {
        case .allUsers:
-            return PillConstants.atRoom
+            return PillUtilities.atRoom
        case .user(let user):
            return user.displayName == nil ? nil : user.id
        case .room(let room):
@@ -413,7 +413,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
                // Remove the attribute so it doesn't get inherited by the new string
                attributedString.removeAttribute(.MatrixAllUsersMention, range: range)
                
-                attributedString.replaceCharacters(in: range, with: PillConstants.atRoom)
+                attributedString.replaceCharacters(in: range, with: PillUtilities.atRoom)
                containsAtRoom = true
                
                stop.pointee = true
@@ -464,7 +464,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
            
            let attributedString: NSMutableAttributedString
            // This is the all room mention special case
-            if urlString == PillConstants.composerAtRoomURLString {
+            if urlString == PillUtilities.composerAtRoomURLString {
                attributedString = NSMutableAttributedString(string: string, attributes: [.MatrixAllUsersMention: true])
            } else {
                attributedString = NSMutableAttributedString(string: string, attributes: [.link: URL(string: urlString) as Any])
@@ -841,11 +841,7 @@ class TimelineViewModel: TimelineViewModelType, TimelineViewModelProtocol {
        case let .user(id):
            let isOwnMention = id == state.ownUserID
            if let profile = state.members[id] {
-                var name = id
-                if let displayName = profile.displayName {
-                    name = "@\(displayName)"
-                }
-                pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: name)
+                pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: PillUtilities.userPillDisplayText(username: profile.displayName, userID: id))
            } else {
                pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: id)
                pillContext.cancellable = context.$viewState
@@ -854,49 +850,29 @@ class TimelineViewModel: TimelineViewModelType, TimelineViewModelProtocol {
                        guard let pillContext else {
                            return
                        }
-                        
-                        var name = id
-                        if let displayName = profile.displayName {
-                            name = "@\(displayName)"
-                        }
-                        pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: name)
+                        pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: PillUtilities.userPillDisplayText(username: profile.displayName, userID: id))
                        pillContext.cancellable = nil
                    }
            }
        case .allUsers:
-            pillContext.viewState = .mention(isOwnMention: true, displayText: PillConstants.atRoom)
+            pillContext.viewState = .mention(isOwnMention: true, displayText: PillUtilities.atRoom)
        case .event(let room):
-            var pillViewState: PillViewState = .reference(avatar: .link, displayText: L10n.screenRoomEventPill(L10n.commonRoom))
-            defer {
-                pillContext.viewState = pillViewState
-            }
-            
+            let pillViewState: PillViewState
            switch room {
            case .roomAlias(let alias):
-                guard let roomSummary = clientProxy.roomSummaryForAlias(alias) else {
-                    return
-                }
-                // We always show the link image for event permalinks
-                pillViewState = .reference(avatar: .link, displayText: L10n.screenRoomEventPill(roomSummary.name))
+                let roomSummary = clientProxy.roomSummaryForAlias(alias)
+                pillViewState = .reference(displayText: PillUtilities.eventPillDisplayText(roomName: roomSummary?.name, rawRoomText: alias))
            case .roomID(let id):
-                guard let roomSummary = clientProxy.roomSummaryForIdentifier(id) else {
-                    return
-                }
-                // We always show the link image for event permalinks
-                pillViewState = .reference(avatar: .link, displayText: L10n.screenRoomEventPill(roomSummary.name))
+                let roomSummary = clientProxy.roomSummaryForIdentifier(id)
+                pillViewState = .reference(displayText: PillUtilities.eventPillDisplayText(roomName: roomSummary?.name, rawRoomText: id))
            }
+            pillContext.viewState = pillViewState
        case .roomAlias(let alias):
-            guard let roomSummary = clientProxy.roomSummaryForAlias(alias) else {
-                pillContext.viewState = .reference(avatar: .link, displayText: alias)
-                return
-            }
-            pillContext.viewState = .reference(avatar: .roomAvatar(roomSummary.avatar), displayText: roomSummary.name)
+            let roomSummary = clientProxy.roomSummaryForAlias(alias)
+            pillContext.viewState = .reference(displayText: PillUtilities.roomPillDisplayText(roomName: roomSummary?.name, rawRoomText: alias))
        case .roomID(let id):
-            guard let roomSummary = clientProxy.roomSummaryForIdentifier(id) else {
-                pillContext.viewState = .reference(avatar: .link, displayText: id)
-                return
-            }
-            pillContext.viewState = .reference(avatar: .roomAvatar(roomSummary.avatar), displayText: roomSummary.name)
+            let roomSummary = clientProxy.roomSummaryForIdentifier(id)
+            pillContext.viewState = .reference(displayText: PillUtilities.roomPillDisplayText(roomName: roomSummary?.name, rawRoomText: id))
        }
    }
    
@@ -198,7 +198,7 @@ struct TimelineReplyView: View {
                }
                
                if attributes[.MatrixAllUsersMention] as? Bool == true {
-                    attributedString.replaceCharacters(in: range, with: PillConstants.atRoom)
+                    attributedString.replaceCharacters(in: range, with: PillUtilities.atRoom)
                }
            }
            return attributedString.string