From f4d211acbb4d076056116ae221b81f098631764b Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Tue, 8 Jun 2021 13:28:06 +0200
Subject: [PATCH] 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                           | 58 ++++++++++++++----
 .../Components/StatusChatListCategory.qml     | 60 +++++++++++++++++++
 src/StatusQ/Components/qmldir                 |  1 +
 3 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 src/StatusQ/Components/StatusChatListCategory.qml

diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index e7b49e3b..7f705d59 100644
--- a/sandbox/DemoApp.qml
+++ b/sandbox/DemoApp.qml
@@ -210,20 +210,56 @@ Rectangle {
                     anchors.horizontalCenter: parent.horizontalCenter
                     spacing: 4
 
-                    StatusChatListCategoryItem {
-                        id: publicCategory
-                        title: "Public"
-                        onClicked: opened = !opened
-                        onToggleButtonClicked: opened = !opened
+                    StatusChatList {
+                        id: statusChatList
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        chatListItems.model: demoCommunityChatListItems
                     }
 
-                    StatusChatList {
-                        anchors.horizontalCenter: parent.horizontalCenter
+                    StatusChatListCategory {
+                        name: "Public"
 
-                        selectedChatId: "0"
-                        chatListItems.model: demoCommunityChatListItems
-                        onChatItemSelected: selectedChatId = id
-                        visible: publicCategory.opened
+                        chatList.chatListItems.model: demoCommunityChatListItems
+                        chatList.selectedChatId: "0"
+                        chatList.onChatItemSelected: chatList.selectedChatId = id
+                        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
+                        }
                     }
                 }
             }
diff --git a/src/StatusQ/Components/StatusChatListCategory.qml b/src/StatusQ/Components/StatusChatListCategory.qml
new file mode 100644
index 00000000..00d1337a
--- /dev/null
+++ b/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
+            }
+        }
+    }
+}
+
diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir
index dc0bf29e..d6677654 100644
--- a/src/StatusQ/Components/qmldir
+++ b/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