feat(SortableTokenHoldersPanel): Info panel added when no holders

Closes: #10602

storybook/pages/SortableTokenHoldersPanelPage.qml

@@ -18,6 +18,13 @@ SplitView {
         SplitView.fillWidth: true
         SplitView.fillHeight: true
 
+        Rectangle {
+            anchors.fill: holdersPanel
+
+            border.color: "lightgray"
+            anchors.margins: -1
+        }
+
         SortableTokenHoldersPanel {
             id: holdersPanel
 

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

@@ -0,0 +1,57 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import utils 1.0
+
+Control {
+    id: root
+
+    signal airdropRequested
+
+    verticalPadding: 40
+    horizontalPadding: 56
+
+    background: Rectangle {
+        radius: Style.current.radius
+        border.color: Theme.palette.baseColor2
+    }
+
+    contentItem: ColumnLayout {
+        StatusBaseText {
+            Layout.fillWidth: true
+
+            wrapMode: Text.Wrap
+            font.pixelSize: Style.current.primaryTextFontSize + 2
+            font.weight: Font.Bold
+
+            horizontalAlignment: Text.AlignHCenter
+            color: Theme.palette.directColor1
+            text: qsTr("No hodlers just yet")
+        }
+
+        StatusBaseText {
+            Layout.fillWidth: true
+            Layout.topMargin: Style.current.halfPadding
+            Layout.bottomMargin: Style.current.padding
+
+            wrapMode: Text.Wrap
+            font.pixelSize: Style.current.primaryTextFontSize
+
+            horizontalAlignment: Text.AlignHCenter
+            color: Theme.palette.baseColor1
+            text: qsTr("You can Airdrop tokens to deserving Community members or to give individuals token-based permissions.")
+        }
+
+        StatusButton {
+            Layout.alignment: Qt.AlignHCenter
+            text: qsTr("Airdrop")
+
+            onClicked: root.airdropRequested()
+        }
+    }
+}

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

@@ -14,7 +14,7 @@ import shared.controls 1.0
 Control {
     id: root
 
-    // Expected roles: name, walletAddress, imageSource, amount
+    // Expected roles: name, walletAddress, imageSource, noOfMessages, amount
     property var model
 
     property string tokenName
@@ -23,6 +23,8 @@ Control {
     readonly property alias sortBy: holdersList.sortBy
     readonly property alias sorting: holdersList.sorting
 
+    readonly property bool empty: countCheckHelper.count === 0
+
     signal viewProfileRequested(string address)
     signal viewMessagesRequested(string address)
     signal airdropRequested(string address)
@@ -30,6 +32,15 @@ Control {
     signal kickRequested(string address)
     signal banRequested(string address)
 
+    signal generalAirdropRequested
+
+    Instantiator {
+        id: countCheckHelper
+
+        model: root.model
+        delegate: QtObject {}
+    }
+
     TokenHoldersProxyModel {
         id: proxyModel
 
@@ -73,6 +84,7 @@ Control {
             bottomPadding: 0
             minimumHeight: 36 // by design
             maximumHeight: minimumHeight
+
             placeholderText: qsTr("Search hodlers")
         }
 
@@ -90,9 +102,20 @@ Control {
                   ? qsTr("Search results") : qsTr("No hodlers found")
         }
 
+        NoHoldersPanel {
+            Layout.fillWidth: true
+            Layout.topMargin: Style.current.padding
+
+            visible: root.empty
+
+            onAirdropRequested: root.generalAirdropRequested()
+        }
+
         SortableTokenHoldersList {
             id: holdersList
 
+            visible: !root.empty && proxyModel.count > 0
+
             Layout.fillWidth: true
             Layout.preferredHeight: contentHeight
             Layout.topMargin: 20