feat(StatusQ.Components): Adding StatusToastMessage

Added StatusToastMessage component, an example page
as well as a demonstration in chat view

Closes #521

CHANGELOG.md

@@ -1,3 +1,104 @@
+<a name=""></a>
+##  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
+
+* **StatusAccountSelector:**  Adapt ui to data model changed ([db024436](db024436))
+* **StatusAssetSelector:**  Fixed error of crypto balance not updated correctly ([2040d0f8](2040d0f8))
+
+
+
+<a name=""></a>
+##  Version 0.17.0 (2021-11-10)
+
+
+#### Features
+
+* **StatusBaseButton:**  introduce `Tiny` size ([dee9f437](dee9f437))
+* **StatusQ.Controls.Validators:**  introduce `StatusUrlValidator` ([a9155865](a9155865))
+
+#### Bug Fixes
+
+* **StatusAccountSelector:**  adapt AccountSelector to new model (#482) ([ce8d3231](ce8d3231))
+* **StatusExpandibleItem:**  add missing hover indicator in `Secondary` type ([e23dc533](e23dc533), closes [#478](478))
+* **StatusInput:**  ensure validator messages are rendered when validators return boolean values ([f82cd7f5](f82cd7f5))
+* **StatusListItem:**  This solves the issue of channel list overlpaing when a category is collapsed. ([0c715b17](0c715b17))
+* **StatusSearchPopup:**  disable enter and return keys to avoid UI breakage ([fecfb2a7](fecfb2a7))
+* **StatusSlider:**  slider background and handle should not depend on root's height ([31cfc883](31cfc883))
+
+
+
 <a name=""></a>
 ##  Version 0.16.0 (2021-11-01)
 

sandbox/DemoApp.qml

@@ -9,6 +9,9 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Platform 0.1
 
+import "demoapp"
+import "demoapp/data" 1.0
+
 Rectangle {
     id: demoApp
     height: 602
@@ -18,6 +21,31 @@ 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 nodeManagement: 4
+        readonly property int profileSettings: 5
+        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
@@ -48,32 +76,74 @@ Rectangle {
 
             id: navBar
 
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                tooltip.text: "Chat"
-                checked: appView.sourceComponent == statusAppChatView
-                onClicked: {
-                    appView.sourceComponent = statusAppChatView
-                }
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: Models.demoAppSectionsModel
+
+            property bool communityAdded: false
+
+            onAboutToUpdateFilteredRegularModel: {
+                communityAdded = false
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Status Community"
-                    tooltipText: "Status Community"
-                }
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
             }
 
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                id: communityBtn
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
-                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
+                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: {
-                    appView.sourceComponent = statusAppCommunityView
+                    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)
+                    }
+                }
+            }
+
+            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
+                onClicked: {
+                    if(model.sectionType === appSectionType.community)
+                    {
+                        appView.sourceComponent = statusAppCommunityView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
                 }
 
                 popupMenu: StatusPopupMenu {
@@ -104,39 +174,7 @@ 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 {
@@ -148,735 +186,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
-
-                        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
-                        }
-                    }
-                }
-            }
-        }
+        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
-                        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(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,295 +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
-
-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/Models.qml

@@ -1,336 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Components 0.1
-
-QtObject {
-
-    property var demoChatListItems: ListModel {
-        id: demoChatListItems
-        ListElement {
-            chatId: "0"
-            name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            unreadMessagesCount: 0
-            mentionsCount: 0
-            color: "blue"
-            position: 0
-        }
-        ListElement {
-            chatId: "1"
-            name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "red"
-            unreadMessagesCount: 1
-            mentionsCount: 1
-            position: 1
-        }
-        ListElement {
-            chatId: "2"
-            name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
-            position: 2
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            color: "purple"
-            unreadMessagesCount: 0
-            position: 3
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            color: "Orange"
-            unreadMessagesCount: 0
-            position: 4
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "green"
-            unreadMessagesCount: 0
-            position: 5
-        }
-    }
-
-    property var demoCommunityChatListItems: ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            chatId: "0"
-            name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            position: 0
-        }
-        ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 0
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 1
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-            position: 0
-        }
-    }
-
-    property var demoCommunityCategoryItems: ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
-            name: "Public"
-            position: 0
-        }
-        ListElement {
-            categoryId: "dev"
-            name: "Development"
-            position: 1
-        }
-    }
-
-    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
-                }]}
-    }
-}

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,443 @@
+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 nodeManagement: 4
+            readonly property int profileSettings: 5
+        }
+
+        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: "profile"; sectionType: 5; 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: "profile"; sectionType: 5; 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: "profile"; sectionType: 5; 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/controls/ListItems.qml

@@ -85,7 +85,8 @@ GridLayout {
     StatusChatListItem {
         name: "has-mentions"
         type: StatusChatListItem.Type.PublicChat
-        badge.value: 1
+        hasUnreadMessages: true
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -100,7 +101,7 @@ GridLayout {
         type: StatusChatListItem.Type.PublicChat
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -130,7 +131,7 @@ GridLayout {
         selected: true
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
 
@@ -345,4 +346,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/ChatChannelView.qml

@@ -0,0 +1,103 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQml.Models 2.2
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ListView {
+    id: messageList
+    anchors.fill: parent
+    anchors.margins: 15
+    clip: true
+    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/CreateChatView.qml

@@ -0,0 +1,232 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQml.Models 2.2
+import QtGraphicalEffects 1.0
+
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Page {
+    id: root
+    anchors.fill: parent
+    anchors.margins: 16
+    property ListModel contactsModel: null
+    background: null
+
+    header: RowLayout {
+        id: headerRow
+        width: parent.width
+        height: tagSelector.height
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+
+        StatusTagSelector {
+            id: tagSelector
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            Layout.leftMargin: 17
+            implicitHeight: 44
+            toLabelText: qsTr("To: ")
+            warningText: qsTr("5 USER LIMIT REACHED")
+            //simulate model filtering, TODO this
+            //makes more sense to be provided by the backend
+            //figure how real implementation should look like
+            property ListModel sortedList: ListModel { }
+            onTextChanged: {
+                sortedList.clear();
+                if (text !== "") {
+                    for (var i = 0; i < contactsModel.count; i++ ) {
+                        var entry = contactsModel.get(i);
+                        if (entry.name.toLowerCase().includes(text.toLowerCase())) {
+                            sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name,
+                                                  "icon": entry.icon, "isIdenticon": entry.isIdenticon,
+                                                  "onlineStatus": entry.onlineStatus});
+                            userListView.model = sortedList;
+                        }
+                    }
+                } else {
+                    userListView.model = contactsModel;
+                }
+            }
+        }
+
+        StatusButton {
+            implicitHeight: 44
+            enabled: (tagSelector.namesModel.count > 0)
+            text: "Confirm"
+        }
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+        anchors.topMargin: headerRow.height + 16
+
+        Item {
+            anchors.fill: parent
+            visible: (contactsModel.count > 0)
+
+            StatusBaseText {
+                id: contactsLabel
+                font.pixelSize: 15
+                color: Theme.palette.baseColor1
+                text: "Contacts"
+            }
+            Control {
+                width: 360
+                anchors {
+                    top: contactsLabel.bottom
+                    topMargin: 8//Style.current.padding
+                    bottom: parent.bottom
+                    bottomMargin: 20//Style.current.bigPadding
+                }
+                background: Rectangle {
+                    id: statusPopupMenuBackgroundContent
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    height: (userListView.height + 8)
+                    visible: (tagSelector.sortedList.count > 0)
+                    color: Theme.palette.statusPopupMenu.backgroundColor
+                    radius: 8
+                    layer.enabled: true
+                    layer.effect: DropShadow {
+                        width: statusPopupMenuBackgroundContent.width
+                        height: statusPopupMenuBackgroundContent.height
+                        x: statusPopupMenuBackgroundContent.x
+                        visible: statusPopupMenuBackgroundContent.visible
+                        source: statusPopupMenuBackgroundContent
+                        horizontalOffset: 0
+                        verticalOffset: 4
+                        radius: 12
+                        samples: 25
+                        spread: 0.2
+                        color: Theme.palette.dropShadow
+                    }
+                }
+                contentItem: ListView {
+                    id: userListView
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    height: (count * 64) > parent.height ? parent.height : (count * 64)
+                    clip: true
+                    model: contactsModel
+                    ScrollBar.vertical: ScrollBar {
+                        policy: ScrollBar.AsNeeded
+                    }
+                    boundsBehavior: Flickable.StopAtBounds
+                    delegate: Item {
+                        id: wrapper
+                        anchors.right: parent.right
+                        anchors.left: parent.left
+                        height: 64
+                        property bool hovered: false
+                        Rectangle {
+                            id: rectangle
+                            anchors.fill: parent
+                            anchors.topMargin: 8
+                            anchors.rightMargin: 8
+                            anchors.leftMargin: 8
+                            radius: 8
+                            visible: (tagSelector.sortedList.count > 0)
+                            color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent"
+                        }
+
+                        StatusSmartIdenticon {
+                            id: contactImage
+                            anchors.left: parent.left
+                            anchors.leftMargin: 16//Style.current.padding
+                            anchors.verticalCenter: parent.verticalCenter
+                            name: model.name
+                            icon: StatusIconSettings {
+                                width: 28
+                                height: 28
+                                letterSize: 15
+                            }
+                            image: StatusImageSettings {
+                                width: 28
+                                height: 28
+                                source: model.icon
+                                isIdenticon: model.isIdenticon
+                            }
+                        }
+
+                        StatusBaseText {
+                            id: contactInfo
+                            text: model.name
+                            anchors.right: parent.right
+                            anchors.rightMargin: 8
+                            anchors.left: contactImage.right
+                            anchors.leftMargin: 16
+                            anchors.verticalCenter: parent.verticalCenter
+                            elide: Text.ElideRight
+                            color: Theme.palette.directColor1
+                            font.weight: Font.Medium
+                            font.pixelSize: 15
+                        }
+
+                        StatusBadge {
+                            id: statusBadge
+                            width: 15
+                            height: 15
+                            anchors.left: contactImage.right
+                            anchors.leftMargin: -8
+                            anchors.bottom: contactImage.bottom
+                            border.width: 3
+                            border.color: Theme.palette.statusAppNavBar.backgroundColor
+                            color: {
+                                if (model.onlineStatus === 1)
+                                    return Theme.palette.successColor1;
+                                else if (model.onlineStatus === 2)
+                                    return Theme.palette.pinColor1;
+                                else if (model.onlineStatus === 3)
+                                    return Theme.palette.dangerColor1;
+
+                                return "transparent"
+                            }
+                        }
+
+                        MouseArea {
+                            cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                            acceptedButtons: Qt.LeftButton | Qt.RightButton
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            onEntered: {
+                                wrapper.hovered = true;
+                            }
+                            onExited: {
+                                wrapper.hovered = false;
+                            }
+                            onClicked: {
+                                tagSelector.insertTag(model.name, model.publicId);
+                            }
+                        }
+                    }
+                }
+            }
+            Component.onCompleted: {
+                if (visible) {
+                    tagSelector.textEdit.forceActiveFocus();
+                }
+            }
+        }
+
+        StatusBaseText {
+            visible: (contactsModel.count === 0)
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+            text: qsTr("You can only send direct messages to your Contacts. \n\n
+Send a contact request to the person you would like to chat with, you will be\n able to
+chat with them once they have accepted your contact request.")
+            Component.onCompleted: {
+                if (visible) {
+                    tagSelector.enabled = false;
+                }
+            }
+        }
+    }
+}

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,194 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.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
+    property bool createChat: false
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: headline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Chat"
+        }
+
+        RowLayout {
+            id: searchInputWrapper
+            width: parent.width
+            height: searchInput.height
+            anchors.top: headline.bottom
+            anchors.topMargin: 16
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+
+            StatusBaseInput {
+                id: searchInput
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                Layout.leftMargin: 17
+                implicitHeight: 36
+                topPadding: 8
+                bottomPadding: 0
+                placeholderText: "Search"
+                icon.name: "search"
+            }
+
+            StatusIconTabButton {
+                icon.name: "public-chat"
+            }
+
+            StatusIconTabButton {
+                icon.name: "edit"
+                onClicked: {
+                    root.createChat = !root.createChat;
+                }
+            }
+        }
+
+        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
+                    }
+                }
+            }
+        }
+    }
+
+    centerPanel: Loader {
+        anchors.fill: parent
+        sourceComponent: root.createChat ? createChatView : chatChannelView
+    }
+
+    Component {
+        id: createChatView
+        CreateChatView {
+            contactsModel: Models.dummyContactsModel
+        }
+    }
+
+    Component {
+        id: chatChannelView
+        ChatChannelView {
+            model: Models.chatMessagesModel
+        }
+    }
+
+    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
+                }
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppCommunityView.qml

@@ -0,0 +1,272 @@
+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
+                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(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

@@ -12,6 +12,8 @@ import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
 
+import "demoapp/data" 1.0
+
 StatusWindow {
     id: rootWindow
     width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
@@ -31,11 +33,33 @@ 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 nodeManagement: 4
+        readonly property int profileSettings: 5
+        readonly property int apiDocumentation: 100
+        readonly property int demoApp: 101
+    }
+
+    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
@@ -43,37 +67,36 @@ StatusWindow {
         appNavBar: StatusAppNavBar {
             height: rootWindow.height
 
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "refresh"
-                tooltip.text: "Reload App"
-                onClicked: app.restartQml()
-            }
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: Models.mainAppSectionsModel
 
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    id: apiDocsButton
-                    icon.name: "edit"
-                    tooltip.text: "API Documentation"
-                    onClicked: {
-                        stackView.clear()
+            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)
+                    {
                         stackView.push(libraryDocumentationCmp)
-                        checked = !checked
-                        demoAppButton.checked = false
+                        rootWindow.setActiveItem(sectionId)
                     }
-                },
-                StatusNavBarTabButton {
-                    id: demoAppButton
-                    icon.name: "status"
-                    tooltip.text: "Demo Application"
-                    checked: stackView.currentItem == demoAppCmp
-                    onClicked: {
-                        stackView.clear()
+                    else if(model.sectionType === appSectionType.demoApp)
+                    {
                         stackView.push(demoAppCmp)
-                        checked = !checked
-                        apiDocsButton.checked = false
+                        rootWindow.setActiveItem(model.sectionId)
                     }
                 }
-            ]
+            }
         }
 
         appView: StackView {
@@ -101,6 +124,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
@@ -120,122 +151,137 @@ 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");
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusTagSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusToastMessage"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         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);
                         }
                     }
                 }
@@ -255,13 +301,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;
+                                }
+                            }
                         }
                     }
                 }
@@ -292,116 +342,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
 
@@ -440,8 +380,7 @@ StatusWindow {
             }
             DemoApp {
                 id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
             }
             DropShadow {
                 anchors.fill: demoApp

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

@@ -13,22 +13,26 @@ Column {
     spacing: 8
 
     StatusAssetSelector {
+        getCurrencyBalanceString: function (currencyBalance) {
+            return currencyBalance.toFixed(2) + " USD"
+        }
+        tokenAssetSourceFn: function (symbol) {
+            return "../../assets/img/icons/snt.svg"
+        }
         assets: ListModel {
             ListElement {
                 address: "0x1234"
                 name: "Status Network Token"
-                value: "20"
+                balance: "20"
                 symbol: "SNT"
-                fiatBalance: "9992.01"
-                fiatBalanceDisplay: "9992.01"
+                currencyBalance: 9992.01
             }
             ListElement {
                 address: "0x1234"
                 name: "DAI Token"
-                value: "20"
+                balance: "15"
                 symbol: "DAI"
-                fiatBalance: "20"
-                fiatBalanceDisplay: "20"
+                currencyBalance: 20.00001
             }
         }
     }

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/pages/StatusTagSelectorPage.qml

@@ -0,0 +1,56 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    property ListModel asortedContacts: ListModel {
+        ListElement {
+            publicId: "0x0"
+            name: "Maria"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x1"
+            name: "James"
+            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            isIdenticon: false
+            onlineStatus: 1
+        }
+        ListElement {
+            publicId: "0x2"
+            name: "Paul"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 2
+        }
+        ListElement {
+            publicId: "0x3"
+            name: "Tracy"
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: true
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x4"
+            name: "Nick"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+    }
+
+    StatusTagSelector {
+        id: tagSelector
+        width: 650
+        height: 44
+        anchors.centerIn: parent
+        namesModel: root.asortedContacts
+        toLabelText: qsTr("To: ")
+        warningText: qsTr("5 USER LIMIT REACHED")
+    }
+}

sandbox/pages/StatusToastMessagePage.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    Column {
+        id: toastArea
+        anchors.centerIn: parent
+        spacing: 8
+        Repeater {
+            id: toastRepeater
+            width: parent.width
+            height: childrenRect.height
+            model: [
+                {"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":""},
+                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""},
+                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com"},
+                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""}
+            ]
+            delegate: StatusToastMessage {
+                primaryText: modelData.title
+                secondaryText: modelData.subTitle
+                icon.name: modelData.icon
+                loading: modelData.loading
+                type: modelData.type
+                linkUrl: modelData.url
+                onLinkActivated: {
+                    Qt.openUrlExternally(link);
+                }
+                //simulate open
+                Component.onCompleted: {
+                    open = true;
+                }
+            }
+        }
+    }
+}

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,8 +15,7 @@ Column {
     width: 288
 
     property string categoryId: ""
-    property string selectedChatId: ""
-    property alias chatListItems: delegateModel
+    property var model: []
     property bool draggableItems: false
 
     property alias statusChatListItems: statusChatListItems
@@ -24,10 +23,8 @@ Column {
     property Component popupMenu
 
     property var filterFn
-    property var profileImageFn
-    property var chatNameFn
 
-    signal chatItemSelected(string id)
+    signal chatItemSelected(string categoryId, string id)
     signal chatItemUnmuted(string id)
     signal chatItemReordered(string id, int from, int to)
 
@@ -39,17 +36,16 @@ 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, statusChatList.categoryId)
+                    return statusChatList.filterFn(model)
                 }
                 return true
             }
@@ -96,31 +92,19 @@ 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.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 || ""
+                    chatId: model.itemId
+                    categoryId: model.parentItemId? model.parentItemId : ""
+                    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
 
                     sensor.cursorShape: dragSensor.cursorShape
                     onClicked: {
@@ -132,7 +116,7 @@ Column {
 
                             popupMenuSlot.item.openHandler = function () {
                                 if (!!originalOpenHandler) {
-                                    originalOpenHandler((model.chatId || model.id))
+                                    originalOpenHandler(model.itemId)
                                 }
                             }
 
@@ -152,10 +136,10 @@ Column {
                             return
                         }
                         if (!statusChatListItem.selected) {
-                            statusChatList.chatItemSelected(model.chatId || model.id)
+                            statusChatList.chatItemSelected(model.parentItemId, model.itemId)
                         }
                     }
-                    onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
                 }
             }
 
@@ -204,9 +188,8 @@ Column {
                     type: draggable.chatListItem.type
                     muted: draggable.chatListItem.muted
                     dragged: true
-                    hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
-                    hasMention: draggable.chatListItem.hasMention
-                    badge.value: draggable.chatListItem.badge.value
+                    hasUnreadMessages: model.hasUnreadMessages
+                    notificationsCount: model.notificationsCount
                     selected: draggable.chatListItem.selected
 
                     icon.color: draggable.chatListItem.icon.color

src/StatusQ/Components/StatusChatListAndCategories.qml

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

src/StatusQ/Components/StatusChatListCategory.qml

@@ -35,11 +35,11 @@ Column {
     StatusChatListCategoryItem {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
+        visible: model.isCategory
         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.categoryId && model.categoryId == statusChatList.categoryId
+            return !!model.parentItemId && model.parentItemId === 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 bool hasMention: false
+    property int notificationsCount: 0
     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.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
+                return statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
                         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.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
+                return statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
                         statusChatListItem.selected ||
                         statusChatListItem.highlighted ||
-                        sensor.containsMouse ||
+                        hoverHander.hovered ||
                         statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
             font.weight: !statusChatListItem.muted &&
-                         (statusChatListItem.hasMention ||
-                          statusChatListItem.hasUnreadMessages ||
+                         (statusChatListItem.hasUnreadMessages ||
+                          statusChatListItem.notificationsCount > 0 ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
@@ -186,7 +189,8 @@ Rectangle {
             color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
             border.width: 4
             border.color: color
-            visible: statusBadge.value > 0
+            value: statusChatListItem.notificationsCount
+            visible: statusChatListItem.notificationsCount > 0
         }
     }
 }

src/StatusQ/Components/StatusChatToolBar.qml

@@ -93,6 +93,25 @@ Rectangle {
 
             property bool showMoreMenu: false
             onClicked: {
+                menuButton.highlighted = true
+
+                let originalOpenHandler = popupMenuSlot.item.openHandler
+                let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+                popupMenuSlot.item.openHandler = function () {
+                    if (!!originalOpenHandler) {
+                        originalOpenHandler()
+                    }
+                }
+
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.highlighted = false
+                    if (!!originalCloseHandler) {
+                        originalCloseHandler()
+                    }
+                }
+
+                popupMenuSlot.item.openHandler = originalOpenHandler
                 popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
                 statusChatToolBar.menuButtonClicked()
             }
@@ -100,15 +119,6 @@ Rectangle {
             Loader {
                 id: popupMenuSlot
                 active: !!statusChatToolBar.popupMenu
-                onLoaded: {
-                    popupMenuSlot.item.closeHandler = function () {
-                        menuButton.highlighted = false
-                    }
-
-                    popupMenuSlot.item.openHandler = function () {
-                        menuButton.highlighted = true
-                    }
-                }
             }
         }
 

src/StatusQ/Components/StatusExpandableItem.qml

@@ -58,105 +58,128 @@ Rectangle {
     }
 
 
-    StatusSmartIdenticon {
-        id: identicon
+    Rectangle {
+        id: header
         anchors.top: parent.top
-        anchors.topMargin: 25
-        anchors.left: parent.left
-        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11
-        image: statusExpandableItem.image
-        icon: statusExpandableItem.icon
-        name: primaryText.text
-        active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
-    }
+        width: parent.width
+        height: 64
+        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
+        color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
-    StatusBaseText {
-        id: primaryText
-        anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
-                     (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
-        anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
-        anchors.left: identicon.active ? identicon.right : parent.left
-        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
+        StatusSmartIdenticon {
+            id: identicon
+            anchors.top: parent.top
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
+            anchors.left: parent.left
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
+            image: statusExpandableItem.image
+            icon: statusExpandableItem.icon
+            name: primaryText.text
+            active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
+        }
 
-        anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
+        StatusBaseText {
+            id: primaryText
+            anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
+                        (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
+            anchors.left: identicon.active ? identicon.right : parent.left
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
 
-        width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
-                                                       parent.width - icon.background.width - additionalText.contentWidth - 110) :
-                                     (button.visible ? parent.width - icon.background.width - button.width - 70 :
-                                                       parent.width - icon.background.width - 70)
+            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
 
-        font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
-        font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
-        lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
-        lineHeightMode: Text.FixedHeight
-        elide: Text.ElideRight
-        color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
-    }
+            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
+                                                          parent.width - icon.background.width - additionalText.contentWidth - 110) :
+                                        (button.visible ? parent.width - icon.background.width - button.width - 70 :
+                                                          parent.width - icon.background.width - 70)
 
-    StatusBaseText {
-        id: secondaryText
-        anchors.top: primaryText.bottom
-        anchors.topMargin: 4
-        anchors.left: primaryText.left
-        anchors.right: primaryText.right
+            font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
+            font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
+            lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
+        }
 
-        font.pixelSize: 15
-        lineHeight: 22
-        lineHeightMode: Text.FixedHeight
-        elide: Text.ElideRight
-        color: Theme.palette.directColor3
-    }
+        StatusBaseText {
+            id: secondaryText
+            anchors.top: primaryText.bottom
+            anchors.topMargin: 4
+            anchors.left: primaryText.left
+            anchors.right: primaryText.right
 
-    StatusBaseText {
-        id: additionalText
-        anchors.verticalCenter: primaryText.verticalCenter
-        anchors.verticalCenterOffset: 2
-        anchors.right: expandImage.left
-        anchors.rightMargin: 16
+            font.pixelSize: 15
+            lineHeight: 22
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: Theme.palette.directColor3
+        }
 
-        font.pixelSize: 15
-        lineHeight: 24
-        lineHeightMode: Text.FixedHeight
-        elide: Text.ElideRight
-        color: Theme.palette.baseColor1
-    }
+        StatusBaseText {
+            id: additionalText
+            anchors.verticalCenter: primaryText.verticalCenter
+            anchors.verticalCenterOffset: 2
+            anchors.right: expandImage.left
+            anchors.rightMargin: 16
 
-    StatusButton {
-        id: button
-        anchors.top: parent.top
-        anchors.topMargin: 19
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        visible: !!text
-    }
+            font.pixelSize: 15
+            lineHeight: 24
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: Theme.palette.baseColor1
+        }
 
-    StatusIcon {
-        id: expandImage
-        anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
-                                 primaryText.verticalCenter : identicon.verticalCenter
-        anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?  -3 : -1
-        anchors.right: parent.right
-        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 23 : 6
-        visible: expandable && !button.visible
-        color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
-                   Theme.palette.baseColor1 :
-                   Theme.palette.directColor1
-    }
+        StatusButton {
+            id: button
+            anchors.top: parent.top
+            anchors.topMargin: 19
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            visible: !!text
+        }
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            if(expandable) {
-                expanded = !expanded
+        StatusIcon {
+            id: expandImage
+            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                                    primaryText.verticalCenter : identicon.verticalCenter
+            anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?  -3 : -1
+            anchors.right: parent.right
+            anchors.rightMargin: {
+                switch (statusExpandableItem.type) {
+                    case StatusExpandableItem.Type.Primary:
+                      return 23
+                      break;
+                    case StatusExpandableItem.Type.Secondary:
+                      return 16
+                      break;
+                    default:
+                      return 6
+
+                }
+            }
+            visible: expandable && !button.visible
+            color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                      Theme.palette.baseColor1 :
+                      Theme.palette.directColor1
+        }
+
+        MouseArea {
+            id: sensor
+            anchors.fill: parent
+            onClicked: {
+                if(expandable) {
+                    expanded = !expanded
+                }
             }
+            cursorShape: Qt.PointingHandCursor
+            visible: !button.visible && expandable
+            hoverEnabled: true
         }
-        cursorShape: Qt.PointingHandCursor
-        visible: !button.visible && expandable
     }
 
     Loader {
         id: expandableRegion
-        anchors.top: !!secondaryText.text ? secondaryText.bottom: primaryText.bottom
+        anchors.top: header.bottom
         anchors.topMargin: 16
         anchors.left: parent.left
         anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 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) {
@@ -106,6 +130,7 @@ Rectangle {
         cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
+        preventStealing: true
 
         onClicked: {
             statusListItem.clicked(statusListItem.itemId)
@@ -123,6 +148,7 @@ Rectangle {
             active: statusListItem.icon.isLetterIdenticon ||
                     !!statusListItem.icon.name ||
                     !!statusListItem.image.source.toString()
+            badge.border.color: statusListItem.color
         }
 
         Item {
@@ -141,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
@@ -178,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/StatusTagSelector.qml

@@ -0,0 +1,126 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+
+    implicitWidth: 448
+    implicitHeight: 44
+
+    property alias textEdit: edit
+    property alias text: edit.text
+    property string warningText: ""
+    property string toLabelText: ""
+    property int nameCountLimit: 5
+    property ListModel namesModel: ListModel { }
+
+    function find(model, criteria) {
+      for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i);
+      return null;
+    }
+
+    function insertTag(name, id) {
+        if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
+            namesModel.insert(namesModel.count, {"name": name, "publicId": id});
+            edit.clear();
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: 8
+        color: Theme.palette.baseColor2
+
+        RowLayout {
+            anchors.fill: parent
+            anchors.leftMargin: 16
+            anchors.rightMargin: 16
+            spacing: 8
+            StatusBaseText {
+                Layout.preferredWidth: 22
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                color: Theme.palette.baseColor1
+                text: root.toLabelText
+            }
+
+            ListView {
+                id: namesList
+                Layout.preferredWidth: (count >= 5) ? (parent.width - warningTextLabel.width - 30) : childrenRect.width
+                implicitHeight: 30
+                visible: (count > 0)
+                Layout.alignment: Qt.AlignVCenter
+                model: namesModel
+                orientation: ListView.Horizontal
+                spacing: 8
+                clip: true
+                onWidthChanged: {
+                    positionViewAtEnd();
+                }
+
+                delegate: Rectangle {
+                    id: nameDelegate
+                    width: (nameText.contentWidth + 34)
+                    height: 30
+                    color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
+                    radius: 8
+                    StatusBaseText {
+                        id: nameText
+                        anchors.left: parent.left
+                        anchors.leftMargin: 8
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: Theme.palette.indirectColor1
+                        text: name
+                    }
+                    StatusIcon {
+                        anchors.left: nameText.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: Theme.palette.indirectColor1
+                        icon: "close"
+                    }
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            namesModel.remove(index, 1);
+                        }
+                    }
+                }
+            }
+
+            TextEdit {
+                id: edit
+                Layout.fillWidth: true
+                Layout.preferredHeight: 44
+                verticalAlignment: Text.AlignVCenter
+                visible: (namesModel.count < 5)
+                enabled: visible
+                focus: true
+                font.pixelSize: 15
+                font.family: Theme.palette.baseFont.name
+                color: Theme.palette.directColor1
+                Keys.onPressed: {
+                    if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
+                         && getText(cursorPosition, (cursorPosition-1)) === "") {
+                        namesModel.remove((namesList.count-1), 1);
+                    }
+                }
+            }
+
+            StatusBaseText {
+                id: warningTextLabel
+                visible: (namesModel.count === 5)
+                Layout.preferredWidth: 120
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                font.pixelSize: 10
+                color: Theme.palette.dangerColor1
+                text: root.warningText
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusToastMessage.qml

@@ -0,0 +1,179 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+import QtGraphicalEffects 1.13
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+Control {
+    id: root
+    width: 343
+    height: !!secondaryText ? 68 : 48
+    anchors.right: parent.right
+
+    property bool open: false
+    property string primaryText: ""
+    property string secondaryText: ""
+    property bool loading: false
+    property string iconName: ""
+    property string linkUrl: ""
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 23
+        height: 23
+    }
+
+    property int type: StatusToastMessage.Type.Default
+    enum Type {
+        Default,
+        Success
+    }
+
+    function open(title, subTitle, iconName, type, loading, url) {
+        root.primaryText = title;
+        root.secondaryText = subTitle;
+        root.icon.name = iconName;
+        root.type = type;
+        root.loading = loading;
+        root.linkUrl = url;
+        root.open = true;
+    }
+
+    signal close()
+    signal linkActivated(var link)
+
+    states: [
+        State {
+            name: "opened"
+            when: root.open
+            PropertyChanges {
+                target: root
+                anchors.rightMargin: 0
+                opacity: 1.0
+            }
+        },
+        State {
+            name: "closed"
+            when: !root.open
+            PropertyChanges {
+                target: root
+                anchors.rightMargin: -width
+                opacity: 0.0
+            }
+            StateChangeScript {
+                script: { root.close(); }
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "*"
+            NumberAnimation { properties: "anchors.rightMargin,opacity"; duration: 400 }
+        }
+    ]
+
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        color: Theme.palette.statusToastMessage.backgroundColor
+        radius: 8
+        border.color: Theme.palette.baseColor2
+        layer.enabled: true
+        layer.effect: DropShadow {
+            verticalOffset: 3
+            radius: 8
+            samples: 15
+            fast: true
+            cached: true
+            color: Theme.palette.dropShadow
+        }
+    }
+
+    contentItem: Item {
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        height: parent.height
+        MouseArea {
+            anchors.fill: parent
+            onMouseXChanged: {
+                root.open = (mouseX < (root.width/3));
+            }
+        }
+        RowLayout {
+            anchors.fill: parent
+            spacing: 16
+            Rectangle {
+                implicitWidth: 32
+                implicitHeight: 32
+                Layout.alignment: Qt.AlignVCenter
+                radius: (root.width/2)
+                color: (root.type === StatusToastMessage.Type.Success) ?
+                        Theme.palette.successColor2 : Theme.palette.primaryColor3
+                Loader {
+                    anchors.centerIn: parent
+                    sourceComponent: root.loading ? loadingInd : statusIcon
+                    Component {
+                        id: loadingInd
+                        StatusLoadingIndicator {
+                            color: (root.type === StatusToastMessage.Type.Success) ?
+                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
+                        }
+                    }
+                    Component {
+                        id: statusIcon
+                        StatusIcon {
+                            anchors.centerIn: parent
+                            width: root.icon.width
+                            height: root.icon.height
+                            color: (root.type === StatusToastMessage.Type.Success) ?
+                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
+                            icon: root.icon.name
+                        }
+                    }
+                }
+            }
+            Column {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                StatusBaseText {
+                    width: parent.width
+                    font.pixelSize: 13
+                    color: Theme.palette.directColor1
+                    elide: Text.ElideRight
+                    text: root.primaryText
+                }
+                StatusBaseText {
+                    width: parent.width
+                    visible: (!root.linkUrl && !!root.secondaryText)
+                    height: visible ? contentHeight : 0
+                    font.pixelSize: 13
+                    color: Theme.palette.baseColor1
+                    text: root.secondaryText
+                    elide: Text.ElideRight
+                }
+                StatusSelectableText {
+                    visible: (!!root.linkUrl)
+                    height: visible ? implicitHeight : 0
+                    font.pixelSize: 13
+                    hoveredLinkColor: Theme.palette.primaryColor1
+                    text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
+                    onLinkActivated: {
+                        root.linkActivated(root.linkUrl);
+                    }
+                }
+            }
+            StatusFlatRoundButton {
+                icon.name: "close"
+                icon.color: Theme.palette.directColor1
+                onClicked: {
+                    root.open = false;
+                }
+            }
+        }
+    }
+}

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,7 @@ 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
+StatusTagSelector 0.1 StatusTagSelector.qml
+StatusToastMessage 0.1 StatusToastMessage.qml

src/StatusQ/Controls/StatusAccountSelector.qml

@@ -46,7 +46,7 @@ Item {
         if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) {
             return root.isValid
         }
-        root.isValid = assetFound.value >= minRequiredAssetBalance
+        root.isValid = assetFound.balance >= minRequiredAssetBalance
         return root.isValid
     }
 
@@ -54,8 +54,8 @@ Item {
         if (!selectedAccount) {
             return
         }
-        if (selectedAccount.iconColor) {
-            selectedIconImg.color = Utils.getThemeAccountColor(selectedAccount.iconColor, Theme.palette.accountColors) || Theme.palette.accountColors[0]
+        if (selectedAccount.color) {
+            selectedIconImg.color = Utils.getThemeAccountColor(selectedAccount.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
         }
         if (selectedAccount.name) {
             selectedTextField.text = selectedAccount.name
@@ -63,8 +63,8 @@ Item {
         if (selectedAccount.address) {
             textSelectedAddress.text = selectedAccount.address  + " •"
         }
-        if (selectedAccount.fiatBalance) {
-            textSelectedAddressFiatBalance.text = selectedAccount.fiatBalance + " " + currency.toUpperCase()
+        if (selectedAccount.currencyBalance) {
+            textSelectedAddressFiatBalance.text = selectedAccount.currencyBalance + " " + currency.toUpperCase()
         }
         if (selectedAccount.assets && showBalanceForAssetSymbol) {
             assetFound = Utils.findAssetBySymbol(selectedAccount.assets, showBalanceForAssetSymbol)
@@ -82,7 +82,7 @@ Item {
         if (!assetFound) {
             return
         }
-        txtAssetBalance.text = root.assetBalanceTextFn(assetFound.value)
+        txtAssetBalance.text = root.assetBalanceTextFn(assetFound.balance)
         txtAssetSymbol.text = " " + assetFound.symbol
     }
 
@@ -90,11 +90,11 @@ Item {
         id: txtAssetBalance
         visible: root.assetFound !== undefined
         anchors.bottom: select.top
-        anchors.bottomMargin: -18 
+        anchors.bottomMargin: -18
         anchors.right: txtAssetSymbol.left
         anchors.left: select.left
         anchors.leftMargin: select.width / 2.5
-        
+
         color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
         elide: Text.ElideRight
         font.pixelSize: 13
@@ -194,7 +194,7 @@ Item {
 
             Component.onCompleted: {
                 if (!root.selectedAccount && isFirstItem) {
-                    root.selectedAccount = { address, name, iconColor, assets, fiatBalance }
+                    root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
                 }
             }
 
@@ -208,7 +208,7 @@ Item {
                 width: 20
                 height: 20
                 icon: "filled-account"
-                color: Utils.getThemeAccountColor(iconColor, Theme.palette.accountColors) || Theme.palette.accountColors[0]
+                color: Utils.getThemeAccountColor(model.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
             }
 
             Column {
@@ -221,7 +221,7 @@ Item {
 
                 StatusBaseText {
                     id: accountName
-                    text: name
+                    text: model.name
                     elide: Text.ElideRight
                     font.pixelSize: 15
                     anchors.left: parent.left
@@ -247,7 +247,7 @@ Item {
                 anchors.verticalCenter: parent.verticalCenter
                 font.pixelSize: 15
                 height: 22
-                text: fiatBalance
+                text: currencyBalance
                 color: Theme.palette.directColor1
             }
             StatusBaseText {
@@ -267,7 +267,7 @@ Item {
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: itemContainer
                 onClicked: {
-                    root.selectedAccount = { address, name, iconColor, assets, fiatBalance }
+                    root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
                     select.selectMenu.close()
                 }
             }

src/StatusQ/Controls/StatusAssetSelector.qml

@@ -12,17 +12,12 @@ Item {
     id: root
     property var assets
     property var selectedAsset
+    property string defaultToken: ""
     property var tokenAssetSourceFn: function (symbol) {
         return ""
     }
-    property var assetGetterFn: function (index, field) {
-        // This is merely to make the component work with nim model data
-        // as well as static QML ListModel data
-        if (typeof assets.get === "function") {
-            return assets.get(index)[field]
-        }
-        return assets.rowData(index, field)
-    }
+    // Define this in the usage to get balance in currency selected by user
+    property var getCurrencyBalanceString: function (currencyBalance) { return "" }
     implicitWidth: 86
     implicitHeight: 32
 
@@ -38,20 +33,6 @@ Item {
         }
     }
 
-    onAssetsChanged: {
-        if (!assets) {
-            return
-        }
-        selectedAsset = {
-            name: assetGetterFn(0, "name"),
-            symbol: assetGetterFn(0, "symbol"),
-            value: assetGetterFn(0, "value"),
-            fiatBalanceDisplay: assetGetterFn(0, "fiatBalanceDisplay"),
-            address: assetGetterFn(0, "address"),
-            fiatBalance: assetGetterFn(0, "fiatBalance")
-        }
-    }
-
     StatusSelect {
         id: select
         width: parent.width
@@ -71,6 +52,11 @@ Item {
                 width: 24
                 height: 24
                 anchors.verticalCenter: parent.verticalCenter
+                image.onStatusChanged: {
+                    if (iconImg.image.status === Image.Error) {
+                        iconImg.image.source = defaultToken
+                    }
+                }
             }
             StatusBaseText {
                 id: selectedTextField
@@ -101,6 +87,11 @@ Item {
                 anchors.leftMargin: 16
                 anchors.verticalCenter: parent.verticalCenter
                 image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
+                image.onStatusChanged: {
+                    if (iconImg.image.status === Image.Error) {
+                        iconImg.image.source = defaultToken
+                    }
+                }
             }
             Column {
                 anchors.left: iconImg.right
@@ -125,23 +116,28 @@ Item {
                 anchors.verticalCenter: parent.verticalCenter
                 StatusBaseText {
                     font.pixelSize: 15
-                    text: parseFloat(value).toFixed(4) + " " + symbol
+                    text: parseFloat(balance).toFixed(4) + " " + symbol
                 }
                 StatusBaseText {
                     font.pixelSize: 15
                     anchors.right: parent.right
-                    text: fiatBalanceDisplay.toUpperCase()
+                    text: getCurrencyBalanceString(currencyBalance)
                     color: Theme.palette.baseColor1
                 }
             }
             background: Rectangle {
                 color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
             }
+            Component.onCompleted: {
+                if(index === 0 ) {
+                    selectedAsset = { name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
+                }
+            }
             MouseArea {
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: itemContainer
                 onClicked: {
-                    root.selectedAsset = { address, name, value, symbol, fiatBalance, fiatBalanceDisplay }
+                    selectedAsset = {name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
                     select.selectMenu.close()
                 }
             }

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

@@ -0,0 +1,46 @@
+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'),
@@ -166,6 +167,10 @@ ThemePalette {
         property color backgroundColor: baseColor5
     }
 
+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
     property QtObject statusListItem: QtObject {
         property color backgroundColor: baseColor3
         property color secondaryHoverBackgroundColor: primaryColor3

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'),
@@ -164,6 +165,10 @@ ThemePalette {
         property color backgroundColor: baseColor2
     }
 
+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor: white
+    }
+
     property QtObject statusListItem: QtObject {
         property color backgroundColor: white
         property color secondaryHoverBackgroundColor: getColor('blue6')

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: []
 
@@ -100,6 +101,10 @@ QtObject {
         property color backgroundColor
     }
 
+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor
+    }
+
     property QtObject statusListItem: QtObject {
         property color backgroundColor
         property color secondaryHoverBackgroundColor

src/StatusQ/Core/Utils/Utils.qml

@@ -52,10 +52,9 @@ QtObject {
                 return {
                     name: assets.rowData(i, "name"),
                     symbol,
-                    value: assets.rowData(i, "value"),
-                    fiatBalanceDisplay: assets.rowData(i, "fiatBalanceDisplay"),
+                    balance: assets.rowData(i, "balance"),
                     address: assets.rowData(i, "address"),
-                    fiatBalance: assets.rowData(i, "fiatBalance")
+                    currencyBalance: assets.rowData(i, "currencyBalance")
                 }
             }
         }

src/StatusQ/Core/qmldir

@@ -7,3 +7,4 @@ 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,40 +1,35 @@
 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
 
-    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 var sectionModel: []
+    property string communityTypeRole: ""
+    property int communityTypeValue: -1
+    property int navBarButtonSpacing: 12
 
-    onNavBarChatButtonChanged: {
-        if (!!navBarChatButton) {
-            navBarChatButton.parent = navBarChatButtonSlot
-        }
-    }
+    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()
 
     onNavBarProfileButtonChanged: {
         if (!!navBarProfileButton) {
@@ -42,115 +37,138 @@ Rectangle {
         }
     }
 
-    onNavBarTabButtonsChanged: {
-        if (navBarTabButtons.length) {
-            for (let idx in navBarTabButtons) {
-                navBarTabButtons[idx].parent = navBarTabButtonsSlot
+    function triggerUpdate(){
+        navBarModel.update()
+    }
+
+    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
+                }
             }
         }
     }
 
-    Item {
-        id: navBarChatButtonSlot
+    ListView {
+        id: navBarListView
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.top: parent.top
         anchors.topMargin: 48
-        anchors.horizontalCenter: parent.horizontalCenter
-        height: visible ? statusAppNavBar.navBarChatButton.height : 0
-        width: visible ? statusAppNavBar.navBarChatButton.width : 0
-        visible: !!statusAppNavBar.navBarChatButton
-    }
+        anchors.bottom: navBarProfileButtonSlot.top
+        anchors.bottomMargin: 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
-    }
+        spacing: navBarButtonSpacing
 
-    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
-            }
-        }
+        model: navBarModel
     }
 
     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
     }
 }
-

src/StatusQ/Popups/StatusModal.qml

@@ -18,6 +18,7 @@ QC.Popup {
     property alias leftButtons: footerImpl.leftButtons
     property bool showHeader: true
     property bool showFooter: true
+    property alias hasCloseButton: headerImpl.hasCloseButton
 
     signal editButtonClicked()
     signal headerImageClicked()

src/StatusQ/Popups/StatusSearchPopup.qml

@@ -93,11 +93,15 @@ StatusModal {
                     font.pixelSize: 28
                     font.family: Theme.palette.baseFont.name
                     color: Theme.palette.directColor1
+                    Keys.onPressed: {
+                        if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
+                            event.accepted = true
+                    }
                 }
             }
-            StatusMenuSeparator { 
+            StatusMenuSeparator {
                 topPadding: 0
-                Layout.fillWidth: true 
+                Layout.fillWidth: true
             }
             Item {
                 Layout.preferredWidth: parent.width
@@ -147,7 +151,7 @@ StatusModal {
                             id: sensor
                             anchors.fill: parent
                             hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor 
+                            cursorShape: Qt.PointingHandCursor
                             onClicked: root.searchOptionsPopupMenu.popup();
 
                             RowLayout {
@@ -168,9 +172,9 @@ StatusModal {
                                     icon: searchOptionsMenuButton.iconSettings
                                     name: searchOptionsMenuButton.primaryText
                                     active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
-                                        (searchOptionsMenuButton.iconSettings.name ||
-                                        searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
-                                        !!searchOptionsMenuButton.image.source.toString())
+                                            (searchOptionsMenuButton.iconSettings.name ||
+                                             searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
+                                             !!searchOptionsMenuButton.image.source.toString())
                                 }
 
                                 StatusBaseText {

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/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -19,6 +19,7 @@ Rectangle {
     property alias icon: imageWithTitle.icon
     property bool editable: false
     property alias headerImageEditable: imageWithTitle.headerImageEditable
+    property bool hasCloseButton: true
     property Component popupMenu
 
     signal editButtonClicked
@@ -76,7 +77,7 @@ Rectangle {
     Loader {
         id: actionButtonLoader
         objectName: "actionButtonloader"
-        anchors.right: closeButton.left
+        anchors.right: closeButton.visible ? closeButton.left : parent.right
         anchors.rightMargin: 8
         anchors.top: parent.top
         anchors.topMargin: 16
@@ -96,6 +97,7 @@ Rectangle {
         icon.color: Theme.palette.directColor1
         icon.width: 20
         icon.height: 20
+        visible: statusModalHeader.hasCloseButton
 
         onClicked: statusModalHeader.close()
     }

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,6 +276,7 @@
         <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>
@@ -315,5 +316,11 @@
         <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>
+        <file>src/StatusQ/Components/StatusTagSelector.qml</file>
+        <file>src/StatusQ/Components/StatusToastMessage.qml</file>
     </qresource>
 </RCC>