feat(ProfileShowcase): Collectibles panel navigation button

- Created new reusable component to navigate to accounts tab form collectibles / assets tab.
- Added needed support in `storybook` to cover the new use case.

Closes #13340

storybook/pages/ProfileShowcaseAssetsPanelPage.qml

@@ -86,7 +86,7 @@ SplitView {
                             stripTrailingZeroes: false})
             }
 
-            onNavigateToAccountsTab: logs.logEvent("ProfileShowcaseAccountsPanel::onNavigateToAccountsTab")
+            onNavigateToAccountsTab: logs.logEvent("ProfileShowcaseAssetsPanel::onNavigateToAccountsTab")
         }
     }
 

storybook/pages/ProfileShowcaseCollectiblesPanelPage.qml

@@ -1,5 +1,6 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Utils 0.1 as CoreUtils
@@ -92,22 +93,22 @@ SplitView {
         id: communityModel
 
         readonly property var data: [
-                {
-                    communityId: "ddls",
-                    communityName: "Doodles",
-                    communityImage: ModelsData.collectibles.doodles
-                },
-                {
-                    communityId: "sox",
-                    communityName: "Socks",
-                    communityImage: ModelsData.icons.socks
-                },
-                {
-                    communityId: "ast",
-                    communityName: "Astafarians",
-                    communityImage: ModelsData.icons.dribble
-                }
-            ]
+            {
+                communityId: "ddls",
+                communityName: "Doodles",
+                communityImage: ModelsData.collectibles.doodles
+            },
+            {
+                communityId: "sox",
+                communityName: "Socks",
+                communityImage: ModelsData.icons.socks
+            },
+            {
+                communityId: "ast",
+                communityName: "Astafarians",
+                communityImage: ModelsData.icons.dribble
+            }
+        ]
         Component.onCompleted: append(data)
     }
 
@@ -163,6 +164,9 @@ SplitView {
             width: 500
             baseModel: leftJoinModel
             showcaseModel: inShowcaseCollectiblesModel
+            addAccountsButtonVisible: !hasAllAccountsChecker.checked
+
+            onNavigateToAccountsTab: logs.logEvent("ProfileShowcaseCollectiblesPanel::onNavigateToAccountsTab")
         }
     }
 
@@ -174,9 +178,20 @@ SplitView {
 
         logsView.logText: logs.logText
 
-        Button {
-            text: "Reset (clear settings)"
-            onClicked: showcasePanel.settings.reset()
+        ColumnLayout {
+            Button {
+                text: "Reset (clear settings)"
+
+                onClicked: showcasePanel.settings.reset()
+            }
+
+            CheckBox {
+                id: hasAllAccountsChecker
+
+                text: "Has the user already shared all of their accounts"
+                checked: true
+            }
+
         }
     }
 }
@@ -186,3 +201,4 @@ SplitView {
 // https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14609-235560&t=RkXAEv3G6mp3EUvl-0
 // https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14729-235696&t=RkXAEv3G6mp3EUvl-0
 // https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14729-237604&t=RkXAEv3G6mp3EUvl-0
+// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?type=design&node-id=2460%3A37407&mode=design&t=IMh6iN4JPD7OQbJI-1

ui/app/AppLayouts/Profile/controls/AddMoreAccountsLink.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import shared.panels 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+
+import utils 1.0
+
+ColumnLayout {
+    id: root
+
+    property alias text: textComponent.text
+
+    signal clicked
+
+    spacing: Style.current.halfPadding
+
+    Separator {
+        Layout.fillWidth: true
+        Layout.topMargin: Style.current.padding
+        Layout.bottomMargin: Style.current.padding
+    }
+
+    StatusBaseText {
+        id: textComponent
+
+        Layout.alignment: Qt.AlignHCenter
+
+        font.pixelSize: Style.current.additionalTextSize
+        text: ""
+    }
+
+    StatusFlatButton {
+        Layout.alignment: Qt.AlignHCenter
+
+        font.pixelSize: Style.current.additionalTextSize
+        text: qsTr("Add accounts to showcase")
+
+        onClicked: root.clicked()
+    }
+}

ui/app/AppLayouts/Profile/controls/qmldir

@@ -1,3 +1,4 @@
+AddMoreAccountsLink 1.0 AddMoreAccountsLink.qml
 CommunityShowcaseDelegate 1.0 CommunityShowcaseDelegate.qml
 CollectibleShowcaseDelegate 1.0 CollectibleShowcaseDelegate.qml
 AccountShowcaseDelegate 1.0 AccountShowcaseDelegate.qml

ui/app/AppLayouts/Profile/panels/ProfileShowcaseAssetsPanel.qml

@@ -57,31 +57,10 @@ ProfileShowcasePanel {
     Component {
         id: addMoreAccountsComponent
 
-        ColumnLayout {
-            spacing: Style.current.halfPadding
-            visible: root.addAccountsButtonVisible
-
-            Separator {
-                Layout.fillWidth: true
-                Layout.topMargin: Style.current.padding
-                Layout.bottomMargin: Style.current.padding
-            }
-
-            StatusBaseText {
-                Layout.alignment: Qt.AlignHCenter
-
-                font.pixelSize: Style.current.additionalTextSize
-                text: qsTr("Don’t see some of your assets?")
-            }
-
-            StatusFlatButton {
-                Layout.alignment: Qt.AlignHCenter
-
-                font.pixelSize: Style.current.additionalTextSize
-                text: qsTr("Add accounts to showcase")
-
-                onClicked: root.navigateToAccountsTab()
-            }
+        AddMoreAccountsLink {
+             visible: root.addAccountsButtonVisible
+             text: qsTr("Don’t see some of your assets?")
+             onClicked: root.navigateToAccountsTab()
         }
     }
 }

ui/app/AppLayouts/Profile/panels/ProfileShowcaseCollectiblesPanel.qml

@@ -1,12 +1,21 @@
 import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
 
 import utils 1.0
+import shared.panels 1.0
 
 import AppLayouts.Profile.controls 1.0
 
 ProfileShowcasePanel {
     id: root
 
+    required property bool addAccountsButtonVisible
+
+    signal navigateToAccountsTab()
+
     keyRole: "uid"
     roleNames: ["uid", "chainId", "tokenId", "contractAddress", "communityId", "name", "collectionName", "backgroundColor", "imageUrl"].concat(showcaseRoles)
     filterFunc: (modelData) => !showcaseModel.hasItemInShowcase(modelData.uid)
@@ -38,4 +47,15 @@ ProfileShowcasePanel {
             root.showcaseEntryChanged()
         }
     }
+    additionalComponent: root.addAccountsButtonVisible ? addMoreAccountsComponent : null
+
+    Component {
+        id: addMoreAccountsComponent
+
+        AddMoreAccountsLink {
+             visible: root.addAccountsButtonVisible
+             text: qsTr("Don’t see some of your collectibles?")
+             onClicked: root.navigateToAccountsTab()
+        }
+    }
 }

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -216,7 +216,10 @@ SettingsContentBase {
                 id: profileShowcaseCollectiblesPanel
                 baseModel: root.profileStore.collectiblesModel
                 showcaseModel: root.profileStore.profileShowcaseCollectiblesModel
+                addAccountsButtonVisible: root.profileStore.profileShowcaseAccountsModel.hiddenCount > 0
+
                 onShowcaseEntryChanged: priv.hasAnyProfileShowcaseChanges = true
+                onNavigateToAccountsTab: profileTabBar.currentIndex = 2
             }
 
             // assets