fix(@desktop): add missing visual identity elements

ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml

@@ -29,6 +29,7 @@ import StatusQ.Components 0.1
 
 import shared 1.0
 import shared.panels 1.0
+import shared.controls.chat 1.0
 
 Rectangle {
     id: container
@@ -200,15 +201,20 @@ Rectangle {
                 height: 42
                 radius: Style.current.radius
 
-                StatusSmartIdenticon {
+                UserImage {
                     id: accountImage
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.left: parent.left
                     anchors.leftMargin: Style.current.smallPadding
-                    image.width: 32
+                    imageWidth: 32
-                    image.height: 32
+                    imageHeight: 32
-                    image.source: model.icon
+
-                    image.isIdenticon: model.isIdenticon
+                    name: model.name
+                    pubkey: model.publicKey
+                    icon: model.icon
+                    isIdenticon: model.isIdenticon
+                    showRing: !model.isAdded
+                    interactive: false
                 }
 
                 StyledText {

ui/app/AppLayouts/Chat/panels/SuggestionFilterPanel.qml

@@ -34,6 +34,7 @@ Item {
             property string ensName: model.ensName
             property string icon: model.icon
             property bool isIdenticon: model.isIdenticon
+            property bool isAdded: model.isAdded
         }
     }
 
@@ -72,7 +73,8 @@ Item {
                 alias: listItem.alias,
                 ensName: listItem.ensName,
                 icon: listItem.icon,
-                isIdenticon: listItem.isIdenticon
+                isIdenticon: listItem.isIdenticon,
+                isAdded: listItem.isAdded
             }
             if (all || isAcceptedItem(filter, item)) {
                 filterModel.append(item)

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -50,6 +50,9 @@ StatusAppTwoPanelLayout {
         }
 
         MyProfileView {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
             profileStore: profileView.store.profileStore
             profileContentWidth: _internal.profileContentWidth
         }

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -6,6 +6,7 @@ import utils 1.0
 import shared 1.0
 import shared.panels 1.0
 import shared.popups 1.0
+import shared.controls.chat 1.0
 
 import "../popups"
 import "../stores"
@@ -15,121 +16,152 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
-Item {
+ColumnLayout {
     id: root
 
     property ProfileStore profileStore
-
     property int profileContentWidth
 
     clip: true
-    height: parent.height
+    spacing: 16
-    Layout.fillWidth: true
 
     Item {
-        id: profileImgNameContainer
+        Layout.preferredHeight: 32
-        anchors.top: parent.top
+        Layout.fillWidth: true
-        anchors.topMargin: 64
+    }
-        width: profileContentWidth
 
-        anchors.horizontalCenter: parent.horizontalCenter
+    RowLayout {
-
+        Layout.alignment: Qt.AlignHCenter
-        height: this.childrenRect.height
+        Layout.maximumWidth: root.profileContentWidth
-
-        Item {
-            id: profileImgContainer
-            width: profileImg.width
-            height: profileImg.height
-
-            RoundedImage {
-                id: profileImg
-                width: 64
-                height: 64
-                border.width: 1
-                border.color: Style.current.border
-                source: root.profileStore.icon
-                smooth: false
-                antialiasing: true
-            }
-
-            RoundedIcon {
-                source: Style.svg("pencil")
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: -3
-                anchors.right: parent.right
-                anchors.rightMargin: -3
-                width: 24
-                height: 24
-                border.width: 1
-                border.color: Style.current.background
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    Global.openChangeProfilePicPopup()
-                }
-            }
-        }
 
         StatusBaseText {
             id: profileName
+
             text: root.profileStore.name
-            anchors.left: profileImgContainer.right
-            anchors.leftMargin: Style.current.halfPadding
-            anchors.top: profileImgContainer.top
-            anchors.topMargin: 4
             font.weight: Font.Bold
             font.pixelSize: 20
             color: Theme.palette.directColor1
         }
 
-        Component {
-            id: displayNamePopupComponent
-            DisplayNamePopup {
-                profileStore: root.profileStore
-                onClosed: {
-                    destroy()
-                }
-            }
-        }
-
         StatusButton {
-            id: "editDisplayName"
             text: "Edit"
-            anchors.left: profileName.right
+            onClicked: Global.openPopup(displayNamePopupComponent)
-            anchors.leftMargin: Style.current.halfPadding
-            onClicked: {
-                Global.openPopup(displayNamePopupComponent);
-            }
         }
 
-        Address {
+        Item {
-            id: pubkeyText
+            Layout.fillWidth: true
-            text: root.profileStore.ensName !== "" ? root.profileStore.username : root.profileStore.pubkey
-            anchors.bottom: profileImgContainer.bottom
-            anchors.left: profileName.left
-            anchors.bottomMargin: 4
-            width: 200
-            font.pixelSize: 15
         }
 
         StatusFlatRoundButton {
             id: qrCodeButton
-            width: 32
+
-            height: 32
+            Layout.preferredWidth: 32
-            anchors.right: parent.right
+            Layout.preferredHeight: 32
-            anchors.verticalCenter: profileImgContainer.verticalCenter
+
             icon.name: "qr"
             type: StatusFlatRoundButton.Type.Quaternary
             onClicked: qrCodePopup.open()
         }
+    }
 
-        Separator {
+    Separator {
-            id: lineSeparator
+        Layout.alignment: Qt.AlignHCenter
-            anchors.top: profileImgContainer.bottom
+        Layout.preferredWidth: root.profileContentWidth
-            anchors.topMargin: 36
+    }
+
+    ProfileHeader {
+        id: profileImgNameContainer
+
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: root.profileContentWidth
+
+        displayName: profileStore.name
+        pubkey: profileStore.pubkey
+        icon: profileStore.icon
+        isIdenticon: profileStore.isIdenticon
+
+        displayNameVisible: false
+        pubkeyVisible: false
+
+        imageWidth: 80
+        imageHeight: 80
+        emojiSize: "20x20"
+
+        imageOverlay: Item {
+            StatusFlatRoundButton {
+                width: 24
+                height: 24
+
+                anchors {
+                    right: parent.right
+                    bottom: parent.bottom
+                    rightMargin: -8
+                }
+
+                type: StatusFlatRoundButton.Type.Secondary
+                icon.name: "pencil"
+                icon.color: Theme.palette.directColor1
+                icon.width: 12.5
+                icon.height: 12.5
+
+                onClicked: Global.openChangeProfilePicPopup()
+            }
+        }
+    }
+
+    StatusDescriptionListItem {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: root.profileContentWidth
+
+        title: qsTr("ENS username")
+        subTitle: root.profileStore.ensName
+        tooltip.text: qsTr("Copy to clipboard")
+        icon.name: "copy"
+        visible: !!root.profileStore.ensName
+        iconButton.onClicked: {
+            root.profileStore.copyToClipboard(root.profileStore.ensName)
+            tooltip.visible = !tooltip.visible
+        }
+    }
+
+    StatusDescriptionListItem {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: root.profileContentWidth
+
+        title: qsTr("Chat key")
+        subTitle: root.profileStore.pubkey
+        subTitleComponent.elide: Text.ElideMiddle
+        subTitleComponent.width: 320
+        subTitleComponent.font.family: Theme.palette.monoFont.name
+        tooltip.text: qsTr("Copy to clipboard")
+        icon.name: "copy"
+        iconButton.onClicked: {
+            root.profileStore.copyToClipboard(root.profileStore.pubkey)
+            tooltip.visible = !tooltip.visible
+        }
+    }
+
+    StatusDescriptionListItem {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: root.profileContentWidth
+
+        title: qsTr("Share Profile URL")
+        subTitle: `${Constants.userLinkPrefix}${root.profileStore.ensName !== "" ? root.profileStore.ensName : (root.profileStore.pubkey.substring(0, 5) + "..." + root.profileStore.pubkey.substring(root.profileStore.pubkey.length - 5))}`
+        tooltip.text: qsTr("Copy to clipboard")
+        icon.name: "copy"
+        iconButton.onClicked: {
+            root.profileStore.copyToClipboard(Constants.userLinkPrefix + (root.profileStore.ensName !== "" ? root.profileStore.ensName : root.profileStore.pubkey))
+            tooltip.visible = !tooltip.visible
+        }
+    }
+
+    Component {
+        id: displayNamePopupComponent
+        DisplayNamePopup {
+            profileStore: root.profileStore
+            onClosed: {
+                destroy()
+            }
         }
     }
 
@@ -150,52 +182,5 @@ Item {
             smooth: false
         }
     }
-
-    Column {
-        anchors.right: profileImgNameContainer.right
-        anchors.left: profileImgNameContainer.left
-        anchors.top: profileImgNameContainer.bottom
-        anchors.topMargin: 16
-
-        StatusDescriptionListItem {
-            title: qsTr("ENS username")
-            subTitle: root.profileStore.ensName
-            tooltip.text: qsTr("Copy to clipboard")
-            icon.name: "copy"
-            visible: !!root.profileStore.ensName
-            iconButton.onClicked: {
-                root.profileStore.copyToClipboard(root.profileStore.ensName)
-                tooltip.visible = !tooltip.visible
-            }
-            width: parent.width
-        }
-
-        StatusDescriptionListItem {
-            title: qsTr("Chat key")
-            subTitle: root.profileStore.pubkey
-            subTitleComponent.elide: Text.ElideMiddle
-            subTitleComponent.width: 320
-            subTitleComponent.font.family: Theme.palette.monoFont.name
-            tooltip.text: qsTr("Copy to clipboard")
-            icon.name: "copy"
-            iconButton.onClicked: {
-                root.profileStore.copyToClipboard(root.profileStore.pubkey)
-                tooltip.visible = !tooltip.visible
-            }
-            width: parent.width
-        }
-
-        StatusDescriptionListItem {
-            title: qsTr("Share Profile URL")
-            subTitle: `${Constants.userLinkPrefix}${root.profileStore.ensName !== "" ? root.profileStore.ensName : (root.profileStore.pubkey.substring(0, 5) + "..." + root.profileStore.pubkey.substring(root.profileStore.pubkey.length - 5))}`
-            tooltip.text: qsTr("Copy to clipboard")
-            icon.name: "copy"
-            iconButton.onClicked: {
-                root.profileStore.copyToClipboard(Constants.userLinkPrefix + (root.profileStore.ensName !== "" ? root.profileStore.ensName : root.profileStore.pubkey))
-                tooltip.visible = !tooltip.visible
-            }
-            width: parent.width
-        }
-    }
 }
 

ui/imports/shared/controls/chat/ProfileHeader.qml

@@ -27,6 +27,7 @@ Item {
     signal clicked()
 
     height: visible ? contentContainer.height : 0
+    implicitHeight: contentContainer.implicitHeight
 
     ColumnLayout {
         id: contentContainer