Add support for showing the user's own status over their avatar on the app's Settings button. (#5912)

* Add a common .inverseMask view modifier and use a blend mode for efficiency.

This also fixes the snapshot rendering 🎉

* Add support for the status emoji on the app's Setting button.

* Align the room header decoration icons with the status emoji.

* Add missing snapshots.
This commit is contained in:
Doug
2026-07-22 14:53:32 +01:00
committed by GitHub
parent e4f919e58f
commit b46189d05f
103 changed files with 376 additions and 268 deletions
@@ -52,39 +52,42 @@ struct RoomHeaderView: View {
avatarImage
.accessibilityHidden(true)
HStack(spacing: 4) {
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 8) {
Text(roomName)
.lineLimit(1)
.font(.compound.bodyMDSemibold)
.foregroundStyle(.compound.textPrimary)
.accessibilityIdentifier(A11yIdentifiers.roomScreen.name)
if let statusEmoji = dmRecipientDetails.statusEmoji {
Text(String(statusEmoji))
.font(.compound.bodyLG)
.foregroundStyle(.compound.textPrimary)
}
}
if let roomSubtitle {
Text(roomSubtitle)
.lineLimit(1)
.font(.compound.bodyXS)
.foregroundStyle(.compound.textSecondary)
}
}
VStack(alignment: .leading, spacing: 0) {
roomDetails
if let verificationState = dmRecipientDetails.verification {
VerificationBadge(verificationState: verificationState, size: .xSmall, relativeTo: .compound.bodyMDSemibold)
if let roomSubtitle {
Text(roomSubtitle)
.lineLimit(1)
.font(.compound.bodyXS)
.foregroundStyle(.compound.textSecondary)
}
}
}
}
private var roomDetails: some View {
HStack(spacing: 4) {
HStack(spacing: 8) {
Text(roomName)
.lineLimit(1)
.font(.compound.bodyMDSemibold)
.foregroundStyle(.compound.textPrimary)
.accessibilityIdentifier(A11yIdentifiers.roomScreen.name)
if let historySharingIcon {
CompoundIcon(historySharingIcon, size: .xSmall, relativeTo: .compound.bodyMDSemibold)
.foregroundStyle(.compound.iconInfoPrimary)
if let statusEmoji = dmRecipientDetails.statusEmoji {
Text(String(statusEmoji))
.font(.compound.bodyLG)
.foregroundStyle(.compound.textPrimary)
}
}
if let verificationState = dmRecipientDetails.verification {
VerificationBadge(verificationState: verificationState, size: .xSmall, relativeTo: .compound.bodyMDSemibold)
}
if let historySharingIcon {
CompoundIcon(historySharingIcon, size: .xSmall, relativeTo: .compound.bodyMDSemibold)
.foregroundStyle(.compound.iconInfoPrimary)
}
}
}