From cfd84d5ba08ecadae04036bc04f6348d6b503f27 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 21 Mar 2022 11:33:14 -0400
Subject: [PATCH] feat(contacts-settings): add badge for requests in contacts
 settings

Fixes #5089
---
 ui/app/AppLayouts/Profile/panels/MenuPanel.qml   |  9 +++++++--
 ui/app/AppLayouts/Profile/views/ContactsView.qml |  3 ++-
 ui/imports/shared/controls/StatusTabButton.qml   | 15 ++++++++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml b/ui/app/AppLayouts/Profile/panels/MenuPanel.qml
index 62262fb50f..3be3276de3 100644
--- a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml
+++ b/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 ""
                 }
             }
diff --git a/ui/app/AppLayouts/Profile/views/ContactsView.qml b/ui/app/AppLayouts/Profile/views/ContactsView.qml
index b6850eedc1..999f6ede89 100644
--- a/ui/app/AppLayouts/Profile/views/ContactsView.qml
+++ b/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
diff --git a/ui/imports/shared/controls/StatusTabButton.qml b/ui/imports/shared/controls/StatusTabButton.qml
index a7a2e7e2c4..35d31cb631 100644
--- a/ui/imports/shared/controls/StatusTabButton.qml
+++ b/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