feat(CommunityPortal/StatusCommunityCard): Prepared `StatusCommunityCard` to display permissions row

- `StatusCommunityCard` updated with a new hearder component.
- `CommunitiesGridView` updated to use `CommunityPermissionsRow` component inside card.
- Added needed models.
- Updated storybook.

Pending backend integration: Part of task #10410

storybook/pages/CommunitiesPortalDummyModel.qml

@@ -38,7 +38,9 @@ ListModel {
                     "name": "Career",
                     "emoji": "💼",
                 },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.shortPermissionsModel,
+            allTokenRequirementsMet: true
         },
         {
             featured: true,
@@ -66,7 +68,9 @@ ListModel {
                     "name": "Career",
                     "emoji": "💼",
                 },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.twoShortPermissionsModel,
+            allTokenRequirementsMet: false
         },
         {
             featured: true,
@@ -90,7 +94,9 @@ ListModel {
                     "name": "Career",
                     "emoji": "💼",
                 },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.moreThanTwoInitialShortPermissionsModel,
+            allTokenRequirementsMet: false
 
 
         },
@@ -112,7 +118,9 @@ ListModel {
                     "name": "Career",
                     "emoji": "💼",
                 },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.longPermissionsModel,
+            allTokenRequirementsMet: false
         },
         {
             featured: false,
@@ -127,7 +135,9 @@ ListModel {
             activeMembers: 2800,
             popularity: 4,
             available: true,
-            tags: JSON.stringify([])
+            tags: JSON.stringify([]),
+            permissionsModel: PermissionsModel.threeShortPermissionsModelData,
+            allTokenRequirementsMet: false
         },
         {
             featured: false,
@@ -155,7 +165,9 @@ ListModel {
                     "name": "Books & blogs",
                     "emoji": "📚",
                 },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.threeShortPermissionsModel,
+            allTokenRequirementsMet: true
         },
         {
             featured: false,
@@ -171,6 +183,8 @@ ListModel {
             popularity: 4,
             available: true,
             tags: JSON.stringify([]),
+            permissionsModel: PermissionsModel.threeShortPermissionsModel,
+            allTokenRequirementsMet: false
         },
         {
             featured: false,
@@ -202,7 +216,9 @@ ListModel {
                     "name": "Career",
                     "emoji": "💼",
                 },
-            ])
+            ]),
+            permissionsModel: PermissionsModel.longPermissionsModel,
+            allTokenRequirementsMet: true
         },
         {
             featured: false,

storybook/pages/CommunitiesPortalLayoutPage.qml

@@ -29,6 +29,8 @@ SplitView {
             SplitView.fillWidth: true
             SplitView.fillHeight: true
 
+            assetsModel: AssetsModel {}
+            collectiblesModel:  CollectiblesModel {}
             communitiesStore: CommunitiesStore {
                 readonly property int unreadNotificationsCount: 42
                 readonly property string communityTags: ModelsData.communityTags

ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -146,7 +146,6 @@ StatusSectionLayout {
                             activeUsers: model.activeUsers
                             popularity: model.popularity
                             tokenLogo: model.tokenLogo
-                            isPrivate: model.isPrivate
                             banner: model.banner
 
                             onClicked: { d.navigateToCommunity(communityId) }

ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml

@@ -109,18 +109,19 @@ Rectangle {
        If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF".
     */
     property color communityColor: Theme.palette.primaryColor1
-    /*!
-       \qmlproperty bool StatusCommunityCard::isPrivate
-       This property holds if the community is private.
-       If not provided, default value is false.
-    */
-    property bool isPrivate: false
     /*!
        \qmlproperty url StatusCommunityCard::tokenLogo
        This property holds the image of the token needed if the community is private.
     */
     property url tokenLogo: ""
 
+    /*!
+       \qmlproperty Item StatusCommunityCard::rigthHeaderComponent
+       This property holds an extra info header component that will be displayed on top right of the card.
+       Example: Community token permissions row.
+    */
+    property alias rigthHeaderComponent: rightHeaderLoader.sourceComponent
+
     /*!
         \qmlsignal StatusCommunityCard::clicked(string communityId)
         This signal is emitted when the card item is clicked.
@@ -249,36 +250,16 @@ Rectangle {
         color: d.cardColor
         radius: d.cardRadius
         clip: true
-        // Community restriccions
-        Rectangle {
-            visible: root.isPrivate
+
+        // Right header extra info component
+        Loader {
+            id: rightHeaderLoader
             anchors.top: parent.top
             anchors.topMargin: 8
             anchors.right: parent.right
             anchors.rightMargin: anchors.topMargin
-            width: 48
-            height: 24
-            color: d.loadingColor2
-            radius: 200
-            StatusIcon {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.leftMargin: 6
-                anchors.left: parent.left
-                icon: "tiny/unlocked"
-                width: 16
-                height: 16
-                color: Theme.palette.baseColor1
-            }
-            StatusRoundedImage {
-                anchors.rightMargin: 2
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                width: 20
-                height: width
-                image.source: root.tokenLogo
-                color: "transparent"
-            }
         }
+
         // Community info
         ColumnLayout {
             anchors.fill: parent

ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml

@@ -24,13 +24,16 @@ import "views"
 
 StatusSectionLayout {
     id: root
-    objectName: "communitiesPortalLayout"
 
     property CommunitiesStore communitiesStore: CommunitiesStore {}
     property var importCommunitiesPopup: importCommunitiesPopupComponent
     property var createCommunitiesPopup: createCommunitiesPopupComponent
     property var discordImportProgressPopup: discordImportProgressDialog
 
+    property alias assetsModel: communitiesGrid.assetsModel
+    property alias collectiblesModel: communitiesGrid.collectiblesModel
+
+    objectName: "communitiesPortalLayout"
     notificationCount: activityCenterStore.unreadNotificationsCount
     onNotificationButtonClicked: Global.openActivityCenterPopup()
 
@@ -166,6 +169,7 @@ StatusSectionLayout {
 
                 CommunitiesGridView {
                     id: communitiesGrid
+
                     anchors.fill: parent
                     anchors.rightMargin: d.preventShadowClipMargin
                     anchors.leftMargin: d.preventShadowClipMargin
@@ -176,6 +180,9 @@ StatusSectionLayout {
                     model: filteredCommunitiesModel
                     searchLayout: d.searchMode
 
+                    assetsModel: root.assetsModel
+                    collectiblesModel: root.collectiblesModel
+
                     onCardClicked: root.communitiesStore.navigateToCommunity(communityId)
                 }
 

ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml

@@ -10,12 +10,17 @@ import utils 1.0
 
 import SortFilterProxyModel 0.2
 
+import AppLayouts.Chat.controls.community 1.0
+
 StatusScrollView {
     id: root
 
     property var model
     property bool searchLayout: false
 
+    property var assetsModel
+    property var collectiblesModel
+
     readonly property bool isEmpty: !featuredRepeater.count && !popularRepeater.count
 
     signal cardClicked(string communityId)
@@ -56,7 +61,11 @@ StatusScrollView {
         id: communityCardDelegate
 
         StatusCommunityCard {
+            id: card
+
             readonly property string tags: model.tags
+            readonly property var permissionsList: model.permissionsModel
+            readonly property bool requirementsMet: !!model.allTokenRequirementsMet ? model.allTokenRequirementsMet : false
 
             JSONListModel {
                 id: tagsJson
@@ -75,6 +84,15 @@ StatusScrollView {
             popularity: model.popularity
             categories: tagsJson.model
 
+            // Community restriccions
+            rigthHeaderComponent: CommunityPermissionsRow {
+                visible: !!card.permissionsList
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: card.permissionsList
+                requirementsMet: card.requirementsMet
+            }
+
             onClicked: root.cardClicked(communityId)
         }
     }

ui/app/mainui/AppMain.qml

@@ -943,6 +943,9 @@ Item {
 
                     CommunitiesPortalLayout {
                         id: communitiesPortalLayoutContainer
+
+                        assetsModel: rootChatStore.assetsModel
+                        collectiblesModel: rootChatStore.collectiblesModel
                     }
 
                     Loader {