From f22758ea89ae624761795301347e71700fafb5e5 Mon Sep 17 00:00:00 2001
From: miruka <miruka@disroot.org>
Date: Sun, 17 Jan 2021 11:46:56 -0400
Subject: [PATCH] Add tooltips to the message "read by" indicator

Hovered the read by counter on timeline events now shows who read said
event and when.
---
 src/gui/Pages/Chat/Timeline/EventContent.qml | 36 ++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/gui/Pages/Chat/Timeline/EventContent.qml b/src/gui/Pages/Chat/Timeline/EventContent.qml
index a799f390..b0fd0dbb 100644
--- a/src/gui/Pages/Chat/Timeline/EventContent.qml
+++ b/src/gui/Pages/Chat/Timeline/EventContent.qml
@@ -37,7 +37,8 @@ HRowLayout {
     readonly property string timeText: utils.formatTime(model.date, false)
 
     readonly property string stateText:
-        `<font size=${theme.fontSize.small}px><font ` + (
+    `<a href="#state-text" style="text-decoration: none">` +
+    `<font size=${theme.fontSize.small}px><font ` + (
             model.is_local_echo ?
             `color="${theme.chat.message.localEcho}">&nbsp;⧗` :  // U+29D7
 
@@ -46,7 +47,7 @@ HRowLayout {
             model.read_by_count :  // U+29BF
 
             ">"
-        ) + "</font></font>"
+        ) + "</font></font></a>"
 
     readonly property bool pureMedia: ! contentText && linksRepeater.count
 
@@ -260,6 +261,37 @@ HRowLayout {
                 acceptedPointerTypes: PointerDevice.Finger | PointerDevice.Pen
             }
 
+            HToolTip {
+                visible: eventContent.hoveredLink === "#state-text"
+                label.textFormat: HLabel.StyledText
+                text: {
+                    if (! visible) return ""
+
+                    const members =
+                        ModelStore.get(chat.userId, chat.roomId, "members")
+
+                    const readBy = Object.entries(
+                        JSON.parse(model.last_read_by)
+                    ).sort((a, b) => a[1] - b[1])  // sort by values (dates)
+
+                    const lines  = []
+
+                    for (const [userId, epoch] of readBy) {
+                        const member = members.find(userId)
+
+                        const by  = utils.coloredNameHtml(
+                            member ? member.display_name: userId, userId,
+                        )
+                        const at = utils.formatRelativeTime(
+                            new Date(epoch) - model.date,
+                        )
+                        lines.push(qsTr("Seen by %1 %2 after").arg(by).arg(at))
+                    }
+
+                    return lines.join("<br>")
+                }
+            }
+
             Rectangle {
                 id: contentBackground
                 width: Math.max(