feat(CommunitiesPortal): implement text search using mocked model

Additionally:
- communities grid made scrollable
- filtering done using SortFilterProxyModel
- various adjustments to the design
- clear input button added to the search input

Closes: #6360

ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml

@@ -1,5 +1,4 @@
 import QtQuick 2.13
-import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import StatusQ.Core 0.1
@@ -11,12 +10,16 @@ import StatusQ.Popups.Dialog 0.1
 import StatusQ.Layout 0.1
 
 import utils 1.0
+import shared.controls 1.0
 import shared.popups 1.0
 import shared.panels 1.0
 
+import SortFilterProxyModel 0.2
+
 import "controls"
 import "stores"
 import "popups"
+import "views"
 
 StatusSectionLayout {
     id: root
@@ -30,35 +33,56 @@ StatusSectionLayout {
     notificationCount: root.communitiesStore.unreadNotificationsCount
     onNotificationButtonClicked: Global.openActivityCenterPopup()
 
+    onVisibleChanged: {
+        if(visible)
+            searcher.input.edit.forceActiveFocus()
+    }
+
     QtObject {
         id: d
 
-        property string searchText: ""
+        // values from the design
-        property int layoutVMargin: 70
+        readonly property int layoutTopMargin: 10
-        property int layoutHMargin: 64
+        readonly property int layoutBottomMargin: 249
-        property int titlePixelSize: 28
+        readonly property int layoutHMargin: 64
-        property int subtitlePixelSize: 17
+        readonly property int layoutWidth: 1037
+        readonly property int titlePixelSize: 28
+        readonly property int preventShadowClipMargin: 40
+
+        readonly property bool searchMode: searcher.text.length > 0
 
         function navigateToCommunity(communityId) {
             root.communitiesStore.setActiveCommunity(communityId)
         }
     }
 
-    centerPanel: Item {
+    SortFilterProxyModel {
-        implicitWidth: parent.width
+        id: searchModel
-        implicitHeight: parent.height
-        anchors.left: parent.left
-        anchors.leftMargin: d.layoutHMargin
-        clip: true
 
-        StatusScrollView {
+        sourceModel: root.communitiesStore.curatedCommunitiesModel
-            contentHeight: column.height + d.layoutVMargin
+
-            contentWidth: root.contentPrefferedWidth - d.layoutHMargin
+        filters: ExpressionFilter {
+            enabled: d.searchMode
+            expression: {
+                searcher.text
+                return name.toLowerCase().includes(searcher.text.toLowerCase())
+            }
+        }
+    }
+
+    centerPanel: Item {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        width: d.layoutWidth
+
+        anchors.topMargin: d.layoutTopMargin
+        anchors.leftMargin: d.layoutHMargin
 
         ColumnLayout {
             id: column
-                width: parent.availableWidth
+
-                height: childrenRect.height
+            anchors.fill: parent
             spacing: 18
 
             StatusBaseText {
@@ -73,25 +97,14 @@ StatusSectionLayout {
                 Layout.preferredHeight: 38
                 spacing: Style.current.bigPadding
 
-                    StatusInput {
+                SearchBox {
                     id: searcher
                     implicitWidth: 327
                     Layout.alignment: Qt.AlignVCenter
-                        enabled: false // Out of scope
-                        placeholderText: qsTr("Search")
-                        input.asset.name: "search"
-                        leftPadding: 0
-                        rightPadding: 0
                     topPadding: 0
                     bottomPadding: 0
                     minimumHeight: 36
                     maximumHeight: 36
-                        text: d.searchText
-                        onTextChanged: {
-                            console.warn("TODO: Community Cards searcher algorithm.")
-                            // 1. Filter Community Cards by title, description or tags category.
-                            // 2. Once some filter is applyed, update main tags row only showing the tags that are part of the categories of the filtered Community Cards.
-                        }
                 }
 
                 // Just a row filler to fit design
@@ -99,7 +112,7 @@ StatusSectionLayout {
 
                 StatusButton {
                     id: importBtn
-                        Layout.fillHeight: true
+                    Layout.preferredHeight: 38
                     text: qsTr("Import using key")
                     verticalPadding: 0
                     onClicked: Global.openPopup(importCommunitiesPopupComponent)
@@ -108,7 +121,7 @@ StatusSectionLayout {
                 StatusButton {
                     id: createBtn
                     objectName: "createCommunityButton"
-                        Layout.fillHeight: true
+                    Layout.preferredHeight: 38
                     verticalPadding: 0
                     text: qsTr("Create New Community")
                     onClicked: {
@@ -126,69 +139,27 @@ StatusSectionLayout {
                 Layout.fillWidth: true
             }
 
-                StatusBaseText {
+            Item {
-                    Layout.topMargin: 20
+                Layout.fillWidth: true
-                    text: qsTr("Featured")
+                Layout.fillHeight: true
-                    font.weight: Font.Bold
+                Layout.leftMargin: -d.preventShadowClipMargin
-                    font.pixelSize: d.subtitlePixelSize
+                Layout.rightMargin: -d.preventShadowClipMargin
-                    color: Theme.palette.directColor1
-                }
 
-                GridLayout {
+                clip: true
-                    id: featuredGrid
+
-                    columns: 3
+                CommunitiesGridView {
-                    columnSpacing: Style.current.padding
+                    anchors.fill: parent
-                    rowSpacing: Style.current.padding
+                    anchors.rightMargin: d.preventShadowClipMargin
+                    anchors.leftMargin: d.preventShadowClipMargin
+
+                    padding: 0
+                    bottomPadding: d.layoutBottomMargin
 
-                    Repeater {
-                        model: root.communitiesStore.curatedCommunitiesModel
-                        delegate: StatusCommunityCard {
-                            visible: model.featured
                     locale: communitiesStore.locale
-                            communityId: model.id
+                    model: searchModel
-                            loaded: model.available
+                    searchLayout: d.searchMode
-                            logo: model.icon
-                            name: model.name
-                            description: model.description
-                            members: model.members
-                            popularity: model.popularity
-                            // <out of scope> categories:  model.categories
 
-                            onClicked: { d.navigateToCommunity(communityId) }
+                    onCardClicked: d.navigateToCommunity(communityId)
-                        }
-                    }
-                }
-
-                StatusBaseText {
-                    Layout.topMargin: 20
-                    text: qsTr("Popular")
-                    font.weight: Font.Bold
-                    font.pixelSize: d.subtitlePixelSize
-                    color: Theme.palette.directColor1
-                }
-
-                GridLayout {
-                    columns: 3
-                    columnSpacing: Style.current.padding
-                    rowSpacing: Style.current.padding
-
-                    Repeater {
-                        model: root.communitiesStore.curatedCommunitiesModel
-                        delegate: StatusCommunityCard {
-                            visible: !model.featured
-                            locale: communitiesStore.locale
-                            communityId: model.id
-                            loaded: model.available
-                            logo: model.icon
-                            name: model.name
-                            description: model.description
-                            members: model.members
-                            popularity: model.popularity
-                            // <out of scope> categories:  model.categories
-
-                            onClicked: { d.navigateToCommunity(communityId) }
-                        }
-                    }
                 }
             }
         }

ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesPortalDummyModel.qml

@@ -0,0 +1,111 @@
+import QtQuick 2.14
+
+ListModel {
+    ListElement {
+        featured: true
+        communityId: "id1"
+        loaded: true
+        icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAP/SURBVHgBzZndVdtAEIXvyhTgVIB8KACoAPPzHlIBogJMBRYVBFdgUQEUwI+pIOI9OTYVhLzHq9yRVkbYxpbWK8ffOToCIaEZ7d3ZmVkFB7SDYdPD+NRDYzcBfF7a49E0R85IDgXEGuMXjcZgELVGWBEFSzKjccF/0EZ22LxcnOmt4kxlBwqGd/DxC69KNAauqjpSyYGjYNitwfAPUILhY9S6Knt/KQf41f0t4DbJtL0ORhyNwzKj4S274fj89awB/Fij8YIv7zwOhqfLblzowEnw2kWiI9QomQXIO29Ftotu+lRCYnwCHWIDWDQv5jpwHPzk0DVusUkoL3job9/MXJ6+IBNW9If/I5tFvHFi709P7Jk5QOOfsHnGC02JhNMXPziQTtosFdhIJBIeBb/C4rWJhIx0hth8REotSulNftnKr9L4LmqCX05edgfoV/ldQfkJ1IGyG22mMlqygTD7X6j168d8weV91BrM+yNjfMBT18KRySikc4CpcBvO0b2HqLX/mfECY3ukmTKYEapCPgrZJFZoXMAhXACvHqKdTpl7TVi8REUUvIP0XIN8In758yoPmBR9qCqGb8roi+dSPkmWRZZOhXNEy6q6jJBVgVAOs0x9Y1tZJRaLJ6PZnkct7cIRGl4ECyihPWW1+itfJrEPN1jXtVyM+rBC7cpC5sMJ+gUVMQGkv0Kx1NyCIyjFhHlKx4O3rdM4jTcN/YfqHmkexXt5DyXjfcV7+8UWdw7wK3ZolJzT5T07Z7liA/WxJaugWuEryPM0s/c3zXUwypMsie08STOgqQsy5c8xHfoOy17SNIqFsyxiPqzQvTG8MDe6LMyBfis4qTlGIqEYFg5IV+2+ZLpQ5CQYthM4K5hGXmJS3KokFiuuee4MztAvlG8Sw4Jx1qythIRNngI4IoEXe2ys3mFNuC6aGBAGnpmAA1SE+fjSrlkRU28HcEcsK7+pB/CMijDGXxhJLKWOJhnnUk/OqQOM4dc2VZG0YLIm2HzEQYbppzo6fNqoZtKVYHgLE3uNDmjkMyYpg2qaVKGNepgUTZNUQkbBbFzYxOg2DW5jTRSLpkljy1T4PWw4Um8X0/aZ3ig1K33Rde4FlEZKVnYyWsVrM71RDs83iwldO0manuNw+vqMA7ZtjrqhVM7nVXxzd2ik4aQsc506yPpMrbkZw8JNvhVDqxPE+MdoJ/zs70t3KWWjjU70Fda7Z2Dm4aWoYdF9Sx0QZEWl1p4su8k2xBJMynQ5SjmQU7ek8vKUDeGw7DOVHBCyVkgS8lFnhUmhrr6uWp5WdiDHyIopBKSzbbvwDSQTtjE8x9qBIu/OaDqStip9FOaL6XyIgbHs0kglxUXpztboIv8AhiCFIFIIkjEAAAAASUVORK5CYII="
+        name: "Status.im"
+        description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one."
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: true
+        communityId: "id2"
+        loaded: true
+        icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUySURBVHgB1VpLSCtLEC29gqL4X4gimiguxfhZ61X8LATxLdSNcnNRQUTEh4ob8UYEN27u2ykiLy5EcfXEDy7EiIgbF9eHCv4gefgX/KKI33pdnczcTJxJJjHReKCIU10zU6eruru6xwDwAhAxiv2UM8lgomGiYxJlEwEWm6wy+ZfJQkBAgAU+CuQ0kx9MTOg5fjHRM9HAe8HO8Qv0Lv72OREfOe6IH+BtUM+gNdzvBTN6KxrsQd/Q970uB3pnObwFaE2Zj4ZnKYX+4bwA90iwG8rR//BNztcAGec17OcXSBchf8Alk0zHxU+OgBmsq6k/YpURyLRXBNpfoDXXNOC/0DEfDfYKMQK21DGD/4NSScsiQb+SCHh/BfQNaGy2CBc8Ap70/tXVFZycnADrCYiLi4OIiAh4R4hRECLwVe2dU1NT0NraCtPT07C/vw8LCwuQmZkJsbGxkJWVBTqdDkwmE7cdHh6GhIQEiI+PF6WoqAgGBwehurqaX6enp0NVVRUsLS2BG5BEgSLgss55enrCuro6zM3Nxbu7O0nbw8MDdnR0ID2KZGRkRGzr7OwU9SRlZWVi28DAAAYGBoptzc3N/D0qYRKc16ixppeR+ezsrKJNQ0MDt+nv7xd1LEqKBAhtbW2S9t7eXnQDUURAr8YyJyeHv2BxcVHR5vz8HJOSkrCvr0/UXV5eOiWwu7sraWcphy8vL6gSehoDOlcJx8IKq6ur/O+hoSEiLWsXHR3N22mAq4VWq4WoqN+L/tHREdze3qq9XUcEMlxZEQHBaRqYJSUlsLm5KWtbWFjIB6pasDEAz8/P4jV1QmhoqNrbNbx0UBMrjUYjCTVJQUEBH7A0iJXgKoU2NjYk7TQm3IAZ1FrS4HIkIAhbB7C+vh63t7fRHQJnZ2eYn5/P9cHBwdx5Z50hgwvVBGh6a2xsVCRB8uXLFzQYDE4JZGRkYHd3N9bW1nLipKuoqECz2YyeQDUBAaOjo5iamuqUSE9PjyIBisDKygonK+gSExORDXz0BERA1X734kJqNjc3h+3t7bJjg9Jhb29PkQChqalJoqeF0FMCZjWGbHqU1bMZBMfGxjAlJUXikNFodEqA8p/NOBLSa2tr6CbMNI1aJ3gXmJiYAPaCV3qaBqmW2dragpqaGlH/+Pjo9HkxMTHQ0vK7nLm/vwe2kiuuMQqw0A0/1VAtLS3FvLw83uNKODg4QFYh8h6dn593GgECpaVjCtqv4irwU3UpQQToBV1dXYo2Nzc3nAA5JRA9Pj6WOFhcXCy5Z3JyUtIeEhKC6+vrqBJ64axTNQESKuzkMD4+jkFBQTgzMyPqaNaydzAyMhKvr68l97GVXWJD1yrrIQ1PJFRxwkwEWP2OaWlpGBYWhnq9Hlndz52hIo6cJ52QOoTl5WVMTk5+NUtVVlbyyAjY2dlBtiGS2NAs5Vi2O4BOTsQdmQFcbCkPDw/55oRAtQtbdcFiscDp6SmvXbKzs4HNRNIRxtqVwCLB6x4BbKy8KuJolxceHq70iO8sXY0CASoHzeB/Z0HOQFtKC99S2nb4f8HngVE44LI/VvlMUdAKBMRjlU8UhW7740W5o0Ua3S53aR8EC3Nea68IlDH6A6znLv4G8infUfmKgC08f4L/4btbn2VpbUD/gQE8AfoHCQO8BWj9WvNRH/n04A2g9fTOjO8HOurUgLeBvk8p6nUD+BJojYYRvQvuOFqrgfeBjQhtht7yBd/0VscDwAtAa75+BesKLvzLjcbO5NImtP/+z/b7j/CZ6C34H+drFRIBW7QeAAAAAElFTkSuQmCC"
+        name: "SuperRare"
+        description: "The future of CryptoArt markets—a network governed by artists, collectors and curators."
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: true
+        communityId: "id3"
+        loaded: true
+        icon: "data:image/png;base64,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"
+        name: "Coinbase"
+        description: "Jump start your crypto portfolio with the easiest place to buy and sell crypto."
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: false
+        communityId: "id4"
+        loaded: true
+        icon: "data:image/png;base64,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"
+        name: "Dragonereum"
+        description: "A community of cat lovers, meow!"
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: false
+        communityId: "id5"
+        loaded: true
+        icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALiSURBVHgB1ZhPTxNBGId/24IWYiIeNEUikkg1EtL2APRSYoKUNl5EvEhjgn4Ba3rxqEc92MgXUE/WE9GDxCKSEIkJcqnBQAyYkCqIxQChBLG1xX2n2dp/6u7sbFOepNnuzM7uk3fm3ZlZ6f7NF9ekPekRqhQJ0uMaCGZ96xsWv8zmzrvaeqEX4ZKfZMGnr0K586qTDMtyG1txiEao5MzcOIxAiGR4LISZeWMECV2SSpKsJ8R3cT66JIuTxChM4ISSRE0Xs+t0jlXuSKp9sHJdp45XkWZJJUkWnt8pqbNd/FN290Y/Lp93sv8jE1EEhy9g0BPkklXd3ZQk7+So2E7WYaAn+3CTuRY1dYfZkaDyrvaWkrZNxxpY3Y9UjN3DMEklSeynzbgX6M82PlgPy5HjMMtHgsqV6OXjksWpzmRa5Eo07jFpaWhEJp3C7sYKMsmdEiFXmYjywi1ZU9+AXzubSCa+F5QrXSsSbsntlXlUCtWSzc0n4Pf70Wp3wmJtAQ/nepNy2zZoRbWk292N7kvXoYehM30Yko8Pb7/V1E615NTUGzZ7UDTdbjcre//VjJcLtQXXORvT8NpSqI1EYI5GC+pSPh/SDge0oloyFvssSz7JCRKr2yZEiiQJkiRBEs0n7XRySap6T9Js8TM9wWYZT1Mca5MPUEl0rYKshzLwtaYKyhxydxMUNUhSQV3GagUPuiRJSJEqJuX1sp8IVEtOf1jCreFnGJCnPZpNEh/HoJWR11F2n46jVzW1Uy25HN9kqxlaQLjagd3VOWhlcnyU3aMjYIBkKDDK1oVhFYsDkqCIK5Rb0mlF+L67qubuv+Fiw6EFIuHe4+RT3MWiESI5PbvERI1CSHfTIpd++XschapLHNEJoyBUUtn7iEZ4dpdDGbN76VZc8fRAK0IS538sr2VnK8uBZq7vlUIiSa+ff2U3fRCgWYsXod3debZ8lE412aEHoZKDfUEYQUXGpF72heRvWCUEXU7sGx8AAAAASUVORK5CYII="
+        name: "CryptPunks"
+        description: "A group chat full of our favorite thinkers and creators."
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: false
+        communityId: "id6"
+        loaded: true
+        icon: "data:image/png;base64,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"
+        name: "Socks"
+        description: "A community of P2P crypto trades."
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: false
+        communityId: "id7"
+        loaded: true
+        icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARRSURBVHgB1ZpNiBxFFMf/r6olxM1hEKJEicz6kWW97A54yUGcIDkKiSJ+XDZBDCJoshdPwk5U8KauKHhRN3jMIasXUdRsRNSTOznJqpgJURMSCJPvbHaqXl71bCcz07093TOd2Z4fDDNdXVP9XtV7Va9eNSEDeBEFM4JdGt4EmItSMsmKCmAUgjrEXANRTX5VDfj4ijELG8dRQ58QesQJjU1qP5jKDJTRAwQWZWi2H2VSKxAIzqADrT3cLyLI3HVjDqZVJJUC/JeayVrwToi4Qo/ag4nrJ6nEf6DI2jvibBuDobZszI4ko6G6VeC/9RR7enGAwjuKG7RebCzpXd0qxirgm4zF3J00mRgKinDEyRBXaU0T8oVnqiAHxPlFpAJu6Jz2yBHE2ENj5lCovLPAd1hn8+tjNnHUxbFLnY4d8gHW+mgOhXcUNmgVsoo2BVYdpojcQpNmSVXaSoIfzblen0D+qdMVM0ol1N3F7RHQegbDQcHerQ4EF/4IDFHvB9waBc9dGa3LXZfkVQ5/w/juZ0Y/aHnYphFg6xag9BjhicdJ5vpUTayOgq34CihiFxYn+ucvvzM+O9yfAu0wig8Ab+5TePXF5FoQ0ZPuWznzEeEHGeeEqP0HvDZj8fGXqTqm7EJ75cwHOeGdTyxsCh3MiB8x8Lr2fivnzgOn/k9enyxPego0kZVFvztN2L0z3o4bDeDQPOP9z6OfeqPhypP5grh+UZzYbcJ73hq3seVeYPyR7m299DQiFdh8D/DQ1hSyKEx4skUsIiO+/gH494ztWu/bn6J7f/8U+VNsCgoeMuSr71k+SM19m4G33yC88nw66eE2PcgB164Bp8/1Zsbiw82gaD25eBmofGTx1gfdza8TTzJmdfGDTOL/B+9vhgdx/HNKevts9L33PmXse0Ha6dJGCzVP1uSqW82RATOvE/Y+G2+VV8Rcdk5Z/FYNOzJL0Y+/Wux5JrFl15RlPokBMrIReGr72vcvXEJi2PJxJU5QxYDxMpr7JGtSVbjLzGNIWYFZUDTqz0ILGDJcZttlKPzBZOZjEl+Xk/xxe4lw+Wr0Spo0DHCbmJefi25j/OFkbRhDs+67uaU8gQI3ZEuZz3RKJJIjGnUj4M9XzozEo2cxJLizhCDBdTutMkSjEPS++31rxRiWUZCps+0UJ+Qx9k+16DJgyCNyUKjG7GhrUWjNJmN35yHAC8P1ZWt3dJaGFZDhsQ1MI2dYpr1RR06RUZM3buacrSEnOFm8seiIIXbVMEteRU5H1jVn6oTXY43KWve7Lnv+aY3CF4OfXrluoae9bStzcbWSH7MqdVT2DkUMBK4uy2SSyTGrwzm2m77uvF/I7lCeobbZUtIT+/SvGshoWKXFNzCFzHCCq1l1tfFhcHCRlN5f9hBFDCQtryWz3fvCtyA9fqwXwQMySckFykhIPkmKm6/ctPkL12USqEsev8qGTkr4XtXXzXyvQrdyE+WOr+82cauTAAAAAElFTkSuQmCC"
+        name: "Rarible"
+        description: "Multichain community-centric NFT marketplace. Create, sell and collect NFTs."
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: false
+        communityId: "id8"
+        loaded: true
+        icon: "data:image/png;base64,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"
+        name: "Spotify"
+        description: "Listening is everything"
+        members: 34
+        popularity: 4
+        available: true
+    }
+
+    ListElement {
+        featured: false
+        communityId: "id9"
+        loaded: true
+        icon: "data:image/png;base64,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"
+        name: "Dribbble"
+        description: "Open source platform to write and distribute decentralized applications."
+        members: 34
+        popularity: 4
+        available: true
+    }
+}

ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesStore.qml

@@ -5,7 +5,11 @@ QtObject {
     id: root
 
     property var communitiesModuleInst: communitiesModule
-    property var curatedCommunitiesModel: root.communitiesModuleInst.curatedCommunities
+
+    // TODO: should be replaced with root.communitiesModuleInst.curatedCommunities
+    // when backend is ready
+    readonly property var curatedCommunitiesModel: CommunitiesPortalDummyModel {}
+
     property var discordFileList: root.communitiesModuleInst.discordFileList
     property var discordCategoriesModel: root.communitiesModuleInst.discordCategories
     property var discordChannelsModel: root.communitiesModuleInst.discordChannels

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

@@ -0,0 +1,119 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+import utils 1.0
+
+import SortFilterProxyModel 0.2
+
+StatusScrollView {
+    id: root
+
+    property var locale
+    property var model
+    property bool searchLayout: false
+
+    signal cardClicked(string communityId)
+
+    clip: false
+
+    QtObject {
+        id: d
+
+        // values from the design
+        readonly property int scrollViewTopMargin: 20
+        readonly property int subtitlePixelSize: 17
+    }
+
+    SortFilterProxyModel {
+        id: featuredModel
+
+        sourceModel: root.model
+
+        filters: ValueFilter {
+            roleName: "featured"
+            value: true
+        }
+    }
+
+    SortFilterProxyModel {
+        id: popularModel
+
+        sourceModel: root.model
+
+        filters: ValueFilter {
+            roleName: "featured"
+            value: false
+        }
+    }
+
+    Component {
+        id: communityCardDelegate
+
+        StatusCommunityCard {
+            locale: root.locale
+            communityId: model.communityId
+            loaded: model.available
+            logo: model.icon
+            name: model.name
+            description: model.description
+            members: model.members
+            popularity: model.popularity
+            // <out of scope> categories:  model.categories
+
+            onClicked: root.cardClicked(communityId)
+        }
+    }
+
+    ColumnLayout {
+        id: contentColumn
+
+        StatusBaseText {
+            id: featuredLabel
+            visible: !root.searchLayout
+            Layout.topMargin: d.scrollViewTopMargin
+            text: qsTr("Featured")
+            font.weight: Font.Bold
+            font.pixelSize: d.subtitlePixelSize
+            color: Theme.palette.directColor1
+        }
+
+        GridLayout {
+            Layout.topMargin: root.searchLayout
+                              ? featuredLabel.height + contentColumn.spacing + featuredLabel.Layout.topMargin
+                              : 0
+            columns: 3
+            columnSpacing: Style.current.padding
+            rowSpacing: Style.current.padding
+
+            Repeater {
+                model: root.searchLayout ? root.model : featuredModel
+                delegate: communityCardDelegate
+            }
+        }
+
+        StatusBaseText {
+            visible: !root.searchLayout
+            Layout.topMargin: 20
+            text: qsTr("Popular")
+            font.weight: Font.Bold
+            font.pixelSize: d.subtitlePixelSize
+            color: Theme.palette.directColor1
+        }
+
+        GridLayout {
+            visible: !root.searchLayout
+            columns: 3
+            columnSpacing: Style.current.padding
+            rowSpacing: Style.current.padding
+
+            Repeater {
+                model: popularModel
+                delegate: communityCardDelegate
+            }
+        }
+    }
+}