fix: invalid width for items chat list

- simplify StatusChatListAndCategories, and propagate the width
- set the correct width in StatusChatList's actions (using
`Layout.fillWidth: true`)
- add a width slider to the storybook page to be able experiment with
the whole component width

Fixes #11047

storybook/pages/StatusChatListAndCategoriesPage.qml

@@ -1,5 +1,6 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Controls 2.14
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
 import StatusQ.Components 0.1
 
@@ -17,8 +18,8 @@ SplitView {
         SplitView.fillHeight: true
 
         StatusChatListAndCategories {
-
+            anchors.centerIn: parent
-            anchors.fill: parent
+            width: ctrlWidth.value
 
             model: ListModel {
                 ListElement {
@@ -27,6 +28,7 @@ SplitView {
                     name: "X"
                     subItems: []
                     isCategory: false
+                    categoryId: ""
                     active: true
                     notificationsCount: 12
                     hasUnreadMessages: false
@@ -39,8 +41,12 @@ SplitView {
                 ListElement {
                     itemId: "id2"
                     position: 0
+                    categoryPosition: 0
+                    categoryId: "id2"
                     name: "Y"
+                    icon: ""
                     isCategory: true
+                    muted: false
                     subItems: [
                         ListElement {
                             itemId: "id3"
@@ -92,5 +98,18 @@ SplitView {
         SplitView.preferredHeight: 200
 
         logsView.logText: logs.logText
+
+        RowLayout {
+            Label { text: "Width:" }
+            Slider {
+                id: ctrlWidth
+                from: 30
+                to: 600
+                stepSize: 10
+                value: 200 // smaller than the default 288
+                ToolTip.text: ctrlWidth.value
+                ToolTip.visible: ctrlWidth.pressed
+            }
+        }
     }
 }

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

@@ -1,4 +1,5 @@
 import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15 as QC
 
 import StatusQ.Core 0.1
@@ -116,7 +117,7 @@ Item {
                    StatusChatListCategoryItem {
                         id: statusChatListCategoryItem
                         objectName: "categoryItem"
-                        width: chatListDelegate.width
+                        Layout.fillWidth: true
                         visible: draggableItem.isCategory
 
                         function setupPopup() {
@@ -159,7 +160,7 @@ Item {
                     StatusChatListItem {
                         id: statusChatListItem
                         objectName: model.name
-                        width: chatListDelegate.width
+                        Layout.fillWidth: true
                         height: visible ? (statusChatListItem.implicitHeight + 4) /*spacing between non-collapsed items*/ : 0
                         visible: (!draggableItem.isCategory && model.categoryOpened)
                         originalOrder: model.position

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

@@ -1,10 +1,6 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQml.Models 2.14
-import QtQuick.Controls 2.14 as QC
 
-import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
-import StatusQ.Popups 0.1
 import StatusQ.Core 0.1
 
 import SortFilterProxyModel 0.2
@@ -12,8 +8,8 @@ import SortFilterProxyModel 0.2
 Item {
     id: root
 
-    implicitHeight: chatListsAndCategories.height
+    implicitHeight: statusChatList.height
-    implicitWidth: chatListsAndCategories.width
+    implicitWidth: statusChatList.width
 
     property alias highlightItem: statusChatList.highlightItem
 
@@ -36,9 +32,7 @@ Item {
 
     MouseArea {
         id: sensor
-        anchors.top: parent.top
+        anchors.fill: parent
-        width: root.width
-        height: root.height
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onClicked: {
             if (mouse.button === Qt.RightButton && showPopupMenu && !!root.popupMenu) {
@@ -47,46 +41,35 @@ Item {
             }
         }
 
-        Column {
+        StatusChatList {
-            id: chatListsAndCategories
+            objectName: "statusChatListAndCategoriesChatList"
+            id: statusChatList
+            width: parent.width
+            visible: statusChatList.model.count > 0
+            onChatItemSelected: root.chatItemSelected(categoryId, id)
+            onChatItemUnmuted: root.chatItemUnmuted(id)
+            onChatItemReordered: root.chatItemReordered(categoryId, chatId, to)
+            onCategoryReordered: root.chatListCategoryReordered(categoryId, to)
+            draggableItems: root.draggableItems
+            showCategoryActionButtons: root.showCategoryActionButtons
+            onCategoryAddButtonClicked: root.categoryAddButtonClicked(id)
 
-            anchors.top: parent.top
+            model: SortFilterProxyModel {
-            anchors.horizontalCenter: parent.horizontalCenter
+                sourceModel: root.model
-            spacing: 4
+                sorters: [
-
+                    RoleSorter {
-            StatusChatList {
+                        roleName: "categoryPosition"
-                objectName: "statusChatListAndCategoriesChatList"
+                        priority: 2 // Higher number === higher priority
-                id: statusChatList
+                    },
-                visible: statusChatList.model.count > 0
+                    RoleSorter {
-                onChatItemSelected: root.chatItemSelected(categoryId, id)
+                        roleName: "position"
-                onChatItemUnmuted: root.chatItemUnmuted(id)
+                        priority: 1
-                onChatItemReordered: {
+                    }
-                    root.chatItemReordered(categoryId, chatId, to)
+                ]
-                }
-                onCategoryReordered: root.chatListCategoryReordered(categoryId, to)
-                draggableItems: root.draggableItems
-                showCategoryActionButtons: root.showCategoryActionButtons
-                onCategoryAddButtonClicked: {
-                    root.categoryAddButtonClicked(id)
-                }
-
-                 model: SortFilterProxyModel {
-                    sourceModel: root.model
-                    sorters: [
-                        RoleSorter {
-                            roleName: "categoryPosition"
-                            priority: 2 // Higher number === higher priority
-                        },
-                        RoleSorter {
-                            roleName: "position"
-                            priority: 1
-                        }
-                    ]
-                }
-
-                popupMenu: root.chatListPopupMenu
-                categoryPopupMenu: root.categoryPopupMenu
             }
+
+            popupMenu: root.chatListPopupMenu
+            categoryPopupMenu: root.categoryPopupMenu
         }
     }