fix(DemoApp) Results popup component position

Fixed alignment when results are being filtered.
If the x position that the popup should be aligned
goes off the screen, the popup appears back on
position 0. Also fixed result list item was not
vertically centered.

Closes #531

.github/pull_request_template.md

@@ -1,17 +0,0 @@
-### Checklist
-
-- [ ] follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
-  - the scope should be the component's name e.g: `feat(StatusListItem): ... `
-  - when adding new components, the scope is the module e.g: `feat(StatusQ.Controls): ...`
-- [ ] add documentation if necessary (new component, new feature)
-- [ ] update sandbox app
-  - in case of new component, add new component page
-  - in case of new features, add variation to existing component page
-  - nice to have: add it to the demo application as well
-- [ ] test changes in both light and dark theme?
-- [ ] is this a breaking change?
-    - [ ] use the dedicated `BREAKING CHANGE` commit message section
-    - [ ] resolve breaking changes in [status-desktop](https://github.com/status-im/status-desktop)
-        - [ ] (pre-merge) adapt code to breaking changes
-        - [ ] (post-merge) update StatusQ submodule pointer
-- [ ] test changes in [status-desktop](https://github.com/status-im/status-desktop)

.gitignore

@@ -13,7 +13,3 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
-doc/html
-CMakeLists.txt.user
-.vscode
-build/

CHANGELOG.md

@@ -1,43 +1,3 @@
-<a name=""></a>
-##  0.25.0 (2022-03-07)
-
-
-#### Bug Fixes
-
-* **@StatusListItem:**  fix left padding ([f574e390](f574e390))
-* **StatusListItem:**  add propagateTitleClicks property to StatusListItem ([8495fae8](8495fae8))
-* **StatusQ.Popups:**  removed overlay setting (#557) ([665141f8](665141f8))
-* **StatusTagSelector:**  Updates and fixes in the component ([07a5dc09](07a5dc09))
-* **build:**  fix linux build ([9d06aae1](9d06aae1), closes [#413](413))
-* **sandbox:**  Fix results popup component position ([cdf51fef](cdf51fef))
-
-#### Features
-
-* **@StatusListItem:**  add option for tags ([381150a7](381150a7))
-* **StatusChatList:**  Highlight chat item at creation time ([9e6fbe95](9e6fbe95))
-* **StatusChatListItem:**  enable assigning emoji to chat item ([5fac8774](5fac8774))
-* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
-* **StatusQ:**  Moving docs outside sandbox ([825999b1](825999b1))
-* **StatusQ.Core:**  add new arrow-left icon ([e9f20be1](e9f20be1))
-* **StatusSmartIdenticon:**  Add support for color rings in StatusSmartIdenticon (#553) ([3b86d13a](3b86d13a), closes [#517](517))
-
-#### Breaking Changes
-
-* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
-
-
-
-<a name=""></a>
-##  0.24.0 (2022-02-14)
-
-
-#### Features
-
-* **StatusListItem:**  add highlighted property ([5780f183](5780f183))
-* **StatusQ.Components:**  Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
-
-
-
 <a name=""></a>
 ##  Version 0.23.0 (2022-02-08)
 

CMakeLists.txt

@@ -1,5 +0,0 @@
-cmake_minimum_required(VERSION 3.19)
-
-project(StatusQ)
-
-add_subdirectory(tests)

sandbox/DemoApp.qml

@@ -25,11 +25,10 @@ Rectangle {
         id: appSectionType
         readonly property int chat: 0
         readonly property int community: 1
-        readonly property int communitiesPortal: 2
-        readonly property int wallet: 3
+        readonly property int wallet: 2
         readonly property int browser: 3
-        readonly property int nodeManagement: 5
-        readonly property int profileSettings: 6
+        readonly property int nodeManagement: 4
+        readonly property int profileSettings: 5
         readonly property int apiDocumentation: 100
         readonly property int demoApp: 101
     }
@@ -119,11 +118,6 @@ Rectangle {
                         appView.sourceComponent = statusAppChatView
                         demoApp.setActiveItem(model.sectionId)
                     }
-                    else if(model.sectionType === appSectionType.communitiesPortal)
-                    {
-                        appView.sourceComponent = statusCommunityPortalView
-                        demoApp.setActiveItem(model.sectionId)
-                    }
                     else if(model.sectionType === appSectionType.profileSettings)
                     {
                         appView.sourceComponent = statusAppProfileSettingsView
@@ -211,11 +205,6 @@ Rectangle {
         StatusAppProfileSettingsView { }
     }
 
-    Component {
-        id: statusCommunityPortalView
-        StatusAppCommunitiesPortalView { }
-    }
-
     DemoContactRequestsModal {
         id: demoContactRequestsModal
         anchors.centerIn: parent

sandbox/ThemeSwitch.qml

@@ -7,8 +7,6 @@ Item {
     id: themeSwitchWrapper
     signal checkedChanged()
 
-    property alias lightThemeEnabled: switchControl.checked
-
     width: themeSwitch.width
     height: themeSwitch.height
 
@@ -28,7 +26,6 @@ Item {
             }
 
             StatusSwitch {
-                id: switchControl
                 onCheckedChanged: themeSwitchWrapper.checkedChanged()
 
                 StatusToolTip {

sandbox/controls/Buttons.qml

@@ -3,10 +3,9 @@ import QtQuick.Layouts 1.14
 import QtQuick.Dialogs 1.3
 
 import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
+
 Column {
     spacing: 10
     Grid {
@@ -308,15 +307,12 @@ Column {
         onClicked: {
             colorDialog.open();
         }
-    }
-
-    StatusColorDialog {
-        id: colorDialog
-        anchors.centerIn: parent
-        property bool colorSelected: false
-        onAccepted: {
-            colorSelected = true;
+        ColorDialog {
+            id: colorDialog
+            property bool colorSelected: false
+            onAccepted: {
+                colorSelected = true;
+            }
         }
     }
-
 }

sandbox/controls/Controls.qml

@@ -189,16 +189,6 @@ GridLayout {
         value: 40
     }
 
-    StatusLabeledSlider {
-        width: 360
-        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
-    }
-
-    StatusLabeledSlider {
-        width: 360
-        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
-    }
-
     StatusBanner {
         id: banner
         width: 360
@@ -208,7 +198,7 @@ GridLayout {
     }
 
     StatusProgressBar {
-        id: progressBar
+        id: progressBar        
         text: "Weak"
         value: 0.5
         fillColor : Theme.palette.pinColor1

sandbox/controls/Layout.qml

@@ -10,96 +10,31 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 
 Column {
-    spacing: 10
+    spacing: 5
 
     StatusChatToolBar {
-        toolbarComponent: chatInfoButton1
-        width: 518
-
-        Component {
-            id: chatInfoButton1
-
-            StatusChatInfoButton {
-                width: Math.min(implicitWidth, parent.width)
-                title: "Some contact"
-                subTitle: "Contact"
-                icon.color: Theme.palette.miscColor7
-                type: StatusChatInfoButton.Type.OneToOneChat
-             }
-        }
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
     }
 
     StatusChatToolBar {
-        toolbarComponent: chatInfoButton2
-        width: 518
-
-        Component {
-            id: chatInfoButton2
-            StatusChatInfoButton {
-                width: Math.min(implicitWidth, parent.width)
-                title: "Some contact"
-                subTitle: "Contact"
-                icon.color: Theme.palette.miscColor7
-                type: StatusChatInfoButton.Type.PublicChat
-                pinnedMessagesCount: 1
-                muted: true
-             }
-        }
+        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
-        toolbarComponent: chatInfoButton3
-        width: 518
-
-        Component {
-            id: chatInfoButton3
-
-            StatusChatInfoButton {
-                width: Math.min(implicitWidth, parent.width)
-                title: "Some contact"
-                subTitle: "Contact"
-                icon.color: Theme.palette.miscColor7
-                type: StatusChatInfoButton.Type.OneToOneChat
-                pinnedMessagesCount: 1
-             }
-        }
-    }
-
-    StatusChatToolBar {
-        notificationCount: 1
-        toolbarComponent: tagSelector
-        width: 518
-
-        Component {
-            id: tagSelector
-
-            StatusTagSelector {
-                namesModel: ListModel {
-                    ListElement {
-                        publicId: "0x0"
-                        name: "Maria"
-                        icon: ""
-                        isIdenticon: false
-                        onlineStatus: 3
-                        isReadonly: true
-                        tagIcon: "crown"
-                    }
-                    ListElement {
-                        publicId: "0x1"
-                        name: "James"
-                        icon: ""
-                        isIdenticon: false
-                        onlineStatus: 1
-                        isReadonly: false
-                        tagIcon: ""
-                    }
-                }
-                toLabelText: qsTr("To: ")
-                warningText: qsTr("USER LIMIT REACHED")
-            }
-        }
     }
 
     Row {

sandbox/controls/ListItems.qml

@@ -4,7 +4,6 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
-import StatusQ.Core.Utils 0.1
 
 GridLayout {
     columns: 1
@@ -26,7 +25,7 @@ GridLayout {
         badge.value: 1
     }
     StatusNavigationListItem {
-        title: "Menu Item (selected) with very long text"
+        title: "Menu Item (selected)"
         selected: true
         icon.name: "info"
         badge.value: 1
@@ -65,12 +64,6 @@ GridLayout {
         type: StatusChatListItem.Type.CommunityChat
     }
 
-    StatusChatListItem {
-        name: "community-channel-emoji"
-        type: StatusChatListItem.Type.CommunityChat
-        icon.emoji: "😁"
-    }
-
     StatusChatListItem {
         name: "community-channel-with-image"
         image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
@@ -329,43 +322,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         badge.icon.isLetterIdenticon: true
     }
 
-    StatusListItem {
-        title: "List Item with Tags"
-        icon.isLetterIdenticon: true
-        bottomModel: 3
-        bottomDelegate: StatusListItemTag {
-            title: "tag"
-            icon.isLetterIdenticon: true
-        }
-    }
-
-    StatusListItem {
-        title: "List Item with Inline Tags"
-        icon.isLetterIdenticon: true
-        tagsModel : 2
-        tagsDelegate: StatusListItemTag {
-            color: "blue"
-            height: 24
-            radius: 6
-            closeButtonVisible: false
-            icon.emoji: "😁"
-            icon.emojiSize: Emoji.size.verySmall
-            icon.isLetterIdenticon: true
-            title: "helloworld.eth"
-            titleText.font.pixelSize: 12
-            titleText.color: Theme.palette.indirectColor1
-        }
-    }
-
-    StatusListItem {
-        title: "List Item with Emoji"
-        subTitle: "Emoji"
-        icon.emoji: "😁"
-        icon.color: "yellow"
-        icon.letterSize: 14
-        icon.isLetterIdenticon: true
-    }
-
     StatusDescriptionListItem {
         title: "Title"
         subTitle: "Subtitle"
@@ -394,55 +350,34 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     StatusMemberListItem {
         nickName: "This is an example"
         userName: "annabelle"
-        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isVerified: true
-        isContact: true
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        trustIndicator: StatusMemberListItem.TrustedType.Verified
+        isMutualContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        status: 1 // FIXME: use enum
-        ringSettings.ringSpecModel:
-            ListModel {
-                ListElement {colorId: 13; segmentLength: 5}
-                ListElement {colorId: 31; segmentLength: 5}
-                ListElement {colorId: 10; segmentLength: 1}
-                ListElement {colorId: 2; segmentLength: 5}
-                ListElement {colorId: 26; segmentLength: 2}
-                ListElement {colorId: 19; segmentLength: 4}
-                ListElement {colorId: 28; segmentLength: 3}
-            }
-        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+        isOnline: true
     }
 
     StatusMemberListItem {
         nickName: "carmen.eth"
-        isUntrustworthy: true
-    }
-
-    StatusMemberListItem {
-        nickName: "very-long-annoying-nickname.eth"
-        isUntrustworthy: true
+        isOnline: false
+        trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
     }
 
     StatusMemberListItem {
         nickName: "This girl I know from work"
         userName: "annabelle"
-        status: 1 // FIXME: use enum
+        isOnline: true        
     }
 
     StatusMemberListItem {
         nickName: "Mark Cuban"
         userName: "annabelle"
-        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isContact: true
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isMutualContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                        nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
     }
-
-    StatusMemberListItem {
-        nickName: "admin.guy"
-        isAdmin: true
-        isUntrustworthy: true
-    }
 }

sandbox/controls/Others.qml

@@ -4,58 +4,38 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
-ColumnLayout {
-    GridLayout {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+GridLayout {
+    columns: 6
+    columnSpacing: 5
+    rowSpacing: 5
 
-        columns: 6
-        columnSpacing: 5
-        rowSpacing: 5
-
-        StatusLoadingIndicator {
-            color: Theme.palette.directColor4
-        }
-
-        StatusLetterIdenticon {
-            name: "#status"
-        }
-
-        StatusRoundedImage {
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-        }
-
-        StatusBadge {}
-
-        StatusBadge {
-            value: 1
-        }
-
-        StatusBadge {
-            value: 10
-        }
-
-        StatusBadge {
-            value: 100
-        }
-
-        StatusRoundIcon {
-            icon.name: "info"
-        }
+    StatusLoadingIndicator {
+        color: Theme.palette.directColor4
     }
 
-    Flow {
-        Layout.fillWidth: true
-        spacing: 4
+    StatusLetterIdenticon {
+        name: "#status"
+    }
 
-        Repeater {
-            model: 12
-            StatusLetterIdenticon {
-                name: "A"
-                color: Theme.palette.userCustomizationColors[index]
-                letterSize: 16
-            }
-        }
+    StatusRoundedImage {
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusBadge {}
+
+    StatusBadge {
+        value: 1
+    }
+
+    StatusBadge {
+        value: 10
+    }
+
+    StatusBadge {
+        value: 100
+    }
+
+    StatusRoundIcon {
+        icon.name: "info"
     }
 }
-

sandbox/controls/Popups.qml

@@ -78,11 +78,6 @@ Column {
         onClicked: editTitleModal.open()
     }
 
-    StatusButton {
-        text: "Modal with Advanced Header/Footer"
-        onClicked: advancedHeaderFooterModal.open()
-    }
-
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -358,42 +353,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         header.editable: true
     }
 
-    StatusModal {
-        id: advancedHeaderFooterModal
-        anchors.centerIn: parent
-        showHeader: false
-        showFooter: false
-        showAdvancedHeader: true
-        showAdvancedFooter: true
-        height: 200
-        advancedHeaderComponent: Rectangle {
-            width: parent.width
-            height: 50
-            color: Theme.palette.baseColor1
-            border.width: 1
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: "Add any header here"
-                font.pixelSize: 15
-                color: Theme.palette.directColor1
-            }
-
-        }
-        advancedFooterComponent: Rectangle {
-            width: parent.width
-            height: 50
-            color: Theme.palette.baseColor1
-            border.width: 1
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: "Add any footer here"
-                font.pixelSize: 15
-                color: Theme.palette.directColor1
-            }
-
-        }
-    }
-
     ListModel {
         id: dummyAccountsModel
         ListElement{name: "Account 1"; iconName: "filled-account"}

sandbox/demoapp/ChatChannelView.qml

@@ -41,8 +41,7 @@ ListView {
             }
             messageText: model.message
             hasMention: model.hasMention
-            isMutualContact: model.isMutualContact
-            trustIndicator: model.trustIndicator
+            contactType: model.contactType
             isPinned: model.isPinned
             pinnedBy: model.pinnedBy
             hasExpired: model.hasExpired

sandbox/demoapp/CreateChatView.qml

@@ -1,6 +1,8 @@
 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
@@ -26,55 +28,33 @@ Page {
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
             Layout.leftMargin: 17
-            maxHeight: root.height
+            implicitHeight: 44
             toLabelText: qsTr("To: ")
-            warningText: qsTr("USER LIMIT REACHED")
-            listLabel: qsTr("Contacts")
-            ringSpecModelGetter: function(pubKey) {
-                //for simulation purposes only, in real app
-                //this would be Utils.getColorHashAsJson(pubKey)
-                var index = -1;
-                if (!!contactsModel) {
-                    for (var i = 0; i < contactsModel.count; i++) {
-                        if (contactsModel.get(i).pubKey === pubKey) {
-                            index = i;
+            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;
                         }
                     }
-                    return contactsModel.get(index).ringSpecModel;
                 } else {
-                    return null;
+                    userListView.model = contactsModel;
                 }
             }
-            compressedKeyGetter: function(pubKey) {
-                //for simulation purposes only, in real app
-                //this would be Utils.getCompressedPk(pubKey);
-                var possibleCharacters = pubKey.split('');
-                var randomStringLength = 12; // assuming you want random strings of 12 characters
-                var randomString = [];
-                for (var i=0; i<randomStringLength; ++i) {
-                    var index = (Math.random() * possibleCharacters.length).toFixed(0);
-                    var nextChar = possibleCharacters[index];
-                    randomString.push(nextChar);
-                }
-                return randomString.join().toString().replace(/,/g, '');
-            }
-            colorIdForPubkeyGetter: function (pubKey) {
-                //for simulation purposes only, in real app
-                //this would be Utils.colorIdForPubkey(pubKey);
-                return Math.floor(Math.random() * 10);
-            }
-            onTextChanged: {
-                sortModel(root.contactsModel);
-            }
-            Component.onCompleted: {
-                textEdit.forceActiveFocus();
-                sortModel(root.contactsModel);
-            }
         }
 
         StatusButton {
             implicitHeight: 44
-            Layout.alignment: Qt.AlignTop
             enabled: (tagSelector.namesModel.count > 0)
             text: "Confirm"
         }
@@ -82,7 +62,159 @@ Page {
 
     contentItem: Item {
         anchors.fill: parent
-        anchors.topMargin: 68
+        anchors.topMargin: headerRow.height + 16
+
+        Item {
+            anchors.fill: parent
+            visible: (contactsModel.count > 0)
+
+            StatusBaseText {
+                id: contactsLabel
+                font.pixelSize: 15
+                anchors.left: parent.left
+                anchors.leftMargin: 8
+                color: Theme.palette.baseColor1
+                text: qsTr("Contacts")
+            }
+            Control {
+                width: 360
+                anchors {
+                    top: contactsLabel.bottom
+                    topMargin: 8//Style.current.padding
+                    bottom: !statusPopupMenuBackgroundContent.visible ?  parent.bottom : undefined
+                    bottomMargin: 20//Style.current.bigPadding
+                }
+                height: 16 + (!statusPopupMenuBackgroundContent.visible ? parent.height :
+                        (((userListView.count * 64) > parent.height) ? parent.height : (userListView.count * 64)))
+                x: (statusPopupMenuBackgroundContent.visible && (tagSelector.namesModel.count > 0) &&
+                   ((tagSelector.textEdit.x + 24 + statusPopupMenuBackgroundContent.width) < parent.width))
+                   ? (tagSelector.textEdit.x + 24) : 0
+                background: Rectangle {
+                    id: statusPopupMenuBackgroundContent
+                    anchors.fill: parent
+                    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.fill: parent
+                    anchors.topMargin: 8
+                    anchors.bottomMargin: 8
+                    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.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)

sandbox/demoapp/StatusAppChatView.qml

@@ -27,19 +27,21 @@ StatusAppThreePanelLayout {
 
         RowLayout {
             id: searchInputWrapper
-            width: 288
+            width: parent.width
             height: searchInput.height
             anchors.top: headline.bottom
             anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 8
 
             StatusBaseInput {
                 id: searchInput
                 Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                Layout.leftMargin: 17
                 implicitHeight: 36
                 topPadding: 8
-                bottomPadding: 8
+                bottomPadding: 0
                 placeholderText: "Search"
                 icon.name: "search"
             }
@@ -59,7 +61,7 @@ StatusAppThreePanelLayout {
         Column {
             anchors.top: searchInputWrapper.bottom
             anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width
             spacing: 8
 
             StatusContactRequestsIndicatorListItem {
@@ -70,8 +72,8 @@ StatusAppThreePanelLayout {
             }
 
             StatusChatList {
+                anchors.horizontalCenter: parent.horizontalCenter
                 model: Models.demoChatListItems
-                highlightItem: !root.createChat
                 onChatItemUnmuted: {
                     for (var i = 0; i < Models.demoChatListItems.count; i++) {
                         let item = Models.demoChatListItems.get(i);
@@ -126,18 +128,19 @@ StatusAppThreePanelLayout {
     centerPanel: Loader {
         anchors.fill: parent
         sourceComponent: root.createChat ? createChatView : chatChannelView
-        Component {
-            id: createChatView
-            CreateChatView {
-                contactsModel: Models.membersListModel
-            }
-        }
+    }
 
-        Component {
-            id: chatChannelView
-            ChatChannelView {
-                model: Models.chatMessagesModel
-            }
+    Component {
+        id: createChatView
+        CreateChatView {
+            contactsModel: Models.dummyContactsModel
+        }
+    }
+
+    Component {
+        id: chatChannelView
+        ChatChannelView {
+            model: Models.chatMessagesModel
         }
     }
 
@@ -145,8 +148,15 @@ StatusAppThreePanelLayout {
         anchors.fill: parent
 
         StatusChatToolBar {
+            anchors.top: parent.top
             width: parent.width
-            toolbarComponent: statusChatInfoButton
+
+            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
@@ -179,19 +189,6 @@ StatusAppThreePanelLayout {
                     type: StatusMenuItem.Type.Danger
                 }
             }
-
-            Component {
-                id: statusChatInfoButton
-
-                StatusChatInfoButton {
-                   width: Math.min(implicitWidth, parent.width)
-                   title: "Amazing Funny Squirrel"
-                   subTitle: "Contact"
-                   icon.color: Theme.palette.miscColor7
-                   type: StatusChatInfoButton.Type.OneToOneChat
-                   pinnedMessagesCount: 1
-                }
-            }
         }
     }
 }

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -1,156 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-import "../demoapp/data" 1.0
-
-
-ScrollView {
-    id: root
-
-    QtObject {
-        id: d
-
-        property ListModel featuredCommunitiesModel: Models.featuredCommunitiesModel
-        property ListModel popularCommunitiesModel: Models.curatedCommunitiesModel
-        property ListModel tagsModel: Models.tagsModel
-
-        property string searchText: ""
-        property int layoutVMargin: 70
-        property int layoutHMargin: 64
-        property int titlePixelSize: 28
-        property int subtitlePixelSize: 17
-        property int stylePadding: 16
-
-        function navigateToCommunity(communityId) {
-            console.info("Clicked community ID: " + communityId)
-        }
-    }
-
-    contentHeight: column.height + d.layoutVMargin
-    contentWidth: column.width + d.layoutHMargin
-    clip: true
-
-    ColumnLayout {
-        id: column
-        spacing: 18
-
-        StatusBaseText {
-            Layout.topMargin: d.layoutVMargin
-            Layout.leftMargin: d.layoutHMargin
-            text: qsTr("Find community")
-            font.weight: Font.Bold
-            font.pixelSize: d.titlePixelSize
-            color: Theme.palette.directColor1
-        }
-
-        // Tags definition - Now hidden - Out of scope
-        // TODO: Replace by `StatusListItemTagRow`
-        Row {
-            visible: d.tagsModel.count > 0
-            Layout.leftMargin: d.layoutHMargin
-            Layout.rightMargin: d.layoutHMargin
-            width: 1234 // by design
-            spacing: d.stylePadding/2
-
-            Repeater {
-                model: d.tagsModel
-                delegate: StatusListItemTag {
-                    border.color: Theme.palette.baseColor2
-                    color: "transparent"
-                    height: 32
-                    radius: 36
-                    closeButtonVisible: false
-                    icon.emoji: model.emoji
-                    icon.height: 32
-                    icon.width: icon.height
-                    icon.color: "transparent"
-                    icon.isLetterIdenticon: true
-                    title: model.name
-                    titleText.font.pixelSize: 15
-                    titleText.color: Theme.palette.primaryColor1
-                }
-            }
-        }
-
-        StatusBaseText {
-            Layout.leftMargin: d.layoutHMargin
-            Layout.topMargin: 20
-            text: qsTr("Featured")
-            font.weight: Font.Bold
-            font.pixelSize: d.subtitlePixelSize
-            color: Theme.palette.directColor1
-        }
-
-        GridLayout {
-            id: featuredGrid
-            Layout.leftMargin: d.layoutHMargin
-            columns: 3
-            columnSpacing: d.stylePadding
-            rowSpacing: d.stylePadding
-
-            Repeater {
-                model: d.featuredCommunitiesModel
-                delegate: StatusCommunityCard {
-                    locale: "es"
-                    communityId: model.communityId
-                    loaded: model.available
-                    logo: model.logo
-                    name: model.name
-                    description: model.description
-                    members: model.members
-                    popularity: model.popularity
-                    communityColor: model.communityColor
-                    categories: ListModel {
-                        ListElement { name: "sport"; emoji: "🎾"}
-                        ListElement { name: "food"; emoji: "🥑"}
-                        ListElement { name: "privacy"; emoji: "👻"}
-                    }
-
-                    onClicked: { d.navigateToCommunity(communityId) }
-                }
-            }
-        }
-
-        StatusBaseText {
-            Layout.leftMargin: d.layoutHMargin
-            Layout.topMargin: 20
-            text: qsTr("Popular")
-            font.weight: Font.Bold
-            font.pixelSize: d.subtitlePixelSize
-            color: Theme.palette.directColor1
-        }
-
-        GridLayout {
-            Layout.leftMargin: d.layoutHMargin
-            columns: 3
-            columnSpacing: d.stylePadding
-            rowSpacing: d.stylePadding
-
-            Repeater {
-                model: d.popularCommunitiesModel
-                delegate: StatusCommunityCard {
-                    locale: "es"
-                    communityId: model.communityId
-                    loaded: model.available
-                    logo: model.logo
-                    name: model.name
-                    description: model.description
-                    members: model.members
-                    activeUsers: model.activeUsers
-                    popularity: model.popularity
-                    tokenLogo: model.tokenLogo
-                    isPrivate: model.isPrivate
-                    banner: model.banner
-
-                    onClicked: { d.navigateToCommunity(communityId) }
-                }
-            }
-        }
-    }
-}

sandbox/demoapp/StatusAppCommunityView.qml

@@ -166,10 +166,13 @@ StatusAppThreePanelLayout {
     centerPanel: Item {
         StatusChatToolBar {
             id: statusChatToolBar
-
+            anchors.top: parent.top
             width: parent.width
-            toolbarComponent: statusChatInfoButton
 
+            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,
@@ -181,18 +184,6 @@ StatusAppThreePanelLayout {
             onMembersButtonClicked: {
                 root.showRightPanel = !root.showRightPanel;
             }
-
-            Component {
-                id: statusChatInfoButton
-
-                StatusChatInfoButton {
-                   width: Math.min(implicitWidth, parent.width)
-                   title: "general"
-                   subTitle: "Community Chat"
-                   icon.color: Theme.palette.miscColor6
-                   type: StatusChatInfoButton.Type.CommunityChat
-                }
-            }
         }
 
         StatusSearchPopup {
@@ -267,15 +258,14 @@ StatusAppThreePanelLayout {
             model: Models.membersListModel
             delegate: StatusMemberListItem {
                 implicitWidth: parent.width
-                nickName: model.localNickname
-                userName: model.displayName
-                pubKey: model.pubKey
-                isVerified: model.isVerified
-                isUntrustworthy: model.isUntrustworthy
-                isContact: model.isContact
-                image.source: model.icon
-                image.isIdenticon: false
-                status: model.onlineStatus
+                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/data/Models.qml

@@ -4,15 +4,65 @@ import StatusQ.Components 0.1
 
 QtObject {
 
+    property ListModel dummyContactsModel: 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
+        }
+        ListElement {
+            publicId: "0x5"
+            name: "Steven"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 2
+        }
+        ListElement {
+            publicId: "0x6"
+            name: "Helen"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+    }
+
     property var demoChatListItems: ListModel {
         id: demoChatListItems
         ListElement {
             itemId: "x012340000"
             name: "#status"
             icon: ""
-            emoji: ""
             isIdenticon: false
-            colorHash: []
             color: "blue"
             description: ""
             type: StatusChatListItem.Type.PublicChat
@@ -28,9 +78,7 @@ QtObject {
             itemId: "x012340001"
             name: "status-desktop"
             icon: ""
-            emoji: ""
             isIdenticon: false
-            colorHash: []
             color: "red"
             description: ""
             type: StatusChatListItem.Type.PublicChat
@@ -47,9 +95,7 @@ QtObject {
             name: "Amazing Funny Squirrel"
             icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            emoji: ""
             isIdenticon: true
-            colorHash: []
             color: "green"
             description: ""
             type: StatusChatListItem.Type.OneToOneChat
@@ -65,9 +111,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             itemId: "x012340003"
             name: "Black Ops"
             icon: ""
-            emoji: ""
             isIdenticon: false
-            colorHash: []
             color: "purple"
             description: ""
             type: StatusChatListItem.Type.OneToOneChat
@@ -83,9 +127,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             itemId: "x012340004"
             name: "Spectacular Growing Otter"
             icon: ""
-            emoji: ""
             isIdenticon: false
-            colorHash: []
             color: "orange"
             description: ""
             type: StatusChatListItem.Type.OneToOneChat
@@ -101,9 +143,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             itemId: "x012340005"
             name: "channel-with-a-super-duper-long-name"
             icon: ""
-            emoji: ""
             isIdenticon: false
-            colorHash: []
             color: "green"
             description: ""
             type: StatusChatListItem.Type.PublicChat
@@ -357,6 +397,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: ""
             iconName: "chat"
             iconColor: ""
+            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_1_1"
@@ -364,6 +405,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
                     iconName: ""
                     iconColor: ""
+                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_1_2"
@@ -371,6 +413,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
                     iconName: ""
                     iconColor: ""
+                    isIdenticon: true
                 }]}
         ListElement {
             value: "item_2"
@@ -378,6 +421,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
             iconName: ""
             iconColor: ""
+            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_2_1"
@@ -385,6 +429,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
+                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_2_2"
@@ -392,6 +437,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
+                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_2_3"
@@ -399,6 +445,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
+                    isIdenticon: false
                 }]}
         ListElement {
             value: "item_3"
@@ -406,6 +453,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: "";
             iconName: "info"
             iconColor: ""
+            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_3_1"
@@ -413,6 +461,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
+                    isIdenticon: false
                 }]}
         ListElement {
             value: "item_4"
@@ -420,6 +469,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: "";
             iconName: ""
             iconColor: "red"
+            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_4_1"
@@ -427,6 +477,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
+                    isIdenticon: false
                 }]}
     }
 
@@ -446,8 +497,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f5789"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 2
             hasMention: false
             editMode: false
             isReply: false
@@ -475,8 +525,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+            contactType: 3
             hasMention: false
             editMode: false
             isReply: false
@@ -503,8 +552,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkUlEQVR4nOzYwQmDQBQG4SSkl3SQyizDyuzAavTi0cPK8sPwM9/Rw8rw4KH7eZUwhMYQGkNoDKGpCfmmDl63/bh7vvx/78T7aiZiCI0hNMMbJL2FZs+vmYghNIbQTG+cp9smtf1qJmIIjSEKqZmIITSG0Azfa6W/qfxDvBhCY4hCaiZiCI0hNIbQGEJzBgAA///3pSBjX42sYAAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+            contactType: 3
             hasMention: false
             editMode: false
             isReply: false
@@ -531,8 +579,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage:  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f6789"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 4
             hasMention: false
             editMode: false
             isReply: false
@@ -560,8 +607,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: false
@@ -589,8 +635,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: false
@@ -618,8 +663,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
             hasMention: true
             editMode: false
             isReply: false
@@ -648,8 +692,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: true
@@ -678,8 +721,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: true
@@ -708,8 +750,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: true
@@ -738,8 +779,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: true
@@ -767,8 +807,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: false
@@ -795,8 +834,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: false
@@ -823,8 +861,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 0
             hasMention: false
             editMode: false
             isReply: false
@@ -843,50 +880,47 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     property var membersListModel: ListModel {
         id: membersList
         ListElement {
-            localNickname: "This is an example"
-            displayName: "Maria"
-            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            isVerified: true
-            isUntrustworthy: false
-            isContact: true
-            onlineStatus: 1
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+            nickName: "This is an example"
+            userName: "annabelle"
+            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            trustIndicator: StatusMemberListItem.TrustedType.Verified
+            isMutualContact: true
+            isOnline: true
+            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                             nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isAdmin: false
+            isIdenticon: true
         }
         ListElement {
-            localNickname: ""
-            displayName: "carmen.eth"
-            pubKey: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            isVerified: false
-            isUntrustworthy: true
-            isContact: false
-            onlineStatus: 0
-            icon: ""
-            isAdmin: false
+            nickName: "carmen.eth"
+            userName: ""
+            chatKey: ""
+            trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+            isMutualContact: false
+            isOnline: false
+            source: ""
+            isIdenticon: false
         }
         ListElement {
-            localNickname: "This girl I know from work"
-            displayName: "annabelle"
-            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486dsfkjghyu2cf04"
-            isVerified: false
-            isUntrustworthy: false
-            isContact: false
-            onlineStatus: 1
-            isAdmin: false
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
+            nickName: "This girl I know from work"
+            userName:  "annabelle"
+            chatKey: ""
+            trustIndicator: StatusMemberListItem.TrustedType.None
+            isMutualContact: false
+            isOnline: true
+            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
                      ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
+            isIdenticon: true
         }
         ListElement {
-            localNickname: "Mark Cuban"
-            displayName: "mark.eth"
-            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            isVerified: false
-            isUntrustworthy: true
-            isContact: true
-            onlineStatus: 0
-            icon: ""
-            isAdmin: false
+            nickName: "Mark Cuban"
+            userName: "annabelle"
+            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+            isMutualContact: true
+            isOnline: false
+            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                     nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: true
         }
     }
 
@@ -948,20 +982,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             hasNotification: false
             notificationsCount: 0
         }
-        ListElement {
-            sectionId: "communitiesPortal"
-            sectionType: 2
-            name: "Communities Portal"
-            active: false
-            image: ""
-            icon: "communities"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
         ListElement {
             sectionId: "wallet"
-            sectionType: 3
+            sectionType: 2
             name: "Wallet"
             active: false
             image: ""
@@ -972,7 +995,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
         ListElement {
             sectionId: "browser"
-            sectionType: 4
+            sectionType: 3
             name: "Browser"
             active: false
             image: ""
@@ -993,489 +1016,4 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             notificationsCount: 0
         }
     }
-
-    property ListModel currencyPickerModel: ListModel {
-        ListElement {
-            key: 0
-            name: "United States Dollar"
-            shortName: "USD"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 1
-            name: "British Pound"
-            shortName: "GBP"
-            symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Euro"
-            shortName: "EUR"
-            symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Shout Korean Won"
-            shortName: "KRW"
-            symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Ethereum"
-            shortName: "ETH"
-            symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Tokens"
-            selected: true
-        }
-        ListElement {
-            key: 5
-            name: "Bitcoin"
-            shortName: "BTC"
-            symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Tokens"
-            selected: false
-        }
-        ListElement {
-            key: 6
-            name: "Status Network Token"
-            shortName: "SNT"
-            symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: "Tokens"
-            selected: false
-        }
-
-        ListElement {
-            key: 7
-            name: "Emirati Dirham"
-            shortName: "AED"
-            symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 8
-            name: "Afghani"
-            shortName: "AFN"
-            symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 9
-            name: "Argentine Peso"
-            shortName: "AFN"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-    }
-
-    property ListModel currencyPickerModel2: ListModel {
-        ListElement {
-            key: 0
-            name: "United States Dollar"
-            shortName: "USD"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 1
-            name: "British Pound"
-            shortName: "GBP"
-            symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Euro"
-            shortName: "EUR"
-            symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Shout Korean Won"
-            shortName: "KRW"
-            symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Ethereum"
-            shortName: "ETH"
-            symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Tokens"
-            selected: true
-        }
-        ListElement {
-            key: 5
-            name: "Bitcoin"
-            shortName: "BTC"
-            symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Tokens"
-            selected: false
-        }
-        ListElement {
-            key: 6
-            name: "Status Network Token"
-            shortName: "SNT"
-            symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: "Tokens"
-            selected: false
-        }
-
-        ListElement {
-            key: 7
-            name: "Emirati Dirham"
-            shortName: "AED"
-            symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 8
-            name: "Afghani"
-            shortName: "AFN"
-            symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 9
-            name: "Argentine Peso"
-            shortName: "AFN"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-    }
-
-    property ListModel languagePickerModel: ListModel {
-        ListElement {
-            key: 0
-            name: "English"
-            shortName: "English"
-            imageSource: "../../assets/twemoji/26x26/1f1ec-1f1e7.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 1
-            name: "Korean"
-            shortName: "한국어"
-            imageSource: "../../assets/twemoji/26x26/1f1f0-1f1f7.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Portuguese (Brazilian)"
-            shortName: "Português"
-            imageSource: "../../assets/twemoji/26x26/1f1e7-1f1f7.png"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Dutch"
-            shortName: "Nederlands"
-            imageSource: "../../assets/twemoji/26x26/1f1f3-1f1f1.png"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Indonesian"
-            shortName: "Bahasa Indonesia"
-            imageSource: "../../assets/twemoji/26x26/1f1ee-1f1e9.png"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 5
-            name: "Spanish"
-            shortName: "Español"
-            imageSource: "../../assets/twemoji/26x26/1f1ea-1f1e6.png"
-            category: "Beta Languages"
-            selected: false
-        }
-    }
-
-    property ListModel languageNoImagePickerModel: ListModel {
-        ListElement {
-            key: 0
-            name: "Chinese (Mainland China)"
-            shortName: "普通话"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 1
-            name: "Russian"
-            shortName: "Русский Язык"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Arabic"
-            shortName: "اَلْعَرَبِيَّةُ"
-            category: "Beta Languages"
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Chinese (Taiwan)"
-            shortName: "臺灣華語"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Filipino"
-            shortName: "Wikang Filipino"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 5
-            name: "French"
-            shortName: "Français"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 6
-            name: "Italian"
-            shortName: "Italiano"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 7
-            name: "Turkish"
-            shortName: "Türkçe"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 8
-            name: "Urdu"
-            shortName: "اُردُو"
-            category: "Beta Languages"
-            selected: false
-        }
-    }
-
-    property ListModel featuredCommunitiesModel : ListModel {
-        ListElement {
-            name: "CryptoKitties";
-            description: "A community of cat lovers, meow!";
-            logo:"qrc:/images/CryptoKitties.png";
-            members: 1045;
-            categories: [];
-            communityId: "341";
-            available: true;
-            popularity: 1;
-            communityColor: "pink"
-        }
-        ListElement {
-            name: "Friends with Benefits";
-            description: "A group chat full of out favorite thinkers and creators.";
-            logo:"qrc:/images/FriendsBenefits.png";
-            members: 452;
-            categories: [];
-            communityId: "232";
-            available: true;
-            popularity: 2;
-            communityColor: "grey"
-        }
-        ListElement {
-            name: "Status Hi!!";
-            description: "A new community description with long long long and repetitive repetitive repetitive repetitive explanation!!";
-            logo:"qrc:/images/SNT.png";
-            members: 89;
-            categories: [];
-            communityId: "223";
-            available: true;
-            popularity: 3
-            communityColor: "blue"
-        }
-    }
-
-    property ListModel curatedCommunitiesModel : ListModel {
-        ListElement {
-            name: "Status.im";
-            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
-            logo: "qrc:/images/SNT.png";
-            banner: "qrc:/images/CommunityBanner1.png";
-            members: 299500;
-            activeUsers: 71400;
-            categories: [];
-            communityId: "1";
-            available: true;
-            popularity: 1
-            isPrivate: true
-            tokenLogo: "qrc:/images/SNT.png";
-        }
-        ListElement {
-            name: "SuperRare";
-            description: "The future of CryptoArt markets—a network governed by artists, collectors and curators.";
-            logo:"qrc:/images/SR.png";
-            banner: "qrc:/images/SuperRareCommunityBanner.png";
-            members: 299500;
-            activeUsers: 71400;
-            categories: [];
-            communityId: "2";
-            available: true;
-            popularity: 2
-            isPrivate: true
-            tokenLogo: "qrc:/images/SRToken.png";
-        }
-        ListElement {
-            name: "Coinbase";
-            description: "Jump start your crypto portfolio with the easiest place to buy and sell crypto. ";
-            logo:"qrc:/images/Coinbase.png";
-            banner: "qrc:/images/CoinBaseCommunityBanner.png";
-            members: 4900000;
-            activeUsers: 245600;
-            categories: [];
-            communityId: "3";
-            available: true;
-            popularity: 3
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Rarible";
-            description: "Multichain community-centric NFT marketplace. Create, sell and collect NFTs.";
-            logo:"qrc:/images/Rarible.png";
-            banner: "qrc:/images/RaribleCommunityBanner.png";
-            members: 629200;
-            activeUsers: 112100;
-            categories: [];
-            communityId: "4";
-            available: true;
-            popularity: 4
-            isPrivate: true
-            tokenLogo: "qrc:/images/RARI.png";
-        }
-        ListElement {
-            name: "Spotify";
-            description: "Listening is everything";
-            logo:"qrc:/images/Spotify.png";
-            banner: "qrc:/images/SpotifyCommunityBanner.png";
-            members: 207500;
-            activeUsers: 52200;
-            categories: [];
-            communityId: "5";
-            available: true;
-            popularity: 5
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Dribbble";
-            description: "Open source platform to write and distribute decentralized applications..";
-            logo:"qrc:/images/Fluff.png";
-            banner: "qrc:/images/DribbbleCommunityBanner.png";
-            members: 2300000;
-            activeUsers: 112100;
-            categories: [];
-            communityId: "6";
-            available: true;
-            popularity: 6
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Status.im";
-            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
-            logo:"qrc:/images/SNT.png";
-            banner: ""
-            members: 299500;
-            activeUsers: 71400;
-            categories: [];
-            communityId: "7";
-            available: true;
-            popularity: 1
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "CryptoPunks";
-            description: "Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here.";
-            logo:"qrc:/images/CryptoPunks.png";
-            banner: "";
-            members: 4900;
-            activeUsers: 245600;
-            categories: [];
-            communityId: "8";
-            available: false;
-            popularity: 8
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Socks";
-            description: "Community description goes here.";
-            logo:"qrc:/images/Socks.png";
-            banner: "";
-            members: 4900;
-            activeUsers: 245600;
-            categories: [];
-            communityId: "9";
-            available: false;
-            popularity: 9
-            isPrivate: false
-            tokenLogo: "";
-        }
-    }
-
-    property ListModel tagsModel : ListModel {
-        ListElement { name: "gaming"; emoji: "🎮"}
-        ListElement { name: "art"; emoji: "🖼️️"}
-        ListElement { name: "crypto"; emoji: "💸"}
-        ListElement { name: "nsfw"; emoji: "🍆"}
-        ListElement { name: "markets"; emoji: "💎"}
-        ListElement { name: "defi"; emoji: "📈"}
-        ListElement { name: "travel"; emoji: "🚁"}
-        ListElement { name: "web3"; emoji: "🗺"}
-        ListElement { name: "sport"; emoji: "🎾"}
-        ListElement { name: "food"; emoji: "🥑"}
-        ListElement { name: "enviroment"; emoji: "☠️"}
-        ListElement { name: "privacy"; emoji: "👻"}
-    }
 }

sandbox/doc/src/statusqcomponents.qdoc

@@ -22,7 +22,6 @@
        \li \l{StatusDescriptionListItem}
        \li \l{StatusLetterIdenticon}
        \li \l{StatusListItem}
-       \li \l{StatusListPicker}
        \li \l{StatusListSectionHeadline}
        \li \l{StatusLoadingIndicator}
        \li \l{StatusMemberListItem}
@@ -38,6 +37,5 @@
        \li \l{StatusMessageDetails}
        \li \l{StatusTagSelector}
        \li \l{StatusToastMessage}
-       \li \l{StatusWizardStepper}
    \endlist
 */

sandbox/doc/src/statusqcontrols.qdoc

@@ -30,11 +30,8 @@
        \li \l{StatusSlider}
        \li \l{StatusSelect}
        \li \l{StatusBaseInput}
-       \li \l{StatusIdenticonRing}
        \li \l{StatusInput}
-       \li \l{StatusItemPicker}
        \li \l{StatusPickerButton}
-       \li \l{StatusPinInput}
        \li \l{StatusProgressBar}
        \li \l{StatusPasswordStrengthIndicator}
        \li \l{StatusSwitchTabButton}
@@ -42,8 +39,5 @@
        \li \l{StatusSelectableText}
        \li \l{StatusWalletColorButton}
        \li \l{StatusWalletColorSelect}
-       \li \l{StatusRegularExpressionValidator}
-       \li \l{StatusIntValidator}
-       \li \l{StatusSeedPhraseInput}
    \endlist
 */

sandbox/doc/src/statusqcore.qdoc

@@ -15,7 +15,6 @@
        \li \l{StatusIcon}
        \li \l{StatusIconBackgroundSettings}
        \li \l{StatusIconSettings}
-       \li \l{StatusIdenticonRingSettings}
        \li \l{StatusImageSettings}
        \li \l{StatusModalHeaderSettings}
        \li \l{StatusTooltipSettings}

sandbox/doc/statusq.qdocconf

@@ -5,16 +5,16 @@ url     = https://github.com/status-im/StatusQ
 
 #These are set implictly by qdoc as well, but only with these the module header can be found
 includepaths = -I . \
-               -I $PWD/../src/StatusQ
+               -I $PWD/../../src/StatusQ
 
 imagedirs = src/images
 sourcedirs += src \
-              $PWD/../src/StatusQ/Components \
-              $PWD/../src/StatusQ/Controls \
-              $PWD/../src/StatusQ/Core \
-              $PWD/../src/StatusQ/Layout \
-              $PWD/../src/StatusQ/Platform \
-              $PWD/../src/StatusQ/Popups \
+              $PWD/../../src/StatusQ/Components \
+              $PWD/../../src/StatusQ/Controls \
+              $PWD/../../src/StatusQ/Core \
+              $PWD/../../src/StatusQ/Layout \
+              $PWD/../../src/StatusQ/Platform \
+              $PWD/../../src/StatusQ/Popups \
 
 sources.fileextensions = "*.cpp *.qdoc *.qml"
 

sandbox/main.cpp

@@ -11,11 +11,6 @@ int main(int argc, char *argv[])
 #endif
 
     SandboxApp app(argc, argv);
-
-    app.setOrganizationName("Status");
-    app.setOrganizationDomain("status.im");
-    app.setApplicationName("Sandbox");
-
     app.startEngine();
 
     return app.exec();

sandbox/main.qml

@@ -2,8 +2,6 @@ import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
 import QtGraphicalEffects 1.13
-import QtQuick.Layouts 1.14
-import Qt.labs.settings 1.0
 
 import Sandbox 0.1
 
@@ -33,7 +31,10 @@ StatusWindow {
 
     property real factor: 1.0
 
-    Component.onCompleted: rootWindow.updatePosition()
+    Component.onCompleted: {
+        Theme.palette = lightTheme
+        rootWindow.updatePosition();
+    }
 
     QtObject {
         id: appSectionType
@@ -109,10 +110,12 @@ StatusWindow {
             anchors.topMargin: 32
             anchors.right: parent.right
             anchors.rightMargin: 32
-            lightThemeEnabled: storeSettings.lightTheme
-            onLightThemeEnabledChanged: {
-                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
-                storeSettings.lightTheme = lightThemeEnabled
+            onCheckedChanged: {
+                if (Theme.palette === rootWindow.lightTheme) {
+                    Theme.palette = rootWindow.darkTheme
+                } else {
+                    Theme.palette = rootWindow.lightTheme
+                }
             }
         }
     }
@@ -123,13 +126,11 @@ StatusWindow {
         StatusAppTwoPanelLayout {
             id: mainPageView
 
-            function page(name, fillPage) {
-                storeSettings.fillPage = fillPage ? true : false
+            function page(name) {
                 viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
             }
             function control(name) {
                 viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
-                storeSettings.fillPage = false
             }
 
             leftPanel: Item {
@@ -149,81 +150,76 @@ StatusWindow {
                         spacing: 0
 
                         StatusListSectionHeadline { text: "StatusQ.Core" }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "Icons"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "Layouts"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title.substring(0, title.length - 1));
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "Buttons"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusSwitchTab"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page("StatusTabSwitch");
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusChatCommandButton"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "Controls"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
-                        StatusNavigationListItem {
-                            title: "StatusTabBarButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
                         StatusNavigationListItem { 
                             title: "StatusTabBarIconButton"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusInput"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusSelect"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusAccountSelector"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusAssetSelector"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusColorSelector"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusWalletColorButton"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusWalletColorSelect"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
@@ -233,28 +229,23 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
-                            title: "StatusPinInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusAddress"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "List Items"
                             selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
                             onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusChatInfoToolBar"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "Others"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
@@ -279,18 +270,8 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
-                            title: "StatusListPicker"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusCommunityCard"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
                         StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                             title: "StatusPopupMenu"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
@@ -307,21 +288,6 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem {
-                            title: "StatusColorSelectorGrid"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusImageCropPanel"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title, true);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusColorSpace"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title, true);
-                        }
                     }
                 }
             }
@@ -329,11 +295,8 @@ StatusWindow {
             rightPanel: Item {
                 id: rightPanel
                 anchors.fill: parent
-
                 ScrollView {
-                    visible: !storeSettings.fillPage
                     anchors.fill: parent
-                    anchors.topMargin: 64
                     contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                     contentWidth: (pageWrapper.width * rootWindow.factor)
                     clip: true
@@ -342,16 +305,14 @@ StatusWindow {
                         id: pageWrapper
                         width: rightPanel.width
                         anchors.top: parent.top
+                        anchors.topMargin: 64
                         height: Math.max(rootWindow.height, viewLoader.height + 128)
                         scale: rootWindow.factor
-
                         Loader {
                             id: viewLoader
-                            active: !storeSettings.fillPage
                             anchors.centerIn: parent
-                            source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
+                            source: mainPageView.control("Icons")
                             onSourceChanged: {
-                                storeSettings.selected = viewLoader.source
                                 if (source.toString().includes("Icons")) {
                                     item.iconColor = Theme.palette.primaryColor1;
                                 }
@@ -359,15 +320,6 @@ StatusWindow {
                         }
                     }
                 }
-                Loader {
-                    active: storeSettings.fillPage
-                    anchors.fill: parent
-                    anchors.topMargin: 64
-                    visible: storeSettings.fillPage
-                    clip: true
-
-                    source: viewLoader.source
-                }
             }
         }
     }
@@ -485,11 +437,4 @@ StatusWindow {
             rootWindow.toggleFullScreen()
         }
     }
-
-    Settings {
-        id: storeSettings
-        property string selected: ""
-        property bool lightTheme: true
-        property bool fillPage: false
-    }
 }

sandbox/pages/StatusColorSelectorGridPage.qml

@@ -1,36 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: root
-    width: 800
-    height: 100
-
-    Row {
-        id: selectedColor
-        anchors.top: parent.top
-        anchors.left: colorSelectionGrid.left
-        spacing: 10
-        StatusBaseText {
-            text: "SelectedColor is"
-        }
-        Rectangle {
-            width: 100
-            height: 20
-            radius: width/2
-            color: colorSelectionGrid.selectedColor
-        }
-    }
-
-    StatusColorSelectorGrid {
-        id: colorSelectionGrid
-        anchors.top: selectedColor.bottom
-        anchors.topMargin: 10
-        anchors.horizontalCenter: parent.horizontalCenter
-        titleText: "COLOR"
-        selectedColorIndex: 2
-    }
-}

sandbox/pages/StatusColorSpacePage.qml

@@ -1,110 +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 Sandbox 0.1
-
-Item {
-
-    ColumnLayout {
-        anchors.centerIn: parent
-
-        StatusBaseText {
-            text: qsTr("Thickness")
-        }
-
-        StatusSlider {
-            id: thicknessSlider
-            from: colorSpace.width / 8
-            to: colorSpace.width / 16
-            value: colorSpace.width / 10
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Min saturate: ") + colorSpace.minSaturate.toFixed(2)
-        }
-
-        StatusSlider {
-            id: minSatSlider
-            from: 0
-            to: 0.5
-            value: 0
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Max saturate: ") + colorSpace.maxSaturate.toFixed(2)
-        }
-
-        StatusSlider {
-            id: maxSatSlider
-            from: 0.51
-            to: 1.0
-            value: 1.0
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Min value: ") + colorSpace.minValue.toFixed(2)
-        }
-
-        StatusSlider {
-            id: minValSlider
-            from: 0
-            to: 0.5
-            value: 0
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Max value: ") + colorSpace.maxValue.toFixed(2)
-        }
-
-        StatusSlider {
-            id: maxValSlider
-            from: 0.51
-            to: 1.0
-            value: 1.0
-            Layout.fillWidth: true
-        }
-
-        StatusColorSpace {
-            id: colorSpace
-            color: "#ed77eb"
-            thickness: thicknessSlider.value
-            minSaturate: minSatSlider.value
-            maxSaturate: maxSatSlider.value
-            minValue: minValSlider.value
-            maxValue: maxValSlider.value
-        }
-
-        StatusBaseText {
-            text: qsTr("Color") + ": " + colorSpace.color
-        }
-
-        Rectangle {
-            color: colorSpace.color
-            implicitHeight: 48
-            radius: 10
-            Layout.fillWidth: true
-
-            StatusBaseText {
-                anchors.centerIn: parent
-                color: Theme.palette.white
-                font.pixelSize: 15
-                text: "Quick brown fox jumps over the lazy dog"
-            }
-        }
-
-        StatusButton {
-            text: "Randomize"
-            onPressed: colorSpace.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
-        }
-    }
-}

sandbox/pages/StatusCommunityCardPage.qml

@@ -1,47 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.13
-
-import StatusQ.Components 0.1
-
-import "../demoapp/data" 1.0
-
-GridLayout {
-
-    QtObject {
-        id: d
-
-        function navigateToCommunity(communityID) {
-            console.log("Clicked community: " + communityID)
-        }
-    }
-
-    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-    columns: 2
-    columnSpacing: 28
-    rowSpacing: 28
-
-    Repeater {
-        model: Models.curatedCommunitiesModel
-        delegate: StatusCommunityCard {
-            locale: "en"
-            communityId: model.communityId
-            loaded: model.available
-            logo: model.logo
-            banner: model.banner
-            name: model.name
-            description: model.description
-            members: model.members
-            activeUsers: model.activeUsers
-            popularity: model.popularity
-            isPrivate: model.isPrivate
-            tokenLogo: model.tokenLogo
-            categories: ListModel {
-                ListElement { name: "Crypto"; emoji: "🔗"}
-                ListElement { name: "Privacy"; emoji: "👻"}
-                ListElement { name: "Social"; emoji: "☕"}
-            }
-
-            onClicked: { d.navigateToCommunity(communityId) }
-        }
-    }
-}

sandbox/pages/StatusImageCropPanelPage.qml

@@ -1,94 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-import QtGraphicalEffects 1.14
-
-Item {
-    id: root
-
-    implicitWidth: mainLayout.implicitWidth
-    implicitHeight: mainLayout.implicitHeight
-
-    property var testControls: [ctrl1, ctrl2, ctrl3]
-
-    property bool globalStylePreferRound: true
-
-    ColumnLayout {
-        id: mainLayout
-
-        anchors.fill: parent
-
-        RowLayout {
-            ColumnLayout {
-                Text {
-                    text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
-                }
-
-                StatusImageCropPanel {
-                    id: ctrl1
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: "qrc:/demoapp/data/logo-test-image.png"
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                }
-                Text {
-                    text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
-                }
-                StatusImageCropPanel {
-                    id: ctrl2
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: "qrc:/demoapp/data/logo-test-image.png"
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
-                    aspectRatio: 16/9
-                    enableCheckers: true
-                }
-            }
-            ColumnLayout {
-                Text {
-                    text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
-                }
-                StatusImageCropPanel {
-                    id: ctrl3
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: "qrc:/demoapp/data/logo-test-image.png"
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                    aspectRatio: 0.8
-                }
-            }
-        }
-
-        Shortcut {
-            sequence: StandardKey.ZoomIn
-            onActivated: {
-                for(let i in testControls) {
-                    const c = testControls[i]
-                    c.setCropRect(ctrl1.inflateRectBy(c.cropRect, -0.05))
-                }
-            }
-        }
-
-        Shortcut {
-            sequence: StandardKey.ZoomOut
-            onActivated: {
-                for(let i in testControls) {
-                    const c = testControls[i]
-                    c.setCropRect(ctrl1.inflateRectBy(c.cropRect, 0.05))
-                }
-            }
-        }
-
-        Shortcut {
-            sequences: ["Ctrl+W"]
-            onActivated: globalStylePreferRound = !globalStylePreferRound
-        }
-    }
-}

sandbox/pages/StatusInputPage.qml

@@ -57,38 +57,11 @@ Column {
         input.clearable: true
     }
 
-    Item {
-        implicitWidth: 480
-        implicitHeight: 82
-        z: 100000
-        StatusSeedPhraseInput {
-            id: statusSeedInput
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: parent.height
-            textEdit.input.anchors.leftMargin: 16
-            textEdit.input.anchors.rightMargin: 16
-            textEdit.input.anchors.topMargin: 11
-            textEdit.label: "Input with drop down selection list"
-            leftComponentText: "1"
-            inputList: ListModel {
-                ListElement {
-                    seedWord: "panda"
-                }
-                ListElement {
-                    seedWord: "posible"
-                }
-                ListElement {
-                    seedWord: "wing"
-                }
-            }
-        }
-    }
-
     StatusInput {
         label: "Label"
         charLimit: 30
         errorMessage: "Error message"
+
         input.clearable: true
         input.valid: false
         input.placeholderText: "Placeholder"
@@ -129,24 +102,10 @@ Column {
         ]
     }
 
-    StatusInput {
-        label: "Input with <i>StatusRegularExpressionValidator</i>"
-        charLimit: 30
-        input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
-        validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
-
-        validators: [
-            StatusRegularExpressionValidator {
-                regularExpression: /^[0-9A-Za-z_\$-\s]*$/
-                errorMessage: "Bad input!"
-            }
-        ]
-    }
-
     StatusInput {
         label: "Label"
         input.placeholderText: "Input width component (right side)"
-        input.rightComponent: StatusIcon {
+        input.component: StatusIcon {
             icon: "cancel"
             height: 16
             color: Theme.palette.dangerColor1
@@ -171,45 +130,4 @@ Column {
         input.minimumHeight: 80
         input.maximumHeight: 200
     }
-
-    StatusInput {
-        property bool toggled: true
-        label: "Input with emoji icon"
-        input.placeholderText: "Enter Name"
-        input.icon.emoji: toggled ? "😁" : "🧸"
-        input.icon.color: "blue"
-        input.isIconSelectable: true
-        onIconClicked: {
-            toggled = !toggled
-        }
-    }
-
-    StatusInput {
-        property bool toggled: true
-        label: "Input with selectable icon which is not an emoji"
-        input.placeholderText: "Enter Name"
-        input.icon.emoji: ""
-        input.icon.name: toggled ? "filled-account" : "image"
-        input.icon.color: "blue"
-        input.isIconSelectable: true
-        onIconClicked: {
-            toggled = !toggled
-        }
-    }
-
-    StatusInput {
-        label: "Input with inline token selector"
-        input.leftComponent: StatusTokenInlineSelector {
-            tokens: [{amount: 0.1, token: "ETH"},
-                     {amount: 10, token: "SNT"},
-                     {amount: 15, token: "MANA"}]
-
-            StatusToolTip {
-                id: toolTip
-                text: "posted"
-            }
-            onTriggered: toolTip.visible = true
-        }
-        input.edit.readOnly: true
-    }
 }

sandbox/pages/StatusListPickerPage.qml

@@ -1,81 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-import "../demoapp/data" 1.0
-
-GridLayout {
-    id: root
-    columns: 1
-    rowSpacing: 150
-
-    GridLayout {
-        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        rows: 4
-        columns: 2
-        rowSpacing: 170
-        columnSpacing: 150
-        z: 100
-        StatusListPicker {
-            id: languagePicker
-            z: 100
-            inputList: Models.languagePickerModel
-            placeholderSearchText: qsTr("Search Languages")
-            menuAlignment: StatusListPicker.MenuAlignment.Left
-        }
-
-        StatusListPicker {
-            id: languagePicker2
-            z: 100
-            inputList: Models.languageNoImagePickerModel
-            placeholderSearchText: qsTr("Search Languages")
-            menuAlignment: StatusListPicker.MenuAlignment.Center
-        }
-
-        StatusListPicker {
-            id: currencyPicker
-            inputList: Models.currencyPickerModel
-            placeholderSearchText: qsTr("Search Currencies")
-            multiSelection: true
-        }
-
-        StatusListPicker {
-            id: currencyPicker2
-            inputList: Models.currencyPickerModel2
-            placeholderSearchText: qsTr("Search Currencies")
-            multiSelection: true
-            printSymbol: true
-            enableSelectableItem: false
-        }
-    }
-
-    StatusBaseText {
-        id: pageDesc
-        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        height: 100
-        width: 500
-        text: "4 different configurations for the `StatusListPicker` component:\n
-    * Single selection. \n
-    * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
-    * Multiple selection.\n
-    * Multiple selection and displayed name is the symbol + shortName\n"
-        color: Theme.palette.baseColor1
-        font.pixelSize: 15
-    }
-
-    // Outsite area
-    MouseArea {
-        height: root.height
-        width: root.width
-        onClicked: {
-            languagePicker.close()
-            languagePicker2.close()
-            currencyPicker.close()
-            currencyPicker2.close()
-        }
-    }
-}

sandbox/pages/StatusPinInputPage.qml

@@ -1,75 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Controls.Validators 0.1
-
-Column {
-    id: root
-    spacing: 25
-    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-    // PIN input that accepts only numbers
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter Keycard PIN"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: numbersPinInput
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusIntValidator{bottom: 0; top: 999999;}
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only numbers allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PIN: " + numbersPinInput.pinInput
-        font.pixelSize: 12
-    }
-
-    // PIN input that accepts input depending on the regular expression definition
-    StatusBaseText {
-        topPadding: 100
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter another Keycard PIN"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: regexPinInput
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
-        circleDiameter: 22
-        circleSpacing: 22
-        pinLen: 7
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only alphanumeric characters and '@' allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PIN: " + regexPinInput.pinInput
-        font.pixelSize: 12
-    }
-}

sandbox/pages/StatusTabBarButtonPage.qml

@@ -1,27 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusTabBar {
-        StatusTabButton {
-            width: implicitWidth
-            text: "Button 1"
-        }
-        StatusTabButton {
-            width: implicitWidth
-            text: "Button 2"
-        }
-        StatusTabButton {
-            width: implicitWidth
-            text: "Button 3"
-            badge.value: 42
-        }
-    }
-}

sandbox/pages/StatusTagSelectorPage.qml

@@ -9,21 +9,17 @@ Item {
     property ListModel asortedContacts: ListModel {
         ListElement {
             publicId: "0x0"
-            name: "emily.eth"
+            name: "Maria"
             icon: ""
             isIdenticon: false
             onlineStatus: 3
-            isReadonly: false
-            tagIcon: ""
         }
         ListElement {
             publicId: "0x1"
-            name: "vitalikbuterin"
+            name: "James"
             icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
             isIdenticon: false
             onlineStatus: 1
-            isReadonly: false
-            tagIcon: ""
         }
         ListElement {
             publicId: "0x2"
@@ -31,17 +27,13 @@ Item {
             icon: ""
             isIdenticon: false
             onlineStatus: 2
-            isReadonly: false
-            tagIcon: ""
         }
         ListElement {
             publicId: "0x3"
-            name: "carmen.eth"
+            name: "Tracy"
             icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             onlineStatus: 3
-            isReadonly: true
-            tagIcon: "crown"
         }
         ListElement {
             publicId: "0x4"
@@ -49,8 +41,6 @@ Item {
             icon: ""
             isIdenticon: false
             onlineStatus: 3
-            isReadonly: false
-            tagIcon: ""
         }
     }
 
@@ -61,6 +51,6 @@ Item {
         anchors.centerIn: parent
         namesModel: root.asortedContacts
         toLabelText: qsTr("To: ")
-        warningText: qsTr("USER LIMIT REACHED")
+        warningText: qsTr("5 USER LIMIT REACHED")
     }
 }

sandbox/pages/StatusToastMessagePage.qml

@@ -15,11 +15,10 @@ Item {
             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":"", "duration":0},
-                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
-                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com", "duration":0},
-                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
-                {"title":"Test User", "subTitle":"Hello message...", "icon":"", "loading":false, "type":0,"url":"", "duration":4000}
+                {"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
@@ -28,12 +27,12 @@ Item {
                 loading: modelData.loading
                 type: modelData.type
                 linkUrl: modelData.url
-                duration: modelData.duration
                 onLinkActivated: {
                     Qt.openUrlExternally(link);
                 }
-                onClose: {
-                    console.warn("toast closed: ", modelData.title)
+                //simulate open
+                Component.onCompleted: {
+                    open = true;
                 }
             }
         }

sandbox/pages/StatusWalletColorSelectPage.qml

@@ -12,6 +12,6 @@ Column {
     spacing: 8
 
     StatusWalletColorSelect {
-        model: Theme.palette.userCustomizationColors
+        model: Theme.palette.accountColors
     }
 }

sandbox/qml.qrc

@@ -16,7 +16,7 @@
         <file>pages/StatusTabSwitchPage.qml</file>
         <file>pages/StatusWalletColorButtonPage.qml</file>
         <file>pages/StatusWalletColorSelectPage.qml</file>
-        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+		<file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
         <file>controls/Buttons.qml</file>
         <file>controls/Controls.qml</file>
         <file>controls/Icons.qml</file>
@@ -24,8 +24,6 @@
         <file>controls/ListItems.qml</file>
         <file>controls/Others.qml</file>
         <file>controls/Popups.qml</file>
-        <file>demoapp/ChatChannelView.qml</file>
-        <file>demoapp/CreateChatView.qml</file>
         <file>demoapp/DemoCommunityDetailModal.qml</file>
         <file>demoapp/DemoContactRequestsModal.qml</file>
         <file>demoapp/StatusAppChatView.qml</file>
@@ -33,40 +31,5 @@
         <file>demoapp/StatusAppProfileSettingsView.qml</file>
         <file>demoapp/data/Models.qml</file>
         <file>demoapp/data/qmldir</file>
-        <file>demoapp/data/logo-test-image.png</file>
-        <file>DemoApp.qml</file>
-        <file>ThemeSwitch.qml</file>
-        <file>pages/StatusColorSelectorGridPage.qml</file>
-        <file>pages/StatusListPickerPage.qml</file>
-        <file>pages/StatusPinInputPage.qml</file>
-        <file>pages/StatusTagSelectorPage.qml</file>
-        <file>pages/StatusToastMessagePage.qml</file>
-        <file>pages/StatusWizardStepperPage.qml</file>
-        <file>pages/StatusTabBarButtonPage.qml</file>
-        <file>pages/StatusColorSpacePage.qml</file>
-        <file>images/CryptoKitties.png</file>
-        <file>images/CryptoPunks.png</file>
-        <file>images/Dragonerum.png</file>
-        <file>images/FriendsBenefits.png</file>
-        <file>images/logo-test-image.png</file>
-        <file>images/P2PCrypto.png</file>
-        <file>images/SNT.png</file>
-        <file>images/Socks.png</file>
-        <file>images/StatusPunks.png</file>
-        <file>images/CommunityBanner1.png</file>
-        <file>images/Coinbase.png</file>
-        <file>images/CoinBaseCommunityBanner.png</file>
-        <file>images/DribbbleCommunityBanner.png</file>
-        <file>images/Ethereum.png</file>
-        <file>images/EthereumCommunityBanner.png</file>
-        <file>images/Fluff.png</file>
-        <file>images/Rarible.png</file>
-        <file>images/RaribleCommunityBanner.png</file>
-        <file>images/Spotify.png</file>
-        <file>images/SpotifyCommunityBanner.png</file>
-        <file>images/SR.png</file>
-        <file>images/SuperRareCommunityBanner.png</file>
-        <file>images/RARI.png</file>
-        <file>images/SRToken.png</file>
     </qresource>
-</RCC>
+</RCC>

sandbox/scripts/build

@@ -1,10 +1,4 @@
-#!/bin/bash
-
 make clean
-if [[ $OSTYPE == 'darwin'* ]]
-then
-  qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-else
-  qmake sandbox.pro CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-fi
-make
+qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+make
+

src/StatusQ/Components/StatusBadge.qml

@@ -32,7 +32,7 @@ Rectangle {
         anchors.centerIn: parent
         text: {
             if (statusBadge.value > 99) {
-                return qsTr("99+");
+                return "99+";
             }
             return statusBadge.value;
         }

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -27,6 +27,7 @@ Item {
         id: statusChatInfoButton
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
+        anchors.leftMargin: 5
         anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
         anchors.rightMargin: 5
         type: StatusChatInfoButton.Type.OneToOneChat
@@ -36,6 +37,7 @@ Item {
     StatusRoundButton {
         id: statusMenuButton
         anchors.right: parent.right
+        anchors.rightMargin: 8
         anchors.verticalCenter: parent.verticalCenter
 
         visible: popupMenuSlot.active
@@ -102,4 +104,5 @@ Item {
             }
         }
     }
+
 }

src/StatusQ/Components/StatusChatList.qml

@@ -15,9 +15,8 @@ Column {
     width: 288
 
     property string categoryId: ""
-    property var model: null
+    property var model: []
     property bool draggableItems: false
-    property bool highlightItem: true
 
     property alias statusChatListItems: statusChatListItems
 
@@ -91,8 +90,8 @@ Column {
                 }
 
                 StatusChatListItem {
-                    id: statusChatListItem
 
+                    id: statusChatListItem
                     opacity: dragSensor.active ? 0.0 : 1.0
                     originalOrder: model.position
                     chatId: model.itemId
@@ -102,19 +101,13 @@ Column {
                     muted: model.muted
                     hasUnreadMessages: model.hasUnreadMessages
                     notificationsCount: model.notificationsCount
-                    highlightWhenCreated: !!model.highlight
-                    selected: (model.active && statusChatList.highlightItem)
-
-                    icon.emoji: model.emoji
-                    icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
-                    image.isIdenticon: false
+                    selected: model.active
+                    icon.color: model.color
+                    image.isIdenticon: model.isIdenticon
                     image.source: model.icon
-                    ringSettings.ringSpecModel: model.colorHash
 
                     sensor.cursorShape: dragSensor.cursorShape
                     onClicked: {
-                        highlightWhenCreated = false
-
                         if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
                             statusChatListItem.highlighted = true
 

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -14,10 +14,10 @@ Item {
     implicitWidth: chatListsAndCategories.width
 
     property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
-        text: qsTr("Add channel inside category")
+        text: "Add channel inside category"
     }
     property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
-        text: qsTr("More")
+        text: "More"
     }
 
     property var model: []
@@ -68,6 +68,7 @@ Item {
 
             StatusChatList {
                 id: statusChatList
+                anchors.horizontalCenter: parent.horizontalCenter
                 visible: statusChatList.model.count > 0
                 onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)

src/StatusQ/Components/StatusChatListCategory.qml

@@ -48,6 +48,7 @@ Column {
                     popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
                     return
                 }
+                statusChatListCategory.opened = !opened;
             }
         }
         onTitleClicked: statusChatListCategory.opened = !opened

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -39,21 +39,21 @@ StatusListItem {
             id: addButton
             icon.name: "add"
             icon.width: 20
-            visible: statusChatListCategoryItem.showAddButton &&
+            visible: statusChatListCategoryItem.showAddButton && 
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
-            tooltip.text: qsTr("Add channel inside category")
+            tooltip.text: "Add channel inside category"
         },
         StatusChatListCategoryItemButton {
             id: menuButton
             icon.name: "more"
             icon.width: 21
-            visible: statusChatListCategoryItem.showMenuButton &&
+            visible: statusChatListCategoryItem.showMenuButton && 
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
-            tooltip.text: qsTr("More")
+            tooltip.text: "More"
         },
         StatusChatListCategoryItemButton {
             id: toggleButton

src/StatusQ/Components/StatusChatListItem.qml

@@ -5,12 +5,11 @@ import QtGraphicalEffects 1.13
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
-import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
 Rectangle {
-    id: root
+    id: statusChatListItem
 
     objectName: "chatItem"
     property int originalOrder: -1
@@ -29,13 +28,10 @@ Rectangle {
         width: 24
         height: 24
         color: Theme.palette.miscColor5
-        emoji: ""
-        charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
+        letterSize: 15
     }
-    property alias ringSettings: identicon.ringSettings
     property int type: StatusChatListItem.Type.PublicChat
     property bool highlighted: false
-    property bool highlightWhenCreated: false
     property bool selected: false
     property bool dragged: false
     property alias sensor: sensor
@@ -78,16 +74,16 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
 
-        onClicked: root.clicked(mouse)
+        onClicked: statusChatListItem.clicked(mouse)
 
         StatusSmartIdenticon {
             id: identicon
             anchors.left: parent.left
             anchors.leftMargin: 8
             anchors.verticalCenter: parent.verticalCenter
-            image: root.image
-            icon: root.icon
-            name: root.name
+            image: statusChatListItem.image
+            icon: statusChatListItem.icon
+            name: statusChatListItem.name
         }
 
         StatusIcon {
@@ -97,21 +93,21 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
 
             width: 14
-            visible: root.type !== StatusChatListItem.Type.OneToOneChat
+            visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
-                if (root.muted && !hoverHander.hovered && !root.highlighted) {
+                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return 0.4
                 }
-                return root.hasUnreadMessages ||
-                        root.notificationsCount > 0 ||
-                        root.selected ||
-                        root.highlighted ||
+                return statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
                         statusBadge.visible ||
                         hoverHander.hovered ? 1.0 : 0.7
             }
 
             icon: {
-                switch (root.type) {
+                switch (statusChatListItem.type) {
                 case StatusChatListItem.Type.PublicCat:
                     return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                     break;
@@ -136,27 +132,25 @@ Rectangle {
             anchors.rightMargin: 6
             anchors.verticalCenter: parent.verticalCenter
 
-            text: (root.type === StatusChatListItem.Type.PublicChat &&
-                  !root.name.startsWith("#") ?
-                      "#" + root.name :
-                      root.name)
+            text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                  !statusChatListItem.name.startsWith("#") ?
+                      "#" + statusChatListItem.name :
+                      statusChatListItem.name)
             elide: Text.ElideRight
             color: {
-                if (root.muted && !hoverHander.hovered && !root.highlighted) {
+                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return root.hasUnreadMessages ||
-                        root.notificationsCount > 0 ||
-                        root.selected ||
-                        root.highlighted ||
-                        root.highlightWhenCreated ||
+                return statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
                         hoverHander.hovered ||
                         statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
-            font.weight: !root.muted &&
-                         (root.hasUnreadMessages ||
-                          root.notificationsCount > 0 ||
-                          root.highlightWhenCreated ||
+            font.weight: !statusChatListItem.muted &&
+                         (statusChatListItem.hasUnreadMessages ||
+                          statusChatListItem.notificationsCount > 0 ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
@@ -169,18 +163,18 @@ Rectangle {
             width: 14
             opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
             icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
-            visible: root.muted
+            visible: statusChatListItem.muted
 
             MouseArea {
                 id: mutedIconSensor
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
-                onClicked: root.unmute()
+                onClicked: statusChatListItem.unmute()
             }
 
             StatusToolTip {
-                text: qsTr("Unmute")
+                text: "Unmute"
                 visible: mutedIconSensor.containsMouse
             }
         }
@@ -192,11 +186,11 @@ Rectangle {
             anchors.right: parent.right
             anchors.rightMargin: 8
 
-            color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
+            color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
             border.width: 4
             border.color: color
-            value: root.notificationsCount
-            visible: root.notificationsCount > 0
+            value: statusChatListItem.notificationsCount
+            visible: statusChatListItem.notificationsCount > 0
         }
     }
 }

src/StatusQ/Components/StatusChatToolBar.qml

@@ -1,22 +1,24 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.13
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-Item {
-    id: statusChatToolBar
 
+Rectangle {
+    id: statusChatToolBar
+    implicitWidth: 518
+    height: 56
+    color: Theme.palette.statusAppLayout.backgroundColor
+
+    property alias chatInfoButton: statusChatInfoButton
     property alias menuButton: menuButton
     property alias notificationButton: notificationButton
     property alias membersButton: membersButton
     property alias searchButton: searchButton
-
-    property int padding: 8
     property int notificationCount: 0
+
     property Component popupMenu
-    property var toolbarComponent
 
     signal chatInfoButtonClicked()
     signal menuButtonClicked()
@@ -24,156 +26,150 @@ Item {
     signal membersButtonClicked()
     signal searchButtonClicked()
 
-    implicitWidth: 518
-    implicitHeight: 60
-
     onPopupMenuChanged: {
         if (!!popupMenu) {
             popupMenuSlot.sourceComponent = popupMenu
         }
     }
 
-    RowLayout {
-        width: parent.width
-        spacing: padding / 2
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
+        onClicked: statusChatToolBar.chatInfoButtonClicked()
+    }
 
-        Loader {
-            id: loader
-            sourceComponent: statusChatToolBar.toolbarComponent
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
-            Layout.topMargin: padding
-            Layout.leftMargin: padding
+    Row {
+        id: actionButtons
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: 8
+
+        StatusFlatRoundButton {
+            id: searchButton
+            width: 32
+            height: 32
+            icon.name: "search"
+            type: StatusFlatRoundButton.Type.Secondary
+            onClicked: statusChatToolBar.searchButtonClicked()
+
+            // initializing the tooltip
+            tooltip.text: "Search"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
         }
 
-        RowLayout {
-            id: actionButtons
-            Layout.alignment: Qt.AlignTop | Qt.AlignRight
-            Layout.topMargin: padding
-            Layout.rightMargin: padding
-            spacing: 8
+        StatusFlatRoundButton {
+            id: membersButton
+            width: 32
+            height: 32
+            icon.name: "group-chat"
+            type: StatusFlatRoundButton.Type.Secondary
+            onClicked: statusChatToolBar.membersButtonClicked()
 
-            StatusFlatRoundButton {
-                id: searchButton
-                width: 32
-                height: 32
-                icon.name: "search"
-                type: StatusFlatRoundButton.Type.Secondary
-                onClicked: statusChatToolBar.searchButtonClicked()
+            // initializing the tooltip
+            tooltip.text: "Members"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
+        }
 
-                // initializing the tooltip
-                tooltip.text: qsTr("Search")
-                tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
-            }
+        StatusFlatRoundButton {
+            id: menuButton
+            width: 32
+            height: 32
+            icon.name: "more"
+            type: StatusFlatRoundButton.Type.Secondary
+            visible: !!statusChatToolBar.popupMenu
 
-            StatusFlatRoundButton {
-                id: membersButton
-                width: 32
-                height: 32
-                icon.name: "group-chat"
-                type: StatusFlatRoundButton.Type.Secondary
-                onClicked: statusChatToolBar.membersButtonClicked()
+            // initializing the tooltip
+            tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
+            tooltip.text: "More"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
 
-                // initializing the tooltip
-                tooltip.text: qsTr("Members")
-                tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
-            }
+            property bool showMoreMenu: false
+            onClicked: {
+                menuButton.highlighted = true
 
-            StatusFlatRoundButton {
-                id: menuButton
-                width: 32
-                height: 32
-                icon.name: "more"
-                type: StatusFlatRoundButton.Type.Secondary
-                visible: !!statusChatToolBar.popupMenu
+                let originalOpenHandler = popupMenuSlot.item.openHandler
+                let originalCloseHandler = popupMenuSlot.item.closeHandler
 
-                // initializing the tooltip
-                tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
-                tooltip.text: qsTr("More")
-                tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
-
-                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.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()
                 }
 
-                Loader {
-                    id: popupMenuSlot
-                    active: !!statusChatToolBar.popupMenu
-                }
-            }
-
-            Rectangle {
-                height: 24
-                width: 1
-                color: Theme.palette.directColor7
-                Layout.alignment: Qt.AlignVCenter
-                visible: notificationButton.visible &&
-                         (menuButton.visible || membersButton.visible || searchButton.visible)
-            }
-
-            StatusFlatRoundButton {
-                id: notificationButton
-                width: 32
-                height: 32
-
-                icon.name: "notification"
-                icon.height: 21
-                type: StatusFlatRoundButton.Type.Secondary
-
-                // initializing the tooltip
-                tooltip.text: qsTr("Activity")
-                tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
-
-                onClicked: statusChatToolBar.notificationButtonClicked()
-
-                StatusBadge {
-                    id: statusBadge
-
-                    visible: value > 0
-                    anchors.top: parent.top
-                    anchors.left: parent.right
-                    anchors.topMargin: -3
-                    anchors.leftMargin: {
-                        if (statusBadge.value > 99) {
-                            return -22
-                        }
-                        if (statusBadge.value > 9) {
-                            return -21
-                        }
-                        return -18
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.highlighted = false
+                    if (!!originalCloseHandler) {
+                        originalCloseHandler()
                     }
-
-                    value: statusChatToolBar.notificationCount
-                    border.width: 2
-                    border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
                 }
+
+                popupMenuSlot.item.openHandler = originalOpenHandler
+                popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
+                statusChatToolBar.menuButtonClicked()
+            }
+
+            Loader {
+                id: popupMenuSlot
+                active: !!statusChatToolBar.popupMenu
             }
         }
+
+        Rectangle {
+            height: 24
+            width: 1
+            color: Theme.palette.directColor7
+            anchors.verticalCenter: parent.verticalCenter
+            visible: notificationButton.visible &&
+                     (menuButton.visible || membersButton.visible || searchButton.visible)
+        }
+
+        StatusFlatRoundButton {
+            id: notificationButton
+            width: 32
+            height: 32
+
+            icon.name: "notification"
+            icon.height: 21
+            type: StatusFlatRoundButton.Type.Secondary
+
+            // initializing the tooltip
+            tooltip.text: "Activity"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
+
+            onClicked: statusChatToolBar.notificationButtonClicked()
+
+            StatusBadge {
+                id: statusBadge
+
+                visible: value > 0
+                anchors.top: parent.top
+                anchors.left: parent.right
+                anchors.topMargin: -3
+                anchors.leftMargin: {
+                    if (statusBadge.value > 99) {
+                        return -22
+                    }
+                    if (statusBadge.value > 9) {
+                        return -21
+                    }
+                    return -18
+                }
+
+                value: statusChatToolBar.notificationCount
+                border.width: 2
+                border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
+            }
+        }
+
     }
 }
 

src/StatusQ/Components/StatusColorSpace.qml

@@ -1,201 +0,0 @@
-import QtQuick 2.14
-import QtGraphicalEffects 1.0
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: root
-
-    property int thickness: width * 0.1
-    property real minSaturate: 0.0
-    property real minValue: 0.0
-    property real maxSaturate: 1.0
-    property real maxValue: 1.0
-    property color color: "red"
-    property color rootColor: Qt.hsva(color.hsvHue, 1, 1, 1)
-
-    function pickColorFromHueGauge(x, y) {
-        // Get angle of picked color
-        let theta = Math.atan2(y - hueGauge.height / 2, x - hueGauge.width / 2) * 0.5 / Math.PI;
-        if (theta < 0.0)
-            theta += 1.0;
-
-        // Convert angle value to color
-        return Qt.hsva(1 - theta, 1, 1, 1)
-    }
-
-    function pickColorFromSatValRect(x, y) {
-        // x for saturation, reversed y for value
-        let sat = mapFromRange(Math.min(Math.max(x, 0), satValRect.width),
-                               minSaturate, maxSaturate, satValRect.width);
-        let val = 1 - mapFromRange(Math.min(Math.max(y, 0), satValRect.height),
-                                   1 - maxValue, 1 - minValue, satValRect.height);
-        return Qt.hsva(rootColor.hsvHue, sat, val, 1);
-    }
-
-    function angleOnHueGauge(pickingColor) {
-        // color hue to angle
-        return (1 - pickingColor.hsvHue) * 2 * Math.PI;
-    }
-
-    // TODO: mapToRange & mapFromRange to helper js
-    function mapToRange(value, minValue, maxValue, range) {
-        return (value - minValue) / (maxValue - minValue) * range;
-    }
-
-    function mapFromRange(pos, minValue, maxValue, range) {
-        return pos / range * (maxValue - minValue) + minValue;
-    }
-
-    onColorChanged: {
-        // update root color if only we are not picking on satValRect
-        if (!d.pickingSatVal)
-            rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
-    }
-
-    implicitWidth: 340
-    implicitHeight: 340
-
-    QtObject {
-        id: d
-
-        property bool pickingSatVal: false
-    }
-
-    ConicalGradient {
-        id: hueGauge
-        anchors.fill: parent
-        angle: 90.0
-        gradient: Gradient {
-            GradientStop { position: 0.000; color: Qt.hsva(1.000, 1, 1, 1) }
-            GradientStop { position: 0.167; color: Qt.hsva(0.833, 1, 1, 1) }
-            GradientStop { position: 0.333; color: Qt.hsva(0.666, 1, 1, 1) }
-            GradientStop { position: 0.500; color: Qt.hsva(0.500, 1, 1, 1) }
-            GradientStop { position: 0.667; color: Qt.hsva(0.333, 1, 1, 1) }
-            GradientStop { position: 0.833; color: Qt.hsva(0.166, 1, 1, 1) }
-            GradientStop { position: 1.000; color: Qt.hsva(0.000, 1, 1, 1) }
-        }
-        layer.enabled: true
-        layer.effect: OpacityMask {
-            maskSource: Item {
-                width: root.width
-                height: root.height
-
-                Rectangle {
-                    anchors.fill: parent
-                    radius: Math.min(width, height) / 2
-                }
-            }
-        }
-
-        MouseArea {
-            id: hueArea
-
-            property bool pressedOnGauge: false
-
-            anchors.fill: parent
-            preventStealing: true
-            onPressed: {
-                // Check we clicked on gauge
-                let dist = Math.sqrt(Math.pow(width / 2 - mouseX, 2) +
-                                     Math.pow(height / 2 - mouseY, 2));
-                let radius = Math.min(width, height) / 2;
-                if (dist < radius - thickness || dist > radius)
-                    return;
-
-                pressedOnGauge = true;
-                pickRootColor();
-            }
-            onReleased: pressedOnGauge = false
-            onPositionChanged: if (pressedOnGauge) pickRootColor()
-
-            function pickRootColor() {
-                // Update both colors
-                rootColor = pickColorFromHueGauge(mouseX, mouseY);
-                color.hsvHue = rootColor.hsvHue;
-                color.hsvSaturation = Math.min(maxSaturate, Math.max(minSaturate, color.hsvSaturation));
-                color.hsvValue = Math.min(maxValue, Math.max(minValue, color.hsvValue));
-            }
-        }
-    }
-
-    Rectangle {
-        anchors.fill: parent
-        anchors.margins: root.thickness
-        radius: Math.min(width, height) / 2
-
-        color: Theme.palette.baseColor5
-
-        Rectangle {
-            id: satValRect
-            anchors.centerIn: parent
-            width: parent.width * 0.55
-            height: width
-            border.color: Theme.palette.baseColor3
-            gradient: Gradient {
-                orientation: Gradient.Horizontal
-                GradientStop { position: -minSaturate; color: "white" }
-                GradientStop { position: 2.0 - maxSaturate; color: rootColor }
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                gradient: Gradient {
-                    orientation: Gradient.Vertical
-                    GradientStop { position: maxValue - 1; color: "transparent" }
-                    GradientStop { position: 1.0 + minValue; color: "black" }
-                }
-            }
-
-            MouseArea {
-                id: satValArea
-                anchors.fill: parent
-                preventStealing: true
-                onPressed: {
-                    d.pickingSatVal = true;
-                    pickColor();
-                }
-                onReleased: d.pickingSatVal = false
-                onPositionChanged: pickColor()
-
-                function pickColor() {
-                    root.color = pickColorFromSatValRect(mouseX, mouseY);
-                }
-            }
-
-            Rectangle {
-                id: satValLens
-                x: mapToRange(root.color.hsvSaturation, minSaturate, maxSaturate,
-                              satValRect.width) - radius
-                y: mapToRange(1 - root.color.hsvValue, 1 - maxValue, 1 - minValue,
-                              satValRect.height) - radius
-                width: thickness * 1.3
-                height: width
-                radius: height / 2
-                border.width: 2
-                border.color: Theme.palette.baseColor3
-                color: root.color
-                visible: x + 1 >= -radius && x - 1 <= satValRect.width - radius &&
-                         y + 1 >= -radius && y - 1 <= satValRect.height - radius
-            }
-        }
-    }
-
-    Rectangle {
-        id: hueLens
-
-        property real theta: angleOnHueGauge(rootColor);
-        property real dist: (hueGauge.width - width) / 2 + thickness / 6;
-
-        anchors.centerIn: parent
-        anchors.horizontalCenterOffset: dist * Math.cos(theta);
-        anchors.verticalCenterOffset: dist * Math.sin(theta);
-        width: thickness * 1.3
-        height: width
-        radius: height / 2
-        border.width: 2
-        border.color: Theme.palette.baseColor3
-        color: rootColor
-    }
-}

src/StatusQ/Components/StatusCommunityCard.qml

@@ -1,469 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.14
-import QtGraphicalEffects 1.0
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-/*!
-   \qmltype StatusCommunityCard
-   \inherits Rectangle
-   \inqmlmodule StatusQ.Components
-   \since StatusQ.Components 0.1
-   \brief It is a community card item that provides relevant information about a community model. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-rectangle.html}{Rectangle}.
-
-   The \c StatusCommunityCard is a community card clickable item that represents a data model. The data model is commonly a JavaScript array or a ListModel object.
-
-   Example of how the component looks like:
-   \image status_community_card.png
-   Example of how to use it:
-   \qml
-        StatusCommunityCard {
-            locale: "en"
-            communityId: model.communityId
-            loaded: model.available
-            logo: model.icon
-            name: model.name
-            description: model.description
-            members: model.members
-            popularity: model.popularity
-            categories:  model.categories
-
-            onClicked: { d.navigateToCommunity(communityId) }
-        }
-   \endqml
-   For a list of components available see StatusQ.
-*/
-Rectangle {
-    id: root
-
-    /*!
-       \qmlproperty string StatusCommunityCard::communityId
-       This property holds the community identifier value.
-    */
-    property string communityId: ""
-    /*!
-       \qmlproperty bool StatusCommunityCard::loaded
-       This property holds a boolean value that represents if the community information is loaded or not.
-    */
-    property bool loaded: true
-    /*!
-       \qmlproperty url StatusCommunityCard::logo
-       This property holds the community logo source.
-    */
-    property url logo: ""
-    /*!
-       \qmlproperty string StatusCommunityCard::name
-       This property holds the community name.
-    */
-    property string name: ""
-    /*!
-       \qmlproperty string StatusCommunityCard::description
-       This property holds the community description.
-    */
-    property string description: ""
-    /*!
-       \qmlproperty int StatusCommunityCard::members
-       This property holds the community members value.
-    */
-    property int members: 0
-    /*!
-       \qmlproperty int StatusCommunityCard::activeUsers
-       This property holds the community active users value.
-    */
-    property int activeUsers: 0
-    /*!
-       \qmlproperty int StatusCommunityCard::popularity
-       This property holds the community popularity (community rate).
-    */
-    property int popularity: 0
-    /*!
-       \qmlproperty string StatusCommunityCard::categories
-       This property holds the data that will be populated as the tags row of the community.
-
-       Here an example of the model roles expected:
-       \qml
-            categories: ListModel {
-                ListElement { name: "gaming"; emoji: "🎮"; selected: false}
-                ListElement { name: "art"; emoji: "🖼️️"; selected: false}
-                ListElement { name: "crypto"; emoji: "💸"; selected: false}
-                ListElement { name: "nsfw"; emoji: "🍆"; selected: false}
-                ListElement { name: "markets"; emoji: "💎"; selected: false}
-            }
-       \endqml
-    */
-    property ListModel categories: ListModel {}
-    /*!
-       \qmlproperty string StatusCommunityCard::locale
-       This property holds the application locale used to give format to members number representation.
-       If not provided, default value is "en".
-    */
-    property string locale: "en"
-    /*!
-       \qmlproperty url StatusCommunityCard::banner
-       This property holds the community banner image url.
-    */
-    property url banner: ""
-    /*!
-       \qmlproperty color StatusCommunityCard::communityColor
-       This property holds the community color.
-       If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF".
-    */
-    property color communityColor: Theme.palette.primaryColor1
-    /*!
-       \qmlproperty bool StatusCommunityCard::isPrivate
-       This property holds if the community is private.
-       If not provided, default value is false.
-    */
-    property bool isPrivate: false
-    /*!
-       \qmlproperty url StatusCommunityCard::tokenLogo
-       This property holds the image of the token needed if the community is private.
-    */
-    property url tokenLogo: ""
-
-    /*!
-        \qmlsignal StatusCommunityCard::clicked(string communityId)
-        This signal is emitted when the card item is clicked.
-    */
-    signal clicked(string communityId)
-
-    QtObject {
-        id: d
-        property int cardWidth: 335
-        property int bannerHeigth: 64
-        property int cardHeigth: 190
-        property int totalHeigth: 230
-        property int margins: 12
-        property int bannerRadius: 20
-        property int cardRadius: 16
-        property color cardColor: Theme.palette.indirectColor1
-        property color fontColor: Theme.palette.directColor1
-        property color loadingColor1: Theme.palette.baseColor5
-        property color loadingColor2: Theme.palette.baseColor4
-
-        function numberFormat(number) {
-            var res = number
-            const million = 1000000
-            const ks = 1000
-            if(number > million) {
-                res = number / million
-                res = Number(number / million).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'M'
-            }
-            else if(number > ks) {
-                res = number / ks
-                res = Number(number / ks).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'K'
-            }
-            else
-                res = Number(number).toLocaleString(Qt.locale(root.locale), 'f', 0)
-            return res
-        }
-    }
-
-    width: d.cardWidth
-    height: d.totalHeigth
-    radius: d.bannerRadius
-    color: "transparent"
-    layer.enabled: true
-    layer.effect: DropShadow {
-        source: root
-        horizontalOffset: 0
-        verticalOffset: 2
-        radius: sensor.containsMouse ? 30 : d.bannerRadius
-        samples: 25
-        spread: 0
-        color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
-    }
-
-    // Community banner:
-    Item {
-        id: banner
-        anchors.top: parent.top
-        width: d.cardWidth
-        height: d.bannerHeigth
-        Rectangle {
-            id: mask
-            anchors.fill: parent
-            radius: d.bannerRadius
-            color: root.loaded ? root.communityColor : d.loadingColor2
-        }
-        Image {
-            id: image
-            source: root.banner
-            anchors.fill: parent
-            anchors.centerIn: parent
-            fillMode: Image.PreserveAspectFit
-            smooth: true
-            visible: !root.loaded || !root.banner
-        }
-        OpacityMask {
-            anchors.fill: image
-            source: image
-            maskSource: mask
-        }
-    }
-
-    // Community logo:
-    Rectangle {
-        z: content.z + 1
-        anchors.top: parent.top
-        anchors.topMargin: 16
-        anchors.left: parent.left
-        anchors.leftMargin: 12
-        width: 48
-        height: width
-        radius: width / 2
-        color: root.loaded ? d.cardColor : d.loadingColor1
-
-        StatusRoundedImage {
-            visible: root.loaded
-            anchors.centerIn: parent
-            width: parent.width - 4
-            height: width
-            image.source: root.logo
-            color: "transparent"
-        }
-    } // End of community logo
-
-    // Content card
-    Rectangle {
-        id: content
-        z: banner.z + 1
-        visible: root.loaded
-        anchors.top: parent.top
-        anchors.topMargin: 40
-        width: d.cardWidth
-        height: d.cardHeigth
-        color: d.cardColor
-        radius: d.cardRadius
-        clip: true
-        // Community restriccions
-        Rectangle {
-            visible: root.isPrivate
-            anchors.top: parent.top
-            anchors.topMargin: 8
-            anchors.right: parent.right
-            anchors.rightMargin: anchors.topMargin
-            width: 48
-            height: 24
-            color: d.loadingColor2
-            radius: 200
-            StatusIcon {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.leftMargin: 6
-                anchors.left: parent.left
-                icon: "tiny/unlocked"
-                width: 16
-                height: 16
-                color: Theme.palette.baseColor1
-            }
-            StatusRoundedImage {
-                anchors.rightMargin: 2
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                width: 20
-                height: width
-                image.source: root.tokenLogo
-                color: "transparent"
-            }
-        }
-        // Community info
-        ColumnLayout {
-            anchors.fill: parent
-            anchors.topMargin: 32
-            anchors.leftMargin: d.margins
-            anchors.rightMargin: d.margins
-            anchors.bottomMargin: d.margins
-            clip: true
-            spacing: 6
-            StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
-                text: root.name
-                font.weight: Font.Bold
-                font.pixelSize: 19
-                color: d.fontColor
-            }
-            StatusBaseText {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                text: root.description
-                font.pixelSize: 15
-                lineHeight: 1.2
-                color: d.fontColor
-                maximumLineCount: 2
-                wrapMode: Text.WordWrap
-                elide: Text.ElideRight
-                clip: true
-            }
-        }
-        ColumnLayout {
-            anchors.fill: parent
-            anchors.topMargin: 116
-            anchors.leftMargin: d.margins
-            anchors.rightMargin: d.margins
-            anchors.bottomMargin: d.margins
-            clip: true
-            spacing: 18
-            Row {
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 20
-                // Members
-                Row {
-                    height: membersTxt.height
-                    spacing: 4
-                    StatusIcon {
-                        anchors.verticalCenter: parent.verticalCenter
-                        icon: "tiny/members"
-                        width: 16
-                        height: 16
-                    }
-                    StatusBaseText {
-                        id: membersTxt
-                        Layout.alignment: Qt.AlignVCenter
-                        text: d.numberFormat(root.members)
-                        font.pixelSize: 15
-                        color: d.fontColor
-                    }
-                }
-                // Active users:
-                Row {
-                    height: activeUsersTxt.height
-                    spacing: 4
-                    StatusIcon {
-                        anchors.verticalCenter: parent.verticalCenter
-                        icon: "tiny/flash"
-                        width: 14
-                        height: 14
-                    }
-                    StatusBaseText {
-                        id: activeUsersTxt
-                        Layout.alignment: Qt.AlignVCenter
-                        text: d.numberFormat(root.activeUsers)
-                        font.pixelSize: 15
-                        color: d.fontColor
-                    }
-                }
-            }
-            // TODO: Replace by `StatusListItemTagRow` - To be done!
-            Row {
-                visible: root.categories.count > 0
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                spacing: 8
-                clip: true
-
-                Repeater {
-                    model: root.categories
-                    delegate: StatusListItemTag {
-                        border.color: Theme.palette.baseColor2
-                        color: "transparent"
-                        height: 24
-                        radius: 20
-                        closeButtonVisible: false
-                        icon.emoji: model.emoji
-                        icon.height: 24
-                        icon.width: icon.height
-                        icon.color: "transparent"
-                        icon.isLetterIdenticon: true
-                        title: model.name
-                        titleText.font.pixelSize: 13
-                        titleText.color: d.fontColor
-                    }
-                }
-            }
-        }
-    } // End of content card
-
-    // Loading card
-    Rectangle {
-        visible: !root.loaded
-        anchors.top: parent.top
-        anchors.topMargin: 40
-        width: d.cardWidth
-        height: d.cardHeigth
-        color: d.cardColor
-        radius: d.cardRadius
-        clip: true
-        Rectangle {
-            anchors.top: parent.top
-            anchors.topMargin: 8
-            anchors.right: parent.right
-            anchors.rightMargin: anchors.topMargin
-            width: 48
-            height: 24
-            color: d.loadingColor2
-            radius: 200
-        }
-        ColumnLayout {
-            anchors.fill: parent
-            anchors.topMargin: 32
-            anchors.margins: d.margins
-            clip: true
-            spacing: 9
-            Rectangle {
-                width: 84
-                height: 16
-                color: d.loadingColor1
-                radius: 5
-            }
-            Rectangle {
-                width: 311
-                height: 16
-                color: d.loadingColor1
-                radius: 5
-            }
-            Rectangle {
-                width: 271
-                height: 16
-                color: d.loadingColor1
-                radius: 5
-            }
-            Row {
-                Layout.topMargin: 22 - 9
-                spacing: 16
-                Repeater {
-                    model: 2
-                    delegate: Row {
-                        spacing: 4
-                        Rectangle {
-                            width: 14
-                            height: 14
-                            color: d.loadingColor1
-                            radius: width / 2
-                        }
-                        Rectangle {
-                            width: 50
-                            height: 12
-                            color: d.loadingColor2
-                            radius: 5
-                        }
-                    }
-                }
-            }
-            Row {
-                Layout.topMargin: 21 - 9
-                spacing: 8
-                Repeater {
-                    model: 3
-                    delegate:
-                    Rectangle {
-                        width: 76
-                        height: 24
-                        color: d.loadingColor2
-                        radius: 20
-                    }
-                }
-            }
-        }
-    } // End of loading card
-
-    MouseArea {
-        id: sensor
-        enabled: root.loaded
-        anchors.fill: parent
-        cursorShape: root.loaded ? Qt.PointingHandCursor : Qt.ArrowCursor
-        hoverEnabled: true
-
-        onClicked: root.clicked(root.communityId)
-    }
-}

src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml

@@ -14,7 +14,6 @@ StatusListItem {
 
     components: [
         StatusBadge {
-            visible:  statusContactRequestsListItem.requestsCount > 0
             value: statusContactRequestsListItem.requestsCount
             anchors.verticalCenter: parent.verticalCenter
             border.width: 4

src/StatusQ/Components/StatusContactVerificationIcons.qml

@@ -1,79 +0,0 @@
-import QtQuick 2.0
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Row {
-    id: root
-
-    property bool isMutualContact: false
-    property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
-
-    property StatusIconSettings mutualConnectionIcon: StatusIconSettings {
-        name: "tiny/tiny-contact"
-        color: Theme.palette.indirectColor1
-        width: dummyImage.width
-        height: dummyImage.height
-        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: mutualConnectionIcon.name ? "../../assets/img/icons/" + mutualConnectionIcon.name + ".svg": ""
-            visible: false
-        }
-    }
-
-    property StatusIconSettings trustContactIcon: StatusIconSettings {
-        // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
-        name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract"
-        color: Theme.palette.indirectColor1
-        width: dummyImage.width
-        height: dummyImage.height
-        background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
-            color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
-        }
-        // Only used to get implicit width and height from the actual image
-        property Image dummyImage: Image {
-            source: trustContactIcon.name ? "../../assets/img/icons/" + trustContactIcon.name + ".svg": ""
-            visible: false
-        }
-    }
-
-    enum TrustedType {
-        None, //0
-        Verified, //1
-        Untrustworthy //2
-    }
-
-    spacing: 4
-    visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
-
-    StatusRoundIcon {
-        visible: root.isMutualContact
-        icon.name: root.mutualConnectionIcon.name
-        icon.width: root.mutualConnectionIcon.width
-        icon.height: root.mutualConnectionIcon.height
-        icon.rotation: root.mutualConnectionIcon.rotation
-        icon.color: root.mutualConnectionIcon.color
-        icon.background.color: root.mutualConnectionIcon.background.color
-        icon.background.width: root.mutualConnectionIcon.background.width
-        icon.background.height: root.mutualConnectionIcon.background.height
-    }
-
-    StatusRoundIcon {
-        visible: root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None
-        icon.name: root.trustContactIcon.name
-        icon.width: root.trustContactIcon.width
-        icon.height: root.trustContactIcon.height
-        icon.rotation: root.trustContactIcon.rotation
-        icon.color: root.trustContactIcon.color
-        icon.background.color: root.trustContactIcon.background.color
-        icon.background.width: root.trustContactIcon.background.width
-        icon.background.height: root.trustContactIcon.background.height
-    }
- }

src/StatusQ/Components/StatusEmoji.qml

@@ -1,19 +0,0 @@
-import QtQuick 2.13
-import StatusQ.Core 0.1
-
-
-Image {
-    id: root
-
-    property string emojiId: ""
-    
-    width: 14
-    height: 14
-    sourceSize.width: width
-    sourceSize.height: height
-
-    fillMode: Image.PreserveAspectFit
-    mipmap: true
-    antialiasing: true
-    source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
-}

src/StatusQ/Components/StatusExpandableItem.qml

@@ -12,7 +12,6 @@ Rectangle {
     property alias additionalText: additionalText.text
     property alias button: button
     property alias expandableComponent: expandableRegion.sourceComponent
-    property alias expandableItem: expandableRegion.item
 
     property int type: StatusExpandableItem.Type.Primary
     property bool expandable: true
@@ -186,7 +185,7 @@ Rectangle {
         anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
         anchors.right: parent.right
         anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
-        visible: false
+        active: false
     }
 
     onExpandedChanged: {
@@ -203,13 +202,13 @@ Rectangle {
             name: "EXPANDED"
             PropertyChanges {target: expandImage; icon: "chevron-up"}
             PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
-            PropertyChanges {target: expandableRegion; visible: true}
+            PropertyChanges {target: expandableRegion; active: true}
         },
         State {
             name: "COLLAPSED"
             PropertyChanges {target: expandImage; icon: "chevron-down"}
             PropertyChanges {target: statusExpandableItem; height: 82}
-            PropertyChanges {target: expandableRegion; visible: false}
+            PropertyChanges {target: expandableRegion; active: false}
         }
     ]
 

src/StatusQ/Components/StatusImageCropPanel.qml

@@ -1,271 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-
-/*!
-    \qmltype StatusImageCropPanel
-    \inherits Item
-    \inqmlmodule StatusQ.Components
-    \since StatusQ.Components 0.1
-    \brief Draw a crop-window onto an image and allows manipulating the position of the crop-window. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
-
-    Adds mouse pan and zoom functionality on top of StatusImageCrop functionality. Also adds small
-    practical features and optimizes drawing by minimizing StatusImageCrop area
-
-    \sa StatusImageCrop for more details
-
-    Example of how to use it:
-
-    \qml
-        StatusImageCropPanel {
-            width: 400
-            height: 200
-            source: "qrc:/demoapp/data/logo-test-image.png"
-            windowStyle: StatusImageCrop.WindowStyle.Rectangular
-            Component.onCompleted: setCropRect(Qt.rect(10, 0, sourceSize.width - 20, sourceSize.height))
-        }
-    \endqml
-
-    For a list of components available see StatusQ.
-*/
-Item {
-    id: root
-
-    implicitWidth: mainLayout.implicitWidth
-    implicitHeight: mainLayout.implicitHeight
-
-    /*!
-        \qmlproperty real StatusImageCrop::aspectRatio
-        Initial aspect-ratio of the crop-window
-    */
-    property real aspectRatio: 1
-    /*!
-        \qmlproperty bool StatusImageCrop::interactive
-        If true allows user to interact with the image. Set to false for previewing existing crop-data
-    */
-    property bool interactive: true
-    /*!
-        \qmlproperty bool StatusImageCrop::margins
-        Space to keep around the control borders and crop area
-    */
-    property int margins: 10
-
-    /*!
-        \qmlproperty url StatusImageCropPanel::source
-        \sa StatusImageCrop::source
-    */
-    /*required*/ property alias source: cropEditor.source
-
-    /*!
-        \qmlproperty WindowStyle StatusImageCropPanel::windowStyle
-        \sa StatusImageCrop::windowStyle
-    */
-    property alias windowStyle: cropEditor.windowStyle
-    /*!
-        \qmlproperty int StatusImageCropPanel::radius
-        \sa StatusImageCrop::radius
-    */
-    property alias radius: cropEditor.radius
-    /*!
-        \qmlproperty color StatusImageCropPanel::wallColor
-        \sa StatusImageCrop::wallColor
-    */
-    property alias wallColor: cropEditor.wallColor
-    /*!
-        \qmlproperty real StatusImageCropPanel::wallTransparency
-        \sa StatusImageCrop::wallTransparency
-    */
-    property alias wallTransparency: cropEditor.wallTransparency
-    /*!
-        \qmlproperty rect StatusImageCropPanel::cropRect
-        \sa StatusImageCrop::cropRect
-    */
-    readonly property alias cropRect: cropEditor.cropRect
-    /*!
-        \qmlproperty real StatusImageCrop::scrollZoomFactor
-        How fast is image scaled (zoomed) when using mouse scroll
-    */
-    property real scrollZoomFactor: 0.5
-    /*!
-        \qmlproperty bool StatusImageCropPanel::enableCheckers
-        Shows helper guiding checkers pattern where image is not covering
-    */
-    property bool enableCheckers: root.interactive
-    /*!
-        \qmlproperty size StatusImageCropPanel::sourceSize
-        \sa StatusImageCrop::sourceSize
-    */
-    property alias sourceSize: cropEditor.sourceSize
-
-    /*
-        \qmlmethod StatusImageCropPanel::setCropRect(rect)
-        \sa StatusImageCrop::cropRect
-    */
-    function setCropRect(newRect) {
-        cropEditor.setCropRect(newRect)
-        aspectRatio = cropEditor.aspectRatio
-    }
-
-    QtObject {
-        id: d
-
-        readonly property int referenceWindowWidth: 1000
-        function updateAspectRatio(newAR) {
-            if(root.sourceSize.width === 0 || root.sourceSize.height === 0)
-                return
-            cropEditor.setCropRect(cropEditor.fillContentInWindow(root.sourceSize, Qt.size(referenceWindowWidth, referenceWindowWidth / root.aspectRatio)))
-        }
-    }
-
-    Component.onCompleted: d.updateAspectRatio(root.aspectRatio)
-    onAspectRatioChanged: d.updateAspectRatio(root.aspectRatio)
-    onSourceSizeChanged: d.updateAspectRatio(root.aspectRatio)
-
-    ColumnLayout {
-        id: mainLayout
-
-        anchors.fill: parent
-
-        Item {
-            id: cropSpaceItem
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            clip: true
-
-            Rectangle {
-                id: leftOverlay
-                anchors.left: parent.left
-                anchors.top: parent.top
-                anchors.right: cropEditor.left
-                anchors.bottom: parent.bottom
-                color: wallColor
-                opacity: wallTransparency
-                z: cropEditor.z + 1
-            }
-            Rectangle {
-                id: topOverlay
-                anchors.left: leftOverlay.right
-                anchors.top: parent.top
-                anchors.right: rightOverlay.left
-                anchors.bottom: cropEditor.top
-                color: wallColor
-                opacity: wallTransparency
-                z: cropEditor.z + 1
-            }
-
-            StatusImageCrop {
-                id: cropEditor
-                anchors.centerIn: parent
-                width: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height * aspectRatio : cropSpaceItem.width - root.margins * 2
-                height: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height - root.margins * 2 : cropSpaceItem.width / aspectRatio
-            }
-
-            Rectangle {
-                id: rightOverlay
-                anchors.left: cropEditor.right
-                anchors.top: parent.top
-                anchors.right: parent.right
-                anchors.bottom: parent.bottom
-                color: wallColor
-                opacity: wallTransparency
-                z: cropEditor.z + 1
-            }
-
-            Rectangle {
-                id: bottomOverlay
-                anchors.left: leftOverlay.right
-                anchors.top: cropEditor.bottom
-                anchors.right: rightOverlay.left
-                anchors.bottom: parent.bottom
-                color: wallColor
-                opacity: wallTransparency
-                z: cropEditor.z + 1
-            }
-
-            // Checkers
-            Canvas {
-                visible: root.enableCheckers
-                anchors.fill: parent
-                onPaint: {
-                    var ctx = getContext("2d")
-                    for(let xI = 0; xI < Math.ceil(width/10); xI++) {
-                        for(let yI = 0; yI < Math.ceil(height/10); yI++) {
-                            ctx.fillStyle = (xI % 2) === (yI % 2) ? "#FFFFFE" : "#DBDBDB"
-                            ctx.fillRect(xI * 10, yI * 10, 10, 10)
-                        }
-                    }
-                }
-                z: cropEditor.z - 1
-            }
-
-            // Drag and zoom
-            MouseArea {
-                anchors.fill: parent
-
-                enabled: root.interactive
-
-                property var lastDragPoint: null
-                onReleased: lastDragPoint = null
-
-                onMouseXChanged: updateDrag(Qt.point(mouse.x, mouse.y))
-                onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))
-
-                onWheel: {
-                    const delta = wheel.angleDelta.y / 120
-                    cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
-                }
-
-                function moveRect(r /*rect*/, delta /*real*/) {
-                    return Qt.rect(r.x + delta.x, r.y + delta.y, r.width, r.height)
-                }
-
-                function scaleSize(sz /*size*/, s /*size*/) {
-                    return Qt.point(sz.width * s, sz.height * s)
-                }
-
-                function updateDrag(p) {
-                    let delta = (lastDragPoint ? Qt.size(lastDragPoint.x - p.x, lastDragPoint.y - p.y) : Qt.size(0, 0))
-                    delta = scaleSize(delta, 1/cropEditor.scrToImgScale)
-                    cropEditor.setCropRect(moveRect(cropEditor.cropRect, delta))
-                    lastDragPoint = p
-                }
-            }
-        }
-
-        RowLayout {
-            visible: root.interactive
-
-            StatusIcon {
-                icon: "remove-circle"
-
-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 20
-            }
-            StatusSlider {
-                Layout.fillWidth: true
-                Layout.topMargin: 20
-                Layout.bottomMargin: 25
-                Layout.alignment: Qt.AlignVCenter
-
-                enabled: root.interactive
-
-                from: cropEditor.minZoomScale
-                to: cropEditor.maxZoomScale
-                value: cropEditor.zoomScale
-                live: false
-                onMoved: cropEditor.setCropRect(cropEditor.getZoomRect(valueAt(visualPosition)))
-            }
-            StatusIcon {
-                icon: "add-circle"
-
-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 20
-            }
-        }
-    }
-}
-

src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -1,60 +1,30 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
-import StatusQ.Core.Utils 0.1
 
 Rectangle {
-    id: root
+    id: statusLetterIdenticon
 
     property alias identiconText: identiconText
     property string name
-    property string emoji
-    property string emojiSize: Emoji.size.small
     property int letterSize: 21
-    property int charactersLen: 1
 
     color: Theme.palette.miscColor5
     width: 40
     height: 40
     radius: width / 2
 
-    StatusEmoji {
-        visible: root.emoji
-        anchors.centerIn: parent
-        width: Math.round(parent.width / 2)
-        height: Math.round(parent.height / 2)
-        emojiId: Emoji.iconId(root.emoji, root.emojiSize) || ""
-    }
-    
     StatusBaseText {
         id: identiconText
-
-        visible: !root.emoji
-        anchors.alignWhenCentered: false
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        width: parent.width
-        height: parent.height
-
+        text: ((statusLetterIdenticon.name.charAt(0) === "#")
+              || (statusLetterIdenticon.name.charAt(0) === "@") ?
+              statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
         font.weight: Font.Bold
-        font.pixelSize: root.letterSize
-        color: d.luminance(root.color) > 0.5 ? Qt.rgba(0, 0, 0, 0.5) : Qt.rgba(255, 255, 255, 0.7)
-
-        text: {
-            const shift = (root.name.charAt(0) === "#") ||
-                          (root.name.charAt(0) === "@")
-            return root.name.substring(shift, shift + charactersLen).toUpperCase()
-        }
-    }
-
-    QtObject {
-        id: d
-        function luminance(color) {
-            let r = Math.pow(color.r, 2.2) * 0.2126
-            let g = Math.pow(color.g, 2.2) * 0.7151
-            let b = Math.pow(color.b, 2.2) * 0.0721
-            return r + g + b
-        }
+        font.pixelSize: statusLetterIdenticon.letterSize
+        color: Qt.rgba(255, 255, 255, 0.7)
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
     }
 }
 
+

src/StatusQ/Components/StatusListItem.qml

@@ -13,20 +13,17 @@ Rectangle {
     property string titleId: ""
     property string title: ""
     property string titleAsideText: ""
+    property bool titleIcon1Visible
+    property bool titleIcon2Visible
     property string subTitle: ""
-    property string tertiaryTitle: ""
+    property string tertiaryTitle: ""    
     property string label: ""
     property real leftPadding: 16
     property real rightPadding: 16
     property bool enabled: true
     property bool highlighted: false
-    property bool propagateTitleClicks: true
     property int type: StatusListItem.Type.Primary
     property list<Item> components
-    property var bottomModel: []
-    property Component bottomDelegate
-    property var tagsModel: []
-    property Component tagsDelegate
 
     property StatusIconSettings icon: StatusIconSettings {
         height: isLetterIdenticon ? 40 : 20
@@ -34,7 +31,6 @@ Rectangle {
         rotation: 0
         isLetterIdenticon: false
         letterSize: 21
-        charactersLen: 1
         color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
             Theme.palette.dangerColor1 : Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
@@ -56,10 +52,31 @@ Rectangle {
         height: 40
         isIdenticon: false
     }
-    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
-        initalAngleRad: 0
-        ringPxSize: 1.5
-        distinctiveColors: Theme.palette.identiconRingColors
+    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
@@ -67,15 +84,12 @@ Rectangle {
     property alias statusListItemIcon: iconOrImage
     property alias statusListItemTitle: statusListItemTitle
     property alias statusListItemTitleAside: statusListItemTitleAsideText
-    property alias statusListItemTitleIcons: titleIconsRow
     property alias statusListItemTitleArea: statusListItemTitleArea
     property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
-    property alias statusListItemTagsSlot: statusListItemTagsSlot
-    property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline
 
-    signal clicked(string itemId, var mouse)
+    signal clicked(string itemId)
     signal titleClicked(string titleId)
 
     enum Type {
@@ -85,12 +99,7 @@ Rectangle {
     }
 
     implicitWidth: 448
-    implicitHeight: {
-        if (bottomModel.length === 0) {
-            return Math.max(64, statusListItemTitleArea.height + 16)
-        }
-        return Math.max(64, statusListItemTitleArea.height + 90)
-    }
+    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
     color: {
         if (sensor.containsMouse || statusListItem.highlighted) {
             switch(type) {
@@ -125,7 +134,7 @@ Rectangle {
         preventStealing: true
 
         onClicked: {
-            statusListItem.clicked(statusListItem.itemId, mouse)
+            statusListItem.clicked(statusListItem.itemId)
         }
 
         StatusSmartIdenticon {
@@ -139,29 +148,18 @@ Rectangle {
             name: statusListItem.title
             active: statusListItem.icon.isLetterIdenticon ||
                     !!statusListItem.icon.name ||
-                    !!statusListItem.image.source.toString() ||
-                    !!statusListItem.icon.emoji
+                    !!statusListItem.image.source.toString()
             badge.border.color: statusListItem.color
-            ringSettings: statusListItem.ringSettings
         }
 
         Item {
             id: statusListItemTitleArea
-
-            function getStatusListItemTitleAnchorsRight() {
-                let isIconsRowVisible = false
-                if(titleIconsRow.item) {
-                    isIconsRowVisible = true//titleIconsRow.item.visible
-                }
-                return !statusListItem.titleAsideText && !isIconsRowVisible ? statusListItemTitleArea.right : undefined
-            }
-
             anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
-            anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
-            anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
+            anchors.right: statusListItemLabel.visible ?
+                statusListItemLabel.left : statusListItemComponentsSlot.left
+            anchors.leftMargin: statusListItem.leftPadding
             anchors.rightMargin: statusListItem.rightPadding
-            anchors.verticalCenter:  bottomModel.length === 0 ? parent.verticalCenter : undefined
-
+            anchors.verticalCenter: parent.verticalCenter
             height: childrenRect.height
 
             StatusBaseText {
@@ -169,39 +167,29 @@ Rectangle {
                 text: statusListItem.title
                 font.pixelSize: 15
                 height: visible ? contentHeight : 0
-                elide: Text.ElideRight
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 anchors.left: parent.left
-                anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-                anchors.topMargin: bottomModel.length === 0 ? undefined : 20
-                width: Math.min(implicitWidth, parent.width)
+                anchors.right: !statusListItem.titleAsideText && !statusListItem.titleIcon1Visible && !statusListItem.titleIcon2Visible
+                               ? parent.right : undefined
                 color: {
-                    if (!statusListItem.enabled) {
-                        return Theme.palette.baseColor1
-                    }
-                    switch (statusListItem.type) {
-                        case StatusListItem.Type.Primary:
-                            return Theme.palette.directColor1
-                        case StatusListItem.Type.Secondary:
-                            return Theme.palette.primaryColor1
-                        case StatusListItem.Type.Danger:
-                            return Theme.palette.dangerColor1
-                    }
-                }
-
-                StatusToolTip {
-                    id: statusListItemTitleTooltip
-                    text: statusListItemTitle.text
-                    delay: 0
-                    visible: statusListItemTitle.truncated && statusListItemTitleMouseArea.containsMouse
+                  if (!statusListItem.enabled) {
+                    return Theme.palette.baseColor1
+                  }
+                  switch (statusListItem.type) {
+                      case StatusListItem.Type.Primary:
+                          return Theme.palette.directColor1
+                      case StatusListItem.Type.Secondary:
+                          return Theme.palette.primaryColor1
+                      case StatusListItem.Type.Danger:
+                          return Theme.palette.dangerColor1
+                  }
                 }
 
                 MouseArea {
-                    id: statusListItemTitleMouseArea
                     anchors.fill: parent
-                    enabled: statusListItem.enabled
-                    cursorShape: sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
                     hoverEnabled: true
-                    propagateComposedEvents: statusListItem.propagateTitleClicks
+                    propagateComposedEvents: true
                     onClicked: {
                         statusListItem.titleClicked(statusListItem.titleId)
                         mouse.accepted = false
@@ -214,20 +202,43 @@ Rectangle {
                 anchors.left: statusListItemTitle.right
                 anchors.leftMargin: 4
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
-                anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-                anchors.topMargin: bottomModel.length === 0 ? undefined : 20
                 text: statusListItem.titleAsideText
                 font.pixelSize: 10
                 color: Theme.palette.baseColor1
                 visible: !!statusListItem.titleAsideText
             }
 
-            Loader {
+            Row {
                 id: titleIconsRow
+                spacing: 4
                 anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
-                anchors.leftMargin: 4
-            }
+                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
@@ -259,42 +270,11 @@ Rectangle {
                 width: contentItem.width
                 implicitHeight: visible ? 22 : 0
             }
-
-            Row {
-                id: statusListItemTagsSlotInline
-                anchors.top: statusListItemTertiaryTitle.bottom
-                width: parent.width
-                spacing: 10
-                clip: true
-
-                Repeater {
-                    model: tagsModel
-                    delegate: tagsDelegate
-                }
-            }
-        }
-
-        Row {
-            id: statusListItemTagsSlot
-            anchors.topMargin: 16
-            anchors.top: iconOrImage.bottom
-            anchors.left: parent.left
-            anchors.leftMargin: 16
-            width: statusListItemBadge.width
-            spacing: 10
-            anchors.verticalCenter: parent.verticalCenter
-
-            Repeater {
-                model: bottomModel
-                delegate: bottomDelegate
-            }
         }
 
         StatusBaseText {
             id: statusListItemLabel
-            anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
-            anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : 16
+            anchors.verticalCenter: parent.verticalCenter
             anchors.right: statusListItemComponentsSlot.left
             anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
 
@@ -304,13 +284,12 @@ Rectangle {
             visible: !!statusListItem.label
         }
 
+
         Row {
             id: statusListItemComponentsSlot
             anchors.right: parent.right
             anchors.rightMargin: statusListItem.rightPadding
-            anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
-            anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : 12
+            anchors.verticalCenter: parent.verticalCenter
             spacing: 10
         }
     }