feat: make `UserNameLabel` render local nick names and ENS names

In timeline status update messages we want to render the ENS name next to a
local nickname in case it exists. This commit extends the `UsernameLabel` to do
just that.

Closes #1488

src/app/chat/view.nim

@@ -244,7 +244,7 @@ QtObject:
   proc pushMessages*(self:ChatsView, messages: var seq[Message]) =
     for msg in messages.mitems:
       self.upsertChannel(msg.chatId)
-      msg.alias = self.status.chat.getUserName(msg.fromAuthor, msg.alias)
+      msg.userName = self.status.chat.getUserName(msg.fromAuthor, msg.alias)
       self.messageList[msg.chatId].add(msg)
       self.messagePushed()
       if self.channelOpenTime.getOrDefault(msg.chatId, high(int64)) < msg.timestamp.parseFloat.fromUnixFloat.toUnix:

src/app/chat/views/message_list.nim

@@ -33,6 +33,8 @@ type
     EmojiReactions = UserRole + 22
     CommandParameters = UserRole + 23
     LinkUrls = UserRole + 24
+    Alias = UserRole + 25
+    LocalName = UserRole + 26
 
 QtObject:
   type
@@ -115,7 +117,7 @@ QtObject:
     let message = self.messages[index.row]
     let chatMessageRole = role.ChatMessageRoles
     case chatMessageRole:
-      of ChatMessageRoles.UserName: result = newQVariant(message.alias)
+      of ChatMessageRoles.UserName: result = newQVariant(message.userName)
       of ChatMessageRoles.Message: result = newQVariant(self.renderBlock(message))
       of ChatMessageRoles.PlainText: result = newQVariant(message.text)
       of ChatMessageRoles.Timestamp: result = newQVariant(message.timestamp)
@@ -149,6 +151,8 @@ QtObject:
         "commandState": message.commandParameters.commandState,
         "signature": message.commandParameters.signature
       }))
+      of ChatMessageRoles.Alias: result = newQVariant(message.alias)
+      of ChatMessageRoles.LocalName: result = newQVariant(message.localName)
 
   method roleNames(self: ChatMessageList): Table[int, string] =
     {
@@ -175,7 +179,9 @@ QtObject:
       ChatMessageRoles.AudioDurationMs.int: "audioDurationMs",
       ChatMessageRoles.EmojiReactions.int: "emojiReactions",
       ChatMessageRoles.LinkUrls.int: "linkUrls",
-      ChatMessageRoles.CommandParameters.int: "commandParameters"
+      ChatMessageRoles.CommandParameters.int: "commandParameters",
+      ChatMessageRoles.Alias.int:"alias",
+      ChatMessageRoles.LocalName.int:"localName"
     }.toTable
 
   proc getMessageIndex(self: ChatMessageList, messageId: string): int {.slot.} =
@@ -188,7 +194,9 @@ QtObject:
 
     let message = self.messages[index]
     case data:
-    of "userName": result = (message.alias)
+    of "userName": result = (message.userName)
+    of "alias": result = (message.alias)
+    of "localName": result = (message.localName)
     of "message": result = (message.text)
     of "identicon": result = (message.identicon)
     of "timestamp": result = $(message.timestamp)
@@ -246,6 +254,8 @@ QtObject:
     for c in contacts:
       for m in self.messages.mitems:
         if m.fromAuthor == c.id:
-          m.alias = userNameOrAlias(c)
+          m.userName = userNameOrAlias(c)
+          m.alias = c.alias
+          m.localName = c.localNickname
 
     self.dataChanged(topLeft, bottomRight, @[ChatMessageRoles.Username.int])

src/status/chat/message.nim

@@ -31,6 +31,8 @@ type CommandParameters* = object
 
 type Message* = object
   alias*: string
+  userName*: string
+  localName*: string
   chatId*: string
   clock*: int
   commandParameters*: CommandParameters

src/status/signals/messages.nim

@@ -171,6 +171,8 @@ proc toMessage*(jsonMsg: JsonNode): Message =
 
   var message = Message(
       alias: jsonMsg{"alias"}.getStr,
+      userName: "",
+      localName: "",
       chatId: jsonMsg{"localChatId"}.getStr,
       clock: jsonMsg{"clock"}.getInt,
       contentType: contentType,

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -283,6 +283,8 @@ ScrollView {
             fromAuthor: model.fromAuthor
             chatId: model.chatId
             userName: model.userName
+            alias: model.alias
+            localName: model.localName
             message: model.message
             plainText: model.plainText
             identicon: model.identicon

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -7,6 +7,8 @@ import "../components"
 Item {
     property string fromAuthor: "0x0011223344556677889910"
     property string userName: "Jotaro Kujo"
+    property string alias: ""
+    property string localName: ""
     property string message: "That's right. We're friends...  Of justice, that is."
     property string plainText: "That's right. We're friends...  Of justice, that is."
     property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEXMzMz////TjRV2AAAAAWJLR0QB/wIt3gAAACpJREFUGBntwYEAAAAAw6D7Uw/gCtUAAAAAAAAAAAAAAAAAAAAAAAAAgBNPsAABAjKCqQAAAABJRU5ErkJggg=="

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -33,6 +33,9 @@ Item {
 //        anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
         anchors.top: parent.top
         anchors.left: chatImage.right
+        userName: messageItem.userName
+        localName: messageItem.localName
+        alias: messageItem.alias
     }
 
     ChatReply {

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml

@@ -32,6 +32,9 @@ Item {
         anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
         anchors.topMargin: 0
         anchors.left: chatImage.right
+        userName: messageItem.userName
+        localName: messageItem.localName
+        alias: messageItem.alias
     }
 
     Rectangle {

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml

@@ -2,24 +2,62 @@ import QtQuick 2.3
 import "../../../../../shared"
 import "../../../../../imports"
 
-StyledTextEdit {
-    id: chatName
+Item {
+    id: root
+    height: childrenRect.height
+    width: chatName.width + ensOrAlias.width + ensOrAlias.anchors.leftMargin
+    property string userName: ""
+    property string localName: ""
+    property string alias: ""
+    property alias label: chatName
     visible: isMessage && authorCurrentMsg != authorPrevMsg
-    height: this.visible ? 18 : 0
-    //% "You"
-    text: !isCurrentUser ? Utils.removeStatusEns(userName) : qsTrId("You")
-    color: (userName.startsWith("@") || isCurrentUser) ? Style.current.blue : Style.current.textColor
-    font.bold: true
-    font.pixelSize: Style.current.secondaryTextFontSize
-    readOnly: true
-    wrapMode: Text.WordWrap
-    selectByMouse: true
-    MouseArea {
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        anchors.fill: parent
-        onClicked: {
-            clickMessage(true)
+
+    StyledTextEdit {
+        id: chatName
+        text: {
+            if (isCurrentUser) {
+                return qsTr("You")
+            }
+
+            if (root.localName !== "") {
+                return root.localName
+            }
+
+            if (root.userName !== "") {
+                return Utils.removeStatusEns(root.userName)
+            }
+            return Utils.removeStatusEns(root.alias)
+        }
+        color: text.startsWith("@") || isCurrentUser || root.localName !== "" ? Style.current.blue : Style.current.secondaryText
+        font.weight: Font.Medium
+        font.pixelSize: Style.current.secondaryTextFontSize
+        readOnly: true
+        wrapMode: Text.WordWrap
+        selectByMouse: true
+        MouseArea {
+            cursorShape: Qt.PointingHandCursor
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: {
+                parent.font.underline = true
+            }
+            onExited: {
+                parent.font.underline = false
+            }
+            onClicked: {
+                clickMessage(true)
+            }
         }
     }
+
+    StyledText {
+        id: ensOrAlias
+        visible: root.localName !== "" && root.userName.startsWith("@")
+        text: root.userName
+        color: Style.current.secondaryText
+        font.pixelSize: chatName.font.pixelSize
+        anchors.left: chatName.right
+        anchors.leftMargin: chatName.visible ? 4 : 0
+    }
 }

ui/app/AppLayouts/Profile/Sections/Ens/List.qml

@@ -259,8 +259,8 @@ Item {
 
         UsernameLabel {
             id: chatName
-            text: "@" + (profileModel.ens.preferredUsername.replace(".stateofus.eth", ""))
-            color: Style.current.blue
+            label.text: "@" + (profileModel.ens.preferredUsername.replace(".stateofus.eth", ""))
+            label.color: Style.current.blue
             anchors.leftMargin: 20
             anchors.top: parent.top
             anchors.topMargin: 0