feat(SharedAddressesAccountSelector): update account sorting

- implement sorting of the wallet accounts by the number of tokens (aka tags) and
then by alphabet
- due to the delegate complexity here and usage of nested models, keep
track of the tags count separately and outside of the model
- this will be improved later on as part of the complete sort/order
design described in https://github.com/status-im/status-desktop/issues/14192

Fixes #14101

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

@@ -170,6 +170,7 @@ StatusListView {
     spacing: Style.current.halfPadding
     delegate: StatusListItem {
         readonly property string address: model.address.toLowerCase()
+        readonly property int tokenCount: tagsCount
 
         id: listItem
         width: ListView.view.width - ListView.view.leftMargin - ListView.view.rightMargin
@@ -231,9 +232,11 @@ StatusListView {
                 inverted: true
             }
 
-            sorters: RoleSorter {
-                roleName: "symbol"
-            }
+            sorters: [
+                RoleSorter {
+                    roleName: "symbol"
+                }
+            ]
         }
 
         SortFilterProxyModel {

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

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 
+import StatusQ 0.1
 import StatusQ.Core 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
@@ -42,7 +43,7 @@ Control {
     required property var walletAssetsModel
     required property var walletCollectiblesModel
 
-    required property var walletAccountsModel // name, address, emoji, colorId, assets
+    required property var walletAccountsModel // name, address, emoji, colorId
     required property var permissionsModel  // id, key, permissionType, holdingsListModel, channelsListModel, isPrivate, tokenCriteriaMet
 
     required property var assetsModel
@@ -83,6 +84,13 @@ Control {
             return false
         }
 
+        property var tokenCountMap: new Map()
+        function getTokenCount(address) {
+            if (d.tokenCountMap.has(address))
+                return d.tokenCountMap.get(address)
+            return 0
+        }
+
         // warning states
         readonly property bool lostCommunityPermission: root.isEditMode && permissionsView.lostPermissionToJoin
         readonly property bool lostChannelPermissions: root.isEditMode && permissionsView.lostChannelPermissions
@@ -197,6 +205,7 @@ Control {
             Layout.preferredHeight: contentHeight + topMargin + bottomMargin
             Layout.maximumHeight: hasPermissions ? permissionsView.implicitHeight > root.availableHeight / 2 ? root.availableHeight / 2 : root.availableHeight : -1
             Layout.fillHeight: !hasPermissions
+            implicitHeight: contentHeight
 
             uniquePermissionAssetsKeys:
                 PermissionsHelpers.getUniquePermissionTokenKeys(
@@ -206,7 +215,28 @@ Control {
                 PermissionsHelpers.getUniquePermissionTokenKeys(
                     root.permissionsModel, Constants.TokenType.ERC721)
 
-            model: root.walletAccountsModel
+            model: SortFilterProxyModel {
+                sourceModel: root.walletAccountsModel
+                proxyRoles: FastExpressionRole {
+                    name: "tokenCount"
+                    expression: {
+                        d.tokenCountMap
+                        return d.getTokenCount(model.address.toLowerCase())
+                    }
+                    expectedRoles: ["address"]
+                }
+
+                sorters: [
+                    // FIXME add sort token-relevant accounts first; https://github.com/status-im/status-desktop/issues/14192
+                    RoleSorter {
+                        roleName: "tokenCount"
+                        sortOrder: Qt.DescendingOrder
+                    },
+                    RoleSorter {
+                        roleName: "name"
+                    }
+                ]
+            }
             walletAssetsModel: root.walletAssetsModel
             walletCollectiblesModel: root.walletCollectiblesModel
 
@@ -226,6 +256,17 @@ Control {
             getCurrencyAmount: function (balance, symbol) {
                 return root.getCurrencyAmount(balance, symbol)
             }
+
+            Component.onCompleted: {
+                const tmpTokenCountMap = new Map()
+                for (let i = 0; i < accountSelector.count; i++) {
+                    const item = accountSelector.itemAtIndex(i)
+                    if (!!item) {
+                        tmpTokenCountMap.set(item.address.toLowerCase(), item.tokenCount)
+                    }
+                }
+                d.tokenCountMap = tmpTokenCountMap
+            }
         }
 
         // divider with top rounded corners + drop shadow

ui/app/AppLayouts/stores/RootStore.qml

@@ -2,6 +2,8 @@ import QtQuick 2.13
 
 import utils 1.0
 
+import StatusQ 0.1
+
 import SortFilterProxyModel 0.2
 import AppLayouts.Wallet.stores 1.0 as WalletStore
 
@@ -62,24 +64,26 @@ QtObject {
     readonly property var globalAssetsModel: SortFilterProxyModel {
         sourceModel: communitiesModuleInst.tokenList
 
-        proxyRoles: ExpressionRole {
+        proxyRoles: FastExpressionRole {
             function tokenIcon(symbol) {
                 return Constants.tokenIcon(symbol)
             }
             name: "iconSource"
             expression: !!model.icon ? model.icon : tokenIcon(model.symbol)
+            expectedRoles: ["icon", "symbol"]
         }
     }
 
     readonly property var globalCollectiblesModel: SortFilterProxyModel {
         sourceModel: communitiesModuleInst.collectiblesModel
 
-        proxyRoles: ExpressionRole {
-            function icon(icon) {
+        proxyRoles: FastExpressionRole {
+            function collectibleIcon(icon) {
                 return !!icon ? icon : Style.png("tokens/DEFAULT-TOKEN")
             }
             name: "iconSource"
-            expression: icon(model.icon)
+            expression: collectibleIcon(model.icon)
+            expectedRoles: ["icon"]
         }
     }
 

ui/imports/shared/popups/CommunityMembershipSetupDialog.qml

@@ -183,27 +183,8 @@ StatusStackModal {
             }
         }
 
-        property var initialAddressesModel: SortFilterProxyModel {
+        readonly property var initialAddressesModel: SortFilterProxyModel {
             sourceModel: root.walletAccountsModel
-            sorters: [
-                FastExpressionSorter {
-                    function sortPredicate(lhs, rhs) {
-                        if (lhs.walletType === rhs.walletType) return 0
-                        return lhs.walletType === Constants.generatedWalletType ? -1 : 1
-                    }
-
-                    expression: {
-                        return sortPredicate(modelLeft, modelRight)
-                    }
-                    expectedRoles: ["walletType"]
-                },
-                RoleSorter {
-                    roleName: "position"
-                },
-                RoleSorter {
-                    roleName: "name"
-                }
-            ]
         }
 
         function proceedToSigningOrSubmitRequest(uidOfComponentThisFunctionIsCalledFrom) {