Show user statuses in mention pills.

This commit is contained in:
Doug
2026-07-10 13:13:50 +01:00
committed by Doug
parent 01b946926f
commit 6199ab596f
7 changed files with 73 additions and 31 deletions
@@ -52,7 +52,8 @@ final class PillAttachmentViewProvider: NSTextAttachmentViewProvider, NSSecureCo
let context: PillContext let context: PillContext
if ProcessInfo.isXcodePreview || ProcessInfo.isRunningTests { if ProcessInfo.isXcodePreview || ProcessInfo.isRunningTests {
// The mock viewModel simulates the loading logic for testing purposes // The mock viewModel simulates the loading logic for testing purposes
context = PillContext.mock(viewState: .mention(isOwnMention: false, displayText: "Alice"), delay: .seconds(2)) context = PillContext.mock(viewState: .mention(isOwnMention: false, displayText: "Alice", statusEmoji: nil),
delay: .seconds(2))
} else if let timelineContext = provider.delegate?.timelineContext { } else if let timelineContext = provider.delegate?.timelineContext {
context = PillContext(timelineContext: timelineContext, data: pillData) context = PillContext(timelineContext: timelineContext, data: pillData)
} else { } else {
+19 -10
View File
@@ -26,7 +26,7 @@ extension PillContext {
// This is just for previews so the internal data doesn't really matter // This is just for previews so the internal data doesn't really matter
let viewModel = PillContext(timelineContext: TimelineViewModel.mock.context, data: PillTextAttachmentData(type: .allUsers, font: .preferredFont(forTextStyle: .body))) let viewModel = PillContext(timelineContext: TimelineViewModel.mock.context, data: PillTextAttachmentData(type: .allUsers, font: .preferredFont(forTextStyle: .body)))
if let delay { if let delay {
viewModel.viewState = .mention(isOwnMention: false, displayText: "placeholder") viewModel.viewState = .mention(isOwnMention: false, displayText: "placeholder", statusEmoji: nil)
Task { Task {
try? await Task.sleep(for: delay) try? await Task.sleep(for: delay)
viewModel.viewState = viewState viewModel.viewState = viewState
@@ -39,34 +39,43 @@ extension PillContext {
} }
enum PillViewState: Equatable { enum PillViewState: Equatable {
case mention(isOwnMention: Bool, displayText: String) case mention(isOwnMention: Bool, displayText: String, statusEmoji: Character?)
case reference(displayText: String) case reference(displayText: String)
case undefined case undefined
var isOwnMention: Bool { var isOwnMention: Bool {
switch self { switch self {
case .mention(let isOwnMention, _): case .mention(let isOwnMention, _, _):
return isOwnMention isOwnMention
default: default:
return false false
} }
} }
var displayText: String { var displayText: String {
switch self { switch self {
case .mention(_, let displayText), .reference(let displayText): case .mention(_, let displayText, _), .reference(let displayText):
return displayText displayText
case .undefined: case .undefined:
return "" ""
}
}
var statusEmoji: Character? {
switch self {
case .mention(_, _, let statusEmoji):
statusEmoji
default:
nil
} }
} }
var isUndefined: Bool { var isUndefined: Bool {
switch self { switch self {
case .undefined: case .undefined:
return true true
default: default:
return false false
} }
} }
} }
+34 -12
View File
@@ -30,14 +30,20 @@ struct PillView: View {
} }
private var mainContent: some View { private var mainContent: some View {
Text(context.viewState.displayText) HStack(spacing: 4) {
.font(.compound.bodyLGSemibold) Text(context.viewState.displayText)
.foregroundColor(textColor) .lineLimit(1)
.lineLimit(1)
.padding(.leading, 4) if let emoji = context.viewState.statusEmoji {
.padding(.trailing, 6) Text(String(emoji))
.padding(.vertical, 1) }
.background { Capsule().foregroundColor(backgroundColor) } }
.font(.compound.bodyLGSemibold)
.foregroundColor(textColor)
.padding(.leading, 4)
.padding(.trailing, 6)
.padding(.vertical, 1)
.background(backgroundColor, in: .capsule)
} }
} }
@@ -47,22 +53,38 @@ struct PillView_Previews: PreviewProvider, TestablePreview {
static var previews: some View { static var previews: some View {
PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false, PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false,
displayText: PillUtilities.userPillDisplayText(username: "User", displayText: PillUtilities.userPillDisplayText(username: "User",
userID: "@alice:matrix.org")))) { } userID: "@alice:matrix.org"),
statusEmoji: nil))) { }
.frame(maxWidth: PillUtilities.mockMaxWidth) .frame(maxWidth: PillUtilities.mockMaxWidth)
.previewDisplayName("User") .previewDisplayName("User")
PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false, PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false,
displayText: PillUtilities.userPillDisplayText(username: "Alice but with a very long name", displayText: PillUtilities.userPillDisplayText(username: "Alice but with a very long name",
userID: "@alice:matrix.org")))) { } userID: "@alice:matrix.org"),
statusEmoji: nil))) { }
.frame(maxWidth: PillUtilities.mockMaxWidth) .frame(maxWidth: PillUtilities.mockMaxWidth)
.previewDisplayName("User with a long name") .previewDisplayName("User with a long name")
PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false, PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false,
displayText: PillUtilities.userPillDisplayText(username: nil, userID: "@alice:matrix.org")))) { } displayText: PillUtilities.userPillDisplayText(username: nil, userID: "@alice:matrix.org"),
statusEmoji: nil))) { }
.frame(maxWidth: PillUtilities.mockMaxWidth) .frame(maxWidth: PillUtilities.mockMaxWidth)
.previewDisplayName("User with missing name") .previewDisplayName("User with missing name")
PillView(context: PillContext.mock(viewState: .mention(isOwnMention: true, PillView(context: PillContext.mock(viewState: .mention(isOwnMention: true,
displayText: PillUtilities.userPillDisplayText(username: "Alice", userID: "@alice:matrix.org")))) { } displayText: PillUtilities.userPillDisplayText(username: "Alice", userID: "@alice:matrix.org"),
statusEmoji: nil))) { }
.frame(maxWidth: PillUtilities.mockMaxWidth) .frame(maxWidth: PillUtilities.mockMaxWidth)
.previewDisplayName("Own user") .previewDisplayName("Own user")
PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false,
displayText: PillUtilities.userPillDisplayText(username: "User",
userID: "@alice:matrix.org"),
statusEmoji: "🎂"))) { }
.frame(maxWidth: PillUtilities.mockMaxWidth)
.previewDisplayName("User with Status")
PillView(context: PillContext.mock(viewState: .mention(isOwnMention: false,
displayText: PillUtilities.userPillDisplayText(username: "Alice but with a very long name",
userID: "@alice:matrix.org"),
statusEmoji: "🚆"))) { }
.frame(maxWidth: PillUtilities.mockMaxWidth)
.previewDisplayName("User with status and long name")
PillView(context: PillContext.mock(viewState: .reference(displayText: PillUtilities.roomPillDisplayText(roomName: "Room", PillView(context: PillContext.mock(viewState: .reference(displayText: PillUtilities.roomPillDisplayText(roomName: "Room",
rawRoomText: "#room:matrix.org")))) { } rawRoomText: "#room:matrix.org")))) { }
.frame(maxWidth: PillUtilities.mockMaxWidth) .frame(maxWidth: PillUtilities.mockMaxWidth)
@@ -48,6 +48,7 @@ struct PillViewOnBubble_Previews: PreviewProvider, TestablePreview {
static func makeViewState(isOwnMention: Bool) -> PillViewState { static func makeViewState(isOwnMention: Bool) -> PillViewState {
.mention(isOwnMention: isOwnMention, .mention(isOwnMention: isOwnMention,
displayText: PillUtilities.userPillDisplayText(username: isOwnMention ? "Alice" : "Bob", displayText: PillUtilities.userPillDisplayText(username: isOwnMention ? "Alice" : "Bob",
userID: isOwnMention ? "@alice:matrix.org" : "@bob:matrix.org")) userID: isOwnMention ? "@alice:matrix.org" : "@bob:matrix.org"),
statusEmoji: nil)
} }
} }
@@ -228,6 +228,7 @@ enum TimelineAlertInfoType: Hashable {
struct RoomMemberState { struct RoomMemberState {
let displayName: String? let displayName: String?
let avatarURL: URL? let avatarURL: URL?
let status: UserStatus
} }
/// Used as the state for the TimelineView, to avoid having the context continuously refresh the list of items on each small change. /// Used as the state for the TimelineView, to avoid having the context continuously refresh the list of items on each small change.
@@ -425,7 +425,9 @@ class TimelineViewModel: TimelineViewModelType, TimelineViewModelProtocol {
private func updateMembers(_ members: [RoomMemberProxyProtocol]) { private func updateMembers(_ members: [RoomMemberProxyProtocol]) {
state.members = members.reduce(into: [String: RoomMemberState]()) { dictionary, member in state.members = members.reduce(into: [String: RoomMemberState]()) { dictionary, member in
dictionary[member.userID] = RoomMemberState(displayName: member.displayName, avatarURL: member.avatarURL) dictionary[member.userID] = RoomMemberState(displayName: member.displayName,
avatarURL: member.avatarURL,
status: member.status)
if member.userID == roomProxy.ownUserID { if member.userID == roomProxy.ownUserID {
currentUserProxy = member currentUserProxy = member
} }
@@ -1010,21 +1012,25 @@ class TimelineViewModel: TimelineViewModelType, TimelineViewModelProtocol {
case let .user(id): case let .user(id):
let isOwnMention = id == state.ownUserID let isOwnMention = id == state.ownUserID
if let profile = state.members[id] { if let profile = state.members[id] {
pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: PillUtilities.userPillDisplayText(username: profile.displayName, userID: id)) pillContext.viewState = .mention(isOwnMention: isOwnMention,
displayText: PillUtilities.userPillDisplayText(username: profile.displayName, userID: id),
statusEmoji: profile.status.displayed?.emoji)
} else { } else {
pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: id) pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: id, statusEmoji: nil)
pillContext.cancellable = context.$viewState pillContext.cancellable = context.$viewState
.compactMap { $0.members[id] } .compactMap { $0.members[id] }
.sink { [weak pillContext] profile in .sink { [weak pillContext] profile in
guard let pillContext else { guard let pillContext else {
return return
} }
pillContext.viewState = .mention(isOwnMention: isOwnMention, displayText: PillUtilities.userPillDisplayText(username: profile.displayName, userID: id)) pillContext.viewState = .mention(isOwnMention: isOwnMention,
displayText: PillUtilities.userPillDisplayText(username: profile.displayName, userID: id),
statusEmoji: profile.status.displayed?.emoji)
pillContext.cancellable = nil pillContext.cancellable = nil
} }
} }
case .allUsers: case .allUsers:
pillContext.viewState = .mention(isOwnMention: true, displayText: PillUtilities.atRoom) pillContext.viewState = .mention(isOwnMention: true, displayText: PillUtilities.atRoom, statusEmoji: nil)
case .event(let room): case .event(let room):
let pillViewState: PillViewState let pillViewState: PillViewState
switch room { switch room {
@@ -63,13 +63,15 @@ struct ReadReceiptCell_Previews: PreviewProvider, TestablePreview {
ReadReceiptCell(readReceipt: .init(userID: "@test:matrix.org", ReadReceiptCell(readReceipt: .init(userID: "@test:matrix.org",
formattedTimestamp: "10:00"), formattedTimestamp: "10:00"),
memberState: .init(displayName: "Test", memberState: .init(displayName: "Test",
avatarURL: nil), avatarURL: nil,
status: .init()),
mediaProvider: MediaProviderMock(.init())) mediaProvider: MediaProviderMock(.init()))
.previewDisplayName("No Image") .previewDisplayName("No Image")
ReadReceiptCell(readReceipt: .init(userID: "@test:matrix.org", ReadReceiptCell(readReceipt: .init(userID: "@test:matrix.org",
formattedTimestamp: "10:00"), formattedTimestamp: "10:00"),
memberState: .init(displayName: "Test", memberState: .init(displayName: "Test",
avatarURL: .mockMXCUserAvatar), avatarURL: .mockMXCUserAvatar,
status: .init()),
mediaProvider: MediaProviderMock(.init())) mediaProvider: MediaProviderMock(.init()))
.previewDisplayName("With Image") .previewDisplayName("With Image")
ReadReceiptCell(readReceipt: .init(userID: "@test:matrix.org", ReadReceiptCell(readReceipt: .init(userID: "@test:matrix.org",