feat(Components): introduce `StatusChatToolBar`

Usage:

```qml
import StatusQ.Components 0.1

StatusChatToolBar {
    chatInfoButton.[...]: ... // StatusChatInfoButton
    notificationCount: 1 // default `0`

    onChatInfoButtonClicked: ...
    onMenuButtonClicked: ...
    onNotificationButtonClicked: ...
}
```

Closes #80

ui/StatusQ/sandbox/Layout.qml

@@ -5,264 +5,291 @@ import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+Column {
+    spacing: 5
 
-    Button {
-        id: btn
-        text: "Append"
-        onClicked: {
-            buttons.append({
-                name: "Test community",
-                tooltipText: "Test Community"
-            })
-        }
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
     }
 
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-            badge.border.width: 2
-            tooltip.text: "Chat"
-        }
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
+        chatInfoButton.pinnedMessagesCount: 1
+        chatInfoButton.muted: true
     }
 
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-            badge.border.width: 2
-            tooltip.text: "Chat"
-        }
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        chatInfoButton.pinnedMessagesCount: 1
+        notificationCount: 1
+    }
 
-        navBarCommunityTabButtons.model: ListModel {
-            id: buttons
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
+    Row {
+        spacing: 5
+        Button {
+            id: btn
+            text: "Append"
+            onClicked: {
+                buttons.append({
+                    name: "Test community",
+                    tooltipText: "Test Community"
+                })
             }
         }
 
-        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-            name: model.name
-            tooltip.text: model.name
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        navBarTabButtons: [
-            StatusNavBarTabButton {
-                icon.name: "wallet"
-                tooltip.text: "Wallet"
-            },
-            StatusNavBarTabButton {
-                icon.name: "browser"
-                tooltip.text: "Browser"
-            },
-            StatusNavBarTabButton {
-                icon.name: "status-update"
-                tooltip.text: "Timeline"
-            },
-            StatusNavBarTabButton {
-                icon.name: "profile"
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
                 badge.visible: true
-                badge.anchors.rightMargin: 4
-                badge.anchors.topMargin: 5
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-
-                tooltip.text: "Profile"
-            }
-        ]
-    }
-
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-            badge.border.width: 2
-            tooltip.text: "Chat"
-        }
-
-        navBarCommunityTabButtons.model: ListModel {
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
+                tooltip.text: "Chat"
             }
         }
 
-        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-            name: model.name
-            tooltip.text: model.name
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        navBarTabButtons: [
-            StatusNavBarTabButton {
-                icon.name: "wallet"
-                tooltip.text: "Wallet"
-            },
-            StatusNavBarTabButton {
-                icon.name: "browser"
-                tooltip.text: "Browser"
-            }
-        ]
-    }
-
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-            badge.border.width: 2
-            tooltip.text: "Chat"
-        }
-
-        navBarCommunityTabButtons.model: ListModel {
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-        }
-
-        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-            name: model.name
-            tooltip.text: model.name
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        navBarTabButtons: [
-            StatusNavBarTabButton {
-                icon.name: "wallet"
-                tooltip.text: "Wallet"
-            },
-            StatusNavBarTabButton {
-                icon.name: "browser"
-                tooltip.text: "Browser"
-            },
-            StatusNavBarTabButton {
-                icon.name: "status-update"
-                tooltip.text: "Timeline"
-            },
-            StatusNavBarTabButton {
-                icon.name: "profile"
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
                 badge.visible: true
-                badge.anchors.rightMargin: 4
-                badge.anchors.topMargin: 5
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-
-                tooltip.text: "Profile"
+                tooltip.text: "Chat"
             }
-        ]
-    }
 
-    StatusAppNavBar {
-        id: test
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-            badge.border.width: 2
-            tooltip.text: "Chat"
+            navBarCommunityTabButtons.model: ListModel {
+                id: buttons
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "profile"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+                }
+            ]
         }
 
-        navBarCommunityTabButtons.model: ListModel {
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
-            }
-        }
-
-        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-            name: model.name
-            tooltip.text: model.name
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        navBarTabButtons: [
-            StatusNavBarTabButton {
-                icon.name: "wallet"
-                tooltip.text: "Wallet"
-            },
-            StatusNavBarTabButton {
-                icon.name: "browser"
-                tooltip.text: "Browser"
-            },
-            StatusNavBarTabButton {
-                icon.name: "status-update"
-                tooltip.text: "Timeline"
-            },
-            StatusNavBarTabButton {
-                icon.name: "profile"
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
                 badge.visible: true
-                badge.anchors.rightMargin: 4
-                badge.anchors.topMargin: 5
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-
-                tooltip.text: "Profile"
+                tooltip.text: "Chat"
             }
-        ]
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                }
+            ]
+        }
+
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
+                badge.visible: true
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                tooltip.text: "Chat"
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "profile"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+                }
+            ]
+        }
+
+        StatusAppNavBar {
+            id: test
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
+                badge.visible: true
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                tooltip.text: "Chat"
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "profile"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+                }
+            ]
+        }
     }
 }
 

ui/StatusQ/src/StatusQ/Components/StatusChatToolBar.qml

@@ -0,0 +1,87 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusChatToolBar
+    implicitWidth: 518
+    height: 56
+    color: Theme.palette.statusAppLayout.backgroundColor
+
+    property alias chatInfoButton: statusChatInfoButton
+    property int notificationCount: 0
+
+    signal chatInfoButtonClicked()
+    signal menuButtonClicked()
+    signal notificationButtonClicked()
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        onClicked: statusChatToolBar.chatInfoButtonClicked()
+    }
+
+    Row {
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: 8
+
+        StatusFlatRoundButton {
+            width: 32
+            height: 32
+            icon.name: "more"
+            type: StatusFlatRoundButton.Type.Secondary
+
+            onClicked: statusChatToolBar.menuButtonClicked()
+        }
+
+        Rectangle {
+            height: 24
+            width: 1
+            color: Theme.palette.directColor7
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StatusFlatRoundButton {
+            width: 32
+            height: 32
+
+            icon.name: "notification"
+            icon.height: 21
+            type: StatusFlatRoundButton.Type.Secondary
+
+            onClicked: statusChatToolBar.notificationButtonClicked()
+
+            StatusBadge {
+                id: statusBadge
+
+                visible: value > 0
+                anchors.top: parent.top
+                anchors.left: parent.right
+                anchors.topMargin: -3
+                anchors.leftMargin: {
+                    if (statusBadge.value > 99) {
+                        return -22
+                    }
+                    if (statusBadge.value > 9) {
+                        return -21
+                    }
+                    return -18
+                }
+
+                value: statusChatToolBar.notificationCount
+                border.width: 2
+                border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
+            }
+        }
+
+    }
+}
+

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -2,6 +2,7 @@ module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
 StatusChatListItem 0.1 StatusChatListItem.qml
+StatusChatToolBar 0.1 StatusChatToolBar.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml