feat(Components): introduce `StatusChatListCategory`

A component used to render chat list groups.

Usage:

```qml
import StatusQ.Components 0.1

StatusChatListCategory {
    categoryId: ...
    name: "Public"
    opened: true // default `true`

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

    chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList`
    chatList.selectedChatId: ...
    chatList.onChatItemSelected: ...

    popupMenu: StatusPopupMenu {
        ...
    }
}
```

Closes #123

sandbox/DemoApp.qml

@@ -210,20 +210,56 @@ Rectangle {
                     anchors.horizontalCenter: parent.horizontalCenter
                     spacing: 4
 
-                    StatusChatListCategoryItem {
+                    StatusChatList {
-                        id: publicCategory
+                        id: statusChatList
-                        title: "Public"
+                        anchors.horizontalCenter: parent.horizontalCenter
-                        onClicked: opened = !opened
+                        chatListItems.model: demoCommunityChatListItems
-                        onToggleButtonClicked: opened = !opened
                     }
 
-                    StatusChatList {
+                    StatusChatListCategory {
-                        anchors.horizontalCenter: parent.horizontalCenter
+                        name: "Public"
 
-                        selectedChatId: "0"
+                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatListItems.model: demoCommunityChatListItems
+                        chatList.selectedChatId: "0"
-                        onChatItemSelected: selectedChatId = id
+                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        visible: publicCategory.opened
+                        popupMenu: categoryPopupCmp
+                    }
+
+                    StatusChatListCategory {
+                        name: "Development"
+
+                        chatList.chatListItems.model: demoCommunityChatListItems
+                        chatList.onChatItemSelected: chatList.selectedChatId = id
+                        popupMenu: categoryPopupCmp
+                    }
+                }
+
+                Component {
+                    id: categoryPopupCmp
+
+                    StatusPopupMenu {
+                        StatusMenuItem {
+                            text: "Mute Category"
+                            icon.name: "notification"
+                        }
+
+                        StatusMenuItem { 
+                            text: "Mark as Read"
+                            icon.name: "checkmark-circle"
+                        }
+
+                        StatusMenuItem { 
+                            text: "Edit Category"
+                            icon.name: "edit"
+                        }
+
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Delete Category"
+                            icon.name: "delete"
+                            type: StatusMenuItem.Type.Danger
+                        }
                     }
                 }
             }

src/StatusQ/Components/StatusChatListCategory.qml

@@ -0,0 +1,60 @@
+import QtQuick 2.13
+
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+Column {
+    id: statusChatListCategory
+
+    spacing: 0
+
+    property string categoryId: ""
+    property string name: ""
+    property bool opened: true
+
+    property alias addButton: statusChatListCategoryItem.addButton
+    property alias menuButton: statusChatListCategoryItem.menuButton
+    property alias toggleButton: statusChatListCategoryItem.toggleButton
+    property alias chatList: statusChatList
+
+    property Component popupMenu
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatListCategoryItem {
+        id: statusChatListCategoryItem
+        title: statusChatListCategory.name
+        opened: statusChatListCategory.opened
+
+        onClicked: statusChatListCategory.opened = !opened
+        onToggleButtonClicked: statusChatListCategory.opened = !opened
+        onMenuButtonClicked: {
+            highlighted = true
+            menuButton.highlighted = true
+            popupMenuSlot.item.popup()
+        }
+    }
+
+    StatusChatList {
+        id: statusChatList
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: statusChatListCategory.opened
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListCategory.popupMenu
+        onLoaded: {
+            popupMenuSlot.item.closeHandler = function () {
+                statusChatListCategoryItem.highlighted = false
+                statusChatListCategoryItem.menuButton.highlighted = false
+            }
+        }
+    }
+}
+

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
+StatusChatListCategory 0.1 StatusChatListCategory.qml
 StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml