fix: Icon components had wrong color in sandbox app

Icon color in Icons page was broken as setting it
in main.qml was mistakenly removed. Set it back to
Theme.palette.primaryColor1

Closes #538

CHANGELOG.md

@@ -1,5 +1,75 @@
 <a name=""></a>
-##  (2021-11-19)
+##  Version 0.22.0 (2022-01-31)
+
+
+#### Features
+
+* **StatusMemberListItem:**  Implement `StatusMemberListItem` (#539) ([c5a605bf](c5a605bf), closes [#515](515))
+
+
+
+<a name=""></a>
+##  Version 0.21.0 (2022-01-24)
+
+
+#### Bug Fixes
+
+* **build:**  broken MacOS build (#533) ([55901cf0](55901cf0))
+
+#### Features
+
+* **StatusMessage:**  Introducing a new StatusQ Component for Chat Messages ([ea955694](ea955694))
+* **StatusQ.Controls:**  Introduce `StatusPasswordStrengthIndicator` ([626695da](626695da), closes [#528](528))
+
+
+
+<a name=""></a>
+##  Version 0.20.0 (2022-01-17)
+
+
+#### Features
+
+* **StatusBanner:**  introduce type variants for different banner styles ([35d12f44](35d12f44))
+
+#### Bug Fixes
+
+* **StatusBaseInput:**  Corrects allignment of the placeholder text in the StatusBaseInput. ([5a416aa1](5a416aa1))
+* **build:**  Windows build ([14ab4ce5](14ab4ce5))
+
+
+
+<a name=""></a>
+##  Version 0.19.0 (2021-12-03)
+
+
+#### Bug Fixes
+
+* **StatusChatListItem:**  This change fixes the issue of the chat list items getting a highlight even when they are not really hovered ([ab6bdf54](ab6bdf54))
+
+#### Features
+
+* **StatusModal:**  introduce `hasCloseButton` property ([2336b6aa](2336b6aa))
+
+
+
+<a name=""></a>
+##  Version 0.18.0 (2021-11-30)
+
+
+#### Bug Fixes
+
+* **StatusAppNavBar:**  Fixed position of profile button on the NavBar ([419b7384](419b7384))
+* **StatusImageWithTitle:**  Fix position of the edit title button ([8d2121ad](8d2121ad))
+* **StatusListItem:**  ensure title is elided ([b7883e82](b7883e82))
+
+#### Features
+
+* **StatusListItem:**  Expose the Aside text so that it can be modified from the outside ([f82ce8b7](f82ce8b7))
+
+
+
+<a name=""></a>
+##  Version 0.17.1 (2021-11-19)
 
 
 #### Bug Fixes

sandbox/DemoApp.qml

@@ -1,14 +1,13 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
 
-import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Platform 0.1
 
+import "demoapp"
+
 Rectangle {
     id: demoApp
     height: 602
@@ -18,32 +17,6 @@ Rectangle {
 
     property string titleStyle: "osx"
 
-    QtObject {
-        id: appSectionType
-        readonly property int chat: 0
-        readonly property int community: 1
-        readonly property int wallet: 2
-        readonly property int browser: 3
-        readonly property int timeline: 4
-        readonly property int nodeManagement: 5
-        readonly property int profileSettings: 6
-        readonly property int apiDocumentation: 100
-        readonly property int demoApp: 101
-    }
-
-    function setActiveItem(sectionId) {
-        for (var i = 0; i < models.demoAppSectionsModel.count; i++) {
-            let item = models.demoAppSectionsModel.get(i)
-            if (item.sectionId !== sectionId)
-            {
-                models.demoAppSectionsModel.setProperty(i, "active", false)
-                continue
-            }
-
-            models.demoAppSectionsModel.setProperty(i, "active", true);
-        }
-    }
-
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
@@ -74,74 +47,32 @@ Rectangle {
 
             id: navBar
 
-            communityTypeRole: "sectionType"
-            communityTypeValue: appSectionType.community
-            sectionModel: models.demoAppSectionsModel
-
-            property bool communityAdded: false
-
-            onAboutToUpdateFilteredRegularModel: {
-                communityAdded = false
-            }
-
-            filterRegularItem: function(item) {
-                if(item.sectionType === appSectionType.community)
-                    if(communityAdded)
-                        return false
-                    else
-                        communityAdded = true
-
-                return true
-            }
-
-            filterCommunityItem: function(item) {
-                return item.sectionType === appSectionType.community
-            }
-
-            regularNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                tooltip.text: "Chat"
+                checked: appView.sourceComponent == statusAppChatView
                 onClicked: {
-                    if(model.sectionType === appSectionType.chat)
-                    {
-                        appView.sourceComponent = statusAppChatView
-                        demoApp.setActiveItem(model.sectionId)
-                    }
-                    else if(model.sectionType === appSectionType.profileSettings)
-                    {
-                        appView.sourceComponent = statusAppProfileSettingsView
-                        demoApp.setActiveItem(model.sectionId)
-                    }
+                    appView.sourceComponent = statusAppChatView
                 }
             }
 
-            communityNavBarButton: StatusNavBarTabButton {
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Status Community"
+                    tooltipText: "Status Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                id: communityBtn
                 anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                name: model.name
+                tooltip.text: model.tooltipText
+                icon.color: Theme.palette.miscColor6
+                icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                checked: appView.sourceComponent == statusAppCommunityView
                 onClicked: {
-                    if(model.sectionType === appSectionType.community)
-                    {
-                        appView.sourceComponent = statusAppCommunityView
-                        demoApp.setActiveItem(model.sectionId)
-                    }
+                    appView.sourceComponent = statusAppCommunityView
                 }
 
                 popupMenu: StatusPopupMenu {
@@ -172,7 +103,40 @@ Rectangle {
                         type: StatusMenuItem.Type.Danger
                     }
                 }
+
             }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "bigger/browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "bigger/status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    id: profileNavButton
+                    icon.name: "bigger/settings"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+
+                    checked: appView.sourceComponent == statusAppProfileSettingsView
+                    onClicked: {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                    }
+                }
+            ]
+
         }
 
         appView: Loader {
@@ -184,730 +148,31 @@ Rectangle {
 
     Component {
         id: statusAppChatView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                anchors.fill: parent
-
-                StatusNavigationPanelHeadline {
-                    id: headline
-                    anchors.top: parent.top
-                    anchors.topMargin: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    text: "Chat"
-                }
-
-                Item {
-                    id: searchInputWrapper
-                    anchors.top: headline.bottom
-                    anchors.topMargin: 16
-                    width: parent.width
-                    height: searchInput.height
-
-                    StatusBaseInput {
-                        id: searchInput
-
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.left
-                        anchors.right: actionButton.left
-                        anchors.leftMargin: 16
-                        anchors.rightMargin: 16
-
-                        height: 36
-                        topPadding: 8
-                        bottomPadding: 0
-                        placeholderText: "Search"
-                        icon.name: "search"
-                    }
-
-                    StatusRoundButton {
-                        id: actionButton
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.right: parent.right
-                        anchors.rightMargin: 8
-                        width: 32
-                        height: 32
-
-                        type: StatusRoundButton.Type.Secondary
-                        icon.name: "add"
-                        state: "default"
-
-                        onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
-                        states: [
-                            State {
-                                name: "default"
-                                PropertyChanges {
-                                    target: actionButton
-                                    icon.rotation: 0
-                                    highlighted: false
-                                }
-                            },
-                            State {
-                                name: "pressed"
-                                PropertyChanges {
-                                    target: actionButton
-                                    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
-                                }
-                            }
-                        ]
-
-                        StatusPopupMenu {
-                            id: chatContextMenu
-
-                            onOpened: {
-                                actionButton.state = "pressed"
-                            }
-
-                            onClosed: {
-                                actionButton.state = "default"
-                            }
-
-                            StatusMenuItem {
-                                text: "Start new chat"
-                                icon.name: "private-chat"
-                            }
-
-                            StatusMenuItem {
-                                text: "Start group chat"
-                                icon.name: "group-chat"
-                            }
-
-                            StatusMenuItem {
-                                text: "Join public chat"
-                                icon.name: "public-chat"
-                            }
-
-                            StatusMenuItem {
-                                text: "Communities"
-                                icon.name: "communities"
-                            }
-                        }
-                    }
-                }
-
-                Column {
-                    anchors.top: searchInputWrapper.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
-
-                        model: models.demoChatListItems
-                        onChatItemUnmuted: {
-                            for (var i = 0; i < models.demoChatListItems.count; i++) {
-                                let item = models.demoChatListItems.get(i);
-                                if (item.chatId === id) {
-                                    models.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
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-
-                StatusChatToolBar {
-                    anchors.top: parent.top
-                    width: parent.width
-
-                    chatInfoButton.title: "Amazing Funny Squirrel"
-                    chatInfoButton.subTitle: "Contact"
-                    chatInfoButton.icon.color: Theme.palette.miscColor7
-                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-                    chatInfoButton.pinnedMessagesCount: 1
-
-                    searchButton.visible: false
-                    membersButton.visible: false
-                    notificationCount: 1
-
-                    onNotificationButtonClicked: notificationCount = 0
-
-                    popupMenu: StatusPopupMenu {
-                        id: contextMenu
-
-                        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: "Leave Chat"
-                            icon.name: "arrow-right"
-                            icon.width: 14
-                            iconRotation: 180
-                            type: StatusMenuItem.Type.Danger
-                        }
-                    }
-                }
-            }
-        }
+        StatusAppChatView { }
     }
 
     Component {
         id: statusAppCommunityView
-
-        StatusAppThreePanelLayout {
-            id: root
-
-            handle: Rectangle {
-                implicitWidth: 5
-                color: SplitHandle.pressed ? Theme.palette.baseColor2
-                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
-            }
-            leftPanel: Item {
-                id: leftPanel
-
-                StatusChatInfoToolBar {
-                    id: statusChatInfoToolBar
-
-                    anchors.top: parent.top
-                    anchors.horizontalCenter: parent.horizontalCenter
-
-                    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()
-
-                    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"
-                        }
-
-                    }
-                }
-
-                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
-                        width: leftPanel.width
-                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
-
-                        draggableItems: true
-                        draggableCategories: false
-                        model: models.demoCommunityChatListItems
-                        showCategoryActionButtons: true
-
-                        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"
-                            }
-                        }
-                    }
-                }
-            }
-
-            centerPanel: Item {
-                StatusChatToolBar {
-                    id: statusChatToolBar
-                    anchors.top: parent.top
-                    width: parent.width
-
-                    chatInfoButton.title: "general"
-                    chatInfoButton.subTitle: "Community Chat"
-                    chatInfoButton.icon.color: Theme.palette.miscColor6
-                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-                    onSearchButtonClicked: {
-                        searchButton.highlighted = !searchButton.highlighted;
-                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
-                                                       "",
-                                                       demoCommunityDetailModal.header.image.source);
-                        searchPopup.open();
-                    }
-                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
-                    onMembersButtonClicked: {
-                        root.showRightPanel = !root.showRightPanel;
-                    }
-                }
-
-                StatusSearchPopup {
-                    id: searchPopup
-                    searchOptionsPopupMenu: searchPopupMenu
-                    onAboutToHide: {
-                        if (searchPopupMenu.visible) {
-                            searchPopupMenu.close();
-                        }
-                        //clear menu
-                        for (var i = 2; i < searchPopupMenu.count; i++) {
-                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
-                        }
-                    }
-                    onClosed: {
-                        statusChatToolBar.searchButton.highlighted = false
-                        searchPopupMenu.dismiss();
-                    }
-                    onSearchTextChanged: {
-                        if (searchPopup.searchText !== "") {
-                            searchPopup.loading = true;
-                            searchModelSimTimer.start();
-                        } else {
-                            searchPopup.searchResults = [];
-                            searchModelSimTimer.stop();
-                        }
-                    }
-                    Timer {
-                        id: searchModelSimTimer
-                        interval: 500
-                        onTriggered: {
-                            if (searchPopup.searchText.startsWith("c")) {
-                                searchPopup.searchResults = models.searchResultsA;
-                            } else {
-                                searchPopup.searchResults = models.searchResultsB;
-                            }
-                            searchPopup.loading = false;
-                        }
-                    }
-                }
-                StatusSearchLocationMenu {
-                    id: searchPopupMenu
-                    searchPopup: searchPopup
-                    locationModel: models.optionsModel
-                }
-            }
-
-            rightPanel: Item {
-                id: rightPanel
-                StatusBaseText {
-                    id: titleText
-                    anchors.top: parent.top
-                    anchors.topMargin:16
-                    anchors.left: parent.left
-                    anchors.leftMargin: 16
-                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
-                    visible: (opacity > 0.1)
-                    font.pixelSize: 15
-                    text: qsTr("Members")
-                }
-
-                ListView {
-                    anchors.top: titleText.bottom
-                    anchors.topMargin: 16
-                    anchors.left: parent.left
-                    anchors.leftMargin: 8
-                    anchors.right: parent.right
-                    anchors.rightMargin: 8
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 16
-                    boundsBehavior: Flickable.StopAtBounds
-                    model: ["John", "Nick", "Maria", "Mike"]
-                    delegate: Row {
-                        width: parent.width
-                        height: 30
-                        spacing: 8
-                        Rectangle {
-                            width: 24
-                            height: 24
-                            radius: width/2
-                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
-                        }
-                        StatusBaseText {
-                            height: parent.height
-                            horizontalAlignment: Text.AlignHCenter
-                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
-                            visible: (opacity > 0.1)
-                            font.pixelSize: 15
-                            color: Theme.palette.directColor1
-                            text: modelData
-                        }
-                    }
-                }
+        StatusAppCommunityView {
+            communityDetailModalTitle: demoCommunityDetailModal.header.title
+            communityDetailModalImage: demoCommunityDetailModal.header.image.source
+            onChatInfoButtonClicked: {
+                demoCommunityDetailModal.open();
             }
         }
     }
 
     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: models.demoProfileGeneralMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-
-                        StatusListSectionHeadline { text: "Settings" }
-
-                        Repeater {
-                            model: models.demoProfileSettingsMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-
-                        Item {
-                            id: invisibleSeparator
-                            height: 16
-                            width: parent.width
-                        }
-
-                        Repeater {
-                            model: models.demoProfileOtherMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-            }
-        }
+        StatusAppProfileSettingsView { }
     }
 
-    StatusModal {
+    DemoContactRequestsModal {
         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"
-        }
-
-        contentItem: 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 {
+    DemoCommunityDetailModal {
         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"
-
-        contentItem: 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
-            }
-        }
-    }
-
-    Models {
-        id: models
     }
 }

sandbox/Layout.qml

@@ -1,447 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
-import StatusQ.Popups 0.1
-
-Column {
-    spacing: 5
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-    }
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
-        chatInfoButton.pinnedMessagesCount: 1
-        chatInfoButton.muted: true
-    }
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-        chatInfoButton.pinnedMessagesCount: 1
-        notificationCount: 1
-    }
-
-    Row {
-        spacing: 5
-        Button {
-            id: btn
-            text: "Append"
-            onClicked: {
-                buttons.append({
-                    name: "Test community",
-                    tooltipText: "Test Community"
-                })
-            }
-        }
-
-        QtObject {
-            id: appSectionType
-            readonly property int chat: 0
-            readonly property int community: 1
-            readonly property int wallet: 2
-            readonly property int browser: 3
-            readonly property int timeline: 4
-            readonly property int nodeManagement: 5
-            readonly property int profileSettings: 6
-        }
-
-        StatusAppNavBar {
-
-            sectionModel: ListModel {
-                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
-            }
-
-            regularNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-            }
-        }
-
-        StatusAppNavBar {
-
-            communityTypeRole: "sectionType"
-            communityTypeValue: appSectionType.community
-            sectionModel: ListModel {
-                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
-                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
-                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
-            }
-
-            property bool communityAdded: false
-
-            filterRegularItem: function(item) {
-                if(item.sectionType === appSectionType.community)
-                    if(communityAdded)
-                        return false
-                    else
-                        communityAdded = true
-
-                return true
-            }
-
-            filterCommunityItem: function(item) {
-                return item.sectionType === appSectionType.community
-            }
-
-            regularNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-            }
-
-            communityNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-
-                popupMenu: StatusPopupMenu {
-
-                    StatusMenuItem {
-                        text: qsTr("Invite People")
-                        icon.name: "share-ios"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("View Community")
-                        icon.name: "group"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("Edit Community")
-                        icon.name: "edit"
-                        enabled: false
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: qsTr("Leave Community")
-                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-            }
-        }
-
-        StatusAppNavBar {
-
-            communityTypeRole: "sectionType"
-            communityTypeValue: appSectionType.community
-            sectionModel: ListModel {
-                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
-                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
-                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
-            }
-
-            property bool communityAdded: false
-
-            filterRegularItem: function(item) {
-                if(item.sectionType === appSectionType.community)
-                    if(communityAdded)
-                        return false
-                    else
-                        communityAdded = true
-
-                return true
-            }
-
-            filterCommunityItem: function(item) {
-                return item.sectionType === appSectionType.community
-            }
-
-            regularNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-            }
-
-            communityNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-
-                popupMenu: StatusPopupMenu {
-
-                    StatusMenuItem {
-                        text: qsTr("Invite People")
-                        icon.name: "share-ios"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("View Community")
-                        icon.name: "group"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("Edit Community")
-                        icon.name: "edit"
-                        enabled: false
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: qsTr("Leave Community")
-                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-            }
-        }
-
-
-        StatusAppNavBar {
-
-            communityTypeRole: "sectionType"
-            communityTypeValue: appSectionType.community
-            sectionModel: ListModel {
-                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
-                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
-                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
-            }
-
-            property bool communityAdded: false
-
-            filterRegularItem: function(item) {
-                if(item.sectionType === appSectionType.community)
-                    if(communityAdded)
-                        return false
-                    else
-                        communityAdded = true
-
-                return true
-            }
-
-            filterCommunityItem: function(item) {
-                return item.sectionType === appSectionType.community
-            }
-
-            regularNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-            }
-
-            communityNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-
-                popupMenu: StatusPopupMenu {
-
-                    StatusMenuItem {
-                        text: qsTr("Invite People")
-                        icon.name: "share-ios"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("View Community")
-                        icon.name: "group"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("Edit Community")
-                        icon.name: "edit"
-                        enabled: false
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: qsTr("Leave Community")
-                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-            }
-        }
-
-        StatusAppNavBar {
-
-            communityTypeRole: "sectionType"
-            communityTypeValue: appSectionType.community
-            sectionModel: ListModel {
-                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
-                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
-                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
-                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
-                ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
-                ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
-                ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
-                ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
-                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
-            }
-
-            property bool communityAdded: false
-
-            filterRegularItem: function(item) {
-                if(item.sectionType === appSectionType.community)
-                    if(communityAdded)
-                        return false
-                    else
-                        communityAdded = true
-
-                return true
-            }
-
-            filterCommunityItem: function(item) {
-                return item.sectionType === appSectionType.community
-            }
-
-            regularNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-            }
-
-            communityNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-
-                popupMenu: StatusPopupMenu {
-
-                    StatusMenuItem {
-                        text: qsTr("Invite People")
-                        icon.name: "share-ios"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("View Community")
-                        icon.name: "group"
-                    }
-
-                    StatusMenuItem {
-                        text: qsTr("Edit Community")
-                        icon.name: "edit"
-                        enabled: false
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: qsTr("Leave Community")
-                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-            }
-        }
-
-
-    }
-}
-

sandbox/Models.qml

@@ -1,510 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Components 0.1
-
-QtObject {
-
-    property var demoChatListItems: ListModel {
-        id: demoChatListItems
-        ListElement {
-            itemId: "x012340000"
-            name: "#status"
-            icon: ""
-            isIdenticon: false
-            color: "blue"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: true
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 0
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340001"
-            name: "status-desktop"
-            icon: ""
-            isIdenticon: false
-            color: "red"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: true
-            notificationsCount: 1
-            muted: false
-            active: false
-            position: 1
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340002"
-            name: "Amazing Funny Squirrel"
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
-            color: "green"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: true
-            position: 2
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340003"
-            name: "Black Ops"
-            icon: ""
-            isIdenticon: false
-            color: "purple"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 3
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340004"
-            name: "Spectacular Growing Otter"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 4
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340005"
-            name: "channel-with-a-super-duper-long-name"
-            icon: ""
-            isIdenticon: false
-            color: "green"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 5
-            subItems: []
-        }
-    }
-
-    property var demoCommunityChatListItems: ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            itemId: "x012340000"
-            name: "general"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.CommunityChat
-            hasUnreadMessages: true
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 0
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340001"
-            name: "Public"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.Unknown0
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: true
-            position: 1
-            subItems: [
-                ListElement {
-                    itemId: "x012340002"
-                    parentItemId: "x012340001"
-                    name: "random"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: true
-                    notificationsCount: 4
-                    muted: false
-                    active: false
-                    position: 0
-                },
-                ListElement {
-                    itemId: "x012340003"
-                    parentItemId: "x012340001"
-                    name: "watercooler"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: false
-                    notificationsCount: 0
-                    muted: false
-                    active: true
-                    position: 1
-                }
-            ]
-        }
-        ListElement {
-            itemId: "x012340004"
-            name: "Development"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.Unknown0
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 2
-            subItems: [
-                ListElement {
-                    itemId: "x012340005"
-                    parentItemId: "x012340004"
-                    name: "language-design"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: false
-                    notificationsCount: 0
-                    muted: true
-                    active: false
-                    position: 0
-                }
-            ]
-        }
-    }
-
-    property var demoProfileGeneralMenuItems: ListModel {
-        id: demoProfileGeneralMenuItems
-
-        ListElement {
-            title: "My Profile"
-            icon: "profile"
-        }
-
-        ListElement {
-            title: "Contacts"
-            icon: "contact"
-        }
-
-        ListElement {
-            title: "ENS Usernames"
-            icon: "username"
-        }
-
-    }
-
-    property var demoProfileSettingsMenuItems: 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"
-        }
-
-    }
-
-    property var demoProfileOtherMenuItems: ListModel {
-        id: demoProfileOtherMenuItems
-
-        ListElement {
-            title: "Need help?"
-            icon: "help"
-        }
-
-        ListElement {
-            title: "About"
-            icon: "info"
-        }
-
-        ListElement {
-            title: "Sign out & Quit"
-            icon: "logout"
-        }
-    }
-
-    //dummy search popup models
-    property var searchResultsA: ListModel {
-        ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
-            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
-            color: "orange";
-            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
-            badgePrimaryText: "CryptoKities";
-            badgeSecondaryText: "";
-            badgeIconColor: "";
-            badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "yellow"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "black"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "green"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "red"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "red"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i9"; titleId: "t9"; image: ""; color: "blue"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i10"; titleId: "t10"; image: ""; color: "green"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-    }
-    property var searchResultsB: ListModel {
-        ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
-            image: "";
-            color: "orange";
-            badgeImage: "";
-            badgePrimaryText: "CryptoKities";
-            badgeSecondaryText: "#design";
-            badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
-        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "red"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "orange"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "black"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
-        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "green"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "yellow"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "orange"; badgeIsLetterIdenticon: true }
-    }
-
-    property ListModel optionsModel: ListModel {
-        ListElement {
-            value: "item_1"
-            title: "Item with icon"
-            imageSource: ""
-            iconName: "chat"
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_1_1"
-                    text: "Profile image item"
-                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                    iconName: ""
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_1_2"
-                    text: "identicon item"
-                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-                    iconName: ""
-                    iconColor: ""
-                    isIdenticon: true
-                }]}
-        ListElement {
-            value: "item_2"
-            title: "Community item";
-            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-            iconName: ""
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_2_1"
-                    text: "welcome"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_2_2"
-                    text: "support"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_2_3"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-        ListElement {
-            value: "item_3"
-            title: "Other";
-            imageSource: "";
-            iconName: "info"
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_3_1"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-        ListElement {
-            value: "item_4"
-            title: "Letter identicon";
-            imageSource: "";
-            iconName: ""
-            iconColor: "red"
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_4_1"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-    }
-
-    //    App Section Types:
-    //    chat: 0
-    //    community: 1
-    //    wallet: 2
-    //    browser: 3
-    //    timeline: 4
-    //    nodeManagement: 5
-    //    profileSettings: 6
-    //    apiDocumentation: 100
-    //    demoApp: 101
-
-    property ListModel mainAppSectionsModel: ListModel {
-        ListElement {
-            sectionId: "mainApp"
-            sectionType: 100
-            name: "API Documentation"
-            active: true
-            image: ""
-            icon: "edit"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "demoApp"
-            sectionType: 101
-            name: "Demo Application"
-            active: false
-            image: ""
-            icon: "status"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-    }
-
-    property ListModel demoAppSectionsModel: ListModel {
-        ListElement {
-            sectionId: "chat"
-            sectionType: 0
-            name: "Chat"
-            active: true
-            image: ""
-            icon: "chat"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "0x123456789"
-            sectionType: 1
-            name: "Status Community"
-            active: false
-            image: "https://assets.brandfetch.io/51a495de903c46a.png"
-            icon: ""
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "wallet"
-            sectionType: 2
-            name: "Wallet"
-            active: false
-            image: ""
-            icon: "wallet"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "browser"
-            sectionType: 3
-            name: "Browser"
-            active: false
-            image: ""
-            icon: "bigger/browser"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "timeline"
-            sectionType: 4
-            name: "Timeline"
-            active: false
-            image: ""
-            icon: "bigger/status-update"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "profile"
-            sectionType: 6
-            name: "Profile"
-            active: false
-            image: ""
-            icon: "bigger/settings"
-            color: ""
-            hasNotification: true
-            notificationsCount: 0
-        }
-    }
-}

sandbox/controls/Controls.qml

@@ -188,4 +188,19 @@ GridLayout {
         to: 100
         value: 40
     }
+
+    StatusBanner {
+        id: banner
+        width: 360
+        topPadding: 20
+        type: StatusBanner.Type.Danger
+        statusText: "Banner"
+    }
+
+    StatusProgressBar {
+        id: progressBar        
+        text: "Weak"
+        value: 0.5
+        fillColor : Theme.palette.pinColor1
+    }
 }

sandbox/controls/Layout.qml

@@ -0,0 +1,295 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+
+Column {
+    spacing: 5
+
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+    }
+
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
+        chatInfoButton.pinnedMessagesCount: 1
+        chatInfoButton.muted: true
+    }
+
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        chatInfoButton.pinnedMessagesCount: 1
+        notificationCount: 1
+    }
+
+    Row {
+        spacing: 5
+        Button {
+            id: btn
+            text: "Append"
+            onClicked: {
+                buttons.append({
+                    name: "Test community",
+                    tooltipText: "Test Community"
+                })
+            }
+        }
+
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
+                badge.visible: true
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                tooltip.text: "Chat"
+            }
+        }
+
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
+                badge.visible: true
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                tooltip.text: "Chat"
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                id: buttons
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "profile"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+                }
+            ]
+        }
+
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
+                badge.visible: true
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                tooltip.text: "Chat"
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                }
+            ]
+        }
+
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
+                badge.visible: true
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                tooltip.text: "Chat"
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "profile"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+                }
+            ]
+        }
+
+        StatusAppNavBar {
+            id: test
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
+                badge.visible: true
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                tooltip.text: "Chat"
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "profile"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+                }
+            ]
+        }
+    }
+}
+

sandbox/controls/ListItems.qml

@@ -85,8 +85,7 @@ GridLayout {
     StatusChatListItem {
         name: "has-mentions"
         type: StatusChatListItem.Type.PublicChat
-        hasUnreadMessages: true
-        notificationsCount: 1
+        badge.value: 1
     }
 
     StatusChatListItem {
@@ -101,7 +100,7 @@ GridLayout {
         type: StatusChatListItem.Type.PublicChat
         muted: true
         hasUnreadMessages: true
-        notificationsCount: 1
+        badge.value: 1
     }
 
     StatusChatListItem {
@@ -131,7 +130,7 @@ GridLayout {
         selected: true
         muted: true
         hasUnreadMessages: true
-        notificationsCount: 1
+        badge.value: 1
     }
 
 
@@ -346,4 +345,38 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         title: "Contact requests"
         requestsCount: 3
     }
+
+    StatusMemberListItem {
+        nickName: "This is an example"
+        userName: "annabelle"
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        trustIndicator: StatusMemberListItem.TrustedType.Verified
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+        isOnline: true
+    }
+
+    StatusMemberListItem {
+        nickName: "carmen.eth"
+        isOnline: false
+        trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+    }
+
+    StatusMemberListItem {
+        nickName: "This girl I know from work"
+        userName: "annabelle"
+        isOnline: true        
+    }
+
+    StatusMemberListItem {
+        nickName: "Mark Cuban"
+        userName: "annabelle"
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+    }
 }

sandbox/controls/Popups.qml

@@ -73,6 +73,11 @@ Column {
         onClicked: spellMenu.open()
     }
 
+    StatusButton {
+        text: "Modal with Editable Title"
+        onClicked: editTitleModal.open()
+    }
+
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -341,6 +346,13 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
     }
 
+    StatusModal {
+        id: editTitleModal
+        anchors.centerIn: parent
+        header.title: "This title can be edited"
+        header.editable: true
+    }
+
     ListModel {
         id: dummyAccountsModel
         ListElement{name: "Account 1"; iconName: "filled-account"}

sandbox/demoapp/DemoCommunityDetailModal.qml

@@ -0,0 +1,111 @@
+import QtQuick 2.12
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
+    id: root
+
+    anchors.centerIn: parent
+
+    header.title: "Cryptokitties"
+    header.subTitle: "Public Community"
+    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+    contentItem: Column {
+        width: root.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
+        }
+    }
+}

sandbox/demoapp/DemoContactRequestsModal.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusModal {
+    id: root
+
+    header.title: "Contact Requests"
+    headerActionButton: StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 32
+        height: 32
+
+        icon.width: 20
+        icon.height: 20
+        icon.name: "notification"
+    }
+
+    contentItem: 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: root.close()
+        },
+        StatusButton {
+            text: "Accept all"
+            onClicked: root.close()
+        }
+    ]
+}

sandbox/demoapp/StatusAppChatView.qml

@@ -0,0 +1,348 @@
+import QtQuick 2.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppThreePanelLayout {
+    id: root
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: headline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Chat"
+        }
+
+        Item {
+            id: searchInputWrapper
+            anchors.top: headline.bottom
+            anchors.topMargin: 16
+            width: parent.width
+            height: searchInput.height
+
+            StatusBaseInput {
+                id: searchInput
+
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.right: actionButton.left
+                anchors.leftMargin: 16
+                anchors.rightMargin: 16
+
+                height: 36
+                topPadding: 8
+                bottomPadding: 0
+                placeholderText: "Search"
+                icon.name: "search"
+            }
+
+            StatusRoundButton {
+                id: actionButton
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 8
+                width: 32
+                height: 32
+
+                type: StatusRoundButton.Type.Secondary
+                icon.name: "add"
+                state: "default"
+
+                onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
+                states: [
+                    State {
+                        name: "default"
+                        PropertyChanges {
+                            target: actionButton
+                            icon.rotation: 0
+                            highlighted: false
+                        }
+                    },
+                    State {
+                        name: "pressed"
+                        PropertyChanges {
+                            target: actionButton
+                            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
+                        }
+                    }
+                ]
+
+                StatusPopupMenu {
+                    id: chatContextMenu
+
+                    onOpened: {
+                        actionButton.state = "pressed"
+                    }
+
+                    onClosed: {
+                        actionButton.state = "default"
+                    }
+
+                    StatusMenuItem {
+                        text: "Start new chat"
+                        icon.name: "private-chat"
+                    }
+
+                    StatusMenuItem {
+                        text: "Start group chat"
+                        icon.name: "group-chat"
+                    }
+
+                    StatusMenuItem {
+                        text: "Join public chat"
+                        icon.name: "public-chat"
+                    }
+
+                    StatusMenuItem {
+                        text: "Communities"
+                        icon.name: "communities"
+                    }
+                }
+            }
+        }
+
+        Column {
+            anchors.top: searchInputWrapper.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: Models.demoChatListItems
+                selectedChatId: "0"
+                onChatItemSelected: selectedChatId = id
+                onChatItemUnmuted: {
+                    for (var i = 0; i < Models.demoChatListItems.count; i++) {
+                        let item = Models.demoChatListItems.get(i);
+                        if (item.chatId === id) {
+                            Models.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
+                    }
+                }
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+
+        StatusChatToolBar {
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "Amazing Funny Squirrel"
+            chatInfoButton.subTitle: "Contact"
+            chatInfoButton.icon.color: Theme.palette.miscColor7
+            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+            chatInfoButton.pinnedMessagesCount: 1
+
+            searchButton.visible: false
+            membersButton.visible: false
+            notificationCount: 1
+
+            onNotificationButtonClicked: notificationCount = 0
+
+            popupMenu: StatusPopupMenu {
+                id: contextMenu
+
+                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: "Leave Chat"
+                    icon.name: "arrow-right"
+                    icon.width: 14
+                    iconRotation: 180
+                    type: StatusMenuItem.Type.Danger
+                }
+            }
+        }
+    }
+
+    centerPanel: ListView {
+        id: messageList
+        anchors.fill: parent
+        anchors.margins: 15
+        clip: true
+        model: Models.chatMessagesModel
+        delegate: StatusMessage {
+            id: delegate
+            width: parent.width
+
+            audioMessageInfoText: "Audio Message"
+            cancelButtonText: "Cancel"
+            saveButtonText: "Save"
+            loadingImageText: "Loading image..."
+            errorLoadingImageText: "Error loading the image"
+            resendText: "Resend"
+            pinnedMsgInfoText: "Pinned by"
+
+            messageDetails: StatusMessageDetails {
+                contentType: model.contentType
+                messageContent: model.messageContent
+                amISender: model.amIsender
+                displayName: model.userName
+                secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
+                chatID: model.chatKey
+                profileImage: StatusImageSettings {
+                    width: 40
+                    height: 40
+                    source: model.profileImage
+                    isIdenticon: model.isIdenticon
+                }
+                messageText: model.message
+                hasMention: model.hasMention
+                contactType: model.contactType
+                isPinned: model.isPinned
+                pinnedBy: model.pinnedBy
+                hasExpired: model.hasExpired
+            }
+            timestamp.text: "10:00 am"
+            timestamp.tooltip.text: "10:01 am"
+            // reply related data
+            isAReply: model.isReply
+            replyDetails: StatusMessageDetails {
+                amISender:  model.isReply ? model.replyAmISender : ""
+                displayName:  model.isReply ? model.replySenderName: ""
+                profileImage: StatusImageSettings {
+                    width: 20
+                    height: 20
+                    source:  model.isReply ? model.replyProfileImage: ""
+                    isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
+                }
+                messageText:  model.isReply ? model.replyMessageText: ""
+                contentType: model.replyContentType
+                messageContent: model.replyMessageContent
+            }
+            quickActions: [
+                StatusFlatRoundButton {
+                    id: emojiBtn
+                    width: 32
+                    height: 32
+                    icon.name: "reaction-b"
+                    type: StatusFlatRoundButton.Type.Tertiary
+                    tooltip.text: "Add reaction"
+                },
+                StatusFlatRoundButton {
+                    id: replyBtn
+                    width: 32
+                    height: 32
+                    icon.name: "reply"
+                    type: StatusFlatRoundButton.Type.Tertiary
+                    tooltip.text: "Reply"
+                },
+                StatusFlatRoundButton {
+                    width: 32
+                    height: 32
+                    icon.name: "tiny/edit"
+                    type: StatusFlatRoundButton.Type.Tertiary
+                    tooltip.text: "Edit"
+                    onClicked: {
+                        delegate.editMode = !delegate.editMode
+                    }
+                },
+                StatusFlatRoundButton {
+                    id: otherBtn
+                    width: 32
+                    height: 32
+                    icon.name: "more"
+                    type: StatusFlatRoundButton.Type.Tertiary
+                    tooltip.text: "More"
+                }
+            ]
+        }
+    }
+}

sandbox/demoapp/StatusAppCommunityView.qml

@@ -0,0 +1,274 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppThreePanelLayout {
+    id: root
+
+    property string communityDetailModalTitle: ""
+    property string communityDetailModalImage: ""
+    signal chatInfoButtonClicked()
+
+    handle: Rectangle {
+        implicitWidth: 5
+        color: SplitHandle.pressed ? Theme.palette.baseColor2
+                                   : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+    }
+    leftPanel: Item {
+        id: leftPanel
+
+        StatusChatInfoToolBar {
+            id: statusChatInfoToolBar
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            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:  { chatInfoButtonClicked(); }
+
+            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"
+                }
+
+            }
+        }
+
+        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
+                width: leftPanel.width
+                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+
+                draggableItems: true
+                draggableCategories: false
+                chatList.model: Models.demoCommunityChatListItems
+                categoryList.model: Models.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"
+                    }
+                }
+            }
+        }
+    }
+
+    centerPanel: Item {
+        StatusChatToolBar {
+            id: statusChatToolBar
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "general"
+            chatInfoButton.subTitle: "Community Chat"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
+            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            onSearchButtonClicked: {
+                searchButton.highlighted = !searchButton.highlighted;
+                searchPopup.setSearchSelection(communityDetailModalTitle,
+                                               "",
+                                               communityDetailModalImage);
+                searchPopup.open();
+            }
+            membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+            onMembersButtonClicked: {
+                root.showRightPanel = !root.showRightPanel;
+            }
+        }
+
+        StatusSearchPopup {
+            id: searchPopup
+            searchOptionsPopupMenu: searchPopupMenu
+            onAboutToHide: {
+                if (searchPopupMenu.visible) {
+                    searchPopupMenu.close();
+                }
+                //clear menu
+                for (var i = 2; i < searchPopupMenu.count; i++) {
+                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                }
+            }
+            onClosed: {
+                statusChatToolBar.searchButton.highlighted = false
+                searchPopupMenu.dismiss();
+            }
+            onSearchTextChanged: {
+                if (searchPopup.searchText !== "") {
+                    searchPopup.loading = true;
+                    searchModelSimTimer.start();
+                } else {
+                    searchPopup.searchResults = [];
+                    searchModelSimTimer.stop();
+                }
+            }
+            Timer {
+                id: searchModelSimTimer
+                interval: 500
+                onTriggered: {
+                    if (searchPopup.searchText.startsWith("c")) {
+                        searchPopup.searchResults = Models.searchResultsA;
+                    } else {
+                        searchPopup.searchResults = Models.searchResultsB;
+                    }
+                    searchPopup.loading = false;
+                }
+            }
+        }
+        StatusSearchLocationMenu {
+            id: searchPopupMenu
+            searchPopup: searchPopup
+            locationModel: Models.optionsModel
+        }
+    }
+
+    rightPanel: Item {
+        id: rightPanel
+        StatusBaseText {
+            id: titleText
+            anchors.top: parent.top
+            anchors.topMargin:16
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+            visible: (opacity > 0.1)
+            font.pixelSize: 15
+            text: qsTr("Members")
+        }
+
+        ListView {
+            anchors.top: titleText.bottom
+            anchors.topMargin: 16
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 16
+            boundsBehavior: Flickable.StopAtBounds
+            model: Models.membersListModel
+            delegate: StatusMemberListItem {
+                implicitWidth: parent.width
+                nickName: model.nickName
+                userName: model.userName
+                chatKey: model.chatKey
+                trustIndicator: model.trustIndicator
+                isMutualContact: model.isMutualContact
+                image.source: model.source
+                image.isIdenticon: model.isIdenticon
+                isOnline: model.isOnline
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -0,0 +1,77 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppTwoPanelLayout {
+    id: root
+
+    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: Models.demoProfileGeneralMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                StatusListSectionHeadline { text: "Settings" }
+
+                Repeater {
+                    model: Models.demoProfileSettingsMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                Item {
+                    id: invisibleSeparator
+                    height: 16
+                    width: parent.width
+                }
+
+                Repeater {
+                    model: Models.demoProfileOtherMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+    }
+}

sandbox/demoapp/data/qmldir

@@ -0,0 +1 @@
+singleton Models 1.0 Models.qml

sandbox/main.qml

@@ -31,39 +31,11 @@ StatusWindow {
 
     Component.onCompleted: {
         Theme.palette = lightTheme
+        apiDocsButton.checked = true
+
         rootWindow.updatePosition();
     }
 
-    QtObject {
-        id: appSectionType
-        readonly property int chat: 0
-        readonly property int community: 1
-        readonly property int wallet: 2
-        readonly property int browser: 3
-        readonly property int timeline: 4
-        readonly property int nodeManagement: 5
-        readonly property int profileSettings: 6
-        readonly property int apiDocumentation: 100
-        readonly property int demoApp: 101
-    }
-
-    Models {
-        id: models
-    }
-
-    function setActiveItem(sectionId) {
-        for (var i = 0; i < models.mainAppSectionsModel.count; i++) {
-            let item = models.mainAppSectionsModel.get(i)
-            if (item.sectionId !== sectionId)
-            {
-                models.mainAppSectionsModel.setProperty(i, "active", false)
-                continue
-            }
-
-            models.mainAppSectionsModel.setProperty(i, "active", true);
-        }
-    }
-
     StatusAppLayout {
         id: appLayout
         anchors.fill: parent
@@ -71,36 +43,37 @@ StatusWindow {
         appNavBar: StatusAppNavBar {
             height: rootWindow.height
 
-            communityTypeRole: "sectionType"
-            communityTypeValue: appSectionType.community
-            sectionModel: models.mainAppSectionsModel
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "refresh"
+                tooltip.text: "Reload App"
+                onClicked: app.restartQml()
+            }
 
-            regularNavBarButton: StatusNavBarTabButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.icon.length > 0? "" : model.name
-                icon.name: model.icon
-                icon.source: model.image
-                tooltip.text: model.name
-                autoExclusive: true
-                checked: model.active
-                badge.value: model.notificationsCount
-                badge.visible: model.hasNotification
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                onClicked: {
-                    stackView.clear()
-                    if(model.sectionType === appSectionType.apiDocumentation)
-                    {
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    id: apiDocsButton
+                    icon.name: "edit"
+                    tooltip.text: "API Documentation"
+                    onClicked: {
+                        stackView.clear()
                         stackView.push(libraryDocumentationCmp)
-                        rootWindow.setActiveItem(sectionId)
+                        checked = !checked
+                        demoAppButton.checked = false
                     }
-                    else if(model.sectionType === appSectionType.demoApp)
-                    {
+                },
+                StatusNavBarTabButton {
+                    id: demoAppButton
+                    icon.name: "status"
+                    tooltip.text: "Demo Application"
+                    checked: stackView.currentItem == demoAppCmp
+                    onClicked: {
+                        stackView.clear()
                         stackView.push(demoAppCmp)
-                        rootWindow.setActiveItem(model.sectionId)
+                        checked = !checked
+                        apiDocsButton.checked = false
                     }
                 }
-            }
+            ]
         }
 
         appView: StackView {
@@ -128,6 +101,14 @@ StatusWindow {
         id: libraryDocumentationCmp
 
         StatusAppTwoPanelLayout {
+            id: mainPageView
+
+            function page(name) {
+                viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
+            }
+            function control(name) {
+                viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
+            }
 
             leftPanel: Item {
                 anchors.fill: parent
@@ -147,122 +128,127 @@ StatusWindow {
 
                         StatusListSectionHeadline { text: "StatusQ.Core" }
                         StatusNavigationListItem { 
-                            title: "Icons" 
-                            selected: page.sourceComponent == iconsComponent
-                            onClicked: page.sourceComponent = iconsComponent
+                            title: "Icons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Layout" }
                         StatusNavigationListItem { 
-                            title: "Layouts" 
-                            selected: page.sourceComponent == layoutComponent
-                            onClicked: page.sourceComponent = layoutComponent
+                            title: "Layouts"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Controls" }
                         StatusNavigationListItem { 
-                            title: "Buttons" 
-                            selected: page.sourceComponent == buttonsComponent
-                            onClicked: page.sourceComponent = buttonsComponent
+                            title: "Buttons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusSwitchTab" 
-                            selected: page.sourceComponent == statusTabSwitchesComponent
-                            onClicked: page.sourceComponent = statusTabSwitchesComponent
+                            title: "StatusSwitchTab"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page("StatusTabSwitch");
                         }
                         StatusNavigationListItem { 
-                            title: "StatusChatCommandButton" 
-                            selected: page.sourceComponent == statusChatCommandButtonPageComponent
-                            onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
+                            title: "StatusChatCommandButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "Controls" 
-                            selected: page.sourceComponent == controlsComponent
-                            onClicked: page.sourceComponent = controlsComponent
+                            title: "Controls"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusTabBarIconButton" 
-                            selected: page.sourceComponent == statusTabBarIconButtonPageComponent
-                            onClicked: page.sourceComponent = statusTabBarIconButtonPageComponent
+                            title: "StatusTabBarIconButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusInput" 
-                            selected: page.sourceComponent == statusInputPageComponent
-                            onClicked: page.sourceComponent = statusInputPageComponent
+                            title: "StatusInput"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusSelect" 
-                            selected: page.sourceComponent == statusSelectPageComponent
-                            onClicked: page.sourceComponent = statusSelectPageComponent
+                            title: "StatusSelect"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusAccountSelector" 
-                            selected: page.sourceComponent == statusAccountSelectorPageComponent
-                            onClicked: page.sourceComponent = statusAccountSelectorPageComponent
+                            title: "StatusAccountSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusAssetSelector" 
-                            selected: page.sourceComponent == statusAssetSelectorPageComponent
-                            onClicked: page.sourceComponent = statusAssetSelectorPageComponent
+                            title: "StatusAssetSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusColorSelector" 
-                            selected: page.sourceComponent == statusColorSelectorPageComponent
-                            onClicked: page.sourceComponent = statusColorSelectorPageComponent
+                            title: "StatusColorSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusWalletColorButton" 
-                            selected: page.sourceComponent == statusWalletColorButtonPageComponent
-                            onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
+                            title: "StatusWalletColorButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusWalletColorSelect" 
-                            selected: page.sourceComponent == statusWalletColorSelectPageComponent
-                            onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
+                            title: "StatusWalletColorSelect"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusPasswordStrengthIndicator"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"
-                            selected: page.sourceComponent == statusAddressPageComponent
-                            onClicked: page.sourceComponent = statusAddressPageComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
                             title: "List Items"
-                            selected: page.sourceComponent == listItemsComponent
-                            onClicked: page.sourceComponent = listItemsComponent
+                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                         }
                         StatusNavigationListItem { 
                             title: "StatusChatInfoToolBar"
-                            selected: page.sourceComponent == chatInfoToolBarComponent
-                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
                             title: "Others"
-                            selected: page.sourceComponent == othersComponent
-                            onClicked: page.sourceComponent = othersComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
                         StatusNavigationListItem {
                             title: "StatusExpandableItem"
-                            selected: page.sourceComponent == settingsComponent
-                            onClicked: page.sourceComponent = settingsComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page("StatusExpandableSettingsItem");
                         }
                         StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem { 
                             title: "StatusPopupMenu"
-                            selected: page.sourceComponent == popupMenuComponent
-                            onClicked: page.sourceComponent = popupMenuComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
 
                         StatusNavigationListItem {
                             title: "StatusModal"
-                            selected: page.sourceComponent == statusModalComponent
-                            onClicked: page.sourceComponent = statusModalComponent
+                            selected: viewLoader.source.toString().includes("Popups")
+                            onClicked: mainPageView.control("Popups");
                         }
                         StatusListSectionHeadline { text: "StatusQ.Platform" }
                         StatusNavigationListItem {
                             title: "StatusMacNotification"
-                            selected: page.sourceComponent == notificationComponent
-                            onClicked: page.sourceComponent = notificationComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                     }
                 }
@@ -282,13 +268,17 @@ StatusWindow {
                         width: rightPanel.width
                         anchors.top: parent.top
                         anchors.topMargin: 64
-                        height: Math.max(rootWindow.height, page.height + 128)
+                        height: Math.max(rootWindow.height, viewLoader.height + 128)
                         scale: rootWindow.factor
                         Loader {
-                            id: page
-                            active: true
+                            id: viewLoader
                             anchors.centerIn: parent
-                            sourceComponent: iconsComponent
+                            source: mainPageView.control("Icons")
+                            onSourceChanged: {
+                                if (source.toString().includes("Icons")) {
+                                    item.iconColor = Theme.palette.primaryColor1;
+                                }
+                            }
                         }
                     }
                 }
@@ -319,116 +309,6 @@ StatusWindow {
         }
     }
 
-    Component {
-        id: iconsComponent
-        Icons { iconColor: Theme.palette.primaryColor1 }
-    }
-
-    Component {
-        id: controlsComponent
-        Controls {}
-    }
-
-    Component {
-        id: statusInputPageComponent
-        StatusInputPage {}
-    }
-
-    Component {
-        id: statusSelectPageComponent
-        StatusSelectPage {}
-    }
-
-    Component {
-        id: statusAccountSelectorPageComponent
-        StatusAccountSelectorPage {}
-    }
-
-    Component {
-        id: statusAssetSelectorPageComponent
-        StatusAssetSelectorPage {}
-    }
-
-    Component {
-        id: statusColorSelectorPageComponent
-        StatusColorSelectorPage {}
-    }
-
-    Component {
-        id: statusTabBarIconButtonPageComponent
-        StatusTabBarIconButtonPage {}
-    }
-
-    Component {
-        id: statusWalletColorButtonPageComponent
-        StatusWalletColorButtonPage {}
-    }
-
-    Component {
-        id: statusWalletColorSelectPageComponent
-        StatusWalletColorSelectPage {}
-    }
-
-    Component {
-        id: listItemsComponent
-        ListItems {}
-    }
-
-    Component {
-        id: statusAddressPageComponent
-        StatusAddressPage {}
-    }
-
-    Component {
-        id: layoutComponent
-        Layout {}
-    }
-
-    Component {
-        id: othersComponent
-        Others {}
-    }
-
-    Component {
-        id: buttonsComponent
-        Buttons {}
-    }
-
-    Component {
-        id: statusChatCommandButtonPageComponent
-        StatusChatCommandButtonPage {}
-    }
-
-    Component {
-        id: popupMenuComponent
-        StatusPopupMenuPage {}
-    }
-
-    Component {
-        id: chatInfoToolBarComponent
-        StatusChatInfoToolBarPage {}
-    }
-
-    Component {
-        id: statusModalComponent
-        Popups {}
-    }
-
-    Component {
-        id: statusTabSwitchesComponent
-        StatusTabSwitchPage {}
-    }
-
-    Component {
-        id: settingsComponent
-        StatusExpandableSettingsItemPage{}
-    }
-
-    Component {
-        id: notificationComponent
-        StatusMacNotificationPage  {}
-    }
-
     Component {
         id: demoAppCmp
 

sandbox/pages/StatusAccountSelectorPage.qml

@@ -2,53 +2,62 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
+import Sandbox 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 
-import Sandbox 0.1
 
 Column {
     spacing: 8
 
     StatusAccountSelector {
+        id: accountSelector
         accounts: ListModel {
             ListElement {
                 name: "Pascal"
                 address: "0x1234567891011"
-                iconColor: "red"
-                balance: "0"
+                path: ""
+                color: "red"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "1199.02"
                 assets: []
-                fiatBalance: "1199.02"
             }
             ListElement {
                 name: "Boris"
                 address: "0x123"
-                iconColor: "red"
-                balance: "0"
+                path: ""
+                color: "red"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
                 assets: []
-                fiatBalance: "0"
             }
             ListElement {
                 name: "Alexandra"
                 address: "0x123"
-                iconColor: "yellow"
-                balance: "0"
+                path: ""
+                color: "yellow"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
                 assets: []
-                fiatBalance: "0"
             }
             ListElement {
                 name: "Khushboo"
                 address: "0x123"
-                iconColor: "blue"
-                balance: "0"
+                path: ""
+                color: "blue"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
                 assets: []
-                fiatBalance: "0"
             }
         }
     }

sandbox/pages/StatusPasswordStrengthIndicatorPage.qml

@@ -0,0 +1,38 @@
+import QtQuick.Layouts 1.14
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusPasswordStrengthIndicator {
+        id: veryweakPw
+        strength: StatusPasswordStrengthIndicator.Strength.VeryWeak
+        value: 0.75
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: weakPw
+        strength: StatusPasswordStrengthIndicator.Strength.Weak
+        value: 0.5
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: sosoPw
+        strength: StatusPasswordStrengthIndicator.Strength.SoSo
+        value: 0.25
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: goodPw
+        strength: StatusPasswordStrengthIndicator.Strength.Good
+        value: 1
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: greatPw
+        strength: StatusPasswordStrengthIndicator.Strength.Great
+        value: 0.3
+    }
+}

sandbox/qml.qrc

@@ -1,18 +1,35 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>Controls.qml</file>
-        <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>StatusInputPage.qml</file>
-        <file>ThemeSwitch.qml</file>
-        <file>Layout.qml</file>
-        <file>Popups.qml</file>
-        <file>StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusAccountSelectorPage.qml</file>
+        <file>pages/StatusAddressPage.qml</file>
+        <file>pages/StatusAssetSelectorPage.qml</file>
+        <file>pages/StatusChatCommandButtonPage.qml</file>
+        <file>pages/StatusChatInfoToolBarPage.qml</file>
+        <file>pages/StatusColorSelectorPage.qml</file>
+        <file>pages/StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusInputPage.qml</file>
+        <file>pages/StatusMacNotificationPage.qml</file>
+        <file>pages/StatusPopupMenuPage.qml</file>
+        <file>pages/StatusSelectPage.qml</file>
+        <file>pages/StatusTabBarIconButtonPage.qml</file>
+        <file>pages/StatusTabSwitchPage.qml</file>
+        <file>pages/StatusWalletColorButtonPage.qml</file>
+        <file>pages/StatusWalletColorSelectPage.qml</file>
+		<file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+        <file>controls/Buttons.qml</file>
+        <file>controls/Controls.qml</file>
+        <file>controls/Icons.qml</file>
+        <file>controls/Layout.qml</file>
+        <file>controls/ListItems.qml</file>
+        <file>controls/Others.qml</file>
+        <file>controls/Popups.qml</file>
+        <file>demoapp/DemoCommunityDetailModal.qml</file>
+        <file>demoapp/DemoContactRequestsModal.qml</file>
+        <file>demoapp/StatusAppChatView.qml</file>
+        <file>demoapp/StatusAppCommunityView.qml</file>
+        <file>demoapp/StatusAppProfileSettingsView.qml</file>
+        <file>demoapp/data/Models.qml</file>
+        <file>demoapp/data/qmldir</file>
     </qresource>
-</RCC>
+</RCC>

sandbox/sandbox.pro

@@ -22,6 +22,9 @@ SOURCES += \
 }
 
 TARGET = sandboxapp
+DESTDIR = $$PWD/bin
+
+DESTDIR = $$PWD/bin
 
 macx {
     CONFIG -= app_bundle
@@ -38,6 +41,12 @@ macx {
         DEFINES += USE_HUNSPELL
         message("hunspell exists in /usr/local/lib")
     }
+
+    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
+    first.depends = $(first) copydata
+    export(first.depends)
+    export(copydata.commands)
+    QMAKE_EXTRA_TARGETS += first copydata
 }
 
 ios {
@@ -54,14 +63,6 @@ ios {
 RESOURCES += qml.qrc \
             $$PWD/../statusq.qrc
 
-DESTDIR = $$PWD/bin
-
-copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
-first.depends = $(first) copydata
-export(first.depends)
-export(copydata.commands)
-QMAKE_EXTRA_TARGETS += first copydata
-
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin

sandbox/sandboxapp.cpp

@@ -20,7 +20,7 @@ void SandboxApp::startEngine()
     qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
 
 #ifdef QT_DEBUG
-    const QUrl url(applicationDirPath() + "/../main.qml");
+    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
 #else
     const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif

src/StatusQ/Components/StatusChatList.qml

@@ -15,7 +15,8 @@ Column {
     width: 288
 
     property string categoryId: ""
-    property var model: []
+    property string selectedChatId: ""
+    property alias chatListItems: delegateModel
     property bool draggableItems: false
 
     property alias statusChatListItems: statusChatListItems
@@ -23,6 +24,8 @@ Column {
     property Component popupMenu
 
     property var filterFn
+    property var profileImageFn
+    property var chatNameFn
 
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
@@ -36,16 +39,17 @@ Column {
 
     DelegateModel {
         id: delegateModel
-        model: statusChatList.model
+
         delegate: Item {
             id: draggable
             width: statusChatListItem.width
             height: statusChatListItem.height
+
             property alias chatListItem: statusChatListItem
 
             visible: {
                 if (!!statusChatList.filterFn) {
-                    return statusChatList.filterFn(model)
+                    return statusChatList.filterFn(model, statusChatList.categoryId)
                 }
                 return true
             }
@@ -92,19 +96,31 @@ Column {
                 StatusChatListItem {
 
                     id: statusChatListItem
+
+                    property string profileImage: ""
+
                     opacity: dragSensor.active ? 0.0 : 1.0
+                    Component.onCompleted: {
+                        if (typeof statusChatList.profileImageFn === "function") {
+                            profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
+                        }
+                    }
                     originalOrder: model.position
-                    chatId: model.itemId
-                    categoryId: model.itemId
-                    name: model.name
-                    type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
-                    muted: model.muted
-                    hasUnreadMessages: model.hasUnreadMessages
-                    notificationsCount: model.notificationsCount
-                    selected: model.active
-                    icon.color: model.color
-                    image.isIdenticon: model.isIdenticon
-                    image.source: model.icon
+                    chatId: model.chatId || model.id
+                    categoryId: model.categoryId || ""
+                    name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
+                    type: model.chatType
+                    muted: !!model.muted
+                    hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
+                    hasMention: model.mentionsCount > 0
+                    badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
+                        model.unviewedMessagesCount || 0 :
+                        model.mentionsCount || 0
+                    selected: (model.chatId || model.id) === statusChatList.selectedChatId
+
+                    icon.color: model.color || ""
+                    image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
+                    image.source: profileImage || model.identityImage || model.identicon || ""
 
                     sensor.cursorShape: dragSensor.cursorShape
                     onClicked: {
@@ -116,7 +132,7 @@ Column {
 
                             popupMenuSlot.item.openHandler = function () {
                                 if (!!originalOpenHandler) {
-                                    originalOpenHandler(model.itemId)
+                                    originalOpenHandler((model.chatId || model.id))
                                 }
                             }
 
@@ -136,10 +152,10 @@ Column {
                             return
                         }
                         if (!statusChatListItem.selected) {
-                            statusChatList.chatItemSelected(model.itemId)
+                            statusChatList.chatItemSelected(model.chatId || model.id)
                         }
                     }
-                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
+                    onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
                 }
             }
 
@@ -188,8 +204,9 @@ Column {
                     type: draggable.chatListItem.type
                     muted: draggable.chatListItem.muted
                     dragged: true
-                    hasUnreadMessages: model.hasUnreadMessages
-                    notificationsCount: model.notificationsCount
+                    hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
+                    hasMention: draggable.chatListItem.hasMention
+                    badge.value: draggable.chatListItem.badge.value
                     selected: draggable.chatListItem.selected
 
                     icon.color: draggable.chatListItem.icon.color

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -20,9 +20,11 @@ Item {
         text: "More"
     }
 
-    property var model: []
+    property string selectedChatId: ""
     property bool showCategoryActionButtons: false
     property bool showPopupMenu: true
+    property alias chatList: statusChatList.chatListItems
+    property alias categoryList: delegateModel
     property alias sensor: sensor
     property bool draggableItems: false
     property bool draggableCategories: false
@@ -69,25 +71,26 @@ Item {
             StatusChatList {
                 id: statusChatList
                 anchors.horizontalCenter: parent.horizontalCenter
-                visible: statusChatList.model.count > 0
+                visible: chatListItems.count > 0
+                selectedChatId: statusChatListAndCategories.selectedChatId
                 onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
                 onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
                 draggableItems: statusChatListAndCategories.draggableItems
-                model: statusChatListAndCategories.model
                 filterFn: function (model) {
-                    return (model.subItems.count === 0)
+                    return !!!model.categoryId
                 }
                 popupMenu: statusChatListAndCategories.chatListPopupMenu
             }
 
             DelegateModel {
                 id: delegateModel
-                model: statusChatListAndCategories.model
+
                 delegate: Item {
                     id: draggable
                     width: statusChatListCategory.width
                     height: statusChatListCategory.height
+
                     property alias chatListCategory: statusChatListCategory
 
                     StatusChatListCategory {
@@ -96,7 +99,7 @@ Item {
                         property bool dragActive: false
                         property real startY: 0
                         property real startX: 0
-
+                      
                         opacity: dragActive ? 0.0 : 1.0
 
                         dragSensor.drag.target: draggedListCategoryLoader.item
@@ -133,15 +136,16 @@ Item {
                         menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
 
                         originalOrder: model.position
-                        categoryId: model.itemId
+                        categoryId: model.categoryId
                         name: model.name
                         showActionButtons: statusChatListAndCategories.showCategoryActionButtons
-                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
+                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
 
-                        chatList.model: model.subItems
+                        chatList.chatListItems.model: statusChatListAndCategories.chatList.model
+                        chatList.selectedChatId: statusChatListAndCategories.selectedChatId
                         chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                         chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
                         chatList.draggableItems: statusChatListAndCategories.draggableItems
 
                         popupMenu: statusChatListAndCategories.categoryPopupMenu
@@ -150,7 +154,7 @@ Item {
                         // Used to set the initial value of "opened" when the
                         // model is bound/changed.
                         opened: {
-                            let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
+                            let openedState = statusChatListAndCategories.openedCategoryState[model.categoryId]
                             return openedState !== undefined ? openedState : true // defaults to open
                         }
 
@@ -159,7 +163,7 @@ Item {
                         // as the state would be lost each time the model is
                         // changed.
                         onOpenedChanged: {
-                            statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
+                            statusChatListAndCategories.openedCategoryState[model.categoryId] = statusChatListCategory.opened
                         }
                     }
 
@@ -208,7 +212,8 @@ Item {
                             name: draggable.chatListCategory.name
                             showActionButtons: draggable.chatListCategory.showActionButtons
 
-                            chatList.model: draggable.chatListCategory.chatList.model
+                            chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
+                            chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
                         }
                     }
                 }

src/StatusQ/Components/StatusChatListCategory.qml

@@ -35,11 +35,11 @@ Column {
     StatusChatListCategoryItem {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
-        visible: (model.subItems.count > 0)
         opened: statusChatListCategory.opened
         sensor.pressAndHoldInterval: 150
 
         showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
+
         highlighted: statusChatListCategory.dragged
         sensor.onClicked: {
             if (sensor.enabled) {
@@ -68,7 +68,7 @@ Column {
         visible: statusChatListCategory.opened
         categoryId: statusChatListCategory.categoryId
         filterFn: function (model) {
-            return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
+            return !!model.categoryId && model.categoryId == statusChatList.categoryId
         }
 
         popupMenu: statusChatListCategory.chatListPopupMenu

src/StatusQ/Components/StatusChatListItem.qml

@@ -18,7 +18,7 @@ Rectangle {
     property string name: ""
     property alias badge: statusBadge
     property bool hasUnreadMessages: false
-    property int notificationsCount: 0
+    property bool hasMention: false
     property bool muted: false
     property StatusImageSettings image: StatusImageSettings {
         width: 24
@@ -58,7 +58,7 @@ Rectangle {
         if (selected) {
             return Theme.palette.statusChatListItem.selectedBackgroundColor
         }
-        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return hoverHander.hovered || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
     opacity: dragged ? 0.7 : 1
@@ -66,10 +66,13 @@ Rectangle {
     MouseArea {
         id: sensor
 
+        HoverHandler {
+            id: hoverHander
+        }
+
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
-        hoverEnabled: true
 
         onClicked: statusChatListItem.clicked(mouse)
 
@@ -92,15 +95,15 @@ Rectangle {
             width: 14
             visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return 0.4
                 }
-                return statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.notificationsCount > 0 ||
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
                         statusChatListItem.selected ||
                         statusChatListItem.highlighted ||
                         statusBadge.visible ||
-                        sensor.containsMouse ? 1.0 : 0.7
+                        hoverHander.hovered ? 1.0 : 0.7
             }
 
             icon: {
@@ -135,19 +138,19 @@ Rectangle {
                       statusChatListItem.name)
             elide: Text.ElideRight
             color: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.notificationsCount > 0 ||
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
                         statusChatListItem.selected ||
                         statusChatListItem.highlighted ||
-                        sensor.containsMouse ||
+                        hoverHander.hovered ||
                         statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
             font.weight: !statusChatListItem.muted &&
-                         (statusChatListItem.hasUnreadMessages ||
-                          statusChatListItem.notificationsCount > 0 ||
+                         (statusChatListItem.hasMention ||
+                          statusChatListItem.hasUnreadMessages ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
@@ -186,8 +189,7 @@ Rectangle {
             color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
             border.width: 4
             border.color: color
-            value: statusChatListItem.notificationsCount
-            visible: statusChatListItem.notificationsCount > 0
+            visible: statusBadge.value > 0
         }
     }
 }

src/StatusQ/Components/StatusListItem.qml

@@ -9,43 +9,21 @@ import StatusQ.Controls 0.1
 Rectangle {
     id: statusListItem
 
-    implicitWidth: 448
-    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
-
-    enum Type {
-        Primary,
-        Secondary,
-        Danger
-    }
-
-    color: {
-        if (sensor.containsMouse) {
-            switch(type) {
-                case StatusListItem.Type.Primary:
-                    return Theme.palette.baseColor2
-                case StatusListItem.Type.Secondary:
-                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
-                case StatusListItem.Type.Danger:
-                    return Theme.palette.dangerColor3
-            }
-        }
-        return Theme.palette.statusListItem.backgroundColor
-    }
-
-    radius: 8
-
     property string itemId: ""
     property string titleId: ""
-
     property string title: ""
     property string titleAsideText: ""
+    property bool titleIcon1Visible
+    property bool titleIcon2Visible
     property string subTitle: ""
-    property string tertiaryTitle: ""
-    property alias badge: statusListItemBadge
-
+    property string tertiaryTitle: ""    
+    property string label: ""
     property real leftPadding: 16
     property real rightPadding: 16
     property bool enabled: true
+    property int type: StatusListItem.Type.Primary
+    property list<Item> components
+
     property StatusIconSettings icon: StatusIconSettings {
         height: isLetterIdenticon ? 40 : 20
         width: isLetterIdenticon ? 40 : 20
@@ -73,23 +51,69 @@ Rectangle {
         height: 40
         isIdenticon: false
     }
-    property string label: ""
-
-    property int type: StatusListItem.Type.Primary
+    property StatusIconSettings titleIcon1: StatusIconSettings {
+        width: dummyImage.width
+        height: dummyImage.height
+        background: StatusIconBackgroundSettings {
+            width: 10
+            height: 10
+        }
+        // Only used to get implicit width and height from the actual image
+        property Image dummyImage: Image {
+            source: titleIcon1.name ? "../../assets/img/icons/" + titleIcon1.name + ".svg": ""
+            visible: false
+        }        
+    }
+    property StatusIconSettings titleIcon2: StatusIconSettings {
+        width: dummyImage.width
+        height: dummyImage.height
+        background: StatusIconBackgroundSettings {
+            width: 10
+            height: 10
+        }
+        // Only used to get implicit width and height from the actual image
+        property Image dummyImage: Image {
+            source: titleIcon2.name ? "../../assets/img/icons/" + titleIcon2.name + ".svg": ""
+            visible: false
+        }
+    }
 
     property alias sensor: sensor
-
+    property alias badge: statusListItemBadge
     property alias statusListItemIcon: iconOrImage
     property alias statusListItemTitle: statusListItemTitle
+    property alias statusListItemTitleAside: statusListItemTitleAsideText
+    property alias statusListItemTitleArea: statusListItemTitleArea
     property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
 
-    property list<Item> components
-
     signal clicked(string itemId)
     signal titleClicked(string titleId)
 
+    enum Type {
+        Primary,
+        Secondary,
+        Danger
+    }
+
+    implicitWidth: 448
+    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
+    color: {
+        if (sensor.containsMouse) {
+            switch(type) {
+                case StatusListItem.Type.Primary:
+                    return Theme.palette.baseColor2
+                case StatusListItem.Type.Secondary:
+                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
+                case StatusListItem.Type.Danger:
+                    return Theme.palette.dangerColor3
+            }
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
+    radius: 8
+
     onComponentsChanged: {
         if (components.length) {
             for (let idx in components) {
@@ -124,6 +148,7 @@ Rectangle {
             active: statusListItem.icon.isLetterIdenticon ||
                     !!statusListItem.icon.name ||
                     !!statusListItem.image.source.toString()
+            badge.border.color: statusListItem.color
         }
 
         Item {
@@ -142,6 +167,9 @@ Rectangle {
                 font.pixelSize: 15
                 height: visible ? contentHeight : 0
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                anchors.left: parent.left
+                anchors.right: !statusListItem.titleAsideText && !statusListItem.titleIcon1Visible && !statusListItem.titleIcon2Visible
+                               ? parent.right : undefined
                 color: {
                   if (!statusListItem.enabled) {
                     return Theme.palette.baseColor1
@@ -179,6 +207,38 @@ Rectangle {
                 visible: !!statusListItem.titleAsideText
             }
 
+            Row {
+                id: titleIconsRow
+                spacing: 4
+                anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
+                anchors.verticalCenter: statusListItemTitle.verticalCenter
+                anchors.leftMargin: titleIconsRow.spacing
+
+                StatusRoundIcon {
+                    visible: statusListItem.titleIcon1Visible
+                    icon.name: statusListItem.titleIcon1.name
+                    icon.width: statusListItem.titleIcon1.width
+                    icon.height: statusListItem.titleIcon1.height
+                    icon.rotation: statusListItem.titleIcon1.rotation
+                    icon.color: statusListItem.titleIcon1.color
+                    icon.background.color: statusListItem.titleIcon1.background.color
+                    icon.background.width: statusListItem.titleIcon1.background.width
+                    icon.background.height: statusListItem.titleIcon1.background.height
+                }
+
+                StatusRoundIcon {
+                    visible: statusListItem.titleIcon2Visible
+                    icon.name: statusListItem.titleIcon2.name
+                    icon.width: statusListItem.titleIcon2.width
+                    icon.height: statusListItem.titleIcon2.height
+                    icon.rotation: statusListItem.titleIcon2.rotation
+                    icon.color: statusListItem.titleIcon2.color
+                    icon.background.color: statusListItem.titleIcon2.background.color
+                    icon.background.width: statusListItem.titleIcon2.background.width
+                    icon.background.height: statusListItem.titleIcon2.background.height
+                }
+             }
+
             StatusBaseText {
                 id: statusListItemSubTitle
                 anchors.top: statusListItemTitle.bottom

src/StatusQ/Components/StatusMemberListItem.qml

@@ -0,0 +1,76 @@
+import QtQuick 2.0
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+
+StatusListItem {
+    id: root
+
+    property string nickName: ""
+    property string userName: ""
+    property string chatKey: ""
+    property bool isMutualContact: false
+    property var trustIndicator: StatusMemberListItem.TrustedType.None
+    property bool isOnline: false
+
+    enum TrustedType {
+        None, //0
+        Verified, //1
+        Untrustworthy //2
+    }
+
+    // Subtitle composition:
+    function composeSubtitile() {
+        var compose = ""
+        if(root.userName !== "")
+            compose = "(" + root.userName + ")"
+
+        if(compose !== "" && root.chatKey !== "")
+            // Composition
+            compose += " • " + composeShortKeyChat(root.chatKey)
+
+        else if(root.chatKey !== "")
+            compose = composeShortKeyChat(root.chatKey)
+
+        return compose
+    }
+
+    // Short keychat composition:
+    function composeShortKeyChat(chatKey) {
+        return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
+    }
+
+    // root object settings:
+    title: root.nickName
+    titleIcon1Visible: root.isMutualContact
+    titleIcon2Visible: root.trustIndicator !== StatusMemberListItem.TrustedType.None
+    subTitle: composeSubtitile()
+    statusListItemSubTitle.font.pixelSize: 10
+    icon.isLetterIdenticon: !root.image.source.toString()
+    statusListItemIcon.badge.visible: true
+    statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
+
+    // Default sizes/positions by design
+    implicitWidth: 256
+    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
+    leftPadding: 8
+    image.width: 32
+    image.height: 32
+    icon.width: 32
+    icon.height: 32
+    statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
+    statusListItemIcon.anchors.top: undefined
+    statusListItemIcon.badge.border.width: 2
+    statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
+
+    // Trusted type icons definition:
+    titleIcon1.name: "tiny/tiny-contact"
+    titleIcon1.color: Theme.palette.indirectColor1
+    titleIcon1.background.color: Theme.palette.primaryColor1
+    // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
+    titleIcon2.name: trustIndicator === StatusMemberListItem.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract"
+    titleIcon2.color: Theme.palette.indirectColor1
+    titleIcon2.background.color: trustIndicator === StatusMemberListItem.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
+}

src/StatusQ/Components/StatusMessage.qml

@@ -0,0 +1,211 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import "./private/statusMessage"
+
+Rectangle {
+    id: statusMessage
+
+    enum ContentType {
+        Unknown = 0,
+        Text = 1,
+        Emoji = 2,
+        Image = 3,
+        Sticker = 4,
+        Audio = 5,
+        Transaction = 6,
+        Invitation = 7
+    }
+
+    enum ContactType {
+        STANDARD = 0,
+        RENAME = 1,
+        CONTACT = 2,
+        VERIFIED = 3,
+        UNTRUSTWORTHY = 4
+    }
+
+    property alias messageHeader: messageHeader
+    property alias quickActions:quickActionsPanel.quickActions
+    property alias statusChatInput: editComponent.inputComponent
+    property alias linksComponent: linksLoader.sourceComponent
+    property alias footerComponent: footer.sourceComponent
+    property alias timestamp: messageHeader.timestamp
+
+    property string resendText: ""
+    property string cancelButtonText: ""
+    property string saveButtonText: ""
+    property string loadingImageText: ""
+    property string errorLoadingImageText: ""
+    property string audioMessageInfoText: ""
+    property string pinnedMsgInfoText: ""
+
+    property bool isAppWindowActive: false
+    property bool editMode: false
+    property bool isAReply: false
+    property StatusMessageDetails messageDetails: StatusMessageDetails {}
+    property StatusMessageDetails replyDetails: StatusMessageDetails {}
+
+    signal profilePictureClicked()
+    signal senderNameClicked()
+    signal editCompleted(var newMsgText)
+    signal replyProfileClicked()
+    signal stickerLoaded()
+    signal imageClicked(var imageSource)
+    signal resendClicked()
+
+    height: childrenRect.height
+    color: hoverHandler.hovered ? (messageDetails.hasMention ? Theme.palette.mentionColor3 : messageDetails.isPinned ? Theme.palette.pinColor2 :  Theme.palette.baseColor2) : messageDetails.hasMention  ? Theme.palette.mentionColor4 : messageDetails.isPinned ? Theme.palette.pinColor3 : "transparent"
+
+    HoverHandler {
+        id: hoverHandler
+    }
+
+    ColumnLayout {
+        id: messageLayout
+        width: parent.width
+        StatusMessageReply {
+            Layout.fillWidth: true
+            visible: isAReply
+            replyDetails: statusMessage.replyDetails
+            onReplyProfileClicked: statusMessage.replyProfileClicked()
+            audioMessageInfoText: statusMessage.audioMessageInfoText
+        }
+        RowLayout {
+            spacing: 8
+            Layout.fillWidth: true
+            StatusSmartIdenticon {
+                id: profileImage
+                Layout.alignment: Qt.AlignTop
+                Layout.topMargin: 10
+                Layout.leftMargin: 16
+                image: messageDetails.profileImage
+                name: messageHeader.displayName
+                MouseArea {
+                    cursorShape: Qt.PointingHandCursor
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    anchors.fill: parent
+                    onClicked: statusMessage.profilePictureClicked()
+                }
+            }
+            Column {
+                spacing: 4
+                Layout.alignment: Qt.AlignTop
+                Layout.topMargin: 10
+                Layout.fillWidth: true
+                StatusPinMessageDetails {
+                    visible: messageDetails.isPinned && !editMode
+                    pinnedMsgInfoText: statusMessage.pinnedMsgInfoText
+                    pinnedBy: messageDetails.pinnedBy
+                }
+                StatusMessageHeader {
+                    id: messageHeader
+                    width: parent.width
+                    displayName: messageDetails.displayName
+                    secondaryName: messageDetails.secondaryName
+                    tertiaryDetail: messageDetails.chatID
+                    icon1.name: messageDetails.contactType === StatusMessage.ContactType.CONTACT ? "tiny/tiny-contact" : ""
+                    icon2.name: messageDetails.contactType === StatusMessage.ContactType.VERIFIED ? "tiny/tiny-checkmark" :
+                                messageDetails.contactType === StatusMessage.ContactType.UNTRUSTWORTHY ? "tiny/subtract": ""
+                    icon2.background.color:  messageDetails.contactType === StatusMessage.ContactType.UNTRUSTWORTHY ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
+                    icon2.color: Theme.palette.indirectColor1
+                    resendText: statusMessage.resendText
+                    showResendButton: messageDetails.hasExpired && messageDetails.amISender
+                    onClicked: statusMessage.senderNameClicked()
+                    onResendClicked: statusMessage.resendClicked()
+                    visible: !editMode
+                }
+                Loader {
+                    active: !editMode && !!messageDetails.messageText
+                    width: parent.width
+                    visible: active
+                    sourceComponent: StatusTextMessage {
+                        width: parent.width
+                        textField.text: messageDetails.messageText
+                    }
+                }
+                Loader {
+                    active: messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
+                    visible: active
+                    sourceComponent: StatusImageMessage {
+                        source: messageDetails.contentType === StatusMessage.ContentType.Image ? messageDetails.messageContent : ""
+                        onClicked: statusMessage.imageClicked()
+                        shapeType: messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
+                    }
+                }
+                StatusSticker {
+                    visible: messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
+                    image.source: messageDetails.messageContent
+                    onLoaded: statusMessage.stickerLoaded()
+                }
+                Loader {
+                    active: messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
+                    visible: active
+                    sourceComponent: StatusAudioMessage {
+                        audioSource: messageDetails.messageContent
+                        hovered: hoverHandler.hovered
+                        audioMessageInfoText: statusMessage.audioMessageInfoText
+                    }
+                }
+                Loader {
+                    id: linksLoader
+                    active: !!linksLoader.sourceComponent
+                    visible: active
+                }
+                Loader {
+                    id: transactionBubbleLoader
+                    active: messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
+                    visible: active
+                }
+                Loader {
+                    id: invitationBubbleLoader
+                    active: messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
+                    visible: active
+                }
+                StatusEditMessage {
+                    id: editComponent
+                    width: parent.width
+                    msgText: messageDetails.messageText
+                    visible: editMode
+                    saveButtonText: statusMessage.saveButtonText
+                    cancelButtonText: statusMessage.cancelButtonText
+                    onCancelEditClicked: editMode = false
+                    onEditCompleted: {
+                        editMode = false
+                        statusMessage.editCompleted(newMsgText)
+                    }
+                }
+                StatusBaseText {
+                    id: retryLbl
+                    color: Theme.palette.dangerColor1
+                    text: statusMessage.resendText
+                    font.pixelSize: 12
+                    visible: messageDetails.hasExpired && messageDetails.amISender && !messageDetails.timestamp && !editMode
+                    MouseArea {
+                        cursorShape: Qt.PointingHandCursor
+                        anchors.fill: parent
+                        onClicked: statusMessage.resendClicked()
+                    }
+                }
+                Loader {
+                    id: footer
+                    active: sourceComponent && !editMode
+                    visible: active
+                }
+            }
+        }
+    }
+
+    StatusMessageQuickActions {
+        id: quickActionsPanel
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        anchors.top: parent.top
+        anchors.topMargin: -8
+        visible: hoverHandler.hovered && !editMode
+    }
+}

src/StatusQ/Components/StatusMessageDetails.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+
+QtObject {
+    id: msgDetails
+
+    property bool amISender: false
+    property string displayName: ""
+    property string secondaryName: ""
+    property string chatID: ""
+    property StatusImageSettings profileImage: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+    property bool isEdited: false
+    property string messageText: ""
+    property int contentType: 0
+    property string messageContent: ""
+    property int contactType: 0
+    property bool hasMention: false
+    property bool isPinned: false
+    property string pinnedBy: ""
+    property bool hasExpired: false
+    property string timestamp: ""
+}
+
+

src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -7,6 +7,9 @@ Loader {
 
     property string name: ""
 
+    // Badge color properties must be set if badgeItem.visible = true
+    property alias badge: statusBadge
+
     property StatusIconSettings icon: StatusIconSettings {
         width: 40
         height: 40
@@ -75,4 +78,16 @@ Loader {
             letterSize: statusSmartIdenticon.icon.letterSize
         }
     }
+
+    // State component
+    StatusBadge {
+        id: statusBadge
+        visible: false
+        anchors.bottom: statusSmartIdenticon.bottom
+        anchors.right: statusSmartIdenticon.right
+        border.width: 3
+        implicitHeight: 15
+        implicitWidth: 15
+        z: 100
+    }
 }

src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml

@@ -0,0 +1,143 @@
+import QtQuick 2.3
+import QtMultimedia 5.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+// To-do update as per latest design -> Audio graphs. Also the player should ideally be in the BE?
+Rectangle {
+    id: audioChatMessage
+
+    property string audioMessageInfoText: ""
+    property bool isPreview: false
+    property bool hovered: false
+    property string audioSource: ""
+
+    width: 320
+    height: 32
+    radius: 20
+
+    color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
+
+    Audio {
+        id: audioMessage
+        source: audioSource
+        notifyInterval: 150
+    }
+
+    RowLayout {
+        id: preview
+        visible: isPreview
+        spacing: 5
+        anchors.centerIn: parent
+        StatusIcon {
+            id: icon
+            Layout.alignment: Qt.AlignVCenter
+            Layout.preferredWidth: 14
+            Layout.preferredHeight: 14
+            icon: "audio"
+            color: Theme.palette.baseColor1
+        }
+        StatusBaseText {
+            Layout.alignment: Qt.AlignVCenter
+            color: Theme.palette.baseColor1
+            text: audioMessageInfoText
+            font.pixelSize: 13
+        }
+    }
+
+    StatusFlatRoundButton {
+        id: playButton
+        width: 15
+        height: 15
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.verticalCenter: parent.verticalCenter
+        visible: !isPreview
+
+        type: StatusFlatRoundButton.Type.Tertiary
+        color: "transparent"
+        icon.name: audioMessage.playbackState == Audio.PlayingState ? "pause-filled" : "play-filled"
+        icon.color: Theme.palette.directColor1
+
+        onClicked: {
+            if(audioMessage.playbackState === Audio.PlayingState){
+                audioMessage.pause();
+            } else {
+                audioMessage.play();
+            }
+
+        }
+    }
+    
+    Rectangle {
+        height: 2
+        width: 240
+        color: Theme.palette.directColor5
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: playButton.right
+        anchors.leftMargin: 10
+        visible: !isPreview
+        Rectangle {
+            id: progress
+            height: 2
+            width: {
+                if(audioMessage.duration === 0) return 0;
+                if(audioMessage.playbackState === Audio.StoppedState) return 0;
+                return parent.width * audioMessage.position / audioMessage.duration;
+            }
+            color: Theme.palette.directColor5
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Rectangle {
+            id: handle
+            width: 10
+            height: 10
+            color: Theme.palette.directColor1
+            radius: 10
+            anchors.verticalCenter: parent.verticalCenter
+            x: progress.width
+            state: "default"
+
+            states: State {
+                name: "pressed"
+                when: handleMouseArea.pressed
+                PropertyChanges {
+                    target: handle;
+                    scale: 1.2
+                }
+            }
+            transitions: Transition {
+                NumberAnimation {
+                    properties: "scale";
+                    duration: 100;
+                    easing.type: Easing.InOutQuad
+                }
+            }
+
+            MouseArea {
+                id: handleMouseArea
+                cursorShape: Qt.PointingHandCursor
+                anchors.fill: parent
+                drag.target: parent
+                drag.axis: Drag.XAxis
+                drag.minimumX: 0
+                drag.maximumX: parent.parent.width
+                onPressed: {
+                    handle.state = "pressed"
+                    if(audioMessage.playbackState === Audio.PlayingState) {
+                        audioMessage.pause();
+                    }
+                }
+                onReleased: {
+                    handle.state = "default"
+                    audioMessage.seek(audioMessage.duration * handle.x / parent.parent.width)
+                    audioMessage.play()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Item {
+    id: editText
+
+    property alias inputComponent: chatInputLoader.sourceComponent
+
+    property string cancelButtonText: ""
+    property string saveButtonText: ""
+    property string msgText: ""
+
+    signal cancelEditClicked()
+    signal editCompleted(var newMsgText)
+
+    height: childrenRect.height
+
+    ColumnLayout {
+        spacing: 4
+        Loader {
+            id: chatInputLoader
+            // To-Do: Move to StatusChatInput once its moved to StatusQ
+            sourceComponent: StatusInput {
+                width: editText.width
+                input.placeholderText: ""
+                input.text: msgText
+                input.implicitHeight: 40
+            }
+        }
+        RowLayout {
+            spacing: 4
+            StatusFlatButton {
+                id: cancelBtn
+                text: cancelButtonText
+                size: StatusBaseButton.Size.Small
+                onClicked: cancelEditClicked()
+            }
+            StatusButton {
+                id: saveBtn
+                text: saveButtonText
+                size: StatusBaseButton.Size.Small
+                enabled: chatInputLoader.item.input.text.trim().length > 0
+                onClicked: editCompleted(chatInputLoader.item.input.text)
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml

@@ -0,0 +1,114 @@
+import QtQuick 2.3
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: imageContainer
+
+    enum ShapeType {
+        ROUNDED = 0,
+        LEFT_ROUNDED = 1,
+        RIGHT_ROUNDED = 2
+    }
+
+    property alias imageAlias: imageMessage
+
+    property bool isAppWindowActive: false
+    property url source: ""
+    property bool allCornersRounded: false
+    property bool isLeftCorner: true
+    property int imageWidth: 350
+    property int shapeType: -1
+
+    property string loadingImageText: ""
+    property string errorLoadingImageText: ""
+
+    signal clicked(var image, var mouse)
+
+    width: loadingImage.visible ? loadingImage.width : imageMessage.width
+    height: loadingImage.visible ? loadingImage.height : imageMessage.paintedHeight
+
+    QtObject {
+        id: _internal
+        property bool isAnimated: !!source && source.toString().endsWith('.gif')
+        property bool pausePlaying: false
+    }
+
+    AnimatedImage {
+        id: imageMessage
+
+        width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
+        fillMode: Image.PreserveAspectFit
+        source: imageContainer.source
+        playing: _internal.isAnimated && isAppWindowActive && !_internal.pausePlaying
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Item {
+                width: imageMessage.width
+                height: imageMessage.height
+
+                Rectangle {
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    width: imageMessage.width
+                    height: imageMessage.height
+                    radius: 16
+                }
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    width: 32
+                    height: 32
+                    radius: 4
+                    visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
+                }
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+                    width: 32
+                    height: 32
+                    radius: 4
+                    visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED  //isLeftCorner && !allCornersRounded
+                }
+            }
+        }
+
+        MouseArea {
+            cursorShape: Qt.PointingHandCursor
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            anchors.fill: parent
+            onClicked: {
+                if (imageContainer.isAnimated) {
+                    // FIXME the ListView completely removes Items that scroll out of view
+                    // so when we scroll backto the image, it gets reloaded and playing is reset
+                    _internal.pausePlaying = ! _internal.pausePlaying
+                    return
+                }
+                imageContainer.clicked(imageMessage, mouse)
+            }
+        }
+    }
+
+    Rectangle {
+        id: loadingImage
+        visible: imageMessage.status === Image.Loading
+                 || imageMessage.status === Image.Error
+        width: parent.width
+        height: width
+        border.width: 1
+        border.color: Theme.palette.baseColor2
+        radius: 8
+
+        StatusBaseText {
+            anchors.centerIn: parent
+            text: imageMessage.status === Image.Error ? errorLoadingImageText: loadingImageText
+            color: imageMessage.status === Image.Error?
+                       Theme.palette.dangerColor1 :
+                       Theme.palette.directColor1
+            font.pixelSize: 15
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml

@@ -0,0 +1,158 @@
+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
+
+Item {
+    id: statusMessageHeader
+
+    property alias displayNameLabel: primaryDisplayName
+    property alias secondaryNameLabel: secondaryDisplayName
+    property alias tertiaryDetailsLabel: tertiaryDetailText
+    property alias timestamp: timestampText
+
+    property string displayName: ""
+    property string secondaryName: ""
+    property string tertiaryDetail: ""
+    property string resendText: ""
+    property bool showResendButton: false
+    property StatusIconSettings icon1: StatusIconSettings {
+        width: dummyImage.width
+        height: dummyImage.height
+        rotation: 0
+        color: Theme.palette.indirectColor1
+        background: StatusIconBackgroundSettings {
+            width: 10
+            height: 10
+            color: Theme.palette.primaryColor1
+        }
+        // only used to get implicit width and height from the actual image
+        property Image dummyImage: Image {
+            source: icon1.name ? "../../../../assets/img/icons/" + icon1.name + ".svg": ""
+            visible: false
+        }
+    }
+    property StatusIconSettings icon2: StatusIconSettings {
+        width: dummyImage.width
+        height: dummyImage.height
+        rotation: 0
+        color: Theme.palette.primaryColor1
+        background: StatusIconBackgroundSettings {
+            width: 10
+            height: 10
+            color: Theme.palette.indirectColor1
+        }
+        // only used to get implicit width and height from the actual image
+        property Image dummyImage: Image {
+            source: icon2.name ? "../../../../assets/img/icons/" + icon2.name + ".svg": ""
+            visible: false
+        }
+    }
+
+    signal clicked()
+    signal resendClicked()
+
+    height: childrenRect.height
+    width: primaryDisplayName.width + (secondaryDisplayName.visible ? secondaryDisplayName.width + header.spacing : 0)
+
+    RowLayout {
+        id: header
+        spacing: 4
+        TextEdit {
+            id: primaryDisplayName
+            font.family: Theme.palette.baseFont.name
+            font.weight: Font.Medium
+            font.pixelSize: 15
+            font.underline: mouseArea.containsMouse
+            readOnly: true
+            wrapMode: Text.WordWrap
+            selectByMouse: true
+            color: Theme.palette.primaryColor1
+            text: displayName
+            MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                acceptedButtons: Qt.LeftButton | Qt.RightButton
+                hoverEnabled: true
+                onClicked: {
+                    statusMessageHeader.clicked()
+                }
+            }
+            Layout.alignment: Qt.AlignBottom
+        }
+        StatusRoundIcon {
+            icon.background.width: icon1.background.width
+            icon.background.height: icon1.background.height
+            icon.background.color: icon1.background.color
+            icon.width: icon1.width
+            icon.height: icon1.height
+            icon.name: icon1.name
+            icon.rotation: icon1.rotation
+            icon.color: icon1.color
+            visible: !!icon.name
+        }
+        StatusRoundIcon {
+            icon.background.width: icon2.background.width
+            icon.background.height: icon2.background.height
+            icon.background.color: icon2.background.color
+            icon.width: icon2.width
+            icon.height: icon2.height
+            icon.name: icon2.name
+            icon.rotation: icon2.rotation
+            icon.color: icon2.color
+            visible: !!icon.name
+        }
+        StatusBaseText {
+            id: secondaryDisplayName
+            Layout.alignment: Qt.AlignVCenter
+            color: Theme.palette.baseColor1
+            font.pixelSize: 10
+            text: secondaryName
+            visible: !!text
+        }
+        StatusBaseText {
+            id: dotSeparator1
+            Layout.fillHeight: true
+            font.pixelSize: 10
+            color: Theme.palette.baseColor1
+            text: "."
+            visible: secondaryDisplayName.visible
+        }
+        StatusBaseText {
+            id: tertiaryDetailText
+            Layout.alignment: Qt.AlignVCenter
+            Layout.maximumWidth: 58
+            font.pixelSize: 10
+            elide: Text.ElideMiddle
+            color: Theme.palette.baseColor1
+            text: tertiaryDetail
+        }
+        StatusBaseText {
+            id: dotSeparator2
+            Layout.fillHeight: true
+            font.pixelSize: 10
+            color: Theme.palette.baseColor1
+            text: "."
+            visible: tertiaryDetailText.visible
+        }
+        StatusTimeStampLabel {
+            id: timestampText
+        }
+        StatusBaseText {
+            Layout.alignment: Qt.AlignVCenter
+            color: Theme.palette.dangerColor1
+            font.pixelSize: 12
+            text: statusMessageHeader.resendText
+            visible: showResendButton && !!timestampText.text
+            MouseArea {
+                cursorShape: Qt.PointingHandCursor
+                anchors.fill: parent
+                onClicked: statusMessageHeader.resendClicked()
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: buttonsContainer
+
+    property list<Item> quickActions
+
+    QtObject {
+        id: _internal
+        readonly property int containerMargin: 2
+    }
+
+    width: buttonRow.width + _internal.containerMargin * 2
+    height: 36
+    radius: 8
+    color: Theme.palette.statusSelect.menuItemBackgroundColor
+
+    layer.enabled: true
+    layer.effect: DropShadow {
+        width: buttonsContainer.width
+        height: buttonsContainer.height
+        x: buttonsContainer.x
+        y: buttonsContainer.y + 10
+        horizontalOffset: 0
+        verticalOffset: 2
+        source: buttonsContainer
+        radius: 10
+        samples: 15
+        color: Theme.palette.dropShadow
+    }
+
+    Row {
+        id: buttonRow
+        spacing: _internal.containerMargin
+        anchors.left: parent.left
+        anchors.leftMargin: _internal.containerMargin
+        anchors.verticalCenter: buttonsContainer.verticalCenter
+        height: parent.height - 2 * _internal.containerMargin
+    }
+
+    onQuickActionsChanged: {
+        for (let idx in quickActions) {
+            quickActions[idx].parent = buttonRow
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml

@@ -0,0 +1,125 @@
+import QtQuick 2.14
+import QtQuick.Shapes 1.13
+import QtGraphicalEffects 1.13
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Loader {
+    id: chatReply
+
+    property StatusMessageDetails replyDetails
+    property string audioMessageInfoText: ""
+
+    signal replyProfileClicked()
+
+    active: visible
+
+    sourceComponent: RowLayout {
+        id: replyLayout
+        spacing: 8
+        Shape {
+            id: replyCorner
+            Layout.alignment: Qt.AlignTop
+            Layout.leftMargin: 35
+            Layout.topMargin: profileImage.height/2
+            Layout.preferredWidth: 20
+            Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
+            asynchronous: true
+            antialiasing: true
+            ShapePath {
+                strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4)
+                strokeWidth: 3
+                fillColor: "transparent"
+                capStyle: ShapePath.RoundCap
+                joinStyle: ShapePath.RoundJoin
+                startX: 20
+                startY: 0
+                PathLine { x: 10; y: 0 }
+                PathArc {
+                    x: 0; y: 10
+                    radiusX: 13
+                    radiusY: 13
+                    direction: PathArc.Counterclockwise
+                }
+                PathLine { x: 0; y: messageLayout.height}
+            }
+        }
+        ColumnLayout {
+            id: messageLayout
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignTop
+            Layout.topMargin: 4
+            RowLayout {
+                StatusSmartIdenticon {
+                    id: profileImage
+                    Layout.alignment: Qt.AlignTop
+                    image: replyDetails.profileImage
+                    name: replyDetails.displayName
+                    MouseArea {
+                        cursorShape: Qt.PointingHandCursor
+                        acceptedButtons: Qt.LeftButton | Qt.RightButton
+                        anchors.fill: parent
+                        onClicked: replyProfileClicked()
+                    }
+                }
+                TextEdit {
+                    Layout.alignment: Qt.AlignVCenter
+                    color: Theme.palette.baseColor1
+                    selectionColor: Theme.palette.primaryColor3
+                    selectedTextColor: Theme.palette.directColor1
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                    selectByMouse: true
+                    readOnly: true
+                    text: replyDetails.displayName
+                }
+            }
+            StatusTextMessage {
+                Layout.fillWidth: true
+                textField.text: replyDetails.messageText
+                textField.font.pixelSize: 13
+                textField.color: Theme.palette.baseColor1
+                textField.height: 18
+                clip: true
+                visible: !!replyDetails.messageText
+            }
+            StatusImageMessage {
+                Layout.fillWidth: true
+                Layout.preferredHeight: imageAlias.paintedHeight
+                imageWidth: 56
+                source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
+                visible: replyDetails.contentType === StatusMessage.ContentType.Image
+                shapeType: StatusImageMessage.ShapeType.ROUNDED
+            }
+            Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 48
+                Layout.alignment: Qt.AlignLeft
+                visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
+                StatusSticker {
+                    image.width: 48
+                    image.height: 48
+                    image.source: replyDetails.messageContent
+                }
+            }
+            Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 22
+                visible: replyDetails.contentType === StatusMessage.ContentType.Audio
+                StatusAudioMessage {
+                    id: audioMessage
+                    anchors.left: parent.left
+                    width: 125
+                    height: 22
+                    isPreview: true
+                    audioSource: replyDetails.messageContent
+                    audioMessageInfoText: chatReply.audioMessageInfoText
+                }
+            }
+        }
+    }
+}
+

src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Loader {
+    property string pinnedMsgInfoText: ""
+    property string pinnedBy: ""
+
+    active: visible
+
+    sourceComponent: Rectangle {
+        height: 24
+        width: layout.width + 16
+        color: Theme.palette.pinColor2
+        radius: 12
+        RowLayout {
+            id: layout
+            anchors.centerIn: parent
+            StatusIcon {
+                Layout.alignment: Qt.AlignVCenter
+                Layout.preferredWidth: 16
+                Layout.preferredHeight: 16
+                color: Theme.palette.pinColor1
+                icon: "tiny/pin"
+            }
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                Layout.leftMargin: -4
+                color: Theme.palette.directColor1
+                font.pixelSize: 13
+                text: pinnedMsgInfoText
+            }
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                Layout.leftMargin: -4
+                color: Theme.palette.directColor1
+                font.pixelSize: 13
+                font.weight: Font.Medium
+                text: pinnedBy
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusSticker.qml

@@ -0,0 +1,125 @@
+import QtQuick 2.3
+import QtGraphicalEffects 1.13
+
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Loader {
+    id: statusSticker
+
+    property bool noHover: false
+    property bool noMouseArea: false
+    property StatusImageSettings image: StatusImageSettings {
+        width: 140
+        height: 140
+    }
+
+    signal loaded()
+    signal clicked()
+
+    active: visible
+
+    sourceComponent: Rectangle {
+        id: root
+
+        color: Theme.palette.baseColor2
+        radius: 16
+
+        width: image.width
+        height: image.height
+
+        function reload() {
+            // From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop)
+            // Note: Changing this property dynamically causes the image source to
+            // be reloaded, potentially even from the network, if it is not in the
+            // disk cache.
+            const oldSource = sticker.source
+            sticker.cache = false
+            sticker.sourceSize.width += 1
+            sticker.sourceSize.width -= 1
+            sticker.cache = true
+        }
+
+        Loader {
+            id: loader
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        Image {
+            id: sticker
+            anchors.fill: parent
+            horizontalAlignment: Image.AlignHCenter
+            verticalAlignment: Image.AlignVCenter
+            cache: true
+            source: image.source
+
+            onStatusChanged: {
+                if (status === Image.Ready) {
+                    statusSticker.loaded()
+                }
+            }
+            MouseArea {
+                enabled: !noMouseArea && (sticker.status === Image.Ready)
+                cursorShape: noHover ? Qt.ArrowCursor : Qt.PointingHandCursor
+                anchors.fill: parent
+                onClicked: statusSticker.clicked()
+            }
+        }
+
+        Component {
+            id: loadingIndicator
+            StatusLoadingIndicator {
+                width: 24
+                height: 24
+                color: Theme.palette.baseColor1
+            }
+        }
+
+        Component {
+            id: reload
+            StatusIcon {
+                icon: "refresh"
+                color: Theme.palette.directColor1
+                mipmap: false
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: root.reload()
+                }
+            }
+        }
+
+        states: [
+            State {
+                name: "loading"
+                when: sticker.status === Image.Loading
+                PropertyChanges {
+                    target: loader
+                    sourceComponent: loadingIndicator
+                }
+            },
+            State {
+                name: "error"
+                when: sticker.status === Image.Error
+                PropertyChanges {
+                    target: loader
+                    sourceComponent: reload
+                }
+            },
+            State {
+                name: "ready"
+                when: sticker.status === Image.Ready
+                PropertyChanges {
+                    target: root
+                    color: "transparent"
+                }
+                PropertyChanges {
+                    target: loader
+                    sourceComponent: undefined
+                }
+            }
+        ]
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml

@@ -0,0 +1,87 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.0
+
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: textMessage
+
+    property int contentType: 0
+    property alias textField: chatText
+
+    signal linkActivated(url link)
+
+    implicitHeight: showMoreLoader.active ? childrenRect.height : chatText.height
+
+    QtObject {
+        id: _internal
+        property bool readMore: false
+        property bool veryLongChatText: chatText.length > 1000
+    }
+
+    TextEdit {
+        id: chatText
+        visible: !showMoreLoader.active || _internal.readMore
+        selectedTextColor: Theme.palette.directColor1
+        selectionColor: Theme.palette.primaryColor3
+        color: Theme.palette.directColor1
+        font.family: Theme.palette.baseFont.name
+        font.pixelSize: 15
+        textFormat: Text.RichText
+        wrapMode: Text.Wrap
+        readOnly: true
+        selectByMouse: true
+        height: _internal.veryLongChatText && !_internal.readMore ? Math.min(implicitHeight, 200) : implicitHeight
+        width: parent.width
+        clip: height < implicitHeight
+        onLinkActivated: textMessage.linkActivated(link)
+        onLinkHovered: {
+            cursorShape: Qt.PointingHandCursor
+        }
+    }
+
+    Loader {
+        id: mask
+        anchors.fill: chatText
+        active: showMoreLoader.active
+        visible: false
+        sourceComponent: LinearGradient {
+            start: Qt.point(0, 0)
+            end: Qt.point(0, chatText.height)
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "white" }
+                GradientStop { position: 0.85; color: "white" }
+                GradientStop { position: 1; color: "transparent" }
+            }
+        }
+    }
+
+    Loader {
+        id: opMask
+        active: showMoreLoader.active && !_internal.readMore
+        anchors.fill: chatText
+        sourceComponent: OpacityMask {
+            source: chatText
+            maskSource: mask
+        }
+    }
+
+    Loader {
+        id: showMoreLoader
+        active: _internal.veryLongChatText
+        anchors.top: chatText.bottom
+        anchors.topMargin: -10
+        anchors.horizontalCenter: parent.horizontalCenter
+        sourceComponent: StatusRoundButton {
+            implicitWidth: 24
+            implicitHeight: 24
+            type: StatusRoundButton.Type.Secondary
+            icon.name: _internal.readMore ? "chevron-up":  "chevron-down"
+            onClicked: {
+                _internal.readMore = !_internal.readMore
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusBaseText {
+    id: timestampLabe;
+    property alias tooltip: tooltip
+
+    Layout.alignment: Qt.AlignVCenter
+    color: Theme.palette.baseColor1
+    font.pixelSize: 10
+    visible: !!text
+    StatusToolTip {
+        id: tooltip
+        visible: hhandler.hovered && !!text
+        maxWidth: 350
+    }
+    HoverHandler {
+        id: hhandler
+    }
+}

src/StatusQ/Components/qmldir

@@ -15,6 +15,7 @@ StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
 StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusMemberListItem 0.1 StatusMemberListItem.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
 StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
@@ -23,3 +24,5 @@ StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
 StatusListItemBadge 0.1 StatusListItemBadge.qml
 StatusExpandableItem 0.1 StatusExpandableItem.qml
 StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
+StatusMessage 0.1 StatusMessage.qml
+StatusMessageDetails 0.1 StatusMessageDetails.qml

src/StatusQ/Controls/StatusAccountSelector.qml

@@ -221,7 +221,7 @@ Item {
 
                 StatusBaseText {
                     id: accountName
-                    text: name
+                    text: model.name
                     elide: Text.ElideRight
                     font.pixelSize: 15
                     anchors.left: parent.left

src/StatusQ/Controls/StatusBanner.qml

@@ -0,0 +1,89 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Column {
+    id: statusBanner
+    width: parent.width
+
+    property string statusText
+    property int type: StatusBanner.Type.Info
+    property int textPixels: 15
+    property int statusBannerHeight: 38
+
+    // "private" properties
+    QtObject {
+           id: d
+           property color backgroundColor
+           property color bordersColor
+           property color fontColor
+    }
+
+    enum Type {
+        Info, // 0
+        Danger, // 1
+        Success, // 2
+        Warning // 3
+    }    
+
+    // Component definition
+    Rectangle {
+        id: topDiv
+        color: d.bordersColor
+        height: 1
+        width: parent.width
+    }
+
+    Rectangle {
+        id: box
+        width: parent.width
+        height: statusBanner.statusBannerHeight
+        color: d.backgroundColor
+
+        StatusBaseText {
+            id: statusTxt
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: statusBanner.textPixels
+            text: statusBanner.statusText
+            color: d.fontColor
+        }
+    }
+
+    Rectangle {
+        id: bottomDiv
+        color: d.bordersColor
+        height: 1
+        width: parent.width
+    }
+
+    // Behavior
+    states: [
+        State {
+            when: statusBanner.type === StatusBanner.Type.Info
+            PropertyChanges { target: d; backgroundColor: Theme.palette.primaryColor3}
+            PropertyChanges { target: d; bordersColor: Theme.palette.primaryColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.primaryColor1}
+        },
+        State {
+            when: statusBanner.type === StatusBanner.Type.Danger
+            PropertyChanges { target: d; backgroundColor: Theme.palette.dangerColor3}
+            PropertyChanges { target: d; bordersColor: Theme.palette.dangerColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.dangerColor1}
+        },
+        State {
+            when: statusBanner.type === StatusBanner.Type.Success
+            PropertyChanges { target: d; backgroundColor: Theme.palette.successColor2}
+            PropertyChanges { target: d; bordersColor: Theme.palette.successColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.successColor1}
+        },
+        State {
+            when: statusBanner.type === StatusBanner.Type.Warning
+            PropertyChanges { target: d; backgroundColor: Theme.palette.pinColor3}
+            PropertyChanges { target: d; bordersColor: Theme.palette.pinColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.pinColor1}
+        }
+    ]
+}

src/StatusQ/Controls/StatusBaseInput.qml

@@ -142,12 +142,11 @@ Item {
                     return clearable ? clearButtonLoader.width + 12 : 
                         (statusIcon.visible && !leftIcon) || !!statusBaseInput.component ? 8 : 0
                 }
-                anchors.topMargin: statusBaseInput.topPadding
-                anchors.bottomMargin: statusBaseInput.bottomPadding
                 contentWidth: edit.paintedWidth
                 contentHeight: edit.paintedHeight
                 boundsBehavior: Flickable.StopAtBounds
                 QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
+                clip: true
                 function ensureVisible(r) {
                     if (contentX >= r.x)
                         contentX = r.x;

src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+StatusProgressBar {
+    id: control
+
+    property var strength
+    property string labelVeryWeak: "Very weak"
+    property string labelWeak: "Weak"
+    property string labelSoso: "So-so"
+    property string labelGood: "Good"
+    property string labelGreat: "Great"
+
+    enum Strength {
+        VeryWeak, // 0
+        Weak, // 1
+        SoSo, // 2
+        Good, // 3
+        Great // 4
+    }
+
+    // Behavior:
+    states: [
+        // Strength states definition:
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.VeryWeak
+            PropertyChanges { target: control; fillColor : Theme.palette.dangerColor1}
+            PropertyChanges { target: control; text: labelVeryWeak}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.Weak
+            PropertyChanges { target: control; fillColor : Theme.palette.pinColor1}
+            PropertyChanges { target: control; text: labelWeak}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.SoSo
+            PropertyChanges { target: control; fillColor : Theme.palette.miscColor7}
+            PropertyChanges { target: control; text: labelSoso}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.Good
+            PropertyChanges { target: control; fillColor : Theme.palette.miscColor12}
+            PropertyChanges { target: control; text: labelGood}
+        },
+        State {
+            when: control.strength === StatusPasswordStrengthIndicator.Strength.Great
+            PropertyChanges { target: control; fillColor : Theme.palette.successColor1}
+            PropertyChanges { target: control; text: labelGreat}
+        }
+    ]
+}

src/StatusQ/Controls/StatusProgressBar.qml

@@ -0,0 +1,42 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+ProgressBar {
+    id: control
+
+    property string text
+    property color fillColor
+    property color backgroundColor: Theme.palette.directColor8
+
+    width: 416
+    height: 16
+    clip: true
+
+    background: Rectangle {
+        implicitWidth: parent.width
+        implicitHeight: parent.height
+        color: control.backgroundColor
+        radius: 5
+    }
+    contentItem: Item {
+        implicitHeight: parent.height
+
+        Rectangle {
+            id: bar
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: control.fillColor
+            radius: 5
+
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: control.text
+                font.pixelSize: 12
+                color: Theme.palette.indirectColor1
+            }
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -2,6 +2,7 @@ module StatusQ.Controls
 
 StatusAccountSelector 0.1 StatusAccountSelector.qml
 StatusAssetSelector 0.1 StatusAssetSelector.qml
+StatusBanner 0.1 StatusBanner.qml
 StatusChatCommandButton 0.1 StatusChatCommandButton.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
@@ -23,6 +24,8 @@ StatusSelect 0.1 StatusSelect.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
 StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml
+StatusProgressBar 0.1 StatusProgressBar.qml
+StatusPasswordStrengthIndicator 0.1 StatusPasswordStrengthIndicator.qml
 StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml

src/StatusQ/Core/StatusAppNavBarFilterModel.qml

@@ -1,46 +0,0 @@
-import QtQuick 2.13
-import QtQml.Models 2.13
-
-DelegateModel {
-    id: delegateModel
-
-    property var filterAcceptsItem: function(item) { return true; }
-
-    signal aboutToUpdateFilteredModel()
-
-    function update() {
-        delegateModel.aboutToUpdateFilteredModel()
-
-        if (items.count > 0) {
-            items.setGroups(0, items.count, "items");
-        }
-
-        var visible = [];
-        for (var i = 0; i < items.count; ++i) {
-            var item = items.get(i);
-            if (filterAcceptsItem(item.model)) {
-                visible.push(item);
-            }
-        }
-
-        for (i = 0; i < visible.length; ++i) {
-            item = visible[i];
-            item.inVisible = true;
-            if (item.visibleIndex !== i) {
-                visibleItems.move(item.visibleIndex, i, 1);
-            }
-        }
-    }
-
-    items.onChanged: update()
-    onFilterAcceptsItemChanged: update()
-
-    groups: DelegateModelGroup {
-        id: visibleItems
-
-        name: "visible"
-        includeByDefault: false
-    }
-
-    filterOnGroup: "visible"
-}

src/StatusQ/Core/Theme/StatusColors.qml

@@ -31,6 +31,8 @@ QtObject {
         'green2': '#7CDA00',
         'green3': '#60C370',
         'green4': '#93DB33',
+        'green5': '#9EA85D',
+        'green6': '#AFB551',
 
         'grey': '#F0F2F5',
         'grey2': '#F6F8FA',

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -145,6 +145,7 @@ ThemePalette {
     miscColor9: getColor('moss2')
     miscColor10: getColor('brown3')
     miscColor11: getColor('yellow2')
+    miscColor12: getColor('green6')
 
     accountColors: [
         getColor('blue5'),

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -143,6 +143,7 @@ ThemePalette {
     miscColor9: getColor('moss')
     miscColor10: getColor('brown')
     miscColor11: getColor('brown2')
+    miscColor12: getColor('green5')
 
     accountColors: [
         getColor('blue'),

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -88,6 +88,7 @@ QtObject {
     property color miscColor9
     property color miscColor10
     property color miscColor11
+    property color miscColor12
 
     property var accountColors: []
 

src/StatusQ/Core/qmldir

@@ -7,4 +7,3 @@ StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
 StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 StatusTooltipSettings 0.1 StatusTooltipSettings.qml
-StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml

src/StatusQ/Layout/StatusAppNavBar.qml

@@ -1,35 +1,40 @@
 import QtQuick 2.13
 import QtQuick.Layouts 1.13
 import QtQuick.Controls 2.13
-import QtQml.Models 2.13
-import Qt.labs.qmlmodels 1.0
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
 
 Rectangle {
     id: statusAppNavBar
 
+    property StatusNavBarTabButton navBarChatButton
+    property StatusNavBarTabButton navBarProfileButton
+
+    property list<StatusNavBarTabButton> navBarTabButtons
+    property alias navBarCommunityTabButtons: navBarCommunityTabButtons
+
+    property int navBarContentHeight: 0
+    property int navBarContentHeightWithoutCommunityButtons: 0
+
     width: 78
     implicitHeight: 600
     color: Theme.palette.statusAppNavBar.backgroundColor
 
-    property var sectionModel: []
-    property string communityTypeRole: ""
-    property int communityTypeValue: -1
-    property int navBarButtonSpacing: 12
+    Component.onCompleted: {
+        navBarContentHeightWithoutCommunityButtons = (navBarChatButtonSlot.anchors.topMargin + navBarChatButtonSlot.height) + 
+                                  (separator.anchors.topMargin + separator.height) +
+                                  (navBarTabButtonsSlot.height + navBarTabButtonsSlot.anchors.topMargin + navBarTabButtonsSlot.anchors.bottomMargin)
+        navBarContentHeight = navBarContentHeightWithoutCommunityButtons +
+                              (navBarCommunityTabButtonsSlot.height + navBarScrollSection.anchors.topMargin)
+    }
 
-    property StatusNavBarTabButton navBarProfileButton
-    property Component regularNavBarButton
-    property Component communityNavBarButton
-
-    property var filterRegularItem: function(item) { return true; }
-    property var filterCommunityItem: function(item) { return true; }
-
-    signal aboutToUpdateFilteredRegularModel()
-    signal aboutToUpdateFilteredCommunityModel()
+    onNavBarChatButtonChanged: {
+        if (!!navBarChatButton) {
+            navBarChatButton.parent = navBarChatButtonSlot
+        }
+    }
 
     onNavBarProfileButtonChanged: {
         if (!!navBarProfileButton) {
@@ -37,134 +42,115 @@ Rectangle {
         }
     }
 
-    StatusAppNavBarFilterModel {
-        id: navBarModel
-
-        filterAcceptsItem: filterRegularItem
-
-        model: statusAppNavBar.sectionModel
-
-        onAboutToUpdateFilteredModel: {
-            statusAppNavBar.aboutToUpdateFilteredRegularModel()
-        }
-
-        DelegateChooser {
-            id: delegateChooser
-            role: communityTypeRole
-            DelegateChoice { roleValue: communityTypeValue; delegate: communityNavButton }
-            DelegateChoice { delegate: regularNavBarButton }
-        }
-
-        delegate: delegateChooser
-    }
-
-    Component {
-        id: communityNavButton
-
-        Item {
-            width: parent.width
-            height: (necessaryHightForCommunities > maxHightForCommunities)?
-                        maxHightForCommunities : necessaryHightForCommunities
-
-            property int communityNavBarButtonHeight: 40
-
-            property int maxHightForCommunities: {
-                let numOfOtherThanCommunityBtns = navBarListView.model.count - 1
-                let numOfSpacingsForNavBar = navBarListView.model.count - 1
-
-                return navBarListView.height -
-                        numOfOtherThanCommunityBtns * communityNavBarButtonHeight -
-                        numOfSpacingsForNavBar * navBarButtonSpacing
-            }
-
-            property int necessaryHightForCommunities: {
-                let numOfSpacingsForCommunities = communityListView.model.count - 1
-                return communityListView.model.count * communityNavBarButtonHeight +
-                        numOfSpacingsForCommunities * navBarButtonSpacing +
-                        separatorBottom.height
-            }
-
-            StatusAppNavBarFilterModel {
-                id: navBarCommunityModel
-
-                filterAcceptsItem: filterCommunityItem
-
-                model: statusAppNavBar.sectionModel
-
-                delegate: communityNavBarButton
-
-                onAboutToUpdateFilteredModel: {
-                    statusAppNavBar.aboutToUpdateFilteredCommunityModel()
-                }
-            }
-
-            Item {
-                id: separatorTop
-                width: parent.width
-                height: navBarButtonSpacing
-                anchors.top: parent.top
-                visible: parent.necessaryHightForCommunities > parent.maxHightForCommunities
-
-                Rectangle {
-                    height: 1
-                    width: 30
-                    color: Theme.palette.directColor7
-                    anchors.top: parent.top
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-            }
-
-            ListView {
-                id: communityListView
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.top: separatorTop.visible? separatorTop.bottom : parent.top
-                anchors.bottom: separatorBottom.top
-                clip: true
-
-                spacing: navBarButtonSpacing
-
-                model: navBarCommunityModel
-            }
-
-            Item {
-                id: separatorBottom
-                width: parent.width
-                height: navBarButtonSpacing
-                anchors.bottom: parent.bottom
-
-                Rectangle {
-                    height: 1
-                    width: 30
-                    color: Theme.palette.directColor7
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
+    onNavBarTabButtonsChanged: {
+        if (navBarTabButtons.length) {
+            for (let idx in navBarTabButtons) {
+                navBarTabButtons[idx].parent = navBarTabButtonsSlot
             }
         }
     }
 
-    ListView {
-        id: navBarListView
-        anchors.left: parent.left
-        anchors.right: parent.right
+    Item {
+        id: navBarChatButtonSlot
         anchors.top: parent.top
         anchors.topMargin: 48
-        anchors.bottom: navBarProfileButtonSlot.top
-        anchors.bottomMargin: navBarButtonSpacing
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: visible ? statusAppNavBar.navBarChatButton.height : 0
+        width: visible ? statusAppNavBar.navBarChatButton.width : 0
+        visible: !!statusAppNavBar.navBarChatButton
+    }
 
-        spacing: navBarButtonSpacing
+    Rectangle {
+        id: separatorTop
+        height: 1
+        width: 30
+        color: Theme.palette.directColor7
+        anchors.top: navBarChatButtonSlot.bottom
+        anchors.topMargin: 16
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: separator.anchors.topMargin === 0
+    }
 
-        model: navBarModel
+    ScrollView {
+        id: navBarScrollSection
+        anchors.top: separatorTop.visible ? separatorTop.bottom : navBarChatButtonSlot.bottom
+        anchors.topMargin: separatorTop.visible ? 0 : 12
+        anchors.horizontalCenter: statusAppNavBar.horizontalCenter
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        clip: true
+
+        Component.onCompleted: {
+            if (navBarContentHeight > statusAppNavBar.height) {
+                height = statusAppNavBar.height - 
+                         statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
+                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin) -
+                         navBarProfileButtonSlot.height -
+                         navBarProfileButtonSlot.anchors.bottomMargin
+                bottomPadding = 16
+                topPadding = 16
+            } else {
+                height = navBarCommunityTabButtons.count > 0 ? navBarCommunityTabButtonsSlot.implicitHeight : 0
+            }
+        }
+
+        Column {
+            id: navBarCommunityTabButtonsSlot
+            width: navBarScrollSection.width
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 12
+
+            onImplicitHeightChanged: {
+                statusAppNavBar.Component.onCompleted()
+                navBarTabButtonsSlot.Component.onCompleted()
+                navBarScrollSection.Component.onCompleted()
+            }
+
+            Repeater {
+                id: navBarCommunityTabButtons
+            }
+        }
+    }
+
+    Rectangle {
+        id: separator
+        height: 1
+        width: 30
+        color: Theme.palette.directColor7
+        anchors.top: !!navBarCommunityTabButtons.model && navBarCommunityTabButtons.count > 0 ? navBarScrollSection.bottom : navBarChatButtonSlot.bottom
+        anchors.topMargin: navBarScrollSection.height < navBarCommunityTabButtonsSlot.implicitHeight ? 0 : 16
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: navBarChatButton !== null && navBarTabButtons.length > 0
+    }
+
+    Column {
+        id: navBarTabButtonsSlot
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 12
+
+        Component.onCompleted: {
+            if (navBarContentHeight > statusAppNavBar.height) {
+                anchors.top = undefined
+                anchors.topMargin = 0
+                anchors.bottom = navBarProfileButtonSlot.top
+                anchors.bottomMargin = 32
+            } else {
+                anchors.bottom = undefined
+                anchors.bottomMargin = 0
+                anchors.top = separator.visible ? separator.bottom : parent.top
+                anchors.topMargin = separator.visible ? 16 : navBarChatButtonSlot.anchors.topMargin
+            }
+        }
     }
 
     Item {
         id: navBarProfileButtonSlot
         anchors.horizontalCenter: parent.horizontalCenter
-        height: visible? statusAppNavBar.navBarProfileButton.height : 0
-        width: visible? statusAppNavBar.navBarProfileButton.width : 0
+        height: visible ? statusAppNavBar.navBarProfileButton.height : 0
+        width: visible ? statusAppNavBar.navBarProfileButton.width : 0
         visible: !!statusAppNavBar.navBarProfileButton
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: visible ? 32 : 0
+        anchors.bottomMargin: visible ? 23 : 0
     }
 }
+

src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml

@@ -135,17 +135,15 @@ Row {
                 font.bold: true
                 elide: statusImageWithTitle.titleElide
                 color: Theme.palette.directColor1
-                width: !editButton.visible ? parent.width :
-                                             parent.width - editButton.width - parent.spacing
+                width: implicitWidth > parent.width - editButton.width ? parent.width - editButton.width: implicitWidth
             }
             StatusFlatRoundButton {
                 id: editButton
                 objectName: "editAvatarbButton"
                 visible: statusImageWithTitle.editable
-                anchors.bottom: headerTitle.bottom
-                anchors.bottomMargin: -1
+                anchors.verticalCenter: headerTitle.verticalCenter
                 height: 24
-                width: 24
+                width: visible ? 24 : 0
                 type: StatusFlatRoundButton.Type.Secondary
                 icon.name: "pencil"
                 icon.color: Theme.palette.directColor1

src/assets/img/icons/audio.svg

@@ -0,0 +1,9 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99971 0.668945C6.71994 0.668945 6.49314 0.895744 6.49314 1.17551V10.8238C6.49314 11.1036 6.71994 11.3304 6.99971 11.3304C7.27948 11.3304 7.50628 11.1036 7.50628 10.8238V1.17552C7.50628 0.895744 7.27948 0.668945 6.99971 0.668945Z" fill="#939BA1"/>
+<path d="M2.38654 2.97442C2.38654 2.69465 2.61333 2.46785 2.89311 2.46785C3.17288 2.46785 3.39968 2.69465 3.39968 2.97442V9.02493C3.39968 9.3047 3.17288 9.5315 2.89311 9.5315C2.61333 9.5315 2.38654 9.3047 2.38654 9.02493V2.97442Z" fill="#939BA1"/>
+<path d="M4.43992 4.43813C4.43992 4.15836 4.66672 3.93156 4.94649 3.93156C5.22626 3.93156 5.45306 4.15836 5.45306 4.43813V7.56126C5.45306 7.84103 5.22626 8.06783 4.94649 8.06783C4.66672 8.06783 4.43992 7.84103 4.43992 7.56126V4.43813Z" fill="#939BA1"/>
+<path d="M0.333313 5.35146C0.333313 5.07169 0.560112 4.84489 0.839883 4.84489C1.11965 4.84489 1.34645 5.07169 1.34645 5.35146V6.6479C1.34645 6.92767 1.11965 7.15447 0.839883 7.15447C0.560112 7.15447 0.333313 6.92767 0.333313 6.6479V5.35146Z" fill="#939BA1"/>
+<path d="M9.0531 3.93156C8.77333 3.93156 8.54653 4.15836 8.54653 4.43813V7.56123C8.54653 7.841 8.77333 8.0678 9.0531 8.0678C9.33287 8.0678 9.55967 7.841 9.55967 7.56123V4.43813C9.55967 4.15836 9.33287 3.93156 9.0531 3.93156Z" fill="#939BA1"/>
+<path d="M11.1063 2.46785C10.8266 2.46785 10.5998 2.69465 10.5998 2.97442V9.02493C10.5998 9.3047 10.8266 9.5315 11.1063 9.5315C11.3861 9.5315 11.6129 9.3047 11.6129 9.02493V2.97442C11.6129 2.69465 11.3861 2.46785 11.1063 2.46785Z" fill="#939BA1"/>
+<path d="M12.6531 5.35146C12.6531 5.07169 12.8799 4.84489 13.1597 4.84489C13.4395 4.84489 13.6663 5.07169 13.6663 5.35146V6.64791C13.6663 6.92769 13.4395 7.15448 13.1597 7.15448C12.8799 7.15448 12.6531 6.92769 12.6531 6.64791V5.35146Z" fill="#939BA1"/>
+</svg>

src/assets/img/icons/tiny/subtract.svg

@@ -0,0 +1,3 @@
+<svg width="2" height="8" viewBox="0 0 2 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.78125 6.65625C1.78125 7.08772 1.43147 7.4375 1 7.4375C0.568528 7.4375 0.21875 7.08772 0.21875 6.65625C0.21875 6.22478 0.568528 5.875 1 5.875C1.43147 5.875 1.78125 6.22478 1.78125 6.65625ZM1 0.875C0.654822 0.875 0.375 1.15482 0.375 1.5V4.3125C0.375 4.65768 0.654822 4.9375 1 4.9375C1.34518 4.9375 1.625 4.65768 1.625 4.3125V1.5C1.625 1.15482 1.34518 0.875 1 0.875Z" fill="white"/>
+</svg>

src/assets/img/icons/tiny/tiny-checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="4" viewBox="0 0 6 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.21097 2.79222L4.73854 0.255725C4.91216 0.0814879 5.19307 0.0808952 5.36869 0.257127C5.54308 0.432138 5.54399 0.714976 5.37008 0.889498L2.52534 3.74428C2.43901 3.83091 2.32615 3.87462 2.2129 3.875C2.09629 3.87412 1.98311 3.8311 1.89811 3.7458L0.629196 2.47241C0.456409 2.29901 0.456496 2.01779 0.632108 1.84156C0.806504 1.66655 1.09029 1.66758 1.26074 1.83864L2.21097 2.79222Z" fill="white"/>
+</svg>

src/assets/img/icons/tiny/tiny-contact.svg

@@ -0,0 +1,4 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.99996 3.6875C3.77661 3.6875 4.40621 3.0579 4.40621 2.28125C4.40621 1.5046 3.77661 0.875 2.99996 0.875C2.22331 0.875 1.59371 1.5046 1.59371 2.28125C1.59371 3.0579 2.22331 3.6875 2.99996 3.6875Z" fill="white"/>
+<path d="M0.577101 6.50632C0.852422 5.42485 1.83278 4.625 2.99996 4.625C4.16714 4.625 5.1475 5.42485 5.42282 6.50632C5.50798 6.84083 5.22014 7.125 4.87496 7.125H1.12496C0.779781 7.125 0.491942 6.84083 0.577101 6.50632Z" fill="white"/>
+</svg>

statusq.qrc

@@ -276,7 +276,6 @@
         <file>src/assets/img/icons/snt.svg</file>
         <file>src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml</file>
         <file>src/StatusQ/Controls/StatusSelectableText.qml</file>
-        <file>src/StatusQ/Core/StatusAppNavBarFilterModel.qml</file>
         <file>src/assets/img/icons/tiny/add.svg</file>
         <file>src/assets/img/icons/tiny/arrow-down.svg</file>
         <file>src/assets/img/icons/tiny/channel-white.svg</file>
@@ -316,5 +315,9 @@
         <file>src/assets/img/icons/tiny/time.svg</file>
         <file>src/assets/img/icons/tiny/tribute-to-talk.svg</file>
         <file>src/assets/img/icons/tiny/warning.svg</file>
+        <file>src/StatusQ/Controls/StatusBanner.qml</file>
+        <file>src/StatusQ/Controls/StatusProgressBar.qml</file>
+        <file>src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
+        <file>src/StatusQ/Components/StatusMemberListItem.qml</file>
     </qresource>
 </RCC>