feat: implement new design for the nickname popup

src/app/profile/view.nim

@@ -281,7 +281,10 @@ QtObject:
     return self.status.contacts.addContact(pk)
 
   proc changeContactNickname*(self: ProfileView, publicKey: string, nickname: string) {.slot.} =
-    discard self.status.contacts.addContact(publicKey, nickname)
+    var nicknameToSet = nickname
+    if (nicknameToSet == ""):
+      nicknameToSet = DELETE_CONTACT
+    discard self.status.contacts.addContact(publicKey, nicknameToSet)
 
   proc unblockContact*(self: ProfileView, id: string) {.slot.} =
     discard self.status.contacts.unblockContact(id)

src/status/contacts.nim

@@ -2,6 +2,8 @@ import eventemitter, json, sequtils
 import libstatus/contacts as status_contacts
 import profile/profile
 
+const DELETE_CONTACT* = "__deleteThisContact__"
+
 type
   ContactModel* = ref object
     events*: EventEmitter
@@ -45,6 +47,8 @@ proc addContact*(self: ContactModel, id: string, localNickname: string): string
   let nickname =
     if (localNickname == ""):
       contact.localNickname
+    elif (localNickname == DELETE_CONTACT):
+      ""
     else:
       localNickname
   result = status_contacts.saveContact(contact.id, contact.ensVerified, contact.ensName, contact.ensVerifiedAt, contact.ensVerificationRetries, contact.alias, contact.identicon, contact.systemTags, nickname)

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

@@ -12,7 +12,12 @@ ModalPopup {
     property bool nicknameTooLong: nicknameLength > maxNicknameLength
 
     id: popup
-    height: 325
+    width: 400
+    height: 390
+
+    onOpened: {
+        nicknameInput.forceActiveFocus(Qt.MouseFocusReason)
+    }
 
     header: Item {
         height: childrenRect.height
@@ -80,11 +85,16 @@ ModalPopup {
         //% "Done"
         label: qsTrId("done")
         anchors.bottom: parent.bottom
-        disabled: popup.nicknameLength === 0 || popup.nicknameTooLong
+        disabled: popup.nicknameTooLong
         onClicked: {
-            if (!userName.startsWith("@")) {
-                // Replace username only if it was not an ENS name
-                userName = nicknameInput.textField.text
+            if (!isEnsVerified) {
+                // Change username title only if it was not an ENS name
+                 if (nicknameInput.textField.text === "") {
+                     // If we removed the nickname, go back to showing the alias
+                     userName = alias
+                 } else {
+                     userName = nicknameInput.textField.text
+                 }
             }
             nickname = nicknameInput.textField.text
             profileModel.changeContactNickname(fromAuthor, nicknameInput.textField.text)

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

@@ -10,7 +10,7 @@ ModalPopup {
     id: popup
     property var identicon: ""
     property var userName: ""
-    property var nickname: ""
+    property string nickname: ""
     property var fromAuthor: ""
     property var text: ""
     property var alias: ""
@@ -300,15 +300,11 @@ ModalPopup {
             anchors.bottom: nicknameTitle.bottom
             onClicked: {
                 nicknamePopup.open()
-                popup.close()
             }
         }
 
         NicknamePopup {
             id: nicknamePopup
-            onClosed: {
-                popup.open()
-            }
         }
     }