feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components

These components are used to render the chat info in the top bar of the chat view.
`StatusChatInfoButton` is an clickable button that will open chat info dialogs.

Closes #923

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

@@ -8,7 +8,7 @@ import "../components"
 
 Rectangle {
     property int iconSize: 16
-
+    property bool reopenGroupDialog: false
     id: chatTopBarContent
     color: Style.current.background
     height: 56
@@ -16,66 +16,49 @@ Rectangle {
     border.color: Style.current.border
     border.width: 1
 
-    ChannelIcon {
-      id: channelIcon
-      channelName: chatsModel.activeChannel.name
-      channelType: chatsModel.activeChannel.chatType
-      channelIdenticon: chatsModel.activeChannel.identicon
+    Loader {
+      property bool isGroupChatOrOneToOne: (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || 
+        chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
       anchors.left: parent.left
-      anchors.leftMargin: Style.current.padding
+      anchors.leftMargin: this.isGroupChatOrOneToOne ? Style.current.padding : Style.current.padding + 4
       anchors.top: parent.top
-      anchors.topMargin: Style.current.smallPadding
+      anchors.topMargin: 4
+      sourceComponent:  this.isGroupChatOrOneToOne ? chatInfoButton : chatInfo
     }
 
-    StyledTextEdit {
-        id: channelName
-        width: 80
-        height: 20
-        text: {
-            switch(chatsModel.activeChannel.chatType) {
-                case Constants.chatTypePublic: return channelNameStr;
-                case Constants.chatTypeOneToOne: return Utils.removeStatusEns(chatsModel.activeChannel.name)
-                default: return chatsModel.activeChannel.name
+    Component {
+        id: chatInfoButton
+        StatusChatInfoButton {
+            chatName: chatsModel.activeChannel.name
+            chatType: chatsModel.activeChannel.chatType
+            identicon: chatsModel.activeChannel.identicon
+            identiconSize: 36
+
+            onClicked: {
+                switch (chatsModel.activeChannel.chatType) {
+                    case Constants.chatTypePrivateGroupChat: 
+                        groupInfoPopup.open()
+                        break;
+                    case Constants.chatTypeOneToOne:
+                        chatTopBarContent.reopenGroupDialog = false
+                        profilePopup.openPopup(chatsModel.activeChannel.name, chatsModel.activeChannel.id, chatsModel.activeChannel.identicon)
+                        break;
+                }
             }
         }
-        anchors.left: channelIcon.right
-        anchors.leftMargin: Style.current.smallPadding
-        anchors.top: parent.top
-        anchors.topMargin: Style.current.smallPadding
-        font.weight: Font.Medium
-        font.pixelSize: 15
-        selectByMouse: true
-        readOnly: true
     }
 
-    StyledText {
-        id: channelIdentifier
-        color: Style.current.darkGrey
-        text: {
-            switch(chatsModel.activeChannel.chatType){
-                //% "Public chat"
-                case Constants.chatTypePublic: return qsTrId("public-chat")
-                case Constants.chatTypeOneToOne: return (profileModel.isAdded(chatsModel.activeChannel.id) ?
-                //% "Contact"
-                qsTrId("chat-is-a-contact") :
-                //% "Not a contact"
-                qsTrId("chat-is-not-a-contact"))
-                case Constants.chatTypePrivateGroupChat: 
-                    let cnt = chatsModel.activeChannel.members.rowCount();
-                    //% "%1 members"
-                    if(cnt > 1) return qsTrId("%1-members").arg(cnt);
-                    //% "1 member"
-                    return qsTrId("1-member");
-                default: return "...";
-            }
+    Component {
+        id: chatInfo
+        StatusChatInfo {
+            identiconSize: 36
+            chatName: chatsModel.activeChannel.name
+            chatType: chatsModel.activeChannel.chatType
+            identicon: chatsModel.activeChannel.identicon
         }
-        font.pixelSize: 12
-        anchors.left: channelIcon.right
-        anchors.leftMargin: Style.current.smallPadding
-        anchors.top: channelName.bottom
-        anchors.topMargin: 0
     }
 
+
     Rectangle {
         id: moreActionsBtnContainer
         width: 40
@@ -202,7 +185,8 @@ Rectangle {
             GroupInfoPopup {
                 id: groupInfoPopup
                 profileClick: {
-                  profilePopup.openPopup.bind(profilePopup)
+                    profilePopup.openPopup.bind(profilePopup)
+                    chatTopBarContent.reopenGroupDialog = true
                 }
                 onClosed: {
                     mouseArea.menuOpened = false
@@ -212,8 +196,9 @@ Rectangle {
             ProfilePopup {
               id: profilePopup
               onClosed: {
-                if (!groupInfoPopup.opened) {
-                  groupInfoPopup.open()
+                if (!groupInfoPopup.opened && chatTopBarContent.reopenGroupDialog) {
+                    groupInfoPopup.open()
+                    chatTopBarContent.reopenGroupDialog = false
                 }
               }
             }

ui/shared/status/StatusChatInfo.qml

@@ -0,0 +1,77 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../imports"
+import "../../shared"
+import "../../shared/status"
+
+Item {
+    id: root
+
+    property string chatName
+    property int chatType
+    property string identicon
+    property int identiconSize: 40
+    property bool isCompact: false
+
+    height: 48
+    width: nameAndInfo.width + chatIdenticon.width + Style.current.smallPadding
+
+    StatusIdenticon {
+        id: chatIdenticon
+        chatType: root.chatType
+        chatName: root.chatName
+        identicon: root.identicon
+        width: root.isCompact ? 20 : root.identiconSize
+        height: root.isCompact ? 20 : root.identiconSize
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Item {
+        id: nameAndInfo
+        height: chatName.height + chatInfo.height
+        width: (chatName.width > chatInfo.width ? chatName.width : chatInfo.width) 
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: chatIdenticon.right
+        anchors.leftMargin: Style.current.smallPadding
+
+        StyledText {
+            id: chatName
+            text: {
+                switch(root.chatType) {
+                    case Constants.chatTypePublic: return "#" + root.chatName;
+                    case Constants.chatTypeOneToOne: return Utils.removeStatusEns(root.chatName)
+                    default: return root.chatName
+                }
+            }
+
+            font.weight: Font.Medium
+            font.pixelSize: 15
+        }
+
+        StyledText {
+            id: chatInfo
+            color: Style.current.darkGrey
+            text: {
+                switch(root.chatType){
+                    //% "Public chat"
+                    case Constants.chatTypePublic: return qsTrId("public-chat")
+                    case Constants.chatTypeOneToOne: return (profileModel.isAdded(root.chatName) ?
+                    //% "Contact"
+                    qsTrId("chat-is-a-contact") :
+                    //% "Not a contact"
+                    qsTrId("chat-is-not-a-contact"))
+                    case Constants.chatTypePrivateGroupChat: 
+                        let cnt = chatsModel.activeChannel.members.rowCount();
+                        //% "%1 members"
+                        if(cnt > 1) return qsTrId("%1-members").arg(cnt);
+                        //% "1 member"
+                        return qsTrId("1-member");
+                    default: return "...";
+                }
+            }
+            font.pixelSize: 12
+            anchors.top: chatName.bottom
+        }
+    }
+}
+

ui/shared/status/StatusChatInfoButton.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../imports"
+import "../../shared"
+import "../../shared/status"
+
+Button {
+    id: control
+
+    property string chatName
+    property int chatType
+    property string identicon
+    property int identiconSize: 40
+    property bool isCompact: false
+
+    implicitHeight: 48
+    implicitWidth: content.width + 8
+    leftPadding: 4
+    rightPadding: 4
+
+    contentItem: StatusChatInfo {
+        id: content
+        chatName: control.chatName
+        chatType: control.chatType
+        identicon: control.identicon
+        identiconSize: control.identiconSize
+        isCompact: control.isCompact
+    }
+
+    background: Rectangle {
+        color: control.hovered ? Style.current.grey : "transparent"
+        radius: Style.current.radius
+    }
+
+    MouseArea {
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: parent
+        onPressed: mouse.accepted = false
+    }
+}

ui/shared/status/qmldir

@@ -1,4 +1,6 @@
 StatusButton 1.0 StatusButton.qml
+StatusChatInfo 1.0 StatusChatInfo.qml
+StatusChatInfoButton 1.0 StatusChatInfoButton.qml
 StatusImageIdenticon 1.0 StatusImageIdenticon.qml
 StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml
 StatusRadioButton 1.0 StatusRadioButton.qml