feat(Components): introduce `StatusChatListCategoryItem`

This component is used to render chat list categories.

Usage:

```qml
import StatusQ.Components 0.1

StatusChatListCategoryItem {
    title: "Public"
    onClicked: opened = !opened
    onToggleButtonClicked: opened = !opened
    onMenuButtonClicked: ...
    onAddButtonClicked: ...

    addButton.[...]: ... // StatusChatListCategoryItemButton
    menuButton.[...]: ... // StatusChatListCategoryItemButton
    toggleButton.[...]: ... // StatusChatListCategoryItemButton
}
```

The button components are exposed so their tooltips can be configured
with (internationalized) app messages.

Closes #117

ui/StatusQ/sandbox/DemoApp.qml

@@ -210,21 +210,20 @@ Rectangle {
                     anchors.horizontalCenter: parent.horizontalCenter
                     spacing: 4
 
-                    StatusChatListItem {
-                        name: "general"
-                        type: StatusChatListItem.Type.CommunityChat
-                        selected: true
+                    StatusChatListCategoryItem {
+                        id: publicCategory
+                        title: "Public"
+                        onClicked: opened = !opened
+                        onToggleButtonClicked: opened = !opened
                     }
 
-                    StatusChatListItem {
-                        name: "random"
-                        type: StatusChatListItem.Type.CommunityChat
-                    }
+                    StatusChatList {
+                        anchors.horizontalCenter: parent.horizontalCenter
 
-                    StatusChatListItem {
-                        name: "watercooler"
-                        type: StatusChatListItem.Type.CommunityChat
-                        muted: true
+                        selectedChatId: "0"
+                        chatListItems.model: demoCommunityChatListItems
+                        onChatItemSelected: selectedChatId = id
+                        visible: publicCategory.opened
                     }
                 }
             }
@@ -294,4 +293,38 @@ Rectangle {
             unreadMessagesCount: 0
         }
     }
+
+    ListModel {
+        id: demoCommunityChatListItems
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+    }
 }

ui/StatusQ/sandbox/ListItems.qml

@@ -37,6 +37,16 @@ GridLayout {
         type: StatusChatListItem.Type.PublicChat
     }
 
+    StatusChatListCategoryItem {
+        title: "Chat list category"
+        opened: false
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (opened)"
+        opened: true
+    }
+
     StatusChatListItem {
         name: "group-chat"
         type: StatusChatListItem.Type.GroupChat

ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -0,0 +1,62 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+StatusListItem {
+    id: statusChatListCategoryItem
+
+    implicitWidth: 288
+    implicitHeight: 28
+
+    leftPadding: 8
+    rightPadding: 8
+
+    property bool opened: true
+    property alias addButton: addButton
+    property alias menuButton: menuButton
+    property alias toggleButton: toggleButton
+
+    signal clicked(var mouse)
+    signal addButtonClicked(var mouse)
+    signal menuButtonClicked(var mouse)
+    signal toggleButtonClicked(var mouse)
+
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+
+    sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
+
+    statusListItemTitle.color: Theme.palette.directColor4
+    statusListItemTitle.font.weight: Font.Medium
+
+    statusListItemComponentsSlot.spacing: 1
+
+    components: [
+        StatusChatListCategoryItemButton {
+            id: addButton
+            icon.name: "add"
+            icon.width: 20
+            visible: statusChatListCategoryItem.sensor.containsMouse
+            onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
+            tooltip.text: "Add channel inside category"
+        },
+        StatusChatListCategoryItemButton {
+            id: menuButton
+            icon.name: "more"
+            icon.width: 21
+            visible: statusChatListCategoryItem.sensor.containsMouse
+            onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
+            tooltip.text: "More"
+        },
+        StatusChatListCategoryItemButton {
+            id: toggleButton
+            icon.name: "chevron-down"
+            icon.width: 18
+            icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
+            onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
+        }
+    ]
+}
+

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -3,6 +3,7 @@ module StatusQ.Components
 StatusBadge 0.1 StatusBadge.qml
 StatusChatList 0.1 StatusChatList.qml
 StatusChatListItem 0.1 StatusChatListItem.qml
+StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml

ui/StatusQ/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml

@@ -0,0 +1,26 @@
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusFlatRoundButton {
+    id: statusChatListCategoryItemButton
+
+    height: 22
+    width: 22
+    radius: 4
+
+    property alias tooltip: statusToolTip
+
+    type: StatusFlatRoundButton.Type.Secondary
+    icon.width: 20
+    icon.color: Theme.palette.directColor4
+
+    color: hovered ? 
+        Theme.palette.statusChatListCategoryItem.buttonHoverBackgroundColor : 
+        "transparent"
+
+    StatusToolTip {
+        id: statusToolTip
+        visible: !!text && parent.hovered
+    }
+}
+

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -1,6 +1,7 @@
 module StatusQ.Controls
 
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
+StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml

ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -139,6 +139,10 @@ ThemePalette {
         property color selectedBackgroundColor: directColor7
     }
 
+    property QtObject statusChatListCategoryItem: QtObject {
+        property color buttonHoverBackgroundColor: directColor7
+    }
+
     property QtObject statusNavigationListItem: QtObject {
         property color hoverBackgroundColor: directColor8
         property color selectedBackgroundColor: directColor7

ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -137,6 +137,10 @@ ThemePalette {
         property color selectedBackgroundColor: baseColor3
     }
 
+    property QtObject statusChatListCategoryItem: QtObject {
+        property color buttonHoverBackgroundColor: directColor8
+    }
+
     property QtObject statusNavigationListItem: QtObject {
         property color hoverBackgroundColor: baseColor2
         property color selectedBackgroundColor: baseColor3

ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml

@@ -98,6 +98,10 @@ QtObject {
         property color selectedBackgroundColor
     }
 
+    property QtObject statusChatListCategoryItem: QtObject {
+        property color buttonHoverBackgroundColor
+    }
+
     property QtObject statusNavigationListItem: QtObject {
         property color hoverBackgroundColor
         property color selectedBackgroundColor