feat: add hover actions panel for timeline messages

beezly · beezly · commit 51b72987125e · 2026-03-17T19:43:23.000Z
Floating panel with quick reactions (👍🎉❤️), reply, reply in thread,
and pin actions. Panel is dismissed when scrolling or resizing, and
hidden when the row top is outside the visible timeline area.
diff --git a/Mactrix/Models/LiveTimeline.swift b/Mactrix/Models/LiveTimeline.swift
@@ -20,7 +20,26 @@ public final class LiveTimeline {
     public private(set) var focusedTimelineEventId: EventOrTransactionId?
     // public private(set) var focusedTimelineGroupId: String?
 
-    public var sendReplyTo: MatrixRustSDK.EventTimelineItem?
+    public var sendReplyTo: MatrixRustSDK.EventTimelineItem? {
+        get { _sendReplyTo }
+        set {
+            let id = newValue?.eventOrTransactionId.id ?? "nil"
+            let msg = "sendReplyTo changed to \(id)"
+            if newValue == nil && _sendReplyTo != nil {
+                let stack = Thread.callStackSymbols.prefix(15).joined(separator: "\n  ")
+                Self.debugLog("\(msg) — CLEARED\n  \(stack)")
+            } else {
+                Self.debugLog(msg)
+            }
+            _sendReplyTo = newValue
+        }
+    }
+    private var _sendReplyTo: MatrixRustSDK.EventTimelineItem?
+
+    private static func debugLog(_ msg: String) {
+        fputs("HOVER: \(msg)\n", stderr)
+    }
+    public var hoveredEventId: EventOrTransactionId?
 
     public private(set) var timelineItems: [TimelineItem] = []
     public private(set) var loadedReplyDetails: [String: InReplyToDetails] = [:]
diff --git a/Mactrix/Views/ChatView/ChatInputView.swift b/Mactrix/Views/ChatView/ChatInputView.swift
@@ -29,6 +29,7 @@ struct ChatInputView: View {
         }
 
         chatInput = ""
+        NSLog("HOVER: replyTo cleared by sendMessage")
         replyTo = nil
         timeline.scrollPosition.scrollTo(edge: .bottom)
     }
@@ -120,6 +121,7 @@ struct ChatInputView: View {
         VStack(alignment: .leading) {
             if let replyEmbeddedDetails {
                 EmbeddedMessageView(embeddedEvent: replyEmbeddedDetails) {
+                    NSLog("HOVER: replyTo cleared by EmbeddedMessageView tap")
                     replyTo = nil
                 }
             }
diff --git a/Mactrix/Views/ChatView/ChatMessageView.swift b/Mactrix/Views/ChatView/ChatMessageView.swift
@@ -128,7 +128,7 @@ struct ChatMessageView: View, UI.MessageEventActions {
             UI.MessageEventProfileView(event: event, actions: self, imageLoader: appState.matrixClient)
                 .font(.system(size: .init(fontSize)))
         }
-        UI.MessageEventBodyView(event: event, focused: isEventFocused, reactions: msg.reactions, actions: self, ownUserID: ownUserId, imageLoader: appState.matrixClient, roomMembers: timeline?.room.members ?? []) {
+        UI.MessageEventBodyView(event: event, focused: isEventFocused, reactions: msg.reactions, actions: self, ownUserID: ownUserId, imageLoader: appState.matrixClient, roomMembers: timeline?.room.members ?? [], isExternallyHovered: timeline?.hoveredEventId == event.eventOrTransactionId) {
             VStack(alignment: .leading, spacing: 10) {
                 if let replyTo = msg.inReplyTo {
                     let eventId = replyTo.eventId()
diff --git a/Mactrix/Views/ChatView/TimelineView/HoverActionsPanel.swift b/Mactrix/Views/ChatView/TimelineView/HoverActionsPanel.swift
@@ -0,0 +1,83 @@
+import AppKit
+import SwiftUI
+import UI
+
+/// A floating panel that displays message hover actions (react, reply, pin)
+/// positioned above the hovered timeline row, outside the NSTableView's row clipping.
+class HoverActionsPanel: NSPanel {
+    private let hostingView: NSHostingView<AnyView>
+
+    init() {
+        hostingView = NSHostingView(rootView: AnyView(EmptyView()))
+
+        super.init(
+            contentRect: .zero,
+            styleMask: [.borderless, .nonactivatingPanel],
+            backing: .buffered,
+            defer: true
+        )
+
+        isOpaque = false
+        backgroundColor = .clear
+        hasShadow = false
+        level = .floating
+        hidesOnDeactivate = true
+        collectionBehavior = [.canJoinAllSpaces, .fullScreenAuxiliary]
+        ignoresMouseEvents = false
+        contentView = hostingView
+    }
+
+    override var canBecomeKey: Bool { true }
+
+    var isMouseInside: Bool {
+        NSMouseInRect(NSEvent.mouseLocation, frame, false)
+    }
+
+    func update(eventId: String, onReaction: @escaping (String) -> Void, onReply: @escaping () -> Void, onReplyInThread: @escaping () -> Void, onPin: @escaping () -> Void) {
+        hostingView.rootView = AnyView(
+            HoverActionsView(onReaction: onReaction, onReply: onReply, onReplyInThread: onReplyInThread, onPin: onPin)
+                .id(eventId)
+        )
+        hostingView.layoutSubtreeIfNeeded()
+        let size = hostingView.fittingSize
+        setContentSize(size)
+    }
+
+    func position(relativeTo rowRect: NSRect, in window: NSWindow, topOffset: CGFloat = 0) {
+        let screenRect = window.convertToScreen(rowRect)
+        let size = hostingView.fittingSize
+        let origin = NSPoint(
+            x: screenRect.maxX - size.width - 20,
+            y: screenRect.maxY - 6 - topOffset
+        )
+        setFrameOrigin(origin)
+    }
+}
+
+private struct HoverActionsView: View {
+    let onReaction: (String) -> Void
+    let onReply: () -> Void
+    let onReplyInThread: () -> Void
+    let onPin: () -> Void
+
+    var body: some View {
+        HStack(spacing: 0) {
+            HoverButton(icon: { Text("👍") }, tooltip: "React") { onReaction("👍") }
+            HoverButton(icon: { Text("🎉") }, tooltip: "React") { onReaction("🎉") }
+            HoverButton(icon: { Text("❤️") }, tooltip: "React") { onReaction("❤️") }
+            Divider().frame(height: 18)
+            HoverButton(icon: { Image(systemName: "face.smiling") }, tooltip: "React") {}
+            HoverButton(icon: { Image(systemName: "arrowshape.turn.up.left") }, tooltip: "Reply") { onReply() }
+            HoverButton(icon: { Image(systemName: "ellipsis.message") }, tooltip: "Reply in thread") { onReplyInThread() }
+
+            HoverButton(icon: { Image(systemName: "pin") }, tooltip: "Pin") { onPin() }
+        }
+        .padding(2)
+        .background(
+            RoundedRectangle(cornerRadius: 4)
+                .fill(Color(NSColor.controlBackgroundColor))
+                .stroke(Color(NSColor.separatorColor), lineWidth: 1)
+                .shadow(color: .black.opacity(0.1), radius: 4)
+        )
+    }
+}
diff --git a/Mactrix/Views/ChatView/TimelineView/TimelineTableView.swift b/Mactrix/Views/ChatView/TimelineView/TimelineTableView.swift
@@ -92,6 +92,9 @@ class TimelineViewController: NSViewController {
     var rowHeights: [Int: CGFloat] = [:]
     private var pendingHeightUpdate = false
 
+    private let hoverPanel = HoverActionsPanel()
+    private var hideTimer: Timer?
+
     init(coordinator: TimelineViewRepresentable.Coordinator, timeline: LiveTimeline, timelineItems: [TimelineItem]) {
         self.coordinator = coordinator
         self.timeline = timeline
@@ -154,6 +157,11 @@ class TimelineViewController: NSViewController {
         tableView.backgroundColor = .clear
         view = scrollView
 
+        // Hover actions panel
+        tableView.onHoveredRowChanged = { [weak self] row in
+            self?.handleHoveredRowChanged(row)
+        }
+
         // Subscribe to view resize notifications
         scrollView.contentView.postsBoundsChangedNotifications = true
         NotificationCenter.default.addObserver(
@@ -163,12 +171,30 @@ class TimelineViewController: NSViewController {
             object: scrollView.contentView
         )
 
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(windowDidResignKey),
+            name: NSWindow.didResignKeyNotification,
+            object: nil
+        )
+
         listenForFocusTimelineItem()
     }
 
+    @objc func windowDidResignKey(_ notification: Notification) {
+        dismissHoverPanel()
+    }
+
+    func dismissHoverPanel() {
+        hoverPanel.orderOut(nil)
+        timeline.hoveredEventId = nil
+    }
+
     var timelineFetchTask: Task<Void, Never>?
 
     @objc func viewDidScroll(_ notification: Notification) {
+        dismissHoverPanel()
+
         let currentOffset = scrollView.contentView.bounds.origin.y
         let timelineHeight = scrollView.contentView.documentRect.height
         let viewHeight = scrollView.contentView.documentVisibleRect.height
@@ -212,6 +238,71 @@ class TimelineViewController: NSViewController {
         fatalError("init(coder:) is not available")
     }
 
+    // MARK: - Hover actions panel
+
+    private func handleHoveredRowChanged(_ row: Int?) {
+        hideTimer?.invalidate()
+        hideTimer = nil
+
+        guard let row,
+              case .message(let event, _) = timelineItems[row].rowInfo else {
+            // Delay hiding so mouse can move from row to panel
+            hideTimer = Timer.scheduledTimer(withTimeInterval: 0.15, repeats: false) { [weak self] _ in
+                guard let self else { return }
+                if !self.hoverPanel.isMouseInside {
+                    self.dismissHoverPanel()
+                }
+            }
+            return
+        }
+
+        let timeline = self.timeline
+        let windowState = self.coordinator.windowState
+
+        timeline.hoveredEventId = event.eventOrTransactionId
+        hoverPanel.update(
+            eventId: event.eventOrTransactionId.id,
+            onReaction: { key in
+                Task {
+                    guard let inner = timeline.timeline else { return }
+                    do {
+                        let _ = try await inner.toggleReaction(itemId: event.eventOrTransactionId, key: key)
+                    } catch {
+                        Logger.timelineTableView.error("Failed to toggle reaction: \(error)")
+                    }
+                }
+            },
+            onReply: {
+                NSLog("HOVER: Reply tapped for event \(event.eventOrTransactionId.id)")
+                timeline.sendReplyTo = event
+            },
+            onReplyInThread: { windowState.focusThread(rootEventId: event.eventOrTransactionId.id) },
+            onPin: {
+                guard case let .eventId(eventId: eventId) = event.eventOrTransactionId else { return }
+                Task {
+                    do {
+                        let _ = try await timeline.timeline?.pinEvent(eventId: eventId)
+                    } catch {
+                        Logger.timelineTableView.error("Failed to pin message: \(error)")
+                    }
+                }
+            }
+        )
+
+        // Position relative to the row, offset past profile header if present
+        let rowRect = tableView.rect(ofRow: row)
+        guard tableView.visibleRect.contains(CGPoint(x: rowRect.midX, y: rowRect.maxY)) else {
+            return dismissHoverPanel()
+        }
+        let rowRectInWindow = tableView.convert(rowRect, to: nil)
+        let profileHeaderOffset: CGFloat = shouldIncludeProfileHeader(at: row) ? 32 : 0
+        if let window = tableView.window {
+            hoverPanel.position(relativeTo: rowRectInWindow, in: window, topOffset: profileHeaderOffset)
+            window.addChildWindow(hoverPanel, ordered: .above)
+            hoverPanel.orderFront(nil)
+        }
+    }
+
     enum TimelineSection {
         case main
         case typingIndicator
@@ -241,6 +332,13 @@ class TimelineViewController: NSViewController {
 
         dataSource?.apply(snapshot, animatingDifferences: false)
 
+        // Refresh or dismiss the hover panel with updated event data
+        if let hoveredRow = tableView.hoveredRow {
+            handleHoveredRowChanged(hoveredRow)
+        } else {
+            dismissHoverPanel()
+        }
+
         // Re-measure visible rows after hosting views settle
         DispatchQueue.main.async { [weak self] in
             guard let self else { return }
@@ -298,6 +396,37 @@ class BottomStickyTableView: NSTableView {
     override var isFlipped: Bool {
         return false
     }
+
+    var onHoveredRowChanged: ((Int?) -> Void)?
+    private var trackingArea: NSTrackingArea?
+    private(set) var hoveredRow: Int? = nil
+
+    override func updateTrackingAreas() {
+        super.updateTrackingAreas()
+        if let existing = trackingArea { removeTrackingArea(existing) }
+        let area = NSTrackingArea(
+            rect: bounds,
+            options: [.mouseMoved, .mouseEnteredAndExited, .activeInActiveApp],
+            owner: self
+        )
+        addTrackingArea(area)
+        trackingArea = area
+    }
+
+    override func mouseMoved(with event: NSEvent) {
+        let point = convert(event.locationInWindow, from: nil)
+        let row = self.row(at: point)
+        let newRow = row >= 0 ? row : nil
+        if newRow != hoveredRow {
+            hoveredRow = newRow
+            onHoveredRowChanged?(newRow)
+        }
+    }
+
+    override func mouseExited(with event: NSEvent) {
+        hoveredRow = nil
+        onHoveredRowChanged?(nil)
+    }
 }
 
 class SelfSizingHostingView<Content: View>: NSHostingView<Content> {
diff --git a/MactrixLibrary/Sources/UI/Timeline/MessageEventView.swift b/MactrixLibrary/Sources/UI/Timeline/MessageEventView.swift

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@ struct ChatInputView: View {`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`chatInput = ""`
	`32`	`+ NSLog("HOVER: replyTo cleared by sendMessage")`
`32`	`33`	`replyTo = nil`
`33`	`34`	`timeline.scrollPosition.scrollTo(edge: .bottom)`
`34`	`35`	`}`
`@@ -120,6 +121,7 @@ struct ChatInputView: View {`
`120`	`121`	`VStack(alignment: .leading) {`
`121`	`122`	`if let replyEmbeddedDetails {`
`122`	`123`	`EmbeddedMessageView(embeddedEvent: replyEmbeddedDetails) {`
	`124`	`+ NSLog("HOVER: replyTo cleared by EmbeddedMessageView tap")`
`123`	`125`	`replyTo = nil`
`124`	`126`	`}`
`125`	`127`	`}`
Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,7 @@ struct ChatMessageView: View, UI.MessageEventActions {`
`128`	`128`	`UI.MessageEventProfileView(event: event, actions: self, imageLoader: appState.matrixClient)`
`129`	`129`	`.font(.system(size: .init(fontSize)))`
`130`	`130`	`}`
`131`		`- UI.MessageEventBodyView(event: event, focused: isEventFocused, reactions: msg.reactions, actions: self, ownUserID: ownUserId, imageLoader: appState.matrixClient, roomMembers: timeline?.room.members ?? []) {`
	`131`	`+ UI.MessageEventBodyView(event: event, focused: isEventFocused, reactions: msg.reactions, actions: self, ownUserID: ownUserId, imageLoader: appState.matrixClient, roomMembers: timeline?.room.members ?? [], isExternallyHovered: timeline?.hoveredEventId == event.eventOrTransactionId) {`
`132`	`132`	`VStack(alignment: .leading, spacing: 10) {`
`133`	`133`	`if let replyTo = msg.inReplyTo {`
`134`	`134`	`let eventId = replyTo.eventId()`