feat(Wallet): Collectibles view adjusted to design using DoubleFlickableWithFolding

DoubleFlickableWithFolding provides foldable sections and controls
underlying grid views for both categories preventing from instantiating
too many delegates.

Closes: #13045

ui/app/AppLayouts/Wallet/views/CollectiblesView.qml

@@ -2,14 +2,16 @@ import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import Qt.labs.settings 1.1
+import QtQml 2.15
 
 import StatusQ 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Models 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 import StatusQ.Internal 0.1
+import StatusQ.Models 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Popups.Dialog 0.1
 
@@ -47,6 +49,7 @@ ColumnLayout {
         readonly property int cellHeight: 225
         readonly property int communityCellHeight: 242
         readonly property int cellWidth: 176
+        readonly property int headerHeight: 56
 
         readonly property bool isCustomView: cmbTokenOrder.currentValue === SortOrderComboBox.TokenOrderCustom
 
@@ -61,8 +64,10 @@ ColumnLayout {
             ]
         }
 
-        readonly property bool hasCollectibles: regularCollectiblesView.count
+        readonly property bool hasCollectibles: nonCommunityModel.count
-        readonly property bool hasCommunityCollectibles: communityCollectiblesView.count
+        readonly property bool hasCommunityCollectibles: communityModel.count
+
+        readonly property bool onlyOneType: !hasCollectibles || !hasCommunityCollectibles
 
         readonly property var controller: ManageTokensController {
             settingsKey: "WalletCollectibles"
@@ -141,6 +146,16 @@ ColumnLayout {
         ]
     }
 
+    CustomSFPM {
+        id: communityModel
+
+        isCommunity: true
+    }
+
+    CustomSFPM {
+        id: nonCommunityModel
+    }
+
     Settings {
         category: "CollectiblesViewSortSettings"
         property alias currentSortField: cmbTokenOrder.currentIndex
@@ -150,6 +165,7 @@ ColumnLayout {
 
     ColumnLayout {
         Layout.fillWidth: true
+        Layout.fillHeight: false
         Layout.preferredHeight: root.filterVisible ? implicitHeight : 0
         spacing: 20
         opacity: root.filterVisible ? 1 : 0
@@ -226,66 +242,160 @@ ColumnLayout {
         text: qsTr("Collectibles will appear here")
     }
 
-    StatusScrollView {
+    DoubleFlickableWithFolding {
+        id: doubleFlickable
+
         Layout.fillWidth: true
         Layout.fillHeight: true
-        Layout.topMargin: Style.current.padding
-        leftPadding: 0
-        verticalPadding: 0
-        contentWidth: availableWidth
 
-        ColumnLayout {
+        clip: true
-            width: parent.width
-            spacing: 0
 
-            CustomGridView {
+        flickable1: CustomGridView {
+            id: communityCollectiblesView
+
+            header: Item {
+                id: communityHeader
+
+                height: d.headerHeight
+                width: doubleFlickable.width
+
+                HeaderDelegate {
+                    width: communityHeader.width
+                    height: communityHeader.height
+
+                    parent: doubleFlickable.contentItem
+                    y: doubleFlickable.gridHeader1YInContentItem
+                    z: 1
+
+                    text: qsTr("Community minted")
+
+                    scrolled: !doubleFlickable.atYBeginning
+                    checked: doubleFlickable.flickable1Folded
+
+                    onToggleClicked: doubleFlickable.flip1Folding()
+                    onInfoClicked: Global.openPopup(communityInfoPopupCmp)
+                }
+            }
+
+            Binding {
+                target: communityCollectiblesView
+                property: "header"
+                when: d.onlyOneType
+                value: null
+
+                restoreMode: Binding.RestoreBindingOrValue
+            }
+
+            width: doubleFlickable.width
+            cellHeight: d.communityCellHeight
+
+            model: communityModel
+        }
+
+        flickable2: CustomGridView {
             id: regularCollectiblesView
-                cellHeight: d.cellHeight
+
-                model: CustomSFPM {}
+            header: Item {
+                id: nonCommunityHeader
+
+                height: d.headerHeight
+                width: doubleFlickable.width
+
+                HeaderDelegate {
+                    width: nonCommunityHeader.width
+                    height: nonCommunityHeader.height
+
+                    parent: doubleFlickable.contentItem
+                    y: doubleFlickable.gridHeader2YInContentItem
+                    z: 1
+
+                    text: qsTr("Others")
+
+                    checked: doubleFlickable.flickable2Folded
+                    scrolled: (doubleFlickable.contentY >
+                               communityCollectiblesView.contentHeight
+                               - d.headerHeight)
+                    showInfoButton: false
+
+                    onToggleClicked: doubleFlickable.flip2Folding()
+                }
             }
 
-            StatusDialogDivider {
+            Binding {
-                Layout.fillWidth: true
+                target: regularCollectiblesView
-                Layout.topMargin: Style.current.padding
+                property: "header"
-                Layout.bottomMargin: Style.current.halfPadding
+                when: d.onlyOneType
-                visible: d.hasCollectibles && d.hasCommunityCollectibles
+                value: null
+
+                restoreMode: Binding.RestoreBindingOrValue
             }
 
+            width: doubleFlickable.width
+            cellHeight: d.cellHeight
+
+            model: nonCommunityModel
+        }
+    }
+
+    component HeaderDelegate: Rectangle {
+        id: sectionDelegate
+
+        property alias text: headerLabel.text
+        property alias checked: toggleButton.checked
+        property bool scrolled: false
+        property alias showInfoButton: infoButton.visible
+
+        signal toggleClicked
+        signal infoClicked
+
+        color: Theme.palette.statusListItem.backgroundColor
+
         RowLayout {
-                Layout.fillWidth: true
+            anchors.fill: parent
-                Layout.leftMargin: Style.current.padding
+
-                Layout.rightMargin: Style.current.smallPadding
-                Layout.bottomMargin: 4
-                visible: d.hasCommunityCollectibles
-                StatusBaseText {
-                    text: qsTr("Community collectibles")
-                    color: Theme.palette.baseColor1
-                }
-                Item { Layout.fillWidth: true }
             StatusFlatButton {
-                    Layout.preferredWidth: 32
+                id: toggleButton
-                    Layout.preferredHeight: 32
+
+                checkable: true
+                size: StatusBaseButton.Size.Small
+                icon.name: checked ? "chevron-down" : "next"
+                textColor: Theme.palette.baseColor1
+                textHoverColor: Theme.palette.directColor1
+
+                onToggled: sectionDelegate.toggleClicked()
+            }
+            StatusBaseText {
+                id: headerLabel
+
+                Layout.fillWidth: true
+
+                color: Theme.palette.baseColor1
+                elide: Text.ElideRight
+            }
+
+            StatusFlatButton {
+                id: infoButton
+
                 icon.name: "info"
                 textColor: Theme.palette.baseColor1
-                    horizontalPadding: 0
+
-                    verticalPadding: 0
+                onClicked: sectionDelegate.infoClicked()
-                    onClicked: Global.openPopup(communityInfoPopupCmp)
             }
         }
 
-            CustomGridView {
+        Rectangle {
-                id: communityCollectiblesView
+            width: parent.width
-                cellHeight: d.communityCellHeight
+            height: 4
-                model: CustomSFPM { isCommunity: true }
+            anchors.top: parent.bottom
-            }
+
+            color: Theme.palette.directColor8
+            visible: !sectionDelegate.checked && sectionDelegate.scrolled
         }
     }
 
     component CustomGridView: StatusGridView {
         id: gridView
 
-        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
         interactive: false
 
         cellWidth: d.cellWidth