refactor(StatusChatList): updates due to chat & communities models refactored

Updated Models.qml for chats and communities models to reflect changes due to
refactor in the actual backend.`StatusChatList` and `StatusChatListAndCategories`
components updated accordingly.

ui/StatusQ/sandbox/DemoApp.qml

@@ -1,7 +1,10 @@
 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
+import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Platform 0.1
@@ -182,16 +185,514 @@ Rectangle {
 
     Component {
         id: statusAppChatView
-        StatusAppChatView { }
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                StatusNavigationPanelHeadline {
+                    id: headline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Chat"
+                }
+
+                Item {
+                    id: searchInputWrapper
+                    anchors.top: headline.bottom
+                    anchors.topMargin: 16
+                    width: parent.width
+                    height: searchInput.height
+
+                    StatusBaseInput {
+                        id: searchInput
+
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.right: actionButton.left
+                        anchors.leftMargin: 16
+                        anchors.rightMargin: 16
+
+                        height: 36
+                        topPadding: 8
+                        bottomPadding: 0
+                        placeholderText: "Search"
+                        icon.name: "search"
+                    }
+
+                    StatusRoundButton {
+                        id: actionButton
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.right: parent.right
+                        anchors.rightMargin: 8
+                        width: 32
+                        height: 32
+
+                        type: StatusRoundButton.Type.Secondary
+                        icon.name: "add"
+                        state: "default"
+
+                        onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
+                        states: [
+                            State {
+                                name: "default"
+                                PropertyChanges {
+                                    target: actionButton
+                                    icon.rotation: 0
+                                    highlighted: false
+                                }
+                            },
+                            State {
+                                name: "pressed"
+                                PropertyChanges {
+                                    target: actionButton
+                                    icon.rotation: 45
+                                    highlighted: true
+                                }
+                            }
+                        ]
+
+                        transitions: [
+                            Transition {
+                                from: "default"
+                                to: "pressed"
+
+                                RotationAnimation {
+                                    duration: 150
+                                    direction: RotationAnimation.Clockwise
+                                    easing.type: Easing.InCubic
+                                }
+                            },
+                            Transition {
+                                from: "pressed"
+                                to: "default"
+                                RotationAnimation {
+                                    duration: 150
+                                    direction: RotationAnimation.Counterclockwise
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        ]
+
+                        StatusPopupMenu {
+                            id: chatContextMenu
+
+                            onOpened: {
+                                actionButton.state = "pressed"
+                            }
+
+                            onClosed: {
+                                actionButton.state = "default"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start new chat"
+                                icon.name: "private-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start group chat"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Join public chat"
+                                icon.name: "public-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Communities"
+                                icon.name: "communities"
+                            }
+                        }
+                    }
+                }
+
+                Column {
+                    anchors.top: searchInputWrapper.bottom
+                    anchors.topMargin: 16
+                    width: parent.width
+                    spacing: 8
+
+                    StatusContactRequestsIndicatorListItem {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        title: "Contact requests"
+                        requestsCount: 3
+                        sensor.onClicked: demoContactRequestsModal.open()
+                    }
+
+                    StatusChatList {
+                        anchors.horizontalCenter: parent.horizontalCenter
+
+                        model: models.demoChatListItems
+                        onChatItemUnmuted: {
+                            for (var i = 0; i < models.demoChatListItems.count; i++) {
+                                let item = models.demoChatListItems.get(i);
+                                if (item.chatId === id) {
+                                    models.demoChatListItems.setProperty(i, "muted", false)
+                                }
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            openHandler: function (id) {
+                                chatId = id
+                            }
+
+                            StatusMenuItem {
+                                text: "View Profile"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+
+                StatusChatToolBar {
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "Amazing Funny Squirrel"
+                    chatInfoButton.subTitle: "Contact"
+                    chatInfoButton.icon.color: Theme.palette.miscColor7
+                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+                    chatInfoButton.pinnedMessagesCount: 1
+
+                    searchButton.visible: false
+                    membersButton.visible: false
+                    notificationCount: 1
+
+                    onNotificationButtonClicked: notificationCount = 0
+
+                    popupMenu: StatusPopupMenu {
+                        id: contextMenu
+
+                        StatusMenuItem {
+                            text: "Mute Chat"
+                            icon.name: "notification"
+                        }
+                        StatusMenuItem {
+                            text: "Mark as Read"
+                            icon.name: "checkmark-circle"
+                        }
+                        StatusMenuItem {
+                            text: "Clear History"
+                            icon.name: "close-circle"
+                        }
+
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Leave Chat"
+                            icon.name: "arrow-right"
+                            icon.width: 14
+                            iconRotation: 180
+                            type: StatusMenuItem.Type.Danger
+                        }
+                    }
+                }
+            }
+        }
     }
 
     Component {
         id: statusAppCommunityView
-        StatusAppCommunityView {
+
-            communityDetailModalTitle: demoCommunityDetailModal.header.title
+        StatusAppThreePanelLayout {
-            communityDetailModalImage: demoCommunityDetailModal.header.image.source
+            id: root
-            onChatInfoButtonClicked: {
+
-                demoCommunityDetailModal.open();
+            handle: Rectangle {
+                implicitWidth: 5
+                color: SplitHandle.pressed ? Theme.palette.baseColor2
+                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+            }
+            leftPanel: Item {
+                id: leftPanel
+
+                StatusChatInfoToolBar {
+                    id: statusChatInfoToolBar
+
+                    anchors.top: parent.top
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    chatInfoButton.title: "CryptoKitties"
+                    chatInfoButton.subTitle: "128 Members"
+                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
+                    chatInfoButton.onClicked: demoCommunityDetailModal.open()
+
+                    popupMenu: StatusPopupMenu {
+
+                        StatusMenuItem {
+                            text: "Create channel"
+                            icon.name: "channel"
+                        }
+
+                        StatusMenuItem {
+                            text: "Create category"
+                            icon.name: "channel-category"
+                        }
+
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Invite people"
+                            icon.name: "share-ios"
+                        }
+
+                    }
+                }
+
+                ScrollView {
+                    id: scrollView
+
+                    anchors.top: statusChatInfoToolBar.bottom
+                    anchors.topMargin: 8
+                    anchors.bottom: parent.bottom
+                    width: leftPanel.width
+
+                    contentHeight: communityCategories.height
+                    clip: true
+
+                    StatusChatListAndCategories {
+                        id: communityCategories
+                        width: leftPanel.width
+                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+
+                        draggableItems: true
+                        draggableCategories: false
+                        model: models.demoCommunityChatListItems
+                        showCategoryActionButtons: true
+
+                        categoryPopupMenu: StatusPopupMenu {
+
+                            property string categoryId
+
+                            openHandler: function (id) {
+                                categoryId = id
+                            }
+
+                            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
+                            }
+                        }
+
+                        chatListPopupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+                            StatusMenuItem {
+                                text: "Create channel"
+                                icon.name: "channel"
+                            }
+
+                            StatusMenuItem {
+                                text: "Create category"
+                                icon.name: "channel-category"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Invite people"
+                                icon.name: "share-ios"
+                            }
+                        }
+                    }
+                }
+            }
+
+            centerPanel: Item {
+                StatusChatToolBar {
+                    id: statusChatToolBar
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "general"
+                    chatInfoButton.subTitle: "Community Chat"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
+                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+                    onSearchButtonClicked: {
+                        searchButton.highlighted = !searchButton.highlighted;
+                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
+                                                       "",
+                                                       demoCommunityDetailModal.header.image.source);
+                        searchPopup.open();
+                    }
+                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+                    onMembersButtonClicked: {
+                        root.showRightPanel = !root.showRightPanel;
+                    }
+                }
+
+                StatusSearchPopup {
+                    id: searchPopup
+                    searchOptionsPopupMenu: searchPopupMenu
+                    onAboutToHide: {
+                        if (searchPopupMenu.visible) {
+                            searchPopupMenu.close();
+                        }
+                        //clear menu
+                        for (var i = 2; i < searchPopupMenu.count; i++) {
+                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                        }
+                    }
+                    onClosed: {
+                        statusChatToolBar.searchButton.highlighted = false
+                        searchPopupMenu.dismiss();
+                    }
+                    onSearchTextChanged: {
+                        if (searchPopup.searchText !== "") {
+                            searchPopup.loading = true;
+                            searchModelSimTimer.start();
+                        } else {
+                            searchPopup.searchResults = [];
+                            searchModelSimTimer.stop();
+                        }
+                    }
+                    Timer {
+                        id: searchModelSimTimer
+                        interval: 500
+                        onTriggered: {
+                            if (searchPopup.searchText.startsWith("c")) {
+                                searchPopup.searchResults = models.searchResultsA;
+                            } else {
+                                searchPopup.searchResults = models.searchResultsB;
+                            }
+                            searchPopup.loading = false;
+                        }
+                    }
+                }
+                StatusSearchLocationMenu {
+                    id: searchPopupMenu
+                    searchPopup: searchPopup
+                    locationModel: models.optionsModel
+                }
+            }
+
+            rightPanel: Item {
+                id: rightPanel
+                StatusBaseText {
+                    id: titleText
+                    anchors.top: parent.top
+                    anchors.topMargin:16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                    visible: (opacity > 0.1)
+                    font.pixelSize: 15
+                    text: qsTr("Members")
+                }
+
+                ListView {
+                    anchors.top: titleText.bottom
+                    anchors.topMargin: 16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 8
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 16
+                    boundsBehavior: Flickable.StopAtBounds
+                    model: ["John", "Nick", "Maria", "Mike"]
+                    delegate: Row {
+                        width: parent.width
+                        height: 30
+                        spacing: 8
+                        Rectangle {
+                            width: 24
+                            height: 24
+                            radius: width/2
+                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
+                        }
+                        StatusBaseText {
+                            height: parent.height
+                            horizontalAlignment: Text.AlignHCenter
+                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                            visible: (opacity > 0.1)
+                            font.pixelSize: 15
+                            color: Theme.palette.directColor1
+                            text: modelData
+                        }
+                    }
+                }
             }
         }
     }

ui/StatusQ/sandbox/Models.qml

@@ -6,119 +6,188 @@ QtObject {
     property var demoChatListItems: ListModel {
         id: demoChatListItems
         ListElement {
-            chatId: "0"
+            itemId: "x012340000"
             name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
+            icon: ""
-            muted: false
+            isIdenticon: false
-            unreadMessagesCount: 0
-            mentionsCount: 0
             color: "blue"
+            description: ""
+            type: StatusChatListItem.Type.PublicChat
+            hasUnreadMessages: true
+            notificationsCount: 0
+            muted: false
+            active: false
             position: 0
+            subItems: []
         }
         ListElement {
-            chatId: "1"
+            itemId: "x012340001"
             name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
+            icon: ""
-            muted: false
+            isIdenticon: false
             color: "red"
-            unreadMessagesCount: 1
+            description: ""
-            mentionsCount: 1
+            type: StatusChatListItem.Type.PublicChat
+            hasUnreadMessages: true
+            notificationsCount: 1
+            muted: false
+            active: false
             position: 1
+            subItems: []
         }
         ListElement {
-            chatId: "2"
+            itemId: "x012340002"
             name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-            muted: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
+            isIdenticon: true
-            position: 2
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            color: "purple"
-            unreadMessagesCount: 0
-            position: 3
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            color: "Orange"
-            unreadMessagesCount: 0
-            position: 4
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
             color: "green"
-            unreadMessagesCount: 0
+            description: ""
+            type: StatusChatListItem.Type.OneToOneChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: true
+            position: 2
+            subItems: []
+        }
+        ListElement {
+            itemId: "x012340003"
+            name: "Black Ops"
+            icon: ""
+            isIdenticon: false
+            color: "purple"
+            description: ""
+            type: StatusChatListItem.Type.OneToOneChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
+            position: 3
+            subItems: []
+        }
+        ListElement {
+            itemId: "x012340004"
+            name: "Spectacular Growing Otter"
+            icon: ""
+            isIdenticon: false
+            color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.OneToOneChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
+            position: 4
+            subItems: []
+        }
+        ListElement {
+            itemId: "x012340005"
+            name: "channel-with-a-super-duper-long-name"
+            icon: ""
+            isIdenticon: false
+            color: "green"
+            description: ""
+            type: StatusChatListItem.Type.PublicChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
             position: 5
+            subItems: []
         }
     }
 
     property var demoCommunityChatListItems: ListModel {
         id: demoCommunityChatListItems
         ListElement {
-            chatId: "0"
+            itemId: "x012340000"
             name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
+            icon: ""
-            muted: false
+            isIdenticon: false
-            unreadMessagesCount: 0
             color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.CommunityChat
+            hasUnreadMessages: true
+            notificationsCount: 0
+            muted: false
+            active: false
             position: 0
+            subItems: []
         }
         ListElement {
-            chatId: "1"
+            itemId: "x012340001"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 0
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 1
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-            position: 0
-        }
-    }
-
-    property var demoCommunityCategoryItems: ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
             name: "Public"
-            position: 0
+            icon: ""
+            isIdenticon: false
+            color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.Unknown0
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: true
+            position: 1
+            subItems: [
+                ListElement {
+                    itemId: "x012340002"
+                    parentItemId: "x012340001"
+                    name: "random"
+                    icon: ""
+                    isIdenticon: false
+                    color: "orange"
+                    description: ""
+                    hasUnreadMessages: true
+                    notificationsCount: 4
+                    muted: false
+                    active: false
+                    position: 0
+                },
+                ListElement {
+                    itemId: "x012340003"
+                    parentItemId: "x012340001"
+                    name: "watercooler"
+                    icon: ""
+                    isIdenticon: false
+                    color: "orange"
+                    description: ""
+                    hasUnreadMessages: false
+                    notificationsCount: 0
+                    muted: false
+                    active: true
+                    position: 1
+                }
+            ]
         }
         ListElement {
-            categoryId: "dev"
+            itemId: "x012340004"
             name: "Development"
-            position: 1
+            icon: ""
+            isIdenticon: false
+            color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.Unknown0
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
+            position: 2
+            subItems: [
+                ListElement {
+                    itemId: "x012340005"
+                    parentItemId: "x012340004"
+                    name: "language-design"
+                    icon: ""
+                    isIdenticon: false
+                    color: "orange"
+                    description: ""
+                    hasUnreadMessages: false
+                    notificationsCount: 0
+                    muted: true
+                    active: false
+                    position: 0
+                }
+            ]
         }
     }
 

ui/StatusQ/sandbox/controls/ListItems.qml

@@ -85,7 +85,8 @@ GridLayout {
     StatusChatListItem {
         name: "has-mentions"
         type: StatusChatListItem.Type.PublicChat
-        badge.value: 1
+        hasUnreadMessages: true
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -100,7 +101,7 @@ GridLayout {
         type: StatusChatListItem.Type.PublicChat
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -130,7 +131,7 @@ GridLayout {
         selected: true
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
 

ui/StatusQ/src/StatusQ/Components/StatusChatList.qml

@@ -15,8 +15,7 @@ Column {
     width: 288
 
     property string categoryId: ""
-    property string selectedChatId: ""
+    property var model: []
-    property alias chatListItems: delegateModel
     property bool draggableItems: false
 
     property alias statusChatListItems: statusChatListItems
@@ -24,8 +23,6 @@ Column {
     property Component popupMenu
 
     property var filterFn
-    property var profileImageFn
-    property var chatNameFn
 
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
@@ -39,17 +36,16 @@ Column {
 
     DelegateModel {
         id: delegateModel
-
+        model: statusChatList.model
         delegate: Item {
             id: draggable
             width: statusChatListItem.width
             height: statusChatListItem.height
-
             property alias chatListItem: statusChatListItem
 
             visible: {
                 if (!!statusChatList.filterFn) {
-                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                    return statusChatList.filterFn(model)
                 }
                 return true
             }
@@ -96,31 +92,19 @@ Column {
                 StatusChatListItem {
 
                     id: statusChatListItem
-
-                    property string profileImage: ""
-
                     opacity: dragSensor.active ? 0.0 : 1.0
-                    Component.onCompleted: {
-                        if (typeof statusChatList.profileImageFn === "function") {
-                            profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
-                        }
-                    }
                     originalOrder: model.position
-                    chatId: model.chatId || model.id
+                    chatId: model.itemId
-                    categoryId: model.categoryId || ""
+                    categoryId: model.parentItemId
-                    name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
+                    name: model.name
-                    type: model.chatType
+                    type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
-                    muted: !!model.muted
+                    muted: model.muted
-                    hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
+                    hasUnreadMessages: model.hasUnreadMessages
-                    hasMention: model.mentionsCount > 0
+                    notificationsCount: model.notificationsCount
-                    badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
+                    selected: model.active
-                        model.unviewedMessagesCount || 0 :
+                    icon.color: model.color
-                        model.mentionsCount || 0
+                    image.isIdenticon: model.isIdenticon
-                    selected: (model.chatId || model.id) === statusChatList.selectedChatId
+                    image.source: model.icon
-
-                    icon.color: model.color || ""
-                    image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
-                    image.source: profileImage || model.identityImage || model.identicon || ""
 
                     sensor.cursorShape: dragSensor.cursorShape
                     onClicked: {
@@ -132,7 +116,7 @@ Column {
 
                             popupMenuSlot.item.openHandler = function () {
                                 if (!!originalOpenHandler) {
-                                    originalOpenHandler((model.chatId || model.id))
+                                    originalOpenHandler(model.itemId)
                                 }
                             }
 
@@ -152,10 +136,10 @@ Column {
                             return
                         }
                         if (!statusChatListItem.selected) {
-                            statusChatList.chatItemSelected(model.chatId || model.id)
+                            statusChatList.chatItemSelected(model.itemId)
                         }
                     }
-                    onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
                 }
             }
 
@@ -204,9 +188,8 @@ Column {
                     type: draggable.chatListItem.type
                     muted: draggable.chatListItem.muted
                     dragged: true
-                    hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
+                    hasUnreadMessages: model.hasUnreadMessages
-                    hasMention: draggable.chatListItem.hasMention
+                    notificationsCount: model.notificationsCount
-                    badge.value: draggable.chatListItem.badge.value
                     selected: draggable.chatListItem.selected
 
                     icon.color: draggable.chatListItem.icon.color

ui/StatusQ/src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -20,11 +20,9 @@ Item {
         text: "More"
     }
 
-    property string selectedChatId: ""
+    property var model: []
     property bool showCategoryActionButtons: false
     property bool showPopupMenu: true
-    property alias chatList: statusChatList.chatListItems
-    property alias categoryList: delegateModel
     property alias sensor: sensor
     property bool draggableItems: false
     property bool draggableCategories: false
@@ -71,26 +69,25 @@ Item {
             StatusChatList {
                 id: statusChatList
                 anchors.horizontalCenter: parent.horizontalCenter
-                visible: chatListItems.count > 0
+                visible: statusChatList.model.count > 0
-                selectedChatId: statusChatListAndCategories.selectedChatId
                 onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
                 onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
                 draggableItems: statusChatListAndCategories.draggableItems
+                model: statusChatListAndCategories.model
                 filterFn: function (model) {
-                    return !!!model.categoryId
+                    return (model.subItems.count === 0)
                 }
                 popupMenu: statusChatListAndCategories.chatListPopupMenu
             }
 
             DelegateModel {
                 id: delegateModel
-
+                model: statusChatListAndCategories.model
                 delegate: Item {
                     id: draggable
                     width: statusChatListCategory.width
                     height: statusChatListCategory.height
-
                     property alias chatListCategory: statusChatListCategory
 
                     StatusChatListCategory {
@@ -99,7 +96,7 @@ Item {
                         property bool dragActive: false
                         property real startY: 0
                         property real startX: 0
-                      
+
                         opacity: dragActive ? 0.0 : 1.0
 
                         dragSensor.drag.target: draggedListCategoryLoader.item
@@ -136,16 +133,15 @@ Item {
                         menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
 
                         originalOrder: model.position
-                        categoryId: model.categoryId
+                        categoryId: model.itemId
                         name: model.name
                         showActionButtons: statusChatListAndCategories.showCategoryActionButtons
-                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
+                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
 
-                        chatList.chatListItems.model: statusChatListAndCategories.chatList.model
+                        chatList.model: model.subItems
-                        chatList.selectedChatId: statusChatListAndCategories.selectedChatId
                         chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                         chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
                         chatList.draggableItems: statusChatListAndCategories.draggableItems
 
                         popupMenu: statusChatListAndCategories.categoryPopupMenu
@@ -154,7 +150,7 @@ Item {
                         // Used to set the initial value of "opened" when the
                         // model is bound/changed.
                         opened: {
-                            let openedState = statusChatListAndCategories.openedCategoryState[model.categoryId]
+                            let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
                             return openedState !== undefined ? openedState : true // defaults to open
                         }
 
@@ -163,7 +159,7 @@ Item {
                         // as the state would be lost each time the model is
                         // changed.
                         onOpenedChanged: {
-                            statusChatListAndCategories.openedCategoryState[model.categoryId] = statusChatListCategory.opened
+                            statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
                         }
                     }
 
@@ -212,8 +208,7 @@ Item {
                             name: draggable.chatListCategory.name
                             showActionButtons: draggable.chatListCategory.showActionButtons
 
-                            chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
+                            chatList.model: draggable.chatListCategory.chatList.model
-                            chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
                         }
                     }
                 }

ui/StatusQ/src/StatusQ/Components/StatusChatListCategory.qml

@@ -35,11 +35,11 @@ Column {
     StatusChatListCategoryItem {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
+        visible: (model.subItems.count > 0)
         opened: statusChatListCategory.opened
         sensor.pressAndHoldInterval: 150
 
         showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
-
         highlighted: statusChatListCategory.dragged
         sensor.onClicked: {
             if (sensor.enabled) {
@@ -68,7 +68,7 @@ Column {
         visible: statusChatListCategory.opened
         categoryId: statusChatListCategory.categoryId
         filterFn: function (model) {
-            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+            return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
         }
 
         popupMenu: statusChatListCategory.chatListPopupMenu

ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml

@@ -18,7 +18,7 @@ Rectangle {
     property string name: ""
     property alias badge: statusBadge
     property bool hasUnreadMessages: false
-    property bool hasMention: false
+    property int notificationsCount: 0
     property bool muted: false
     property StatusImageSettings image: StatusImageSettings {
         width: 24
@@ -98,8 +98,8 @@ Rectangle {
                 if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return 0.4
                 }
-                return statusChatListItem.hasMention ||
+                return statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
                         statusChatListItem.selected ||
                         statusChatListItem.highlighted ||
                         statusBadge.visible ||
@@ -141,16 +141,16 @@ Rectangle {
                 if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasMention ||
+                return statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
                         statusChatListItem.selected ||
                         statusChatListItem.highlighted ||
                         hoverHander.hovered ||
                         statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
             font.weight: !statusChatListItem.muted &&
-                         (statusChatListItem.hasMention ||
+                         (statusChatListItem.hasUnreadMessages ||
-                          statusChatListItem.hasUnreadMessages ||
+                          statusChatListItem.notificationsCount > 0 ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
@@ -189,7 +189,8 @@ Rectangle {
             color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
             border.width: 4
             border.color: color
-            visible: statusBadge.value > 0
+            value: statusChatListItem.notificationsCount
+            visible: statusChatListItem.notificationsCount > 0
         }
     }
 }