fix: the member search is adding empty spaces on the search results

Also fix other smaller issues found in this panel:
- display correct user name (not just `model.displayName`)
- do not display tooltips for invisible buttons
- vertically center the action buttons
- use `SearchBox` for consistency

Fixes #11848

storybook/pages/CommunityTokenViewPage.qml

@@ -333,14 +333,14 @@ SplitView {
                         CheckBox {
                             id: transferibleChecker
 
-                            text: "Tranferible"
+                            text: "Tranferable"
                             checked: true
                         }
 
                         CheckBox {
                             id: selfdestructChecker
 
-                            text: "Remote self-desctruct"
+                            text: "Remote self-destruct"
                             checked: true
                         }
                     }

storybook/pages/MembersTabPanelPage.qml

@@ -12,38 +12,78 @@ import Models 1.0
 import SortFilterProxyModel 0.2
 import Storybook 1.0
 
+import StatusQ.Core.Utils 0.1 as SQUtils
+
 SplitView {
     id: root
 
     orientation: Qt.Vertical
     Logs { id: logs }
 
+    // Utils.globalUtilsInst mock
+    QtObject {
+        function getEmojiHashAsJson(publicKey) {
+            return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
+        }
+
+        function getColorId(publicKey) {
+            return SQUtils.ModelUtils.getByKey(usersModel, "pubKey", publicKey, "colorId")
+        }
+
+        function getCompressedPk(publicKey) { return "zx3sh" + publicKey }
+
+        function getColorHashAsJson(publicKey) {
+            return JSON.stringify([{colorId: 0, segmentLength: 1},
+                                   {colorId: 19, segmentLength: 2}])
+        }
+
+        function isCompressedPubKey(publicKey) { return true }
+
+        Component.onCompleted: {
+            Utils.globalUtilsInst = this
+        }
+        Component.onDestruction: {
+            Utils.globalUtilsInst = {}
+        }
+    }
+
+    // Global.userProfile mock
+    QtObject {
+        readonly property string pubKey: "0x043a7ed0e8d1012cf04" // Mike from UsersModel
+        Component.onCompleted: {
+            Global.userProfile = this
+        }
+        Component.onDestruction: {
+            Utils.userProfile = {}
+        }
+    }
+
     MembersTabPanel {
         id: membersTabPanelPage
         SplitView.fillWidth: true
         SplitView.fillHeight: true
-        placeholderText: "Placeholder text"
+        placeholderText: "Search users"
         model: usersModelWithMembershipState
         panelType: viewStateSelector.currentValue
 
         onKickUserClicked: {
-            logs.logEvent("MembersTabPanel::onKickUserClicked")
+            logs.logEvent("MembersTabPanel::onKickUserClicked", ["id", "name"], arguments)
         }
 
         onBanUserClicked: {
-            logs.logEvent("MembersTabPanel::onBanUserClicked")
+            logs.logEvent("MembersTabPanel::onBanUserClicked", ["id", "name"], arguments)
         }
 
         onUnbanUserClicked: {
-            logs.logEvent("MembersTabPanel::onUnbanUserClicked")
+            logs.logEvent("MembersTabPanel::onUnbanUserClicked", ["id"], arguments)
         }
 
         onAcceptRequestToJoin: {
-            logs.logEvent("MembersTabPanel::onAcceptRequestToJoin")
+            logs.logEvent("MembersTabPanel::onAcceptRequestToJoin", ["id"], arguments)
         }
 
         onDeclineRequestToJoin: {
-            logs.logEvent("MembersTabPanel::onDeclineRequestToJoin")
+            logs.logEvent("MembersTabPanel::onDeclineRequestToJoin", ["id"], arguments)
         }
     }
 
@@ -51,7 +91,6 @@ SplitView {
         id: usersModel
     }
 
-
     SortFilterProxyModel {
         id: usersModelWithMembershipState
         readonly property var membershipStatePerView: [
@@ -106,7 +145,6 @@ SplitView {
                  }
             }
         }
-
     }
 
     Settings {

storybook/src/Models/UsersModel.qml

@@ -7,9 +7,9 @@ ListModel {
         pubKey: "0x043a7ed0e8d1012cf04"
         onlineStatus: 1
         isContact: true
-        isVerified: true
+        isVerified: false
         isAdmin: false
-        isUntrustworthy: false
+        isUntrustworthy: true
         displayName: "Mike"
         alias: ""
         localNickname: ""
@@ -17,12 +17,13 @@ ListModel {
         icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
               nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         colorId: 7
+        isEnsVerified: false
     }
     ListElement {
         pubKey: "0x04df12f12f12f12f1234"
         onlineStatus: 0
-        isContact: true
+        isContact: false
-        isVerified: true
+        isVerified: false
         isAdmin: false
         isUntrustworthy: false
         displayName: "Jane"
@@ -30,24 +31,26 @@ ListModel {
         localNickname: ""
         ensName: ""
         icon: ""
-        colorId: 7
+        colorId: 9
+        isEnsVerified: false
     }
     ListElement {
         pubKey: "0x04d1b7cc0ef3f470f1238"
         onlineStatus: 0
-        isContact: true
+        isContact: false
         isVerified: false
         isAdmin: false
         isUntrustworthy: true
         displayName: "John"
         alias: ""
-        localNickname: "Johny Johny"
+        localNickname: "Johnny Johny"
         ensName: ""
         icon: ""
-        colorId: 7
+        colorId: 4
+        isEnsVerified: false
     }
     ListElement {
-        pubKey: "0x04d1bed192343f470f1255"
+        pubKey: "0x04d1bed192343f470f1257"
         onlineStatus: 1
         isContact: true
         isVerified: true
@@ -58,6 +61,22 @@ ListModel {
         localNickname: ""
         ensName: "maria.eth"
         icon: ""
-        colorId: 7
+        colorId: 5
+        isEnsVerified: true
+    }
+    ListElement {
+        pubKey: "0x04d1bed192343f470f1255"
+        onlineStatus: 1
+        isContact: true
+        isVerified: true
+        isAdmin: true
+        isUntrustworthy: true
+        displayName: ""
+        alias: "Richard The Lionheart"
+        localNickname: ""
+        ensName: "richard-the-lionheart.eth"
+        icon: ""
+        colorId: 3
+        isEnsVerified: true
     }
 }

ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml

@@ -42,20 +42,15 @@ Item {
         anchors.fill: parent
         spacing: 30
 
-        StatusInput {
+        SearchBox {
             id: memberSearch
             Layout.preferredWidth: 400
             Layout.leftMargin: 12
-            maximumHeight: 36
-            topPadding: 0
-            bottomPadding: 0
-            rightPadding: 0
             placeholderText: root.placeholderText
-            input.asset.name: "search"
             enabled: !!model && model.count > 0
         }
 
-        ListView {
+        StatusListView {
             id: membersList
             objectName: "CommunityMembersTabPanel_MembersListViews"
 
@@ -63,13 +58,12 @@ Item {
             Layout.fillHeight: true
 
             model: root.model
-            clip: true
+            spacing: 0
-            spacing: 15
 
             delegate: StatusMemberListItem {
                 id: memberItem
 
-                readonly property bool itsMe: model.pubKey.toLowerCase() === userProfile.pubKey.toLowerCase()
+                readonly property bool itsMe: model.pubKey.toLowerCase() === Global.userProfile.pubKey.toLowerCase()
                 readonly property bool isHovered: memberItem.sensor.containsMouse
                 readonly property bool canBeBanned: !memberItem.itsMe && (model.memberRole !== Constants.memberRole.owner && model.memberRole !== Constants.memberRole.admin)
                 readonly property bool canEnableKickBanButtons: canBeBanned && root.panelType === MembersTabPanel.TabType.AllMembers
@@ -91,6 +85,7 @@ Item {
                 components: [
                     DisabledTooltipButton {
                         id: kickButton
+                        anchors.verticalCenter: parent.verticalCenter
                         visible: kickVisible
                         interactive: kickEnabled
                         tooltipText: qsTr("Waiting for owner node to come online")
@@ -99,27 +94,29 @@ Item {
                             text: model.membershipRequestState === Constants.CommunityMembershipRequestState.KickedPending ? qsTr("Kick pending") : qsTr("Kick")
                             type: StatusBaseButton.Type.Danger
                             size: StatusBaseButton.Size.Small
-                            onClicked: root.kickUserClicked(model.pubKey, model.displayName)
+                            onClicked: root.kickUserClicked(model.pubKey, memberItem.title)
                             enabled: kickButton.interactive
                         }
                     },
 
                     DisabledTooltipButton {
                         id: banButton
+                        anchors.verticalCenter: parent.verticalCenter
                         //using opacity instead of visible to avoid the acceptButton jumping around
                         opacity: banVisible
                         interactive: banEnabled
-                        tooltipText: qsTr("Waiting for owner node to come online")
+                        tooltipText: banVisible ? qsTr("Waiting for owner node to come online") : ""
                         buttonComponent: StatusButton {
                             text: model.membershipRequestState === Constants.CommunityMembershipRequestState.BannedPending || !banVisible ? qsTr("Ban pending") : qsTr("Ban")
                             type: StatusBaseButton.Type.Danger
                             size: StatusBaseButton.Size.Small
-                            onClicked: root.banUserClicked(model.pubKey, model.displayName)
+                            onClicked: root.banUserClicked(model.pubKey, memberItem.title)
                             enabled: banButton.interactive
                         }
                     },
 
                     StatusButton {
+                        anchors.verticalCenter: parent.verticalCenter
                         visible: unBanVisible
                         text: qsTr("Unban")
                         onClicked: root.unbanUserClicked(model.pubKey)
@@ -127,6 +124,7 @@ Item {
 
                     DisabledTooltipButton {
                         id: acceptButton
+                        anchors.verticalCenter: parent.verticalCenter
                         visible: ((root.panelType === MembersTabPanel.TabType.PendingRequests ||
                                     root.panelType === MembersTabPanel.TabType.DeclinedRequests) && isHovered) || 
                                     isAcceptedPending
@@ -149,6 +147,7 @@ Item {
 
                     DisabledTooltipButton {
                         id: rejectButton
+                        anchors.verticalCenter: parent.verticalCenter
                         //using opacity instead of visible to avoid the acceptButton jumping around 
                         opacity: ((root.panelType === MembersTabPanel.TabType.PendingRequests) && isHovered) || isRejectedPending
                                     //TODO: Only the current user can reject a pending request, so we should check that here
@@ -188,7 +187,7 @@ Item {
                     if(mouse.button === Qt.RightButton) {
                         Global.openMenu(memberContextMenuComponent, this, {
                                             selectedUserPublicKey: model.pubKey,
-                                            selectedUserDisplayName: userName,
+                                            selectedUserDisplayName: memberItem.title,
                                             selectedUserIcon: asset.name,
                                         })
                     } else {
@@ -205,7 +204,7 @@ Item {
         ProfileContextMenu {
             id: memberContextMenuView
             store: root.rootStore
-            myPublicKey: userProfile.pubKey
+            myPublicKey: Global.userProfile.pubKey
 
             onOpenProfileClicked: {
                 Global.openProfilePopup(publicKey, null)