feat(Controls): introduce StatusNavBarTabButton

This component is used to render application tabs in the application
nav bar that is yet to be implemented.

`StatusNavBarTabButton` is a composition of `StatusIconTabButton`, `StatusToolTip`
and `StatusBadge` and exposes each of these to enable customization.

Usage:

```
StatusNavBarTabButton {
    checked: true/false // whether or not it's 'active'
    name: "string" // used to render a `StatusLetterIdenticon`
    badge.value: 30 // `StatusBadge` is exposed as `badge`
    tooltip.text: "Some tooltip" // `StatusTooltip` is exposed as `tooltip`
    icon.name: "message" // Behaves exactly like `StatusIconTabButton.icon`
}
```

Closes #17

ui/StatusQ/sandbox/Controls.qml

@@ -50,4 +50,39 @@ GridLayout {
             y: parent.height / 2 - height / 2 + 4
         }
     }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+    }
+
+    StatusNavBarTabButton {
+        name: "#status"
+        tooltip.text: "Some Channel"
+    }
+
+    StatusNavBarTabButton {
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        tooltip.text: "Some Community"
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "profile"
+        tooltip.text: "Profile"
+        badge.value: 0
+        badge.visible: true
+        badge.anchors.leftMargin:-16
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+        badge.value: 35
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+        badge.value: 100
+    }
 }

ui/StatusQ/src/StatusQ/Controls/StatusNavBarTabButton.qml

@@ -0,0 +1,47 @@
+import QtQuick 2.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+    
+StatusIconTabButton {
+    id: statusNavBarTabButton 
+    property alias badge: statusBadge
+    property alias tooltip: statusTooltip
+    signal clicked(var mouse)
+
+    StatusToolTip {
+        id: statusTooltip
+        visible: statusNavBarTabButton.hovered && !!statusTooltip.text
+        delay: 50
+        orientation: StatusToolTip.Orientation.Right
+        x: statusNavBarTabButton.width + 16
+        y: statusNavBarTabButton.height / 2 - height / 2 + 4
+    }
+
+    StatusBadge {
+        id: statusBadge
+        visible: value > 0
+        anchors.top: parent.top
+        anchors.left: parent.right
+        anchors.leftMargin: {
+            if (statusBadge.value > 99) {
+                return -22
+            }
+            if (statusBadge.value > 9) {
+                return -21
+            }
+            return -18
+        }
+        anchors.topMargin: 4
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: function (mouse) {
+            statusNavBarTabButton.checked = !statusNavBarTabButton.checked
+            statusNavBarTabButton.clicked(mouse)
+        }
+    }
+}
+

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -1,5 +1,6 @@
 module StatusQ.Controls
 
 StatusIconTabButton 0.1 StatusIconTabButton.qml
+StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml