Add notification icon to the installed tab of the toolbox

CURA-6151

plugins/Toolbox/resources/qml/ToolboxHeader.qml

@@ -50,6 +50,7 @@ Item
             }
         }
     }
+
     ToolboxTabButton
     {
         id: installedTabButton
@@ -62,7 +63,43 @@ Item
             rightMargin: UM.Theme.getSize("default_margin").width
         }
         onClicked: toolbox.viewCategory = "installed"
+        width: UM.Theme.getSize("toolbox_header_tab").width + marketplaceNotificationIcon.width - UM.Theme.getSize("default_margin").width
     }
+
+    Rectangle
+    {
+        id: marketplaceNotificationIcon
+        color: UM.Theme.getColor("notification_icon")
+        width: installedTabButton.height / 3
+        height: width
+        radius: 0.5 * width
+
+        visible: CuraApplication.getPackageManager().packagesWithUpdate.length > 0
+
+        anchors.right: installedTabButton.right
+        anchors.verticalCenter: installedTabButton.verticalCenter
+
+        Label
+        {
+            id: marketplaceNotificationText
+            anchors.centerIn: parent
+            anchors.fill: parent
+            text:
+            {
+                if(CuraApplication.getPackageManager().packagesWithUpdate.length > 9)
+                {
+                    return "9+"  // More than 2 characters don't fit.
+                }
+
+                return CuraApplication.getPackageManager().packagesWithUpdate.length
+            }
+            color: UM.Theme.getColor("primary_text")
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font: UM.Theme.getFont("small")
+        }
+    }
+
     ToolboxShadow
     {
         anchors.top: bar.bottom

resources/themes/cura-dark/theme.json

@@ -214,7 +214,6 @@
 
         "toolbox_header_button_text_active": [255, 255, 255, 255],
         "toolbox_header_button_text_inactive": [128, 128, 128, 255],
-        "toolbox_header_button_text_hovered": [255, 255, 255, 255],
 
         "monitor_printer_family_tag": [86, 86, 106, 255],
         "monitor_text_primary": [229, 229, 229, 255],

resources/themes/cura-light/theme.json

@@ -386,7 +386,6 @@
 
         "toolbox_header_button_text_active": [0, 0, 0, 255],
         "toolbox_header_button_text_inactive": [0, 0, 0, 255],
-        "toolbox_header_button_text_hovered": [0, 0, 0, 255],
 
         "favorites_header_bar": [245, 245, 245, 255],
         "favorites_header_hover": [245, 245, 245, 255],