feat(contacts-settings): add badge for requests in contacts settings

Fixes #5089

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

@@ -51,6 +51,13 @@ Column {
                 (model.subsection === Constants.settingsSubsection.browserSettings && root.browserMenuItemEnabled) ||
                 (model.subsection === Constants.settingsSubsection.wallet && root.walletMenuItemEnabled)
             }
+            badge.value: {
+                switch (model.subsection) {
+                    case Constants.settingsSubsection.messaging:
+                        return root.messagingStore.contactRequestsModel.count
+                    default: return ""
+                }
+            }
         }
     }
 
@@ -70,8 +77,6 @@ Column {
                 switch (model.subsection) {
                     case Constants.settingsSubsection.privacyAndSecurity:
                         return !root.privacyStore.mnemonicBackedUp
-                    case Constants.settingsSubsection.messaging:
-                        return root.messagingStore.contactRequestsModel.count
                     default: return ""
                 }
             }

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

@@ -2,13 +2,13 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
+import StatusQ.Core 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Core.Theme 0.1
 
 import utils 1.0
 
-import StatusQ.Core 0.1
 import shared.views 1.0
 import shared.panels 1.0
 import shared.popups 1.0
@@ -91,6 +91,7 @@ Item {
                 anchors.top: parent.top
                 anchors.leftMargin: Style.current.bigPadding
                 btnText: qsTr("Pending Requests")
+                badge.value: contactList.count
             }
             StatusTabButton {
                 id: blockedBtn

ui/imports/shared/controls/StatusTabButton.qml

@@ -5,11 +5,16 @@ import utils 1.0
 import "../"
 import "../panels"
 
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+
 TabButton {
     property string btnText: "Default Button"
+    property alias badge: statusBadge
 
     id: tabButton
-    width: tabBtnText.width
+    width: tabBtnText.width +
+        (statusBadge.visible ? statusBadge.width + statusBadge.anchors.leftMargin : 0)
     height: tabBtnText.height + 11
     text: ""
     padding: 0
@@ -26,6 +31,14 @@ TabButton {
         color: parent.checked || parent.hovered ? Style.current.textColor : Style.current.secondaryText
     }
 
+    StatusBadge {
+        id: statusBadge
+        visible: value > 0
+        anchors.left: tabBtnText.right
+        anchors.leftMargin: 10
+        anchors.verticalCenter: tabBtnText.verticalCenter
+    }
+
     Rectangle {
         visible: parent.checked || parent.hovered
         color: parent.checked ? Style.current.primary : Style.current.secondaryBackground