Show usernames after display names

Signed-off-by: Šimon Brandner <[email protected]>

res/css/views/messages/_SenderProfile.scss

@@ -14,7 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_SenderProfile_nameFlair {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
 .mx_SenderProfile_name {
     font-weight: 600;
 }
 
+.mx_SenderProfile_username {
+    font-weight: 600;
+    font-family: monospace;
+    font-size: 1rem;
+    color: gray;
+}

src/components/views/messages/SenderProfile.js

@@ -91,6 +91,7 @@ export default class SenderProfile extends React.Component {
         const colorClass = getUserNameColorClass(mxEvent.getSender());
         const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         const {msgtype} = mxEvent.getContent();
+        const username = mxEvent.getSender();
 
         if (msgtype === 'm.emote') {
             return <span />; // emote message must include the name so don't duplicate it
@@ -109,19 +110,20 @@ export default class SenderProfile extends React.Component {
         }
 
         const nameElem = name || '';
-
-        // Name + flair
-        const nameFlair = <span>
-            <span className={`mx_SenderProfile_name ${colorClass}`}>
-                { nameElem }
-            </span>
-            { flair }
-        </span>;
+        const usernameElem = `[${username || ""}]`;
 
         return (
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
                 <div className="mx_SenderProfile_hover">
-                    { nameFlair }
+                    <div className="mx_SenderProfile_nameFlair">
+                        <span className={`mx_SenderProfile_name ${colorClass}`}>
+                            { nameElem }
+                        </span>
+                        <span className="mx_SenderProfile_username">
+                            { usernameElem }
+                        </span>
+                        { flair }
+                    </div>
                 </div>
             </div>
         );