fix(StatusItemsSelector): Allow icons to be provided by the model

Fixing https://github.com/status-im/status-desktop/issues/9766
The main change is that the model will now provide the image type, on top of the image source. The image type can be either icon or image. Icons will be coloured with the same colour as the text.

storybook/pages/StatusItemSelectorPage.qml

@@ -44,6 +44,7 @@ ColumnLayout {
                         model.append({
                             text: input.text,
                             imageSource: Style.png("tokens/SNT"),
+                            isIcon: false,
                             operator: model.count > 0 ? OperatorsUtils.Operators.Or
                                                       : OperatorsUtils.Operators.None
                         })

ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml

@@ -55,6 +55,7 @@ StatusFlowSelector {
             ListElement {
                 text: "Socks"
                 imageSource: "qrc:imports/assets/png/tokens/SOCKS.png"
+                isIcon: false
                 color: ""
                 emoji: ""
                 operator: Utils.Operator.None
@@ -62,6 +63,7 @@ StatusFlowSelector {
             ListElement {
                 text: "ZRX"
                 imageSource: "qrc:imports/assets/png/tokens/ZRX.png"
+                isIcon: false
                 color: ""
                 emoji: ""
                 operator: Utils.Operator.Or
@@ -69,6 +71,7 @@ StatusFlowSelector {
             ListElement {
                 text: "Custom Token"
                 imageSource: ""
+                isIcon: true
                 color: "red"
                 emoji: "⚽"
                 operator: Utils.Operator.Or
@@ -77,18 +80,13 @@ StatusFlowSelector {
        \endqml
     */
     property alias model: repeater.model
-    /*!
-       \qmlproperty bool StatusItemSelector::useIcons
-       This property determines if the imageSource role from the model will be handled as
-       an image or an icon.
-    */
-    property bool useIcons: false
 
     property StatusAssetSettings asset: StatusAssetSettings {
         height: 20
         width: 20
+        bgHeight: height
+        bgWidth: width
         bgColor: "transparent"
-        isImage: !root.useIcons
         isLetterIdenticon: root.useLetterIdenticons
     }
     property int tagLeftPadding: 6
@@ -146,11 +144,13 @@ StatusFlowSelector {
 
                 asset.height: root.asset.height
                 asset.width: root.asset.width
+                asset.bgHeight: root.asset.bgHeight
+                asset.bgWidth: root.asset.bgWidth
                 asset.name: root.useLetterIdenticons ? model.text : (model.imageSource ?? "")
-                asset.isImage: root.asset.isImage
+                asset.isImage: !model.isIcon
                 asset.bgColor: root.asset.bgColor
                 asset.emoji: model.emoji ? model.emoji : ""
-                asset.color: model.color ? model.color : ""
+                asset.color: model.color ? model.color : titleText.color
                 asset.isLetterIdenticon: root.useLetterIdenticons
                 closeButtonVisible: false
                 titleText.color: Theme.palette.primaryColor1

ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml

@@ -102,10 +102,13 @@ Control{
                     leftPadding: 2
                     title: model.text
                     asset.name: model.imageSource
-                    asset.isImage: true
+                    asset.isImage: !model.isIcon
                     asset.bgColor: "transparent"
+                    asset.color: asset.isImage ? "transparent" : titleText.color
                     asset.height: 28
                     asset.width: asset.height
+                    asset.bgHeight: asset.height
+                    asset.bgWidth: asset.height
                     closeButtonVisible: false
                     titleText.color: Theme.palette.primaryColor1
                     titleText.font.pixelSize: d.tagTextPixelSize

ui/app/AppLayouts/Chat/panels/communities/HoldingsListPanel.qml

@@ -74,10 +74,13 @@ Control {
                                 leftPadding: 2
                                 title: model.text
                                 asset.name: model.imageSource
-                                asset.isImage: true
+                                asset.isImage: !model.isIcon
                                 asset.bgColor: "transparent"
                                 asset.height: 28
                                 asset.width: asset.height
+                                asset.bgWidth: asset.height
+                                asset.bgHeight: asset.height
+                                asset.color: asset.isImage ? "transparent" : titleText.color
                                 closeButtonVisible: false
                                 titleText.color: model.available ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
                                 bgColor: model.available ? Theme.palette.primaryColor2 :Theme.palette.dangerColor2

ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml

@@ -475,6 +475,7 @@ StatusScrollView {
                 Component.onCompleted: {
                     append({
                         imageSource: inDropdown.communityImage,
+                        isIcon: false,
                         text: inDropdown.communityName,
                         operator: OperatorsUtils.Operators.None,
                         color: inDropdown.communityColor

ui/app/AppLayouts/Chat/views/communities/HoldingsSelectionModel.qml

@@ -56,7 +56,7 @@ SortFilterProxyModel {
 
             function getIcon(type, key) {
                 if (type === HoldingTypes.Type.Ens)
-                    return Style.svg("profile/ensUsernames")
+                    return "username"
 
                 const model = type === HoldingTypes.Type.Asset
                             ? assetsModel : collectiblesModel
@@ -70,6 +70,19 @@ SortFilterProxyModel {
                 return getIcon(model.type, model.key)
             }
         },
+        ExpressionRole {
+            name: "isIcon"
+
+            function isIconType(type) {
+                return type === HoldingTypes.Type.Ens
+            }
+
+            expression: {
+                _assetsChanges.revision
+                _collectiblesChanges.revision
+                return isIconType(model.type)
+            }
+        },
         ExpressionRole {
             name: "operator"