feat: add nickname modal

ui/app/AppLayouts/Chat/components/NicknamePopup.qml

@@ -0,0 +1,81 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
+import "../../../../imports"
+import "../../../../shared"
+import "./"
+
+ModalPopup {
+    property int nicknameLength: nicknameInput.textField.text.length
+    readonly property int maxNicknameLength: 32
+    property bool nicknameTooLong: nicknameLength > maxNicknameLength
+
+    id: popup
+
+    header: Item {
+        height: childrenRect.height
+        width: parent.width
+
+        StyledText {
+            id: nicknameTitle
+            text:  qsTr("Nickname")
+            anchors.top: parent.top
+            anchors.topMargin: 18
+            anchors.left: parent.left
+            anchors.leftMargin: Style.current.smallPadding
+            font.bold: true
+            font.pixelSize: 14
+        }
+
+        StyledText {
+            text: isEnsVerified ? alias : fromAuthor
+            width: 160
+            elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
+            anchors.left: nicknameTitle.left
+            anchors.top: nicknameTitle.bottom
+            anchors.topMargin: 2
+            font.pixelSize: 14
+            color: Style.current.secondaryText
+        }
+    }
+
+    StyledText {
+        id: descriptionText
+        text: qsTr("Nicknames help you identify others in Status. Only you can see the nicknames you’ve added")
+        font.pixelSize: 15
+        wrapMode: Text.WordWrap
+        color: Style.current.secondaryText
+        width: parent.width
+    }
+
+    Input {
+        id: nicknameInput
+        placeholderText: qsTr("Nickname")
+        anchors.top: descriptionText.bottom
+        anchors.topMargin: Style.current.padding
+        validationError: popup.nicknameTooLong ? qsTr("Your nickname is too long") : ""
+    }
+
+    StyledText {
+        id: lengthLimitText
+        text: popup.nicknameLength + "/" + popup.maxNicknameLength
+        font.pixelSize: 15
+        anchors.top: nicknameInput.bottom
+        anchors.topMargin: 12
+        anchors.right: parent.right
+        color: popup.nicknameTooLong ? Style.current.danger : Style.current.secondaryText
+    }
+
+    footer: StyledButton {
+        id: doneBtn
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.smallPadding
+        label: qsTr("Done")
+        anchors.bottom: parent.bottom
+        disabled: popup.nicknameLength === 0 || popup.nicknameTooLong
+        onClicked: {
+            console.log('Nickname set')
+        }
+    }
+}

ui/app/AppLayouts/Chat/components/ProfilePopup.qml

@@ -294,7 +294,15 @@ ModalPopup {
             anchors.top: nicknameTitle.top
             anchors.bottom: nicknameTitle.bottom
             onClicked: {
-                console.log('Go to nickname modal')
+                nicknamePopup.open()
+                popup.close()
+            }
+        }
+
+        NicknamePopup {
+            id: nicknamePopup
+            onClosed: {
+                popup.open()
             }
         }
     }

ui/nim-status-client.pro

@@ -155,6 +155,7 @@ DISTFILES += \
     app/AppLayouts/Chat/components/EmojiSection.qml \
     app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
     app/AppLayouts/Chat/components/MessageContextMenu.qml \
+    app/AppLayouts/Chat/components/NicknamePopup.qml \
     app/AppLayouts/Profile/LeftTab/Constants.js \
     app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \
     app/AppLayouts/Chat/data/EmojiReactions.qml \