feat(Components): introduce StatusContactRequestsIndicatorListItem

Usage:

```qml
import StatusQ.Components 0.1

StatusContactRequestsIndicatorListItem {
    title: "Contact requests"
    requestsCount: 3
    sensor.onClicked: ...
}
```

Closes #175

sandbox/DemoApp.qml

@@ -44,7 +44,6 @@ Rectangle {
         }
     }
 
-
     StatusAppLayout {
         id: statusAppLayout
         anchors.top: demoApp.top
@@ -173,57 +172,67 @@ Rectangle {
                     text: "Chat"
                 }
 
-                StatusChatList {
+                Column {
                     anchors.top: headline.bottom
                     anchors.topMargin: 16
-                    anchors.bottom: parent.bottom
+                    width: parent.width
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 8
 
-                    chatListItems.model: demoChatListItems
+                    StatusContactRequestsIndicatorListItem {
-                    selectedChatId: "0"
+                        anchors.horizontalCenter: parent.horizontalCenter
-
+                        title: "Contact requests"
-                    onChatItemSelected: selectedChatId = id
+                        requestsCount: 3
-                    onChatItemUnmuted: {
+                        sensor.onClicked: demoContactRequestsModal.open()
-                        for (var i = 0; i < demoChatListItems.count; i++) {
-                            let item = demoChatListItems.get(i);
-                            if (item.chatId === id) {
-                                demoChatListItems.setProperty(i, "muted", false)
-                            }
-                        }
                     }
 
-                    popupMenu: StatusPopupMenu {
+                    StatusChatList {
+                        anchors.horizontalCenter: parent.horizontalCenter
 
-                        property string chatId
+                        chatListItems.model: demoChatListItems
-
+                        selectedChatId: "0"
-                        StatusMenuItem {
+                        onChatItemSelected: selectedChatId = id
-                            text: "View Profile"
+                        onChatItemUnmuted: {
-                            icon.name: "group-chat"
+                            for (var i = 0; i < demoChatListItems.count; i++) {
+                                let item = demoChatListItems.get(i);
+                                if (item.chatId === id) {
+                                    demoChatListItems.setProperty(i, "muted", false)
+                                }
+                            }
                         }
 
-                        StatusMenuSeparator {}
+                        popupMenu: StatusPopupMenu {
 
-                        StatusMenuItem {
+                            property string chatId
-                            text: "Mute chat"
-                            icon.name: "notification"
-                        }
 
-                        StatusMenuItem {
+                            StatusMenuItem {
-                            text: "Mark as Read"
+                                text: "View Profile"
-                            icon.name: "checkmark-circle"
+                                icon.name: "group-chat"
-                        }
+                            }
 
-                        StatusMenuItem {
+                            StatusMenuSeparator {}
-                            text: "Clear history"
-                            icon.name: "close-circle"
-                        }
 
-                        StatusMenuSeparator {}
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
 
-                        StatusMenuItem {
+                            StatusMenuItem {
-                            text: "Delete chat"
+                                text: "Mark as Read"
-                            icon.name: "delete"
+                                icon.name: "checkmark-circle"
-                            type: StatusMenuItem.Type.Danger
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
                         }
                     }
                 }
@@ -508,6 +517,41 @@ Rectangle {
         }
     }
 
+    StatusModal {
+        id: demoContactRequestsModal
+        anchors.centerIn: parent
+
+        header.title: "Contact Requests"
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "notification"
+        }
+
+        content: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Contact request will be shown here"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Decline all"
+                type: StatusBaseButton.Type.Danger
+                onClicked: demoContactRequestsModal.close()
+            },
+            StatusButton {
+                text: "Accept all"
+                onClicked: demoContactRequestsModal.close()
+            }
+        ]
+    }
+
     StatusModal {
         id: demoCommunityDetailModal
 

sandbox/ListItems.qml

@@ -243,4 +243,8 @@ GridLayout {
         iconButton.onClicked: tooltip.visible = !tooltip.visible
     }
 
+    StatusContactRequestsIndicatorListItem {
+        title: "Contact requests"
+        requestsCount: 3
+    }
 }

src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml

@@ -0,0 +1,30 @@
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+StatusListItem {
+    id: statusContactRequestsListItem
+
+    implicitHeight: 64
+    implicitWidth: 288
+
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+
+    property int requestsCount: 0
+
+    components: [
+        StatusBadge {
+            value: statusContactRequestsListItem.requestsCount
+            anchors.verticalCenter: parent.verticalCenter
+            border.width: 4
+            border.color: color
+        },
+        StatusIcon {
+            icon: "chevron-down"
+            rotation: 270
+            color: Theme.palette.baseColor1
+        }
+    ]
+}
+
+

src/StatusQ/Components/qmldir

@@ -8,6 +8,7 @@ StatusChatListCategory 0.1 StatusChatListCategory.qml
 StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
 StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
+StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml

statusq.qrc

@@ -21,6 +21,7 @@
         <file>src/StatusQ/Components/StatusChatListItem.qml</file>
         <file>src/StatusQ/Components/StatusChatListAndCategories.qml</file>
         <file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>
+        <file>src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml</file>
         <file>src/StatusQ/Components/StatusNavigationListItem.qml</file>
         <file>src/StatusQ/Components/StatusNavigationPanelHeadline.qml</file>
         <file>src/StatusQ/Components/StatusChatToolBar.qml</file>