fix: Optimize ContactsView & MembersTabPanel settings pages

- removed nested ListViews inside StackLayouts, in order to reduce the
memory footprint and improve performance, and also to be able to better
manage the scrolling
- no more unrolled multiple listviews, which again hurt the performance;
now the views instantiate the delegates dynamically on the fly
- the tab bar and the search fields now stick to the top of the page,
with the users list view scrolling independently
- both views now uniformly use the common `ContactListItemDelegate`
- the received/sent CRs are now combined into one `pendingContacts`
model
- factored out common search/filter criteria into a new, separate SFPM
`UserFilterContainer` component
- fix an issue where StatusContactVerificationIcons wasn't properly
displaying the "blocked" state/icon
- fix documentation comments, removed relative imports, and updated some

Fixes #16612
Fixes #16958

storybook/pages/ContactsViewPage.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ 0.1
+
+import Models 1.0
+import Storybook 1.0
+
+import SortFilterProxyModel 0.2
+
+import utils 1.0
+
+import shared.stores 1.0 as SharedStores
+import AppLayouts.Profile.views 1.0
+import AppLayouts.Profile.stores 1.0
+import mainui.adaptors 1.0
+
+Item {
+    id: root
+
+    ContactsView {
+        sectionTitle: "Contacts"
+        anchors.fill: parent
+        anchors.leftMargin: 64
+        anchors.topMargin: 16
+        contentWidth: 560
+
+        contactsStore: ContactsStore {
+            function joinPrivateChat(pubKey) {}
+            function acceptContactRequest(pubKey, contactRequestId) {}
+            function dismissContactRequest(pubKey, contactRequestId) {}
+        }
+        utilsStore: SharedStores.UtilsStore {
+            function getEmojiHash(publicKey) {
+                if (publicKey === "")
+                    return ""
+
+                return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
+            }
+        }
+
+        mutualContactsModel: adaptor.mutualContacts
+        blockedContactsModel: adaptor.blockedContacts
+        pendingContactsModel: adaptor.pendingContacts
+        pendingReceivedContactsCount: adaptor.pendingReceivedRequestContacts.count
+    }
+
+    ContactsModelAdaptor {
+        id: adaptor
+        allContacts: SortFilterProxyModel {
+            sourceModel: UsersModel {}
+            proxyRoles: [
+                FastExpressionRole {
+                    function displayNameProxy(localNickname, ensName, displayName, aliasName) {
+                        return ProfileUtils.displayName(localNickname, ensName, displayName, aliasName)
+                    }
+
+                    name: "preferredDisplayName"
+                    expectedRoles: ["localNickname", "displayName", "ensName", "alias"]
+                    expression: displayNameProxy(model.localNickname, model.ensName, model.displayName, model.alias)
+                }
+            ]
+        }
+    }
+}
+
+// category: Views
+// status: good

storybook/pages/MembersTabPanelPage.qml

@@ -8,62 +8,42 @@ import AppLayouts.Communities.panels 1.0
 import AppLayouts.Chat.stores 1.0 as ChatStores
 import AppLayouts.Profile.stores 1.0 as ProfileStores
 
+import shared.stores 1.0
 import utils 1.0
 
 import Models 1.0
 import SortFilterProxyModel 0.2
 import Storybook 1.0
 
 import StatusQ 0.1
-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 = {}
-        }
-    }
-
     MembersTabPanel {
         id: membersTabPanelPage
         SplitView.fillWidth: true
         SplitView.fillHeight: true
-        placeholderText: "Search users"
         model: usersModelWithMembershipState
         panelType: viewStateSelector.currentValue
+        searchString: ctrlSearch.text
 
         rootStore: ChatStores.RootStore {
             contactsStore: ProfileStores.ContactsStore {
                 readonly property string myPublicKey: "0x000"
             }
         }
+        utilsStore: UtilsStore {
+            function getEmojiHash(publicKey) {
+                if (publicKey === "")
+                    return ""
+
+                return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
+            }
+        }
 
         onKickUserClicked: {
             logs.logEvent("MembersTabPanel::onKickUserClicked", ["id", "name"], arguments)
@@ -132,7 +112,7 @@ SplitView {
     }
 
     LogsAndControlsPanel {
-        SplitView.minimumHeight: 100
+        SplitView.minimumHeight: 200
         SplitView.preferredHeight: 320
 
         logsView.logText: logs.logText
@@ -144,6 +124,7 @@ SplitView {
             }
 
             ComboBox {
+                Layout.preferredWidth: 300
                 id: viewStateSelector
                 textRole: "text"
                 valueRole: "value"
@@ -155,6 +136,13 @@ SplitView {
                      ListElement { text: "Declined Members"; value: MembersTabPanel.TabType.DeclinedRequests }
                  }
             }
+
+            Label { text: "Search" }
+            TextField {
+                id: ctrlSearch
+                Layout.preferredWidth: 300
+                placeholderText: "Search by member name or chat key"
+            }
         }
     }
 
@@ -163,4 +151,6 @@ SplitView {
     }
 }
 
+// category: Panels
+// status: good
 // https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=35909-605774&mode=design&t=KfrAekLfW5mTy68x-0

storybook/pages/StatusTabBarPage.qml

@@ -29,7 +29,7 @@ Item {
             StatusTabButton {
                 width: implicitWidth
                 enabled: false
-                text: qsTr("Blocked & disabled")
+                text: "Blocked & disabled"
             }
             StatusTabButton {
                 width: implicitWidth

storybook/src/Models/UsersModel.qml

@@ -9,9 +9,10 @@ ListModel {
             compressedPubKey: "zQ3shQBu4PRDX17vewYyvSczbTj344viTXxcMNvQLeyQsBDF4",
             onlineStatus: Constants.onlineStatus.online,
             isContact: true,
+            isBlocked: false,
             isVerified: false,
             isAdmin: false,
-            isUntrustworthy: true,
+            isUntrustworthy: false,
             displayName: "Mike has a very long name that should elide " +
                          "eventually and result in a tooltip displayed instead",
             alias: "",
@@ -26,13 +27,15 @@ ListModel {
             ],
             isAwaitingAddress: false,
             memberRole: Constants.memberRole.none,
-            trustStatus: Constants.trustStatus.untrustworthy
+            trustStatus: Constants.trustStatus.unknown
         },
         {
             pubKey: "0x04df12f12f12f12f1234",
             compressedPubKey: "zQ3shQBAAPRDX17vewYyvSczbTj344viTXxcMNvQLeyQsBDF4",
             onlineStatus: Constants.onlineStatus.inactive,
             isContact: false,
+            contactRequest: Constants.ContactRequestState.Sent,
+            isBlocked: false,
             isVerified: false,
             isAdmin: false,
             isUntrustworthy: false,
@@ -49,13 +52,14 @@ ListModel {
             ],
             isAwaitingAddress: false,
             memberRole: Constants.memberRole.owner,
-            trustStatus: Constants.trustStatus.trusted
+            trustStatus: Constants.trustStatus.unknown
         },
         {
             pubKey: "0x04d1b7cc0ef3f470f1238",
             compressedPubKey: "zQ3shQ7u3PRDX17vewYyvSczbTj344viTXxcMNvQLeyQsCDF4",
             onlineStatus: Constants.onlineStatus.inactive,
             isContact: false,
+            isBlocked: true,
             isVerified: false,
             isAdmin: false,
             isUntrustworthy: true,
@@ -66,6 +70,10 @@ ListModel {
             icon: ModelsData.icons.dragonereum,
             colorId: 4,
             isEnsVerified: false,
+            colorHash: [
+                { colorId: 7, segmentLength: 3 },
+                { colorId: 12, segmentLength: 1 }
+            ],
             isAwaitingAddress: false,
             memberRole: Constants.memberRole.none,
             trustStatus: Constants.trustStatus.untrustworthy
@@ -75,16 +83,17 @@ ListModel {
             compressedPubKey: "zQ3shQAL4PRDX17vewYyvSczbTj344viTXxcMNvQLeyQsBDF4",
             onlineStatus: Constants.onlineStatus.online,
             isContact: true,
-            isVerified: true,
+            isBlocked: false,
+            isVerified: false,
             isAdmin: false,
             isUntrustworthy: true,
             displayName: "Maria",
             alias: "meth",
-            localNickname: "86.eth",
-            ensName: "8⃣_6⃣.eth",
+            localNickname: "",
+            ensName: "",
             icon: "",
             colorId: 5,
-            isEnsVerified: true,
+            isEnsVerified: false,
             isAwaitingAddress: false,
             memberRole: Constants.memberRole.none,
             trustStatus: Constants.trustStatus.untrustworthy
@@ -93,8 +102,10 @@ ListModel {
             pubKey: "0x04d1bed192343f470f1255",
             compressedPubKey: "zQ3shQBu4PGDX17vewYyvSczbTj344viTXxcMNvQLeyQsBD1A",
             onlineStatus: Constants.onlineStatus.online,
-            isContact: true,
-            isVerified: true,
+            isContact: false,
+            contactRequest: Constants.ContactRequestState.Received,
+            isBlocked: false,
+            isVerified: false,
             isAdmin: true,
             isUntrustworthy: true,
             displayName: "",
@@ -113,7 +124,8 @@ ListModel {
             compressedPubKey: "zQ3shQBk4PRDX17vewYyvSczbTj344viTXxcMNvQLeyQsB994",
             onlineStatus: Constants.onlineStatus.inactive,
             isContact: true,
-            isVerified: false,
+            isBlocked: false,
+            isVerified: true,
             isAdmin: false,
             isUntrustworthy: false,
             displayName: "",

storybook/src/Storybook/CheckBoxFlowSelector.qml

@@ -1,10 +1,5 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-
-import StatusQ.Core.Utils 0.1
-
-import utils 1.0
 
 Flow {
     id: root

test/e2e/gui/objects_map/settings_names.py

@@ -52,7 +52,7 @@
 settingsContentBaseScrollView_Item = {"container": mainWindow_ContactsView, "type": "Item", "unnamed": 1, "visible": True}
 settingsContentBaseScrollView_sentRequests_ContactsListPanel = {"container": mainWindow_ContactsView, "objectName": "sentRequests_ContactsListPanel", "type": "ContactsListPanel", "visible": True}
 contactsTabBar_Contacts_StatusTabButton = {"container": mainWindow_ContactsView, "id": "contactsBtn", "type": "StatusTabButton", "unnamed": 1, "visible": True}
-settingsContentBaseScrollView_receivedRequests_ContactsListPanel = {"container": mainWindow_ContactsView, "objectName": "receivedRequests_ContactsListPanel", "type": "ContactsListPanel", "visible": True}
+settingsContentBaseScrollView_receivedRequests_ContactsListPanel = {"container": mainWindow_ContactsView, "objectName": "ContactsListPanel", "type": "ContactsListPanel", "visible": True}
 settingsContentBaseScrollView_mutualContacts_ContactsListPanel = {"container": mainWindow_ContactsView, "id": "mutualContacts", "type": "ContactsListPanel", "unnamed": 1, "visible": True}
 settingsContentBaseScrollView_Invite_friends_StatusButton = {"container": mainWindow_ContactsView, "type": "StatusButton", "unnamed": 1, "visible": True}
 settingsContentBaseScrollView_NoFriendsRectangle = {"container": mainWindow_ContactsView, "type": "NoFriendsRectangle", "unnamed": 1, "visible": True}

ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml

@@ -71,7 +71,7 @@ Row {
     }
 
     spacing: 4
-    visible: root.isContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
+    visible: root.isContact || root.isBlocked || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
 
     HoverHandler {
         id: hoverHandler
@@ -104,7 +104,8 @@ Row {
 
     // (un)trusted
     StatusRoundIcon {
-        visible: !root.isBlocked && root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None
+        visible: !root.isBlocked && (root.trustIndicator === StatusContactVerificationIcons.TrustedType.Untrustworthy ||
+                                     (root.isContact && trustIndicator === StatusContactVerificationIcons.TrustedType.Verified))
         asset: root.trustContactIcon
     }