fix(StatusChatListCategory): Clicking on a category should toggle it

The culprit here is at the very bottom, in StatusListItem: the toplevel
item was a MouseArea handling the clicks and this causes problems as any
extra buttons placed on top of it get their mouseClick events delivered
in wrong order (after StatusListItem). Fix this by having a MouseArea
handling click events behind the actual toplevel item as a last resort,
catch all handler  plus the actual "sensor" being just a MouseArea that
handles merely the hover events

- drop unneeded onPressed/onReleased handlers in StatusChatListCategoryItem
- fix some warnings (typos, unreachable code, shadowed variables)

Fixes: #6733

sandbox/controls/ListItems.qml

@@ -56,19 +56,21 @@ ColumnLayout {
     }
 
     StatusChatListCategoryItem {
-        title: "Chat cat. interactive"
-        opened: true
-        propagateTitleClicks: false
+        id: categoryItemInteractive
+        title: "Chat category interactive"
         showActionButtons: true
         onAddButtonClicked: testEventsList.eventTriggered("Add button clicked")
         onMenuButtonClicked: testEventsList.eventTriggered("Menu button clicked")
-        onToggleButtonClicked: opened = !opened
+        onToggleButtonClicked: {
+            opened = !opened
+            testEventsList.eventTriggered("Toggle button clicked")
+        }
         onTitleClicked: {
             testEventsList.eventTriggered("Title clicked")
         }
         onClicked: {
-            testEventsList.eventTriggered("Item clicked")
-            mouse.accepted = true
+            opened = !opened
+            testEventsList.eventTriggered("Item clicked", itemId)
         }
     }
 
@@ -76,7 +78,7 @@ ColumnLayout {
         id: testEventsList
 
         Layout.fillWidth: true
-        Layout.preferredHeight: 20 * count
+        Layout.preferredHeight: categoryItemInteractive.opened ? 20 * count : 0
 
         clip: true
 
@@ -96,13 +98,13 @@ ColumnLayout {
 
                 Timer {
                     interval: 5000; running: true
-                    onTriggered: testObjeModel.remove(index)
+                    onTriggered: testObjectModel.remove(index)
                 }
             }
         }
 
         model: ObjectModel {
-            id: testObjeModel
+            id: testObjectModel
         }
     }
 

sandbox/demoapp/StatusAppChatView.qml

@@ -91,7 +91,7 @@ StatusAppThreePanelLayout {
                 anchors.horizontalCenter: parent.horizontalCenter
                 title: "Contact requests"
                 requestsCount: 3
-                sensor.onClicked: demoContactRequestsModal.open()
+                onClicked: demoContactRequestsModal.open()
             }
 
             StatusChatList {

src/StatusQ/Components/StatusChatList.qml

@@ -119,7 +119,7 @@ Column {
                     highlightWhenCreated: !!model.highlight
                     selected: (model.active && root.highlightItem)
 
-                    icon.emoji: model.emoji
+                    icon.emoji: !!model.emoji ? model.emoji : ""
                     icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
                     image.isIdenticon: false
                     image.source: model.icon

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -32,7 +32,7 @@ Item {
     property bool draggableCategories: false
     // Keeps track of expanded category state. Should only be modified
     // internally at runtime.
-    property var openedCategoryState: new Object({})
+    property var openedCategoryState: ({})
 
     property Component categoryPopupMenu
     property Component chatListPopupMenu

src/StatusQ/Components/StatusChatListCategory.qml

@@ -37,20 +37,20 @@ Column {
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
         sensor.pressAndHoldInterval: 150
-
+        propagateTitleClicks: true // title click is handled as a normal click (fallthru)
         showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
         highlighted: statusChatListCategory.dragged
-        sensor.onClicked: {
+        onClicked: {
             if (sensor.enabled) {
                 if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
                     highlighted = true;
                     popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
-                    return
+                } else if (mouse.button === Qt.LeftButton) {
+                    statusChatListCategory.opened = !statusChatListCategory.opened
                 }
             }
         }
-        onTitleClicked: statusChatListCategory.opened = !opened
-        onToggleButtonClicked: statusChatListCategory.opened = !opened
+        onToggleButtonClicked: statusChatListCategory.opened = !statusChatListCategory.opened
         onMenuButtonClicked: {
             highlighted = true
             menuButton.highlighted = true

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -60,15 +60,7 @@ StatusListItem {
             icon.name: "chevron-down"
             icon.width: 18
             icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
-            onPressed: {
-                sensor.enabled = false;
-            }
-            onClicked: {
-                statusChatListCategoryItem.toggleButtonClicked(mouse);
-            }
-            onReleased: {
-                sensor.enabled = true;
-            }
+            onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
         }
     ]
 }

src/StatusQ/Components/StatusChatListItem.qml

@@ -112,17 +112,14 @@ Rectangle {
 
             icon: {
                 switch (root.type) {
-                case StatusChatListItem.Type.PublicCat:
-                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
-                    break;
+                case StatusChatListItem.Type.PublicChat:
+                    return Theme.palette.name === "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                 case StatusChatListItem.Type.GroupChat:
-                    return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
-                    break;
+                    return Theme.palette.name === "light" ? "tiny/group" : "tiny/group-white"
                 case StatusChatListItem.Type.CommunityChat:
-                    return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
-                    break;
+                    return Theme.palette.name === "light" ? "tiny/channel" : "tiny/channel-white"
                 default:
-                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                    return Theme.palette.name === "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                 }
             }
         }

src/StatusQ/Components/StatusListItem.qml

@@ -23,7 +23,6 @@ Rectangle {
     property string titleTextIcon: ""
     property real leftPadding: 16
     property real rightPadding: 16
-    property bool enabled: true
     property bool highlighted: false
     property bool propagateTitleClicks: true
     property int type: StatusListItem.Type.Primary
@@ -122,18 +121,20 @@ Rectangle {
     }
 
     MouseArea {
-        id: sensor
-
-        enabled: statusListItem.enabled
         anchors.fill: parent
-        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
-        hoverEnabled: true
-        preventStealing: true
-
         onClicked: {
             statusListItem.clicked(statusListItem.itemId, mouse)
         }
+    }
+
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
+        acceptedButtons: Qt.NoButton
+        hoverEnabled: true
 
         StatusSmartIdenticon {
             id: iconOrImage
@@ -359,7 +360,7 @@ Rectangle {
             id: statusListItemLabel
             anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
             anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : 16
+            anchors.topMargin: bottomModel.length === 0 ? 0 : 16
             anchors.right: statusListItemComponentsSlot.left
             anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0