Introducing StatusBaseInput

Usage: The same interface like TextField

Closes: #106

README.md

@@ -12,6 +12,7 @@ These modules are:
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
 - [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
+- [StatusQ.Platform](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Platform/qmldir)
 - [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
@@ -43,12 +44,11 @@ To run the sandbox from within a command line interface, run the following comma
 ```
 $ git clone https://github.com/status-im/StatusQ
 $ cd StatusQ/sandbox
-$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-$ make
+$ ./scripts/build
 ```
 
 Once that is done, the sandbox can be started with the generated executable:
 
 ```
-$ ./bin
+$ ./bin/sandbox
 ```

sandbox/Controls.qml

@@ -5,6 +5,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
+import Sandbox 0.1
+
 GridLayout {
     columns: 6
     columnSpacing: 5
@@ -141,4 +143,32 @@ GridLayout {
         to: 100
         value: 40
     }
+
+    StatusBaseInput {
+        placeholderText: "One line"
+    }
+
+    StatusBaseInput {
+        multiline: true
+        placeholderText: "Multiline"
+    }
+
+    StatusBaseInput {
+        multiline: true
+        placeholderText: "Multiline with static height"
+        implicitHeight: 100
+    }
+
+    Item {
+        implicitHeight: 300
+        implicitWidth: 300
+
+        StatusBaseInput {
+            anchors.centerIn: parent
+            multiline: true
+            placeholderText: "Multiline with max/min"
+            minimumHeight: 80
+            maximumHeight: 200
+        }
+    }
 }

sandbox/DemoApp.qml

@@ -44,7 +44,6 @@ Rectangle {
         }
     }
 
-
     StatusAppLayout {
         id: statusAppLayout
         anchors.top: demoApp.top
@@ -141,6 +140,11 @@ Rectangle {
                     badge.border.width: 2
 
                     tooltip.text: "Profile"
+
+                    checked: appView.sourceComponent == statusAppProfileSettingsView
+                    onClicked: {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                    }
                 }
             ]
         }
@@ -160,19 +164,78 @@ Rectangle {
             leftPanel: Item {
                 anchors.fill: parent
 
-                StatusChatList {
+                StatusNavigationPanelHeadline {
+                    id: headline
                     anchors.top: parent.top
-                    anchors.topMargin: 64
+                    anchors.topMargin: 16
                     anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Chat"
+                }
 
-                    selectedChatId: "0"
-                    chatListItems.model: demoChatListItems
-                    onChatItemSelected: selectedChatId = id
-                    onChatItemUnmuted: {
-                        for (var i = 0; i < demoChatListItems.count; i++) {
-                            let item = demoChatListItems.get(i);
-                            if (item.chatId === id) {
-                                demoChatListItems.setProperty(i, "muted", false)
+                Column {
+                    anchors.top: headline.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
+
+                        chatListItems.model: demoChatListItems
+                        selectedChatId: "0"
+                        onChatItemSelected: selectedChatId = id
+                        onChatItemUnmuted: {
+                            for (var i = 0; i < demoChatListItems.count; i++) {
+                                let item = demoChatListItems.get(i);
+                                if (item.chatId === id) {
+                                    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
                             }
                         }
                     }
@@ -223,7 +286,6 @@ Rectangle {
                         }
                     }
                 }
-
             }
         }
     }
@@ -234,67 +296,147 @@ Rectangle {
         StatusAppTwoPanelLayout {
 
             leftPanel: Item {
+                id: leftPanel
                 anchors.fill: parent
 
-                Column {
+                StatusChatInfoToolBar {
+                    id: statusChatInfoToolBar
+
                     anchors.top: parent.top
-                    anchors.topMargin: 64
                     anchors.horizontalCenter: parent.horizontalCenter
-                    spacing: 4
 
-                    StatusChatList {
-                        id: statusChatList
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        chatListItems.model: demoCommunityChatListItems
-                    }
+                    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()
 
-                    StatusChatListCategory {
-                        name: "Public"
+                    popupMenu: StatusPopupMenu {
 
-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.selectedChatId: "0"
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
-                    }
-
-                    StatusChatListCategory {
-                        name: "Development"
-
-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
-                    }
-                }
-
-                Component {
-                    id: categoryPopupCmp
-
-                    StatusPopupMenu {
                         StatusMenuItem {
-                            text: "Mute Category"
-                            icon.name: "notification"
+                            text: "Create channel"
+                            icon.name: "channel"
                         }
 
-                        StatusMenuItem { 
-                            text: "Mark as Read"
-                            icon.name: "checkmark-circle"
-                        }
-
-                        StatusMenuItem { 
-                            text: "Edit Category"
-                            icon.name: "edit"
+                        StatusMenuItem {
+                            text: "Create category"
+                            icon.name: "channel-category"
                         }
 
                         StatusMenuSeparator {}
 
                         StatusMenuItem {
-                            text: "Delete Category"
-                            icon.name: "delete"
-                            type: StatusMenuItem.Type.Danger
+                            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
+                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+                        width: leftPanel.width
+
+                        chatList.model: demoCommunityChatListItems
+                        categoryList.model: demoCommunityCategoryItems
+
+                        showCategoryActionButtons: true
+                        onChatItemSelected: selectedChatId = id
+
+                        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"
+                            }
                         }
                     }
                 }
             }
+
             rightPanel: Item {
                 anchors.fill: parent
 
@@ -311,6 +453,217 @@ Rectangle {
         }
     }
 
+    Component {
+        id: statusAppProfileSettingsView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                StatusNavigationPanelHeadline {
+                    id: profileHeadline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Profile"
+                }
+
+                ScrollView {
+                    anchors.top: profileHeadline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    contentHeight: profileMenuItems.height + 8
+                    contentWidth: parent.width
+                    clip: true
+
+                    Column {
+                        id: profileMenuItems
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        spacing: 4
+
+                        Repeater {
+                            model: demoProfileGeneralMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        StatusListSectionHeadline { text: "Settings" }
+
+                        Repeater {
+                            model: demoProfileSettingsMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        Item { 
+                            id: invisibleSeparator
+                            height: 16
+                            width: parent.width
+                        }
+
+                        Repeater {
+                            model: demoProfileOtherMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+            }
+        }
+    }
+
+    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
+
+        anchors.centerIn: parent
+
+        header.title: "Cryptokitties"        
+        header.subTitle: "Public Community"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+        content: Column {
+            width: demoCommunityDetailModal.width
+
+            StatusModalDivider { 
+                bottomPadding: 8 
+            }
+
+            StatusBaseText {
+                text: "A community of cat lovers, meow!"
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: 15
+                height: 46
+                color: Theme.palette.directColor1
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                anchors.rightMargin: 16
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusDescriptionListItem {
+                title: "Share community"
+                subTitle: "https://join.status.im/u/0x04...45f19"
+                tooltip.text: "Copy to clipboard"
+                icon.name: "copy"
+                iconButton.onClicked: tooltip.visible = !tooltip.visible
+                width: parent.width
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Members"
+                icon.name: "group-chat"
+                label: "184"
+                components: [
+                    StatusIcon {
+                        icon: "chevron-down"
+                        rotation: 270
+                        color: Theme.palette.baseColor1
+                    }
+                ]
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Notifications"
+                icon.name: "notification"
+                components: [
+                    StatusSwitch {}
+                ]
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Edit community"
+                icon.name: "edit"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Transfer ownership"
+                icon.name: "exchange"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Leave community"
+                icon.name: "arrow-right"
+                icon.rotation: 180
+                type: StatusListItem.Type.Secondary
+            }
+        }
+    }
+
     ListModel {
         id: demoChatListItems
         ListElement {
@@ -321,15 +674,15 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "blue"
+            color: "blue"
         }
         ListElement {
             chatId: "1"
-            name: "#status-desktop"
+            name: "status-desktop"
             chatType: StatusChatListItem.Type.PublicChat
             muted: false
             hasUnreadMessages: true
-            iconColor: "red"
+            color: "red"
             unreadMessagesCount: 1
         }
         ListElement {
@@ -338,8 +691,9 @@ Rectangle {
             chatType: StatusChatListItem.Type.OneToOneChat
             muted: false
             hasUnreadMessages: false
-            iconColor: "green"
-            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            color: "green"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             unreadMessagesCount: 0
         }
         ListElement {
@@ -348,7 +702,7 @@ Rectangle {
             chatType: StatusChatListItem.Type.GroupChat
             muted: false
             hasUnreadMessages: false
-            iconColor: "purple"
+            color: "purple"
             unreadMessagesCount: 0
         }
         ListElement {
@@ -357,7 +711,7 @@ Rectangle {
             chatType: StatusChatListItem.Type.OneToOneChat
             muted: true
             hasUnreadMessages: false
-            iconColor: "Orange"
+            color: "Orange"
             unreadMessagesCount: 0
         }
     }
@@ -372,7 +726,7 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
         }
         ListElement {
             chatId: "1"
@@ -382,7 +736,8 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
+            categoryId: "public"
         }
         ListElement {
             chatId: "2"
@@ -392,7 +747,115 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "dev"
+        }
+    }
+
+    ListModel {
+        id: demoCommunityCategoryItems
+        ListElement {
+            categoryId: "public"
+            name: "Public"
+        }
+        ListElement {
+            categoryId: "dev"
+            name: "Development"
+        }
+    }
+
+    ListModel {
+        id: demoProfileGeneralMenuItems
+
+        ListElement {
+            title: "My Profile"
+            icon: "profile"
+        }
+
+        ListElement {
+            title: "Contacts"
+            icon: "contact"
+        }
+
+        ListElement {
+            title: "ENS Usernames"
+            icon: "username"
+        }
+
+    }
+
+    ListModel {
+        id: demoProfileSettingsMenuItems
+
+        ListElement {
+            title: "Privacy & Security"
+            icon: "security"
+        }
+
+        ListElement {
+            title: "Appearance"
+            icon: "appearance"
+        }
+
+        ListElement {
+            title: "Browser"
+            icon: "browser"
+        }
+
+        ListElement {
+            title: "Sounds"
+            icon: "sound"
+        }
+
+        ListElement {
+            title: "Language"
+            icon: "language"
+        }
+
+        ListElement {
+            title: "Notifications"
+            icon: "notification"
+        }
+
+        ListElement {
+            title: "Sync settings"
+            icon: "mobile"
+        }
+
+        ListElement {
+            title: "Advanced"
+            icon: "settings"
+        }
+
+    }
+
+    ListModel {
+        id: demoProfileOtherMenuItems
+
+        ListElement {
+            title: "Need help?"
+            icon: "help"
+        }
+
+        ListElement {
+            title: "About"
+            icon: "info"
+        }
+
+        ListElement {
+            title: "Sign out & Quit"
+            icon: "logout"
         }
     }
 }

sandbox/ListItems.qml

@@ -40,11 +40,18 @@ GridLayout {
     StatusChatListCategoryItem {
         title: "Chat list category"
         opened: false
+        showActionButtons: true
     }
 
     StatusChatListCategoryItem {
         title: "Chat list category (opened)"
         opened: true
+        showActionButtons: true
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (no buttons)"
+        opened: true
     }
 
     StatusChatListItem {
@@ -217,6 +224,12 @@ GridLayout {
         ]
     }
 
+    StatusListItem {
+        title: "Title"
+        icon.name: "info"
+        type: StatusListItem.Type.Secondary
+    }
+
     StatusDescriptionListItem {
         title: "Title"
         subTitle: "Subtitle"
@@ -230,4 +243,8 @@ GridLayout {
         iconButton.onClicked: tooltip.visible = !tooltip.visible
     }
 
+    StatusContactRequestsIndicatorListItem {
+        title: "Contact requests"
+        requestsCount: 3
+    }
 }

sandbox/Popups.qml

@@ -0,0 +1,145 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+Column {
+    spacing: 20
+
+    StatusButton {
+        text: "Simple modal"
+        onClicked: simpleModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with header image"
+        onClicked: headerImageModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with footer buttons"
+        onClicked: footerButtonsModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with header action button"
+        onClicked: headerActionButtonModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with content"
+        onClicked: modalExample.open()
+    }
+
+    StatusModal {
+        id: simpleModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+    }
+
+    StatusModal {
+        id: headerImageModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusModal {
+        id: footerButtonsModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+    }
+
+    StatusModal {
+        id: headerActionButtonModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "info"
+        }
+
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalExample
+        anchors.centerIn: parent
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+
+        content: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "info"
+        }
+    }
+}

sandbox/StatusChatInfoToolBarPage.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusChatInfoToolBar {
+        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
+
+        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"
+            }
+        }
+    }
+}

sandbox/main.qml

@@ -118,21 +118,21 @@ StatusWindow {
                         anchors.horizontalCenter: parent.horizontalCenter
                         spacing: 0
 
-                        NavigationHeader { text: "StatusQ.Core" }
+                        StatusListSectionHeadline { text: "StatusQ.Core" }
                         StatusNavigationListItem { 
                             title: "Icons" 
                             selected: page.sourceComponent == iconsComponent
                             onClicked: page.sourceComponent = iconsComponent
                         }
 
-                        NavigationHeader { text: "StatusQ.Layout" }
+                        StatusListSectionHeadline { text: "StatusQ.Layout" }
                         StatusNavigationListItem { 
                             title: "Layouts" 
                             selected: page.sourceComponent == layoutComponent
                             onClicked: page.sourceComponent = layoutComponent
                         }
 
-                        NavigationHeader { text: "StatusQ.Controls" }
+                        StatusListSectionHeadline { text: "StatusQ.Controls" }
                         StatusNavigationListItem { 
                             title: "Buttons" 
                             selected: page.sourceComponent == buttonsComponent
@@ -143,23 +143,34 @@ StatusWindow {
                             selected: page.sourceComponent == controlsComponent
                             onClicked: page.sourceComponent = controlsComponent
                         }
-                        NavigationHeader { text: "StatusQ.Components" }
+                        StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "List Items"
                             selected: page.sourceComponent == listItemsComponent
                             onClicked: page.sourceComponent = listItemsComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusChatInfoToolBar"
+                            selected: page.sourceComponent == chatInfoToolBarComponent
+                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                        }
                         StatusNavigationListItem { 
                             title: "Others"
                             selected: page.sourceComponent == othersComponent
                             onClicked: page.sourceComponent = othersComponent
                         }
-                        NavigationHeader { text: "StatusQ.Popup" }
+                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem { 
                             title: "StatusPopupMenu"
                             selected: page.sourceComponent == popupMenuComponent
                             onClicked: page.sourceComponent = popupMenuComponent
                         }
+
+                        StatusNavigationListItem {
+                            title: "StatusModal"
+                            selected: page.sourceComponent == statusModalComponent
+                            onClicked: page.sourceComponent = statusModalComponent
+                        }
                     }
                 }
             }
@@ -252,6 +263,16 @@ StatusWindow {
         StatusPopupMenuPage {}
     }
 
+    Component {
+        id: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
+    Component {
+        id: statusModalComponent
+        Popups {}
+    }
+
     Component {
         id: demoAppCmp
 

sandbox/qml.qrc

@@ -5,5 +5,12 @@
         <file>Icons.qml</file>
         <file>Others.qml</file>
         <file>Buttons.qml</file>
+        <file>DemoApp.qml</file>
+        <file>ListItems.qml</file>
+        <file>StatusChatInfoToolBarPage.qml</file>
+        <file>StatusPopupMenuPage.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>Layout.qml</file>
+        <file>Popups.qml</file>
     </qresource>
 </RCC>

sandbox/scripts/build

@@ -0,0 +1,4 @@
+make clean
+qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+make
+

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatInfoToolBar
+
+    implicitWidth: 288
+    implicitHeight: 56
+
+    property alias chatInfoButton: statusChatInfoButton
+    property Component popupMenu
+
+    signal chatInfoButtonClicked()
+    signal addButtonClicked(var mouse)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 5
+        type: StatusChatInfoButton.Type.OneToOneChat
+        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
+    }
+
+    StatusRoundButton {
+        id: menuButton
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        visible: popupMenuSlot.active
+        width: 32
+        height: 32
+
+        type: StatusRoundButton.Type.Secondary
+        icon.name: "add"
+        state: "default"
+
+        states: [
+            State {
+                name: "default"
+                PropertyChanges {
+                    target: menuButton
+                    icon.rotation: 0
+                }
+            },
+            State {
+                name: "pressed"
+                PropertyChanges {
+                    target: menuButton
+                    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
+								}
+        		}
+        ]
+
+        onClicked: {
+            statusChatInfoToolBar.addButtonClicked(mouse)
+            menuButton.state = "pressed"
+            popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
+        }
+
+        Loader {
+            id: popupMenuSlot
+            active: !!statusChatInfoToolBar.popupMenu
+            onLoaded: {
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.state = "default"
+                }
+            }
+        }
+    }
+
+}

src/StatusQ/Components/StatusChatList.qml

@@ -9,30 +9,91 @@ Column {
     id: statusChatList
 
     spacing: 4
+    width: 288
 
+    property string categoryId: ""
     property string selectedChatId: ""
     property alias chatListItems: statusChatListItems
 
+    property Component popupMenu
+
+    property var filterFn
+    property var profileImageFn
+
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
 
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
     Repeater {
         id: statusChatListItems
         delegate: StatusChatListItem {
-            chatId: model.chatId
+
+            id: statusChatListItem
+
+            property string profileImage: ""
+
+            Component.onCompleted: {
+                if (typeof statusChatList.profileImageFn === "function") {
+                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
+                }
+            }
+
+            chatId: model.chatId || model.id
             name: model.name
             type: model.chatType
             muted: !!model.muted
             hasUnreadMessages: !!model.hasUnreadMessages
             hasMention: !!model.hasMention
             badge.value: model.unreadMessagesCount || 0
-            selected: model.chatId === statusChatList.selectedChatId
+            selected: (model.chatId || model.id) === statusChatList.selectedChatId
 
-            icon.color: model.iconColor || ""
-            image.source: model.identicon || ""
+            icon.color: model.color || ""
+            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
+            image.source: profileImage || model.identityImage || model.identicon || ""
 
-            onClicked: statusChatList.chatItemSelected(model.chatId)
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId)
+            onClicked: {
+                if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
+                    highlighted = true
+
+                    let originalOpenHandler = popupMenuSlot.item.openHandler
+                    let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+                    popupMenuSlot.item.openHandler = function () {
+                        if (!!originalOpenHandler) {
+                            originalOpenHandler((model.chatId || model.id))
+                        }
+                    }
+
+                    popupMenuSlot.item.closeHandler = function () {
+                        highlighted = false
+                        if (!!originalCloseHandler) {
+                            originalCloseHandler()
+                        }
+                    }
+
+                    popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
+                    popupMenuSlot.item.openHandler = originalOpenHandler
+                    return
+                }
+                statusChatList.chatItemSelected(model.chatId || model.id)
+            }
+            onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+            visible: {
+                if (!!statusChatList.filterFn) {
+                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                }
+                return true
+            }
         }
     }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatList.popupMenu
+    }
 }

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -0,0 +1,90 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatListAndCategories
+
+    implicitHeight: chatListsAndCategories.height
+    implicitWidth: chatListsAndCategories.width
+
+    property string selectedChatId: ""
+    property bool showCategoryActionButtons: false
+    property alias chatList: statusChatList.chatListItems
+    property alias categoryList: statusChatListCategories
+    property alias sensor: sensor
+
+    property Component categoryPopupMenu
+    property Component chatListPopupMenu
+    property Component popupMenu
+
+    signal chatItemSelected(string id)
+    signal chatItemUnmuted(string id)
+    signal categoryAddButtonClicked(string id)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    MouseArea {
+        id: sensor
+        anchors.top: parent.top
+        width: statusChatListAndCategories.width
+        height: statusChatListAndCategories.height
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: {
+            if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
+                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
+                return
+            }
+        }
+
+        Column {
+            id: chatListsAndCategories
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 4
+
+            StatusChatList {
+                id: statusChatList
+                anchors.horizontalCenter: parent.horizontalCenter
+                visible: !!chatListItems.model && chatListItems.model.count > 0
+                selectedChatId: statusChatListAndCategories.selectedChatId
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                filterFn: function (model) {
+                    return !!!model.categoryId
+                }
+            }
+
+            Repeater {
+                id: statusChatListCategories
+                visible: !!model && model.count > 0
+
+                delegate: StatusChatListCategory {
+                    categoryId: model.categoryId
+                    name: model.name
+                    showActionButtons: statusChatListAndCategories.showCategoryActionButtons
+                    addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
+
+                    chatList.chatListItems.model: statusChatListAndCategories.chatList.model
+                    chatList.selectedChatId: statusChatListAndCategories.selectedChatId
+                    chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+
+                    popupMenu: statusChatListAndCategories.categoryPopupMenu
+                    chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListAndCategories.popupMenu
+    }
+}

src/StatusQ/Components/StatusChatListCategory.qml

@@ -12,11 +12,13 @@ Column {
     property string name: ""
     property bool opened: true
 
+    property alias showActionButtons: statusChatListCategoryItem.showActionButtons
     property alias addButton: statusChatListCategoryItem.addButton
     property alias menuButton: statusChatListCategoryItem.menuButton
     property alias toggleButton: statusChatListCategoryItem.toggleButton
     property alias chatList: statusChatList
 
+    property Component chatListPopupMenu
     property Component popupMenu
 
     onPopupMenuChanged: {
@@ -30,6 +32,8 @@ Column {
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
 
+        showMenuButton: !!statusChatListCategory.popupMenu
+
         onClicked: {
             if (mouse.button === Qt.RightButton) {
                 highlighted = true
@@ -50,18 +54,35 @@ Column {
 
     StatusChatList {
         id: statusChatList
-
         anchors.horizontalCenter: parent.horizontalCenter
         visible: statusChatListCategory.opened
+        categoryId: statusChatListCategory.categoryId
+        filterFn: function (model) {
+            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+        }
+
+        popupMenu: statusChatListCategory.chatListPopupMenu
     }
 
     Loader {
         id: popupMenuSlot
         active: !!statusChatListCategory.popupMenu
         onLoaded: {
+            let originalOpenHandler = popupMenuSlot.item.openHandler
+            let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+            popupMenuSlot.item.openHandler = function () {
+                if (!!originalOpenHandler) {
+                    originalOpenHandler(statusChatListCategory.categoryId)
+                }
+            }
+
             popupMenuSlot.item.closeHandler = function () {
                 statusChatListCategoryItem.highlighted = false
                 statusChatListCategoryItem.menuButton.highlighted = false
+                if (!!originalCloseHandler) {
+                    originalCloseHandler()
+                }
             }
         }
     }

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -16,6 +16,9 @@ StatusListItem {
 
     property bool opened: true
     property bool highlighted: false
+    property bool showActionButtons: false
+    property bool showMenuButton: showActionButtons
+    property bool showAddButton: showActionButtons
     property alias addButton: addButton
     property alias menuButton: menuButton
     property alias toggleButton: toggleButton
@@ -39,7 +42,9 @@ StatusListItem {
             id: addButton
             icon.name: "add"
             icon.width: 20
-            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
+            visible: statusChatListCategoryItem.showAddButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
             tooltip.text: "Add channel inside category"
         },
@@ -47,7 +52,9 @@ StatusListItem {
             id: menuButton
             icon.name: "more"
             icon.width: 21
-            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
+            visible: statusChatListCategoryItem.showMenuButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
             tooltip.text: "More"
         },

src/StatusQ/Components/StatusChatListItem.qml

@@ -18,19 +18,23 @@ Rectangle {
         color: Theme.palette.miscColor5
     }
     property int type: StatusChatListItem.Type.PublicChat
+    property bool highlighted: false
     property bool selected: false
 
     signal clicked(var mouse)
     signal unmute()
 
     enum Type {
-        PublicChat,
-        GroupChat,
-        CommunityChat,
-        OneToOneChat
+        Unknown0, // 0
+        OneToOneChat, // 1
+        PublicChat, // 2
+        GroupChat, // 3
+        Unknown1, // 4
+        Unknown2, // 5
+        CommunityChat // 6
     }
 
-    implicitWidth: 287
+    implicitWidth: 288
     implicitHeight: 40
 
     radius: 8
@@ -39,7 +43,7 @@ Rectangle {
         if (selected) {
             return Theme.palette.statusChatListItem.selectedBackgroundColor
         }
-        return sensor.containsMouse ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
     MouseArea {
@@ -47,6 +51,7 @@ Rectangle {
 
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor 
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
         onClicked: statusChatListItem.clicked(mouse)
@@ -83,6 +88,11 @@ Rectangle {
                     height: parent.height
                     image.source: statusChatListItem.image.source
                     showLoadingIndicator: true
+                    color: statusChatListItem.image.isIdenticon ?
+                        Theme.palette.statusRoundedImage.backgroundColor :
+                        "transparent"
+                    border.width: statusChatListItem.image.isIdenticon ? 1 : 0
+                    border.color: Theme.palette.directColor7
                 }
 
                 Loader {
@@ -101,12 +111,13 @@ Rectangle {
             width: 14
             visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
-                if (statusChatListItem.muted && !sensor.containsMouse) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return 0.4
                 }
                 return statusChatListItem.hasMention || 
                   statusChatListItem.hasUnreadMessages || 
                   statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
                   statusBadge.visible ||
                   sensor.containsMouse ? 1.0 : 0.7
             }
@@ -134,14 +145,18 @@ Rectangle {
             anchors.leftMargin: statusIcon.visible ? 1 : 8
             anchors.verticalCenter: parent.verticalCenter
 
-            text: statusChatListItem.name
+            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                !statusChatListItem.name.startsWith("#") ?
+                "#" + statusChatListItem.name :
+                statusChatListItem.name
             color: {
-                if (statusChatListItem.muted && !sensor.containsMouse) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
                 return statusChatListItem.hasMention || 
                   statusChatListItem.hasUnreadMessages ||
                   statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
                   sensor.containsMouse ||
                   statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }

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/StatusListItem.qml

@@ -10,7 +10,20 @@ Rectangle {
     implicitWidth: 448
     implicitHeight: 64
 
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+    color: {
+        if (sensor.containsMouse) {
+            return type === StatusListItem.Type.Primary ?
+                Theme.palette.baseColor2 :
+                Theme.palette.statusListItem.secondaryHoverBackgroundColor
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
+
     radius: 8
 
     property string title: ""
@@ -20,17 +33,26 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         height: 20
         width: 20
+        rotation: 0
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
-            color: Theme.palette.primaryColor3
+            color: sensor.containsMouse && type === StatusListItem.Type.Secondary ?
+                      "transparent" :
+                      Theme.palette.primaryColor3
         }
     }
-    property StatusImageSettings image: StatusImageSettings {}
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
     property string label: ""
 
+    property int type: StatusListItem.Type.Primary
+
     property alias sensor: sensor
     property alias statusListItemTitle: statusListItemTitle
+    property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
 
     property list<Item> components
@@ -47,7 +69,7 @@ Rectangle {
         id: sensor
 
         anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
@@ -66,6 +88,7 @@ Rectangle {
                 icon.width: statusListItem.icon.width
                 icon.height: statusListItem.icon.height
                 icon.name: statusListItem.icon.name
+                icon.rotation: statusListItem.icon.rotation
                 color: statusListItem.icon.background.color
                 width: statusListItem.icon.background.width
                 height: statusListItem.icon.background.height
@@ -76,6 +99,8 @@ Rectangle {
             id: statusRoundedImage
             StatusRoundedImage {
                 image.source: statusListItem.image.source
+                image.height: statusListItem.image.height
+                image.width: statusListItem.image.width
             }
         }
 
@@ -89,7 +114,12 @@ Rectangle {
                 id: statusListItemTitle
                 text: statusListItem.title
                 font.pixelSize: 15
-                color: Theme.palette.directColor1
+                color: {
+                  if (statusListItem.type === StatusListItem.Type.Primary) {
+                      return Theme.palette.directColor1
+                  }
+                  return Theme.palette.primaryColor1
+                }
             }
 
             StatusBaseText {

src/StatusQ/Components/StatusListSectionHeadline.qml

@@ -4,15 +4,18 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Item {
-    height: 34
-    width: 176
+    implicitHeight: 34
+    implicitWidth: 176
+
     property alias text: label.text
 
     StatusBaseText {
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 4
+        anchors.leftMargin: 16
         id: label
         font.pixelSize: 15
         color: Theme.palette.baseColor1
     }
 }
-

src/StatusQ/Components/StatusNavigationPanelHeadline.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+import StatusQ.Core.Theme 0.1
+
+import StatusQ.Core 0.1
+
+StatusBaseText {
+    font.pixelSize: 17
+    font.weight: Font.Bold
+    color: Theme.palette.directColor1
+}
+

src/StatusQ/Components/StatusRoundIcon.qml

@@ -8,6 +8,7 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         width: 24
         height: 24
+        rotation: 0
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
@@ -30,5 +31,6 @@ Rectangle {
 
         color: Theme.palette.primaryColor1
         icon: statusRoundedIcon.icon.name
+        rotation: statusRoundedIcon.icon.rotation
     }
 }

src/StatusQ/Components/StatusRoundedImage.qml

@@ -26,9 +26,12 @@ Rectangle {
 
     Image {
         id: image
-        sourceSize.width: parent.implicitWidth
-        sourceSize.height: parent.implicitHeight
+        width: statusRoundImage.width
+        height: statusRoundImage.height
+        sourceSize.width: parent.width * 2
+        sourceSize.height: parent.height * 2
         fillMode: Image.PreserveAspectFit
+        anchors.centerIn: parent
         cache: true
     }
 

src/StatusQ/Components/qmldir

@@ -1,16 +1,21 @@
 module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
+StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
 StatusChatList 0.1 StatusChatList.qml
 StatusChatListItem 0.1 StatusChatListItem.qml
 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
+StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
+StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml

src/StatusQ/Controls/StatusBaseInput.qml

@@ -0,0 +1,146 @@
+import QtQuick 2.14
+
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+
+Item {
+    id: statusBaseInput
+
+    property bool multiline: false
+
+    property bool clearable: false
+
+    property alias inputMethodHints: edit.inputMethodHints
+
+    property alias selectedText: edit.selectedText
+    property alias selectedTextColor: edit.selectedTextColor
+    property alias selectionStart: edit.selectionStart
+    property alias selectionEnd: edit.selectionEnd
+
+    property alias color: edit.color
+    property alias font: edit.font
+    property alias verticalAlignmet: edit.verticalAlignment
+    property alias horizontalAlignment: edit.horizontalAlignment
+
+    property alias placeholderText: placeholder.text
+    property alias placeholderTextColor: placeholder.color
+    property alias placeholderFont: placeholder.font
+
+    property real leftPadding: 16
+    property real rightPadding: 16
+    property real topPadding: 11
+    property real bottomPadding: 11
+
+    property real minimumHeight: 0
+    property real maximumHeight: 0
+
+    implicitWidth: 200
+    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 40) : 40
+
+    Rectangle {
+        width: parent.width
+        height: maximumHeight != 0 ? Math.min(
+                                        minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
+                                                          : implicitHeight,
+                                         maximumHeight)
+                                  : parent.height
+        color: Theme.palette.baseColor2
+        radius: 8
+
+        clip: true
+
+        Flickable {
+            id: flick
+
+            anchors.fill: parent
+            anchors.leftMargin: statusBaseInput.leftPadding
+            anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
+            anchors.topMargin: statusBaseInput.topPadding
+            anchors.bottomMargin: statusBaseInput.bottomPadding
+            contentWidth: edit.paintedWidth
+            contentHeight: edit.paintedHeight
+            clip: true
+
+            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline }
+
+
+            function ensureVisible(r) {
+                if (contentX >= r.x)
+                    contentX = r.x;
+                else if (contentX+width <= r.x+r.width)
+                    contentX = r.x+r.width-width;
+                if (contentY >= r.y)
+                    contentY = r.y;
+                else if (contentY+height <= r.y+r.height)
+                    contentY = r.y+r.height-height;
+            }
+
+
+
+            TextEdit {
+                id: edit
+                width: flick.width
+                selectByMouse: true
+                anchors.verticalCenter: parent.verticalCenter
+                focus: true
+
+                font.pixelSize: 15
+                font.family: Theme.palette.baseFont.name
+                color: Theme.palette.directColor1
+
+                onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+                wrapMode: TextEdit.NoWrap
+
+                Keys.onReturnPressed: {
+                    if (multiline) {
+                        event.accepted = false
+                    } else {
+                        event.accepted = true
+                    }
+                }
+
+                Keys.onEnterPressed: {
+                    if (multiline) {
+                        event.accepted = false
+                    } else {
+                        event.accepted = true
+                    }
+                }
+
+                StatusBaseText {
+                    id: placeholder
+                    visible: edit.text.length === 0
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    font.pixelSize: 15
+
+                    elide: StatusBaseText.ElideRight
+                    font.family: Theme.palette.baseFont.name
+                    color: Theme.palette.baseColor1
+                }
+            }
+        } // Flickable
+    } // Rectangle
+
+    StatusFlatRoundButton {
+        id: clearButtton
+        visible: edit.text.length != 0 && statusBaseInput.clearable && !statusBaseInput.multiline
+        anchors.right: parent.right
+        anchors.rightMargin: 11
+        anchors.verticalCenter: parent.verticalCenter
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 14
+        height: 14
+        icon.name: "clear"
+        icon.width: 14
+        icon.height: 14
+        onClicked: {
+            edit.clear()
+        }
+    }
+
+}

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -28,14 +28,17 @@ Rectangle {
     signal unmute()
 
     enum Type {
-        PublicChat,
-        GroupChat,
-        CommunityChat,
-        OneToOneChat
+        Unknown0, // 0
+        OneToOneChat, // 1
+        PublicChat, // 2
+        GroupChat, // 3
+        Unknown1, // 4
+        Unknown2, // 5
+        CommunityChat // 6
     }
 
     radius: 8
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
     MouseArea {
         id: sensor

src/StatusQ/Controls/StatusRoundButton.qml

@@ -10,6 +10,7 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         width: 23
         height: 23
+        rotation: 0
 
         color: {
             switch(statusRoundButton.type) {
@@ -34,6 +35,8 @@ Rectangle {
 
     property alias hovered: sensor.containsMouse
 
+    property bool highlighted: false
+
     property int type: StatusRoundButton.Type.Primary
 
     signal pressed(var mouse)
@@ -87,7 +90,7 @@ Rectangle {
 
     color: {
         if (statusRoundButton.enabled) {
-            return sensor.containsMouse ? backgroundSettings.hoverColor
+            return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
                                         : backgroundSettings.color
         } else {
             return backgroundSettings.disabledColor
@@ -109,6 +112,7 @@ Rectangle {
             visible: !loading
 
             icon: statusRoundButton.icon.name
+            rotation: statusRoundButton.icon.rotation
 
             width: statusRoundButton.icon.width
             height: statusRoundButton.icon.height

src/StatusQ/Controls/qmldir

@@ -14,3 +14,4 @@ StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
+StatusBaseInput 0.1 StatusBaseInput.qml

src/StatusQ/Core/StatusIcon.qml

@@ -12,19 +12,20 @@ Image {
     sourceSize.height: height
     fillMode: Image.PreserveAspectFit
 
+    antialiasing: true
+    mipmap: true
+
     onIconChanged: {
         if (icon !== "") {
             source = "../../assets/img/icons/" + icon + ".svg";
         }
     }
 
-    ColorOverlay {
-        visible: !Qt.colorEqual(statusIcon.color, "transparent")
-        anchors.fill: statusIcon
-        source: statusIcon
+    layer.mipmap: true
+    layer.smooth: true
+    layer.format: ShaderEffectSource.RGBA
+    layer.enabled:!Qt.colorEqual(statusIcon.color, "transparent")
+    layer.effect: ColorOverlay {
         color: statusIcon.color
-        antialiasing: true
-        smooth: true
     }
 }
-

src/StatusQ/Core/StatusImageSettings.qml

@@ -6,5 +6,6 @@ QtObject {
     property url source
     property real width
     property real height
+    property bool isIdenticon: false
 }
 

src/StatusQ/Core/StatusModalHeaderSettings.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.14
+
+QtObject {
+    property string title
+    property string subTitle
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+}

src/StatusQ/Core/Theme/StatusColors.qml

@@ -13,6 +13,7 @@ QtObject {
         'blue3': '#88B0FF',
         'blue4': '#869EFF',
         'blue5': '#AAC6FF',
+        'blue6': '#ECEFFC',
 
         'brown': '#8B3131',
         'brown2': '#9B832F',

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -132,6 +132,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: baseColor3
+        property color secondaryHoverBackgroundColor: primaryColor3
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -163,5 +164,13 @@ ThemePalette {
         property color hoverBackgroundColor: directColor7
         property color separatorColor: directColor7
     }
+
+    property QtObject statusModal: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor: baseColor3
+    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -130,6 +130,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: white
+        property color secondaryHoverBackgroundColor: getColor('blue6')
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -161,5 +162,13 @@ ThemePalette {
         property color hoverBackgroundColor: baseColor2
         property color separatorColor: baseColor2
     }
+
+    property QtObject statusModal: QtObject {
+        property color backgroundColor: white
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor: white
+    }
 }
 

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -28,6 +28,7 @@ QtObject {
     property color white: getColor('white')
 
     property color dropShadow: getColor('black', 0.12)
+    property color backdropColor: getColor('black', 0.4)
 
     property color baseColor1
     property color baseColor2
@@ -91,6 +92,7 @@ QtObject {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor
+        property color secondaryHoverBackgroundColor
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -124,6 +126,14 @@ QtObject {
         property color separatorColor
     }
 
+    property QtObject statusModal: QtObject {
+        property color backgroundColor
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

src/StatusQ/Core/qmldir

@@ -5,4 +5,5 @@ StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
 StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
+StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 

src/StatusQ/Popups/StatusModal.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+
+import "statusModal" as Spares
+
+QC.Popup {
+    id: statusModal
+
+    property Component content
+
+    property alias headerActionButton: headerImpl.actionButton
+
+    property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
+    property alias rightButtons: footerImpl.rightButtons
+    property alias leftButtons: footerImpl.leftButtons
+
+    signal editButtonClicked()
+
+    parent: QC.Overlay.overlay
+
+    width: 480
+    height: contentItem.implicitHeight
+
+    margins: 0
+    padding: 0
+
+    modal: true
+
+    QC.Overlay.modal: Rectangle {
+        color: Theme.palette.backdropColor
+    }
+
+
+    background: Rectangle {
+        color: Theme.palette.statusModal.backgroundColor
+        radius: 8
+    }
+
+    contentItem: Column {
+        width: parent.width
+        Spares.StatusModalHeader {
+            id: headerImpl
+            width: 480
+
+            title: header.title
+            subTitle: header.subTitle
+            image: header.image
+
+            onEditButtonClicked: statusModal.editButtonClicked()
+            onClose: statusModal.close()
+        }
+
+        Loader {
+            active: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            sourceComponent: statusModal.content
+        }
+
+        Spares.StatusModalFooter {
+            id: footerImpl
+            width: 480
+        }
+    }
+}

src/StatusQ/Popups/StatusModalDivider.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+
+Column {
+    spacing: 0
+
+    property real topPadding: 0
+    property real bottomPadding: 0
+
+    width: 480
+
+    Item {
+        id: topPaddingItem
+        height: parent.topPadding
+        width: parent.width
+    }
+
+    Rectangle {
+        id: divider
+        color: Theme.palette.baseColor2
+        height: 1
+        width: parent.width
+    }
+
+    Item {
+        id: bottomPaddingItem
+        height: parent.bottomPadding
+        width: parent.width
+    }
+}

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -16,8 +16,15 @@ Menu {
 
     property int menuItemCount: 0
     property var subMenuItemIcons: []
+    property var openHandler
     property var closeHandler
 
+    onOpened: {
+        if (typeof openHandler === "function") {
+            openHandler()
+        }
+    }
+
     onClosed: {
         if (typeof closeHandler === "function") {
             closeHandler()

src/StatusQ/Popups/qmldir

@@ -3,3 +3,5 @@ module StatusQ.Popups
 StatusMenuSeparator 0.1 StatusMenuSeparator.qml
 StatusPopupMenu 0.1 StatusPopupMenu.qml
 StatusMenuItem 0.1 StatusMenuItem.qml
+StatusModal 0.1 StatusModal.qml
+StatusModalDivider 0.1 StatusModalDivider.qml

src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Row {
+    id: statusImageWithTitle
+
+    property alias title: headerTitle.text
+    property alias subTitle: headerSubTitle.text
+    property bool editable: false
+
+    signal editButtonClicked
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+
+    spacing: 8
+
+    StatusRoundedImage {
+        id: headerImage
+        anchors.verticalCenter: parent.verticalCenter
+        width: statusImageWithTitle.image.width
+        height: statusImageWithTitle.image.height
+        image.source:  statusImageWithTitle.image.source
+        showLoadingIndicator: true
+        visible: !!statusImageWithTitle.image.source.toString()
+    }
+
+    Column {
+        id: textLayout
+
+        Row {
+            spacing: 4
+            StatusBaseText {
+                id: headerTitle
+                font.family: Theme.palette.baseFont.name
+                font.pixelSize: 17
+                font.bold: true
+                color: Theme.palette.directColor1
+            }
+            StatusFlatRoundButton {
+                id: editButton
+                visible: statusImageWithTitle.editable
+                anchors.bottom: headerTitle.bottom
+                anchors.bottomMargin: -1
+                height: 24
+                width: 24
+                type: StatusFlatRoundButton.Type.Secondary
+                icon.name: "pencil"
+                icon.color: Theme.palette.directColor1
+                icon.width: 12.5
+                icon.height: 12.5
+
+                onClicked: statusImageWithTitle.editButtonClicked()
+            }
+        }
+
+        StatusBaseText {
+            id: headerSubTitle
+            font.family: Theme.palette.baseFont.name
+            font.pixelSize: 15
+            color:Theme.palette.baseColor1
+        }
+    }
+}

src/StatusQ/Popups/statusModal/StatusModalFooter.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+
+Rectangle {
+    id: statusModalFooter
+
+    property list<Item> leftButtons
+    property list<StatusBaseButton> rightButtons
+
+    radius: 8
+
+    color: Theme.palette.statusModal.backgroundColor
+
+    onLeftButtonsChanged: {
+        for (let idx in leftButtons) {
+            leftButtons[idx].parent = leftButtonsLayout
+        }
+    }
+
+    onRightButtonsChanged: {
+        for (let idx in rightButtons) {
+            rightButtons[idx].parent = rightButtonsLayout
+        }
+    }
+
+    implicitHeight: rootLayout.implicitHeight + 30
+
+    RowLayout {
+        id: rootLayout
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: 16
+        anchors.rightMargin: 18
+
+        Row {
+            id: leftButtonsLayout
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+
+            spacing: 16
+        }
+
+        Item {
+            Layout.fillWidth: true
+            implicitHeight: 1
+        }
+
+        Row {
+            id: rightButtonsLayout
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+
+            spacing: 16
+
+        }
+    }
+
+    Rectangle {
+        anchors.top: parent.top
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+    }
+}

src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -0,0 +1,70 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusModalHeader
+
+    property alias title: imageWithTitle.title
+    property alias subTitle: imageWithTitle.subTitle
+    property alias actionButton: actionButtonLoader.sourceComponent
+
+    property alias image: imageWithTitle.image
+    property bool editable: false
+
+    signal editButtonClicked
+    signal close
+
+    implicitHeight: Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32
+    implicitWidth: 480
+
+    radius: 16
+
+    color: Theme.palette.statusModal.backgroundColor
+
+
+    StatusImageWithTitle {
+        id: imageWithTitle
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        editable: statusModalHeader.editable
+        onEditButtonClicked: statusModalHeader.editButtonClicked()
+    }
+
+    Loader {
+        id: actionButtonLoader
+        anchors.right: closeButton.left
+        anchors.rightMargin: 8
+        anchors.top: parent.top
+        anchors.topMargin: 16
+    }
+
+    StatusFlatRoundButton {
+        id: closeButton
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        anchors.top: parent.top
+        anchors.topMargin: 16
+        width: 32
+        height: 32
+        type: StatusFlatRoundButton.Type.Secondary
+        icon.name: "close"
+        icon.color: Theme.palette.directColor1
+        icon.width: 20
+        icon.height: 20
+
+        onClicked: statusModalHeader.close()
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+    }
+}

src/assets/img/icons/pencil.svg

@@ -0,0 +1,4 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.100954 12.5959L0.798362 9.80623C0.830588 9.67733 0.871226 9.55116 0.919852 9.42847C0.981714 9.27239 1.18145 9.24231 1.30017 9.36102L3.63897 11.6998C3.75769 11.8185 3.7276 12.0183 3.57152 12.0801C3.44883 12.1288 3.32266 12.1694 3.19376 12.2016L0.404123 12.899C0.221028 12.9448 0.0551798 12.779 0.100954 12.5959Z" fill="black"/>
+<path d="M4.32312 10.2627C4.71364 10.6532 5.34681 10.6532 5.73733 10.2627L12.2928 3.7072C12.6833 3.31668 12.6833 2.68351 12.2928 2.29299L10.707 0.7072C10.3165 0.316676 9.68332 0.316675 9.29279 0.707199L2.73733 7.26266C2.34681 7.65318 2.34681 8.28635 2.73733 8.67687L4.32312 10.2627Z" fill="black"/>
+</svg>

statusq.qrc

@@ -16,13 +16,19 @@
         <file>src/StatusQ/Popups/StatusPopupMenu.qml</file>
         <file>src/StatusQ/Popups/StatusMenuSeparator.qml</file>
         <file>src/StatusQ/Popups/StatusMenuItem.qml</file>
+        <file>src/StatusQ/Popups/StatusModalDivider.qml</file>
         <file>src/StatusQ/Components/qmldir</file>
         <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>
         <file>src/StatusQ/Components/StatusRoundedImage.qml</file>
         <file>src/StatusQ/Components/StatusRoundIcon.qml</file>
         <file>src/StatusQ/Components/StatusListItem.qml</file>
+        <file>src/StatusQ/Components/StatusListSectionHeadline.qml</file>
         <file>src/StatusQ/Components/StatusDescriptionListItem.qml</file>
         <file>src/StatusQ/Components/StatusBadge.qml</file>
         <file>src/StatusQ/Components/StatusLetterIdenticon.qml</file>
@@ -233,5 +239,10 @@
         <file>src/assets/img/icons/add-contact.svg</file>
         <file>src/assets/img/icons/add-circle.svg</file>
         <file>src/assets/img/icons/activity.svg</file>
+        <file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file>
+        <file>src/StatusQ/Components/StatusChatListCategory.qml</file>
+        <file>src/StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
+        <file>src/StatusQ/Components/StatusChatList.qml</file>
+        <file>src/StatusQ/Controls/StatusBaseInput.qml</file>
     </qresource>
 </RCC>