Format mxids when disambiguation needed

res/css/views/messages/_SenderProfile.scss

@@ -17,7 +17,6 @@ limitations under the License.
 .mx_SenderProfile_name {
     display: flex;
     align-items: center;
-    gap: 5px;
 }
 
 .mx_SenderProfile_displayName {
@@ -29,4 +28,5 @@ limitations under the License.
     font-family: monospace;
     font-size: 1rem;
     color: gray;
+    margin-left: 5px;
 }

src/components/views/messages/SenderProfile.js → src/components/views/messages/SenderProfile.tsx

@@ -15,26 +15,37 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
 import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import MatrixEvent from "matrix-js-sdk/src/models/event";
 
-@replaceableComponent("views.messages.SenderProfile")
-export default class SenderProfile extends React.Component {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
-        onClick: PropTypes.func,
-    };
+interface IProps {
+    mxEvent: MatrixEvent;
+    onClick(): void;
+    enableFlair: boolean;
+}
 
+interface IState {
+    userGroups;
+    relatedGroups;
+}
+
+@replaceableComponent("views.messages.SenderProfile")
+export default class SenderProfile extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
+    unmounted: boolean;
 
-    state = {
-        userGroups: null,
-        relatedGroups: [],
-    };
+    constructor(props: IProps) {
+        super(props)
+
+        this.state = {
+            userGroups: null,
+            relatedGroups: [],
+        };
+    }
 
     componentDidMount() {
         this.unmounted = false;
@@ -89,28 +100,17 @@ export default class SenderProfile extends React.Component {
     render() {
         const {mxEvent} = this.props;
         const colorClass = getUserNameColorClass(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();
 
+        const disambiguate = mxEvent.sender?.disambiguate;
+        const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
+        const mxid = mxEvent.sender?.userId || mxEvent.getSender() || "";
+
         if (msgtype === 'm.emote') {
             return <span />; // emote message must include the name so don't duplicate it
         }
 
-        let flair = <div />;
+        let flair;
         if (this.props.enableFlair) {
             const displayedGroups = this._getDisplayedGroups(
                 this.state.userGroups, this.state.relatedGroups,
@@ -124,15 +124,15 @@ export default class SenderProfile extends React.Component {
 
         const displayNameElement = (
             <span className={`mx_SenderProfile_displayName ${colorClass}`}>
-                { displayName || '' }
+                { displayName }
             </span>
         );
 
         let mxidElement;
         if (disambiguate) {
             mxidElement = (
                 <span className="mx_SenderProfile_mxid">
-                    { `[${mxid || ""}]` }
+                    { `[${mxid}]` }
                 </span>
             );
         }