From 61a260cd405eacac4c52777bd048657a9fda3702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 18 Apr 2021 15:40:56 +0200
Subject: [PATCH] Format mxid

---
 res/css/views/messages/_SenderProfile.scss    | 12 ++++++
 .../views/messages/SenderProfile.js           | 43 ++++++++++++++-----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss
index 655cb39489..e3a38bad6d 100644
--- a/res/css/views/messages/_SenderProfile.scss
+++ b/res/css/views/messages/_SenderProfile.scss
@@ -15,6 +15,18 @@ limitations under the License.
 */
 
 .mx_SenderProfile_name {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.mx_SenderProfile_displayName {
     font-weight: 600;
 }
 
+.mx_SenderProfile_mxid {
+    font-weight: 600;
+    font-family: monospace;
+    font-size: 1rem;
+    color: gray;
+}
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index bd10526799..264d4ed3de 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -89,7 +89,21 @@ export default class SenderProfile extends React.Component {
     render() {
         const {mxEvent} = this.props;
         const colorClass = getUserNameColorClass(mxEvent.getSender());
-        const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+
+        let disambiguate;
+        let displayName;
+        let mxid;
+
+        const sender = mxEvent.sender;
+        if (sender) {
+            disambiguate = sender.disambiguate;
+            displayName = sender.rawDisplayName;
+            mxid = sender.userId;
+        } else {
+            disambiguate = false;
+            displayName = mxEvent.getSender();
+            mxid = mxEvent.getSender();
+        }
         const {msgtype} = mxEvent.getContent();
 
         if (msgtype === 'm.emote') {
@@ -108,20 +122,29 @@ export default class SenderProfile extends React.Component {
             />;
         }
 
-        const nameElem = name || '';
-
-        // Name + flair
-        const nameFlair = <span>
-            <span className={`mx_SenderProfile_name ${colorClass}`}>
-                { nameElem }
+        const displayNameElement = (
+            <span className={`mx_SenderProfile_displayName ${colorClass}`}>
+                { displayName || '' }
             </span>
-            { flair }
-        </span>;
+        );
+
+        let mxidElement;
+        if (disambiguate) {
+            mxidElement = (
+                <span className="mx_SenderProfile_mxid">
+                    { `[${mxid || ""}]` }
+                </span>
+            );
+        }
 
         return (
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
                 <div className="mx_SenderProfile_hover">
-                    { nameFlair }
+                    <div className="mx_SenderProfile_name">
+                        { displayNameElement }
+                        { mxidElement }
+                        { flair }
+                    </div>
                 </div>
             </div>
         );