Surface threaded messages as regular replies in the timeline

Show thread replies inline in the main timeline instead of hiding them.
The SDK's sendReply() automatically forwards m.thread relations, so
thread continuity is preserved without any thread-specific UI.

- Add threadRootEventID to TimelineMessage model for SDK propagation
- Change hideThreadedEvents from true to false across all timeline modes
- Extract threadRoot from MsgLikeContent in TimelineMessageMapper
- Replace swipe-to-reply arrow with a lock-open action bar: short swipe
  locks the bar open, long swipe triggers reply directly
- Extract highlightBadge into its own computed property on MessageView

Assisted-By: Claude

Author: subpop

Packages/RelayInterface/Sources/RelayInterface/Models/TimelineMessage.swift

@@ -278,6 +278,12 @@ public struct TimelineMessage: Identifiable, Sendable, Equatable {
     /// or error badge next to the message.
     public var sendState: SendState?
 
+    /// The event ID of the thread root, if this message belongs to a thread.
+    ///
+    /// Present on thread replies. Used by the SDK to propagate `m.thread`
+    /// relations when the user replies to a threaded message.
+    public var threadRootEventID: String?
+
     /// Creates a new ``TimelineMessage`` value.
     ///
     /// - Parameters:
@@ -298,6 +304,7 @@ public struct TimelineMessage: Identifiable, Sendable, Equatable {
     ///   - replyDetail: Reply context, if this is a reply.
     ///   - isEdited: Whether the message has been edited. Defaults to `false`.
     ///   - sendState: The delivery state for outgoing messages. Defaults to `nil`.
+    ///   - threadRootEventID: The thread root event ID, if this is a thread reply.
     nonisolated public init(
         id: String,
         eventID: String? = nil,
@@ -314,7 +321,8 @@ public struct TimelineMessage: Identifiable, Sendable, Equatable {
         isHighlighted: Bool = false,
         replyDetail: ReplyDetail? = nil,
         isEdited: Bool = false,
-        sendState: SendState? = nil
+        sendState: SendState? = nil,
+        threadRootEventID: String? = nil
     ) {
         self.id = id
         self.eventID = eventID ?? id
@@ -332,6 +340,7 @@ public struct TimelineMessage: Identifiable, Sendable, Equatable {
         self.replyDetail = replyDetail
         self.isEdited = isEdited
         self.sendState = sendState
+        self.threadRootEventID = threadRootEventID
     }
 
     /// The best available display name for the sender, falling back to the Matrix user ID.

Relay/Views/Message/MessageView.swift

@@ -91,11 +91,7 @@ struct MessageView: View { // swiftlint:disable:this type_body_length
                     messageContent
                         .overlay(alignment: .topTrailing) {
                             if message.isHighlighted {
-                                Image(systemName: "at")
-                                    .font(.system(size: 9, weight: .bold))
-                                    .foregroundStyle(.white)
-                                    .frame(width: 16, height: 16)
-                                    .background(.red, in: Circle())
+                                highlightBadge
                                     .offset(x: 4, y: -4)
                             }
                         }
@@ -120,12 +116,6 @@ struct MessageView: View { // swiftlint:disable:this type_body_length
                                     showEmojiPicker = false
                                 }
                             }
-                            .background(alignment: .leading) {
-                                if swipeOffset > 0 {
-                                    replyArrow
-                                        .offset(x: -swipeOffset)
-                                }
-                            }
                     }
                 }
                 .frame(maxWidth: 500, alignment: message.isOutgoing ? .trailing : .leading)
@@ -396,17 +386,15 @@ struct MessageView: View { // swiftlint:disable:this type_body_length
 
 
 
-    // MARK: - Reply Arrow
+    // MARK: - Message Badges
 
-    private var replyArrow: some View {
-        let triggerThreshold: CGFloat = 80
-        let progress = min(swipeOffset / triggerThreshold, 1.0)
-
-        return Image(systemName: "arrowshape.turn.up.left.fill")
-            .font(.title)
-            .foregroundStyle(.secondary)
-            .scaleEffect(0.4 + 0.6 * progress)
-            .opacity(Double(progress))
+    /// A small badge indicating this message mentions the current user.
+    private var highlightBadge: some View {
+        Image(systemName: "at")
+            .font(.system(size: 9, weight: .bold))
+            .foregroundStyle(.white)
+            .frame(width: 16, height: 16)
+            .background(.red, in: Circle())
     }
 
     // MARK: - Bubble Color
@@ -534,7 +522,7 @@ struct MessageView: View { // swiftlint:disable:this type_body_length
                 timestamp: .now.addingTimeInterval(-20),
                 isOutgoing: true,
                 reactions: [],
-                replyDetail: nil,
+                replyDetail: nil
             ),
             currentUserID: "@me:matrix.org"
         )

Relay/Views/Timeline/TimelineRowView.swift

@@ -21,13 +21,23 @@ private struct SwipeOffsetKey: EnvironmentKey {
     static let defaultValue: CGFloat = 0
 }
 
+private struct SwipeIsLockedKey: EnvironmentKey {
+    static let defaultValue = false
+}
+
 extension EnvironmentValues {
     /// The current horizontal swipe offset applied during a swipe-to-reply gesture.
     /// Child views can read this to render swipe-dependent UI (e.g. a reply arrow).
     var swipeOffset: CGFloat {
         get { self[SwipeOffsetKey.self] }
         set { self[SwipeOffsetKey.self] = newValue }
     }
+
+    /// Whether the swipe action bar is locked open and awaiting a button tap.
+    var swipeIsLocked: Bool {
+        get { self[SwipeIsLockedKey.self] }
+        set { self[SwipeIsLockedKey.self] = newValue }
+    }
 }
 
 /// A single row in the timeline, rendering either a system event or a user message
@@ -86,13 +96,20 @@ struct TimelineRowView: View, Equatable {
         return swipeState.offset
     }
 
+    /// Whether the action bar on this row is locked open.
+    private var isSwipeLocked: Bool {
+        guard let swipeState, swipeState.swipingMessageId == row.message.id else { return false }
+        return swipeState.isLocked
+    }
+
     /// Whether this row should animate in.
     private var shouldAnimate: Bool { isNewlyAppended && !didAppear }
 
     var body: some View {
         rowContent
             .padding(.horizontal, 16)
             .environment(\.swipeOffset, currentSwipeOffset)
+            .environment(\.swipeIsLocked, isSwipeLocked)
             .offset(x: currentSwipeOffset)
             .opacity(shouldAnimate ? 0 : 1)
             .animation(
@@ -106,6 +123,28 @@ struct TimelineRowView: View, Equatable {
             }
     }
 
+    // MARK: - Swipe Action Bar
+
+    /// Action bar with reply and thread buttons, slides in from the left
+    /// while the row slides right. Rendered as a background so it stays
+    /// stationary while the row content shifts.
+    private var swipeActionBar: some View {
+        // Scale the reply button when swiping past the lock threshold (100pt)
+        // to hint that a long swipe (140pt+) triggers reply directly.
+        let longSwipeProgress = max(0, min((currentSwipeOffset - 100) / 80, 1.0))
+        let replyScale = 1.0 + longSwipeProgress * 0.8
+
+        return Button("Reply", systemImage: "arrowshape.turn.up.left.fill") {
+            onReply(message)
+        }
+        .labelStyle(.iconOnly)
+        .scaleEffect(replyScale)
+        .font(.title3)
+        .foregroundStyle(longSwipeProgress > 0 ? AnyShapeStyle(.tint) : AnyShapeStyle(.secondary))
+        .buttonStyle(.plain)
+        .allowsHitTesting(isSwipeLocked)
+    }
+
     @ViewBuilder
     private var rowContent: some View {
         if showUnreadMarker && message.id == firstUnreadMessageId {
@@ -134,25 +173,35 @@ struct TimelineRowView: View, Equatable {
                     onHighlightDismissed()
                 }
         } else {
-            MessageView(
-                message: message,
-                isLastInGroup: info.isLastInGroup,
-                showSenderName: info.showSenderName,
-                onToggleReaction: { key in
-                    onToggleReaction(message.eventID, key)
-                },
-                onTapReply: { eventID in
-                    onTapReply(eventID)
-                },
-                onAvatarDoubleTap: {
-                    onAvatarDoubleTap(message)
-                },
-                onUserTap: { userId in
-                    onUserTap(userId)
-                },
-                onRoomTap: onRoomTap,
-                currentUserID: currentUserID
-            )
+            ZStack(alignment: .leading) {
+                // Action bar sits behind the message, revealed as the row slides right
+                if currentSwipeOffset > 0 {
+                    swipeActionBar
+                        .opacity(min(currentSwipeOffset / 60, 1.0))
+                        .offset(x: message.isOutgoing ? 88 : -64,
+                                y: message.isOutgoing ? 0 : 8)
+                }
+
+                MessageView(
+                    message: message,
+                    isLastInGroup: info.isLastInGroup,
+                    showSenderName: info.showSenderName,
+                    onToggleReaction: { key in
+                        onToggleReaction(message.eventID, key)
+                    },
+                    onTapReply: { eventID in
+                        onTapReply(eventID)
+                    },
+                    onAvatarDoubleTap: {
+                        onAvatarDoubleTap(message)
+                    },
+                    onUserTap: { userId in
+                        onUserTap(userId)
+                    },
+                    onRoomTap: onRoomTap,
+                    currentUserID: currentUserID
+                )
+            }
             .id(message.id)
             .help(message.formattedTime)
             .onAppear { onAppear(row) }

Relay/Views/Timeline/TimelineTableView.swift

@@ -29,6 +29,8 @@ final class TimelineSwipeState {
     var swipingMessageId: String?
     /// The current horizontal offset of the swipe gesture.
     var offset: CGFloat = 0
+    /// When `true`, the action bar is locked open and awaiting a button tap.
+    var isLocked = false
 }
 
 /// A proxy that holds a reference to the ``TimelineTableViewController``
@@ -77,14 +79,18 @@ final class BottomAnchoredTableView: NSTableView {
     var onSwipeDelta: ((Int, CGFloat) -> Void)?
     /// Called with the row index when a horizontal swipe gesture ends.
     var onSwipeEnd: ((Int) -> Void)?
+    /// Called when the user clicks on the table while the action bar is locked open.
+    var onDismissActionBar: (() -> Void)?
+    /// Whether the action bar is currently locked open (checked for left-swipe dismiss).
+    var isActionBarLocked: (() -> Bool)?
 
     private enum GestureAxis { case undecided, horizontal, vertical }
     private var gestureAxis: GestureAxis = .undecided
     private var accumulatedDeltaX: CGFloat = 0
     private var swipingRow: Int = -1
     private let axisLockThreshold: CGFloat = 4
     private let triggerThreshold: CGFloat = 40
-    private let maxOffset: CGFloat = 100
+    private let maxOffset: CGFloat = 220
 
     override func scrollWheel(with event: NSEvent) {
         switch event.phase {
@@ -106,10 +112,17 @@ final class BottomAnchoredTableView: NSTableView {
                 let absX = abs(event.scrollingDeltaX)
                 let absY = abs(event.scrollingDeltaY)
                 if absX + absY >= axisLockThreshold {
-                    if absX > absY && event.scrollingDeltaX > 0 {
+                    let locked = isActionBarLocked?() ?? false
+                    if absX > absY && (event.scrollingDeltaX > 0 || locked) {
                         gestureAxis = .horizontal
                         accumulatedDeltaX = max(0, event.scrollingDeltaX)
-                        onSwipeDelta?(swipingRow, clampedOffset(accumulatedDeltaX))
+                        if locked && event.scrollingDeltaX < 0 {
+                            // Swiping left while locked — dismiss.
+                            onDismissActionBar?()
+                            gestureAxis = .undecided
+                        } else {
+                            onSwipeDelta?(swipingRow, clampedOffset(accumulatedDeltaX))
+                        }
                     } else {
                         gestureAxis = .vertical
                         super.scrollWheel(with: event)
@@ -140,6 +153,11 @@ final class BottomAnchoredTableView: NSTableView {
         }
     }
 
+    override func mouseDown(with event: NSEvent) {
+        onDismissActionBar?()
+        super.mouseDown(with: event)
+    }
+
     private func clampedOffset(_ delta: CGFloat) -> CGFloat {
         if delta <= triggerThreshold {
             return delta
@@ -295,6 +313,13 @@ final class TimelineTableViewController: NSViewController {
         tableView.onSwipeEnd = { [weak self] row in
             self?.handleSwipeEnd(row: row)
         }
+        tableView.onDismissActionBar = { [weak self] in
+            guard let self, self.swipeState.isLocked else { return }
+            self.dismissSwipeActionBar()
+        }
+        tableView.isActionBarLocked = { [weak self] in
+            self?.swipeState.isLocked ?? false
+        }
 
         scrollView.documentView = tableView
         scrollView.hasVerticalScroller = true
@@ -578,26 +603,46 @@ final class TimelineTableViewController: NSViewController {
 
     private func handleSwipeDelta(row: Int, offset: CGFloat) {
         guard row >= 0, row < rows.count else { return }
+        // If the action bar is locked and a new swipe starts, dismiss first.
+        if swipeState.isLocked {
+            swipeState.isLocked = false
+        }
         swipeState.swipingMessageId = rows[row].message.id
         swipeState.offset = offset
     }
 
     private func handleSwipeEnd(row: Int) {
         let triggerThreshold: CGFloat = 40
+        let lockOffset: CGFloat = 100
+        let longSwipeThreshold: CGFloat = 180
         let triggered = swipeState.offset >= triggerThreshold
 
-        // Animate the offset back to zero.
+        if triggered, row >= 0, row < rows.count, !rows[row].message.isSystemEvent {
+            if swipeState.offset >= longSwipeThreshold {
+                // Long swipe triggers reply directly.
+                dismissSwipeActionBar()
+                callbacks.onSwipeReply(rows[row])
+            } else {
+                // Short swipe locks the action bar open.
+                withAnimation(.snappy(duration: 0.25)) {
+                    swipeState.offset = lockOffset
+                    swipeState.isLocked = true
+                }
+            }
+        } else {
+            dismissSwipeActionBar()
+        }
+    }
+
+    /// Dismisses the swipe action bar with animation.
+    func dismissSwipeActionBar() {
         withAnimation(.snappy(duration: 0.25)) {
             swipeState.offset = 0
+            swipeState.isLocked = false
         }
-        // Clear the swiping ID after the animation settles.
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.25) { [weak self] in
             self?.swipeState.swipingMessageId = nil
         }
-
-        if triggered, row >= 0, row < rows.count, !rows[row].message.isSystemEvent {
-            callbacks.onSwipeReply(rows[row])
-        }
     }
 
     // MARK: - Height Cache