Add tooltips to sent/sending receipts

Fixes https://github.com/vector-im/element-web/issues/16649

src/components/views/rooms/EventTile.js

@@ -39,6 +39,7 @@ import {WidgetType} from "../../../widgets/WidgetType";
 import RoomAvatar from "../avatars/RoomAvatar";
 import {WIDGET_LAYOUT_EVENT_TYPE} from "../../../stores/widgets/WidgetLayoutStore";
 import {objectHasDiff} from "../../../utils/objects";
+import Tooltip from "../elements/Tooltip";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
@@ -567,11 +568,8 @@ export default class EventTile extends React.Component {
     };
 
     getReadAvatars() {
-        if (this._shouldShowSentReceipt) {
+        if (this._shouldShowSentReceipt || this._shouldShowSendingReceipt) {
-            return <span className="mx_EventTile_readAvatars"><span className='mx_EventTile_receiptSent' /></span>;
+            return <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
-        }
-        if (this._shouldShowSendingReceipt) {
-            return <span className="mx_EventTile_readAvatars"><span className='mx_EventTile_receiptSending' /></span>;
         }
 
         // return early if there are no read receipts
@@ -1180,7 +1178,6 @@ class E2ePadlock extends React.Component {
     render() {
         let tooltip = null;
         if (this.state.hover) {
-            const Tooltip = sdk.getComponent("elements.Tooltip");
             tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
         }
 
@@ -1195,3 +1192,56 @@ class E2ePadlock extends React.Component {
         );
     }
 }
+
+interface ISentReceiptProps {
+    messageState: string; // TODO: Types for message sending state
+}
+
+interface ISentReceiptState {
+    hover: boolean;
+}
+
+class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptState> {
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onHoverStart = () => {
+        this.setState({hover: true});
+    };
+
+    onHoverEnd = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        const isSent = !this.props.messageState || this.props.messageState === 'sent';
+        const receiptClasses = classNames({
+            'mx_EventTile_receiptSent': isSent,
+            'mx_EventTile_receiptSending': !isSent,
+        });
+
+        let tooltip = null;
+        if (this.state.hover) {
+            let label = _t("Sending your message...");
+            if (this.props.messageState === 'encrypting') {
+                label = _t("Encrypting your message...");
+            } else if (isSent) {
+                label = _t("Your message was sent");
+            }
+            // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated
+            // with the read receipt.
+            tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={20} />;
+        }
+
+        return <span className="mx_EventTile_readAvatars">
+            <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
+                {tooltip}
+            </span>
+        </span>;
+    }
+}

src/i18n/strings/en_EN.json

@@ -1440,6 +1440,9 @@
     "Unencrypted": "Unencrypted",
     "Encrypted by a deleted session": "Encrypted by a deleted session",
     "The authenticity of this encrypted message can't be guaranteed on this device.": "The authenticity of this encrypted message can't be guaranteed on this device.",
+    "Sending your message...": "Sending your message...",
+    "Encrypting your message...": "Encrypting your message...",
+    "Your message was sent": "Your message was sent",
     "Please select the destination room for this message": "Please select the destination room for this message",
     "Scroll to most recent messages": "Scroll to most recent messages",
     "Close preview": "Close preview",