Show user statuses in the timeline.

ElementX/Sources/Screens/Timeline/View/Style/TimelineItemBubbledStylerView.swift

@@ -54,7 +54,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     
     var body: some View {
         ZStack(alignment: .trailingFirstTextBaseline) {
-            VStack(alignment: alignment, spacing: -12) {
+            VStack(alignment: alignment, spacing: -8) {
                 if !timelineItem.isOutgoing, !isDM {
                     header
                         .zIndex(1)
@@ -94,19 +94,26 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
         if shouldShowSenderDetails {
             HStack(alignment: .top, spacing: 4) {
                 TimelineSenderAvatarView(timelineItem: timelineItem)
+                
                 HStack(alignment: .center, spacing: 4) {
                     Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
-                        .font(.compound.bodySMSemibold)
+                        .font(.compound.bodyMDSemibold)
-                        .foregroundColor(.compound.decorativeColor(for: timelineItem.sender.id).text)
+                        .foregroundStyle(.compound.decorativeColor(for: timelineItem.sender.id).text)
+                    
+                    if let statusEmoji = timelineItem.sender.status.displayed?.emoji {
+                        Text(String(statusEmoji))
+                            .font(.compound.bodyMDSemibold)
+                            .foregroundStyle(.compound.textPrimary)
+                    }
                     
                     if timelineItem.sender.displayName != nil, timelineItem.sender.isDisplayNameAmbiguous {
                         Text(timelineItem.sender.id)
                             .font(.compound.bodyXS)
-                            .foregroundColor(.compound.textSecondary)
+                            .foregroundStyle(.compound.textSecondary)
                     }
                 }
                 .lineLimit(1)
-                .scaledPadding(.vertical, 3)
+                .scaledPadding(.top, 3)
             }
             // sender info are read inside the `TimelineAccessibilityModifier`
             .accessibilityHidden(true)

ElementX/Sources/Screens/Timeline/View/TimelineSenderAvatarView.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import Foundation
 import SwiftUI
 
@@ -21,7 +22,9 @@ struct TimelineSenderAvatarView: View {
                             avatarSize: .user(on: .timeline),
                             mediaProvider: context?.mediaProvider)
             .overlay {
-                Circle().stroke(Color.compound.bgCanvasDefault, lineWidth: 3)
+                Circle()
+                    .inset(by: -1)
+                    .stroke(.compound.bgCanvasDefault, lineWidth: 2)
             }
     }
 }

ElementX/Sources/Services/Timeline/Fixtures/TimelineFixtures.swift

@@ -19,7 +19,7 @@ enum TimelineFixtures {
                              isOutgoing: false,
                              isEditable: false,
                              canBeRepliedTo: true,
-                             sender: .init(id: "", displayName: "Jacob"),
+                             sender: .init(id: "", displayName: "Jacob", status: .mock(text: "Rowing", emoji: "🚣‍♂️")),
                              content: .init(body: "That looks so good!"),
                              properties: RoomTimelineItemProperties(isEdited: true)),
         TextRoomTimelineItem(id: .event(uniqueID: .init("TimelineFixtures.default.1"),