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.Controls 2.14
+import QtQuick 2.15
+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.fill: parent
+            anchors.centerIn: 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 QtQml.Models 2.14
-import QtQuick.Controls 2.14 as QC
+import QtQuick 2.15
 
-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
-    implicitWidth: chatListsAndCategories.width
+    implicitHeight: statusChatList.height
+    implicitWidth: statusChatList.width
 
     property alias highlightItem: statusChatList.highlightItem
 
@@ -36,9 +32,7 @@ Item {
 
     MouseArea {
         id: sensor
-        anchors.top: parent.top
-        width: root.width
-        height: root.height
+        anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onClicked: {
             if (mouse.button === Qt.RightButton && showPopupMenu && !!root.popupMenu) {
@@ -47,28 +41,18 @@ Item {
             }
         }
 
-        Column {
-            id: chatListsAndCategories
-
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: 4
-
         StatusChatList {
             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)
-                }
+            onChatItemReordered: root.chatItemReordered(categoryId, chatId, to)
             onCategoryReordered: root.chatListCategoryReordered(categoryId, to)
             draggableItems: root.draggableItems
             showCategoryActionButtons: root.showCategoryActionButtons
-                onCategoryAddButtonClicked: {
-                    root.categoryAddButtonClicked(id)
-                }
+            onCategoryAddButtonClicked: root.categoryAddButtonClicked(id)
 
             model: SortFilterProxyModel {
                 sourceModel: root.model
@@ -88,7 +72,6 @@ Item {
             categoryPopupMenu: root.categoryPopupMenu
         }
     }
-    }
 
     Loader {
         id: popupMenuSlot