fix(StatusSelect): Expose a property to make arrow in the select item visible/invisible

This component also has dependecy on BE and hence should be moved out.

BREAKING CHANGE:

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "vendor/SortFilterProxyModel"]
+	path = vendor/SortFilterProxyModel
+	url = https://github.com/status-im/SortFilterProxyModel.git

CMakeLists.txt

@@ -0,0 +1,23 @@
+cmake_minimum_required(VERSION 3.19)
+
+project(StatusQ)
+
+if (APPLE)
+    set(MACOS_VERSION_MIN_FLAGS -mmacosx-version-min=10.14)
+    set(CMAKE_OSX_ARCHITECTURES "x86_64")
+endif()
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+# https://doc.qt.io/qtcreator/creator-qml-modules-with-plugins.html#importing-qml-modules
+set(QML_IMPORT_PATH
+    ${CMAKE_SOURCE_DIR}/src;${QML_IMPORT_PATH}
+    CACHE STRING "")
+
+add_subdirectory(vendor/SortFilterProxyModel)
+add_subdirectory(sandbox)
+add_subdirectory(tests)

README.md

@@ -36,7 +36,7 @@ To make viewing and testing components easy, we've added a sandbox application t
 
 ### Using Qt Creator
 
-The easiest way to run the sandbox application is to simply open the provided `sandbox.pro` file using Qt Creator.
+The easiest way to run the sandbox application is to simply open the provided `CMakeLists.txt` file using Qt Creator.
 
 ### Using command line interface
 
@@ -44,14 +44,13 @@ To run the sandbox from within a command line interface, run the following comma
 
 ```
 $ git clone https://github.com/status-im/StatusQ
-$ cd StatusQ/sandbox
-$ ./scripts/build
+$ cd StatusQ
+$ git submodule update --init
+$ ./sandbox/scripts/build
 ```
 
 Once that is done, the sandbox can be started with the generated executable:
 
 ```
-$ ./bin/sandbox
+$ ./build/sandbox/Sandbox
 ```
-
-More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)

doc/src/statusqcomponents.qdoc

@@ -20,8 +20,10 @@
        \li \l{StatusChatToolBar}
        \li \l{StatusContactRequestsIndicatorListItem}
        \li \l{StatusDescriptionListItem}
+       \li \l{StatusItemSelector}
        \li \l{StatusLetterIdenticon}
        \li \l{StatusListItem}
+       \li \l{StatusListPicker}
        \li \l{StatusListSectionHeadline}
        \li \l{StatusLoadingIndicator}
        \li \l{StatusMemberListItem}
@@ -37,5 +39,6 @@
        \li \l{StatusMessageDetails}
        \li \l{StatusTagSelector}
        \li \l{StatusToastMessage}
+       \li \l{StatusWizardStepper}
    \endlist
 */

doc/src/statusqcontrols.qdoc

@@ -15,6 +15,7 @@
        \li \l{StatusChatInfoButton}
        \li \l{StatusChatListCategoryItemButton}
        \li \l{StatusColorSelector}
+       \li \l{StatusDropdown}
        \li \l{StatusIconTabButton}
        \li \l{StatusNavBarTabButton}
        \li \l{StatusTabBarIconButton}
@@ -30,8 +31,10 @@
        \li \l{StatusSlider}
        \li \l{StatusSelect}
        \li \l{StatusBaseInput}
+       \li \l{StatusIconTextButton}
        \li \l{StatusIdenticonRing}
        \li \l{StatusInput}
+       \li \l{StatusItemPicker}
        \li \l{StatusPickerButton}
        \li \l{StatusPinInput}
        \li \l{StatusProgressBar}
@@ -43,5 +46,6 @@
        \li \l{StatusWalletColorSelect}
        \li \l{StatusRegularExpressionValidator}
        \li \l{StatusIntValidator}
+       \li \l{StatusSeedPhraseInput}
    \endlist
 */

doc/src/statusqcore.qdoc

@@ -12,6 +12,7 @@
    \list
        \li \l{StatusAppNavBarFilterModel}
        \li \l{StatusBaseText}
+       \li \l{StatusFontSettings}
        \li \l{StatusIcon}
        \li \l{StatusIconBackgroundSettings}
        \li \l{StatusIconSettings}

sandbox/CMakeLists.txt

@@ -0,0 +1,38 @@
+project(Sandbox)
+
+find_package(
+  Qt5
+  COMPONENTS Core Quick QuickControls2
+  REQUIRED)
+
+file(GLOB_RECURSE QML_FILES "../*.qml")
+file(GLOB_RECURSE JS_FILES "../*.js")
+file(GLOB_RECURSE HEADERS *.h)
+if(APPLE)
+  file(GLOB_RECURSE SOURCES *.cpp *.mm)
+else()
+  file(GLOB_RECURSE SOURCES *.cpp)
+endif()
+
+qt5_add_big_resources(QRC_FILES qml.qrc ../src/statusq.qrc ../src/assets.qrc)
+
+add_executable(
+  ${PROJECT_NAME}
+  ${HEADERS}
+  ${SOURCES}
+  ${QRC_FILES}
+  ${QML_FILES}
+  ${JS_FILES})
+
+target_compile_definitions(${PROJECT_NAME}
+                           PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}")
+target_link_libraries(
+  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
+                          SortFilterProxyModel)
+
+if (APPLE)
+  find_library(AppKit AppKit)
+  find_library(Foundation Foundation)
+
+  target_link_libraries(${PROJECT_NAME} PRIVATE ${AppKit} ${Foundation})
+endif()

sandbox/DemoApp.qml

@@ -25,10 +25,11 @@ Rectangle {
         id: appSectionType
         readonly property int chat: 0
         readonly property int community: 1
-        readonly property int wallet: 2
+        readonly property int communitiesPortal: 2
+        readonly property int wallet: 3
         readonly property int browser: 3
-        readonly property int nodeManagement: 4
-        readonly property int profileSettings: 5
+        readonly property int nodeManagement: 5
+        readonly property int profileSettings: 6
         readonly property int apiDocumentation: 100
         readonly property int demoApp: 101
     }
@@ -118,6 +119,11 @@ 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
@@ -205,6 +211,11 @@ Rectangle {
         StatusAppProfileSettingsView { }
     }
 
+    Component {
+        id: statusCommunityPortalView
+        StatusAppCommunitiesPortalView { }
+    }
+
     DemoContactRequestsModal {
         id: demoContactRequestsModal
         anchors.centerIn: parent

sandbox/ThemeSwitch.qml

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

sandbox/controls/Buttons.qml

@@ -3,9 +3,10 @@ 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 {
@@ -173,6 +174,25 @@ Column {
             loading: true
         }
 
+        // transparent
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            loading: true
+        }
+
         // Rounded blue
 
         StatusFlatRoundButton {
@@ -307,12 +327,42 @@ Column {
         onClicked: {
             colorDialog.open();
         }
-        ColorDialog {
-            id: colorDialog
-            property bool colorSelected: false
-            onAccepted: {
-                colorSelected = true;
-            }
+    }
+
+    StatusColorDialog {
+        id: colorDialog
+        anchors.centerIn: parent
+        property bool colorSelected: false
+        onAccepted: {
+            colorSelected = true;
+        }
+    }
+
+    // Button with emoji
+    StatusButton {
+        text: "Button with Emoji"
+        icon.emoji: "🖼️️"
+    }
+
+    RowLayout {
+        spacing: 20
+
+        StatusIconTextButton {
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+            statusIcon: "next"
+            icon.width: 24
+            icon.height: 24
+            iconRotation: 180
+            text: "Previous page"
+            font.pixelSize: 15
+            onClicked: testText.visible = !testText.visible
+        }
+        StatusBaseText {
+            id: testText
+            Layout.alignment: Qt.AlignVCenter
+            text: "Click and hide!"
+            font.pixelSize: 15
         }
     }
 }

sandbox/controls/Controls.qml

@@ -32,14 +32,14 @@ GridLayout {
     }
 
     StatusIconTabButton {
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusIconTabButton {
         icon.color: Theme.palette.miscColor9
         // This icon source is flawed and demonstrates the fallback case
         // when the image source can't be loaded
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
+        icon.source: "https://httpstat.us/404"
         name: "Pascal"
     }
 
@@ -86,7 +86,7 @@ GridLayout {
     }
 
     StatusNavBarTabButton {
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         tooltip.text: "Some Community"
     }
 
@@ -124,7 +124,7 @@ GridLayout {
         title: "Iuri Matias"
         subTitle: "Contact"
         icon.color: Theme.palette.miscColor7
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatInfoButton.Type.OneToOneChat
         muted: true
         pinnedMessagesCount: 1
@@ -137,7 +137,7 @@ GridLayout {
             title: "Iuri Matias elided"
             subTitle: "Contact"
             icon.color: Theme.palette.miscColor7
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
@@ -152,7 +152,7 @@ GridLayout {
             title: "Iuri Matias big not elided"
             subTitle: "Contact"
             icon.color: Theme.palette.miscColor7
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
@@ -189,6 +189,16 @@ 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
@@ -198,7 +208,7 @@ GridLayout {
     }
 
     StatusProgressBar {
-        id: progressBar        
+        id: progressBar
         text: "Weak"
         value: 0.5
         fillColor : Theme.palette.pinColor1

sandbox/controls/Layout.qml

@@ -10,31 +10,96 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 
 Column {
-    spacing: 5
+    spacing: 10
 
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        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
+             }
+        }
     }
 
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
-        chatInfoButton.pinnedMessagesCount: 1
-        chatInfoButton.muted: true
+        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
+             }
+        }
     }
 
+
     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,6 +4,7 @@ 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
@@ -25,7 +26,7 @@ GridLayout {
         badge.value: 1
     }
     StatusNavigationListItem {
-        title: "Menu Item (selected)"
+        title: "Menu Item (selected) with very long text"
         selected: true
         icon.name: "info"
         badge.value: 1
@@ -72,13 +73,13 @@ GridLayout {
 
     StatusChatListItem {
         name: "community-channel-with-image"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.CommunityChat
     }
 
     StatusChatListItem {
         name: "Weird Crazy Otter"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.OneToOneChat
     }
 
@@ -178,7 +179,7 @@ GridLayout {
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusListItem {
@@ -313,7 +314,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        badge.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         badge.primaryText: "CryptoKitties"
         badge.secondaryText: "#test"
     }
@@ -338,6 +339,24 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
     }
 
+    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"
@@ -375,13 +394,13 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     StatusMemberListItem {
         nickName: "This is an example"
         userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isVerified: true
+        isContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        isOnline: true
+        status: 1 // FIXME: use enum
         ringSettings.ringSpecModel:
             ListModel {
                 ListElement {colorId: 13; segmentLength: 5}
@@ -397,23 +416,62 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 
     StatusMemberListItem {
         nickName: "carmen.eth"
-        isOnline: false
-        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+        isUntrustworthy: true
+    }
+
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isUntrustworthy: true
     }
 
     StatusMemberListItem {
         nickName: "This girl I know from work"
         userName: "annabelle"
-        isOnline: true        
+        status: 1 // FIXME: use enum
     }
 
     StatusMemberListItem {
         nickName: "Mark Cuban"
         userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                        nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
     }
+
+    StatusMemberListItem {
+        nickName: "admin.guy"
+        isAdmin: true
+        isUntrustworthy: true
+    }
+
+    StatusBaseText {
+        Layout.fillWidth: true
+        Layout.topMargin: 16
+        text: "Loading features:"
+        font.pixelSize: 17
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Incoming device"
+        label: "loading: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loading: true
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Device"
+        label: "loadingFailed: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loadingFailed: true
+    }
 }

sandbox/controls/Others.qml

@@ -4,38 +4,58 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+ColumnLayout {
+    GridLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
 
-    StatusLoadingIndicator {
-        color: Theme.palette.directColor4
+        columns: 6
+        columnSpacing: 5
+        rowSpacing: 5
+
+        StatusLoadingIndicator {
+            color: Theme.palette.directColor4
+        }
+
+        StatusLetterIdenticon {
+            name: "#status"
+        }
+
+        StatusRoundedImage {
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+        }
+
+        StatusBadge {}
+
+        StatusBadge {
+            value: 1
+        }
+
+        StatusBadge {
+            value: 10
+        }
+
+        StatusBadge {
+            value: 100
+        }
+
+        StatusRoundIcon {
+            icon.name: "info"
+        }
     }
 
-    StatusLetterIdenticon {
-        name: "#status"
-    }
+    Flow {
+        Layout.fillWidth: true
+        spacing: 4
 
-    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"
+        Repeater {
+            model: 12
+            StatusLetterIdenticon {
+                name: "A"
+                color: Theme.palette.userCustomizationColors[index]
+                letterSize: 16
+            }
+        }
     }
 }
+

sandbox/controls/Popups.qml

@@ -4,6 +4,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
 
 Column {
     spacing: 20
@@ -83,6 +85,12 @@ Column {
         onClicked: advancedHeaderFooterModal.open()
     }
 
+
+    StatusButton {
+        text: "Modal with Floating header Buttons"
+        onClicked: floatingHeaderModal.open()
+    }
+
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -101,7 +109,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusModal {
@@ -109,7 +117,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         leftButtons: [
             StatusRoundButton {
                 icon.name: "arrow-right"
@@ -131,7 +139,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
@@ -162,7 +170,7 @@ Column {
     StatusModal {
         id: modalExample
         anchors.centerIn: parent
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         header.title: "Header"
         header.subTitle: "SubTitle"
         rightButtons: [
@@ -394,10 +402,58 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
     }
 
+    StatusModal {
+        id: floatingHeaderModal
+        anchors.centerIn: parent
+        height: 200
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        hasFloatingButtons: true
+        advancedHeaderComponent: StatusFloatingButtonsSelector {
+            id: floatingHeader
+            model: dummyAccountsModel
+            delegate: Rectangle {
+                width: button.width
+                height: button.height
+                radius: 8
+                visible: visibleIndices.includes(index)
+                color: Theme.palette.statusAppLayout.backgroundColor
+                StatusButton {
+                    id: button
+                    topPadding: 8
+                    bottomPadding: 0
+                    implicitHeight: 32
+                    defaultLeftPadding: 4
+                    text: name
+                    icon.emoji: !!emoji ? emoji: ""
+                    icon.emojiSize: Emoji.size.middle
+                    icon.name: !emoji ? "filled-account": ""
+                    normalColor: "transparent"
+                    highlighted: index === floatingHeader.currentIndex
+                    onClicked: {
+                        floatingHeader.currentIndex = index
+                    }
+                }
+            }
+            popupMenuDelegate: StatusListItem {
+                implicitWidth: 272
+                title: name
+                onClicked: floatingHeader.itemSelected(index)
+                visible: !visibleIndices.includes(index)
+            }
+        }
+    }
+
     ListModel {
         id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
         ListElement{name: "Account 2"; iconName: "filled-account"}
+        ListElement{name: "Account 3"; iconName: "filled-account"}
+        ListElement{name: "Account 4"; iconName: "filled-account"}
+        ListElement{name: "Account 5"; iconName: "filled-account"}
+        ListElement{name: "Account 6"; iconName: "filled-account"}
+        ListElement{name: "Account 7"; iconName: "filled-account"}
     }
 
     StatusSpellcheckingMenuItems {

sandbox/demoapp/ChatChannelView.qml

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

sandbox/demoapp/CreateChatView.qml

@@ -20,6 +20,7 @@ Page {
         height: tagSelector.height
         anchors.right: parent.right
         anchors.rightMargin: 8
+        spacing: 16
 
         StatusTagSelector {
             id: tagSelector
@@ -30,34 +31,86 @@ Page {
             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;
+                        }
+                    }
+                    return contactsModel.get(index).ringSpecModel;
+                } else {
+                    return null;
+                }
+            }
+            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: { sortModel(root.contactsModel); }
+            Component.onCompleted: {
+                textEdit.forceActiveFocus();
+                sortModel(root.contactsModel);
+            }
         }
 
         StatusButton {
+            implicitWidth: 106
             implicitHeight: 44
             Layout.alignment: Qt.AlignTop
             enabled: (tagSelector.namesModel.count > 0)
             text: "Confirm"
         }
+
+        Item {
+            implicitHeight: 32
+            implicitWidth: 32
+            Layout.alignment: Qt.AlignTop
+
+            StatusActivityCenterButton {
+                id: notificationButton
+                anchors.right: parent.right
+                unreadNotificationsCount: 3
+            }
+        }
     }
 
     contentItem: Item {
         anchors.fill: parent
-        anchors.topMargin: 68
 
         StatusBaseText {
-            visible: (contactsModel.count === 0)
-            anchors.centerIn: parent
+            anchors.left: parent.left
+            anchors.leftMargin: 252
+            anchors.right: parent.right
+            anchors.rightMargin: 252
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -(headerRow.height/2)
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
+            visible: contactsModel.count === 0
+            wrapMode: Text.WordWrap
             color: Theme.palette.baseColor1
-            text: qsTr("You can only send direct messages to your Contacts. \n\n
-Send a contact request to the person you would like to chat with, you will be\n able to
-chat with them once they have accepted your contact request.")
+            text: qsTr("You can only send direct messages to your Contacts.\n
+Send a contact request to the person you would like to chat with, you will be able to chat with them once they have accepted your contact request.")
             Component.onCompleted: {
                 if (visible) {
                     tagSelector.enabled = false;

sandbox/demoapp/DemoCommunityDetailModal.qml

@@ -13,7 +13,7 @@ StatusModal {
 
     header.title: "Cryptokitties"
     header.subTitle: "Public Community"
-    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
 
     contentItem: Column {
         width: root.width

sandbox/demoapp/StatusAppChatView.qml

@@ -16,55 +16,78 @@ StatusAppThreePanelLayout {
 
     leftPanel: Item {
         anchors.fill: parent
-
-        StatusNavigationPanelHeadline {
-            id: headline
-            anchors.top: parent.top
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Chat"
-        }
-
+        anchors.margins: 16
         RowLayout {
             id: searchInputWrapper
             width: parent.width
-            height: searchInput.height
-            anchors.top: headline.bottom
-            anchors.topMargin: 16
-            anchors.right: parent.right
-            anchors.rightMargin: 8
 
-            StatusBaseInput {
-                id: searchInput
+            StatusNavigationPanelHeadline {
+                id: headline
+                Layout.alignment: Qt.AlignVCenter
+                text: "Chat"
+            }
+
+            Item {
                 Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                Layout.leftMargin: 17
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 0
-                placeholderText: "Search"
-                icon.name: "search"
             }
 
-            StatusIconTabButton {
+
+            StatusRoundButton {
+                Layout.alignment: Qt.AlignVCenter
                 icon.name: "public-chat"
+                icon.color: Theme.palette.directColor1
+                icon.height: editBtn.icon.height
+                icon.width: editBtn.icon.width
+                implicitWidth: editBtn.implicitWidth
+                implicitHeight: editBtn.implicitHeight
+                type: StatusRoundButton.Type.Tertiary
+                StatusToolTip {
+                    text: qsTr("Join public chats")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
 
             StatusIconTabButton {
+                id: editBtn
                 icon.name: "edit"
+                icon.color: Theme.palette.directColor1
+                checked: root.createChat
+                highlighted: checked
                 onClicked: {
                     root.createChat = !root.createChat;
                 }
+                StatusToolTip {
+                    text: qsTr("Start chat")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
         }
 
-        Column {
+        StatusInput {
+            id: searchInput
             anchors.top: searchInputWrapper.bottom
             anchors.topMargin: 16
             width: parent.width
+            maximumHeight: 36
+            topPadding: 8
+            bottomPadding: 8
+            placeholderText: "Search"
+            input.icon.name: "search"
+        }
+
+        Column {
+            width: parent.width
+            anchors.top: searchInput.bottom
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
             spacing: 8
 
             StatusContactRequestsIndicatorListItem {
+                width: parent.width
                 anchors.horizontalCenter: parent.horizontalCenter
                 title: "Contact requests"
                 requestsCount: 3
@@ -72,8 +95,9 @@ StatusAppThreePanelLayout {
             }
 
             StatusChatList {
-                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width
                 model: Models.demoChatListItems
+                highlightItem: !root.createChat
                 onChatItemUnmuted: {
                     for (var i = 0; i < Models.demoChatListItems.count; i++) {
                         let item = Models.demoChatListItems.get(i);
@@ -128,19 +152,18 @@ StatusAppThreePanelLayout {
     centerPanel: Loader {
         anchors.fill: parent
         sourceComponent: root.createChat ? createChatView : chatChannelView
-    }
-
-    Component {
-        id: createChatView
-        CreateChatView {
-            contactsModel: Models.dummyContactsModel
+        Component {
+            id: createChatView
+            CreateChatView {
+                contactsModel: Models.membersListModel
+            }
         }
-    }
 
-    Component {
-        id: chatChannelView
-        ChatChannelView {
-            model: Models.chatMessagesModel
+        Component {
+            id: chatChannelView
+            ChatChannelView {
+                model: Models.chatMessagesModel
+            }
         }
     }
 
@@ -148,15 +171,8 @@ StatusAppThreePanelLayout {
         anchors.fill: parent
 
         StatusChatToolBar {
-            anchors.top: parent.top
             width: parent.width
-
-            chatInfoButton.title: "Amazing Funny Squirrel"
-            chatInfoButton.subTitle: "Contact"
-            chatInfoButton.icon.color: Theme.palette.miscColor7
-            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-            chatInfoButton.pinnedMessagesCount: 1
-
+            toolbarComponent: statusChatInfoButton
             searchButton.visible: false
             membersButton.visible: false
             notificationCount: 1
@@ -189,6 +205,19 @@ 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

@@ -0,0 +1,156 @@
+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
+
+
+StatusScrollView {
+    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

@@ -33,7 +33,7 @@ StatusAppThreePanelLayout {
 
             chatInfoButton.title: "CryptoKitties"
             chatInfoButton.subTitle: "128 Members"
-            chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             chatInfoButton.icon.color: Theme.palette.miscColor6
             chatInfoButton.onClicked:  { chatInfoButtonClicked(); }
 
@@ -59,7 +59,7 @@ StatusAppThreePanelLayout {
             }
         }
 
-        ScrollView {
+        StatusScrollView {
             id: scrollView
 
             anchors.top: statusChatInfoToolBar.bottom
@@ -166,13 +166,10 @@ StatusAppThreePanelLayout {
     centerPanel: Item {
         StatusChatToolBar {
             id: statusChatToolBar
-            anchors.top: parent.top
-            width: parent.width
 
-            chatInfoButton.title: "general"
-            chatInfoButton.subTitle: "Community Chat"
-            chatInfoButton.icon.color: Theme.palette.miscColor6
-            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+
             onSearchButtonClicked: {
                 searchButton.highlighted = !searchButton.highlighted;
                 searchPopup.setSearchSelection(communityDetailModalTitle,
@@ -184,6 +181,18 @@ 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 {
@@ -258,16 +267,15 @@ StatusAppThreePanelLayout {
             model: Models.membersListModel
             delegate: StatusMemberListItem {
                 implicitWidth: parent.width
-                nickName: model.nickName
-                userName: model.userName
-                chatKey: model.chatKey
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
-                image.source: model.source
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.isOnline
-                ringSettings.ringSpecModel: model.ringSpecModel
-                ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+                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
             }
         }
     }

sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
 
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 import "data" 1.0
@@ -21,7 +22,7 @@ StatusAppTwoPanelLayout {
             text: "Profile"
         }
 
-        ScrollView {
+        StatusScrollView {
             anchors.top: profileHeadline.bottom
             anchors.topMargin: 16
             anchors.bottom: parent.bottom

sandbox/demoapp/data/Models.qml

@@ -4,65 +4,15 @@ 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
@@ -78,7 +28,9 @@ QtObject {
             itemId: "x012340001"
             name: "status-desktop"
             icon: ""
+            emoji: ""
             isIdenticon: false
+            colorHash: []
             color: "red"
             description: ""
             type: StatusChatListItem.Type.PublicChat
@@ -95,7 +47,9 @@ 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
@@ -111,7 +65,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             itemId: "x012340003"
             name: "Black Ops"
             icon: ""
+            emoji: ""
             isIdenticon: false
+            colorHash: []
             color: "purple"
             description: ""
             type: StatusChatListItem.Type.OneToOneChat
@@ -127,7 +83,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             itemId: "x012340004"
             name: "Spectacular Growing Otter"
             icon: ""
+            emoji: ""
             isIdenticon: false
+            colorHash: []
             color: "orange"
             description: ""
             type: StatusChatListItem.Type.OneToOneChat
@@ -143,7 +101,9 @@ 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
@@ -356,9 +316,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     //dummy search popup models
     property var searchResultsA: ListModel {
         ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
-            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            image: "qrc:/demoapp/data/profile-image-1.jpeg";
             color: "orange";
-            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            badgeImage: "qrc:/demoapp/data/profile-image-1.jpeg";
             badgePrimaryText: "CryptoKities";
             badgeSecondaryText: "";
             badgeIconColor: "";
@@ -397,15 +357,13 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: ""
             iconName: "chat"
             iconColor: ""
-            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_1_1"
                     text: "Profile image item"
-                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    imageSource: "qrc:/demoapp/data/profile-image-1.jpeg"
                     iconName: ""
                     iconColor: ""
-                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_1_2"
@@ -413,15 +371,13 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
                     iconName: ""
                     iconColor: ""
-                    isIdenticon: true
                 }]}
         ListElement {
             value: "item_2"
             title: "Community item";
-            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            imageSource: "qrc:/demoapp/data/profile-image-1.jpeg"
             iconName: ""
             iconColor: ""
-            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_2_1"
@@ -429,7 +385,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_2_2"
@@ -437,7 +392,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_2_3"
@@ -445,7 +399,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 }]}
         ListElement {
             value: "item_3"
@@ -453,7 +406,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: "";
             iconName: "info"
             iconColor: ""
-            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_3_1"
@@ -461,7 +413,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 }]}
         ListElement {
             value: "item_4"
@@ -469,7 +420,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: "";
             iconName: ""
             iconColor: "red"
-            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_4_1"
@@ -477,7 +427,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 }]}
     }
 
@@ -497,7 +446,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f5789"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -526,7 +475,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -554,7 +503,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkUlEQVR4nOzYwQmDQBQG4SSkl3SQyizDyuzAavTi0cPK8sPwM9/Rw8rw4KH7eZUwhMYQGkNoDKGpCfmmDl63/bh7vvx/78T7aiZiCI0hNMMbJL2FZs+vmYghNIbQTG+cp9smtf1qJmIIjSEKqZmIITSG0Azfa6W/qfxDvBhCY4hCaiZiCI0hNIbQGEJzBgAA///3pSBjX42sYAAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -582,7 +531,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage:  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f6789"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -611,7 +560,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -640,7 +589,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -669,7 +618,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: true
             editMode: false
@@ -699,7 +648,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -729,7 +678,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -759,7 +708,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -789,7 +738,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -818,7 +767,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -846,7 +795,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -874,7 +823,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -894,69 +843,50 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     property var membersListModel: ListModel {
         id: membersList
         ListElement {
-            nickName: "This is an example"
-            userName: "annabelle"
-            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
-            isMutualContact: true
-            isOnline: true
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+            localNickname: "This is an example"
+            displayName: "Maria"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: true
+            isUntrustworthy: false
+            isContact: true
+            onlineStatus: 1
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                             nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
-            ringSpecModel: [ 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} ]
+            isAdmin: false
         }
         ListElement {
-            nickName: "carmen.eth"
-            userName: ""
-            chatKey: ""
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
-            isMutualContact: false
-            isOnline: false
-            source: ""
-            isIdenticon: false            
+            localNickname: ""
+            displayName: "carmen.eth"
+            pubKey: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: false
+            isUntrustworthy: true
+            isContact: false
+            onlineStatus: 0
+            icon: ""
+            isAdmin: false
         }
         ListElement {
-            nickName: "This girl I know from work"
-            userName:  "annabelle"
-            chatKey: ""
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
-            isMutualContact: false
-            isOnline: true
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
+            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
                      ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
-            isIdenticon: true
-            ringSpecModel: [ ListElement {colorId: 11; segmentLength: 1},
-                             ListElement {colorId: 23; segmentLength: 5},
-                             ListElement {colorId: 23; segmentLength: 5},
-                             ListElement {colorId: 10; segmentLength: 4},
-                             ListElement {colorId: 15; segmentLength: 3},
-                             ListElement {colorId: 26; segmentLength: 2},
-                             ListElement {colorId: 29; segmentLength: 5} ]
         }
         ListElement {
-            nickName: "Mark Cuban"
-            userName: "annabelle"
-            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
-            isMutualContact: true
-            isOnline: false
-            source: ""
-            isIdenticon: false
-            ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
-                             ListElement {colorId: 28; segmentLength: 1},
-                             ListElement {colorId: 31; segmentLength: 1},
-                             ListElement {colorId: 22; segmentLength: 4},
-                             ListElement {colorId: 28; segmentLength: 3},
-                             ListElement {colorId: 27; segmentLength: 5},
-                             ListElement {colorId: 7; segmentLength: 5},
-                             ListElement {colorId: 13; segmentLength: 1},
-                             ListElement {colorId: 25; segmentLength: 4}]
+            localNickname: "Mark Cuban"
+            displayName: "mark.eth"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: false
+            isUntrustworthy: true
+            isContact: true
+            onlineStatus: 0
+            icon: ""
+            isAdmin: false
         }
     }
 
@@ -983,8 +913,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             notificationsCount: 0
         }
         ListElement {
-            sectionId: "demoApp"
+            sectionId: "examples"
             sectionType: 101
+            name: "Examples"
+            active: false
+            image: ""
+            icon: "show"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "demoApp"
+            sectionType: 102
             name: "Demo Application"
             active: false
             image: ""
@@ -1019,8 +960,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             notificationsCount: 0
         }
         ListElement {
-            sectionId: "wallet"
+            sectionId: "communitiesPortal"
             sectionType: 2
+            name: "Communities Portal"
+            active: false
+            image: ""
+            icon: "communities"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "wallet"
+            sectionType: 3
             name: "Wallet"
             active: false
             image: ""
@@ -1031,7 +983,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
         ListElement {
             sectionId: "browser"
-            sectionType: 3
+            sectionType: 4
             name: "Browser"
             active: false
             image: ""
@@ -1052,4 +1004,491 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             notificationsCount: 0
         }
     }
+
+    property ListModel currencyPickerModel: ListModel {
+        ListElement {
+            key: 0
+            name: "United States Dollar"
+            shortName: "USD"
+            symbol: "$"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 1
+            name: "British Pound"
+            shortName: "GBP"
+            symbol: "£"
+            imageSource: "../../assets/twemoji/svg/1f4b5.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 2
+            name: "Euro"
+            shortName: "EUR"
+            symbol: "€"
+            imageSource: "../../assets/twemoji/svg/1f4b6.svg"
+            category: ""
+            selected: true
+        }
+        ListElement {
+            key: 3
+            name: "Shout Korean Won"
+            shortName: "KRW"
+            symbol: "₩"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 4
+            name: "Ethereum"
+            shortName: "ETH"
+            symbol: "Ξ"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
+            category: "Tokens"
+            selected: true
+        }
+        ListElement {
+            key: 5
+            name: "Bitcoin"
+            shortName: "BTC"
+            symbol: "฿"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: "Tokens"
+            selected: false
+        }
+        ListElement {
+            key: 6
+            name: "Status Network Token"
+            shortName: "SNT"
+            symbol: ""
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
+            category: "Tokens"
+            selected: false
+        }
+
+        ListElement {
+            key: 7
+            name: "Emirati Dirham"
+            shortName: "AED"
+            symbol: "د.إ"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: "Other Fiat"
+            selected: false
+        }
+        ListElement {
+            key: 8
+            name: "Afghani"
+            shortName: "AFN"
+            symbol: "؋"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
+            category: "Other Fiat"
+            selected: false
+        }
+        ListElement {
+            key: 9
+            name: "Argentine Peso"
+            shortName: "AFN"
+            symbol: "$"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: "Other Fiat"
+            selected: false
+        }
+    }
+
+    property ListModel currencyPickerModel2: ListModel {
+        ListElement {
+            key: 0
+            name: "United States Dollar"
+            shortName: "USD"
+            symbol: "$"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 1
+            name: "British Pound"
+            shortName: "GBP"
+            symbol: "£"
+            imageSource: "../../assets/twemoji/svg/1f4b5.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 2
+            name: "Euro"
+            shortName: "EUR"
+            symbol: "€"
+            imageSource: "../../assets/twemoji/svg/1f4b6.svg"
+            category: ""
+            selected: true
+        }
+        ListElement {
+            key: 3
+            name: "Shout Korean Won"
+            shortName: "KRW"
+            symbol: "₩"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 4
+            name: "Ethereum"
+            shortName: "ETH"
+            symbol: "Ξ"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
+            category: "Tokens"
+            selected: true
+        }
+        ListElement {
+            key: 5
+            name: "Bitcoin"
+            shortName: "BTC"
+            symbol: "฿"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: "Tokens"
+            selected: false
+        }
+        ListElement {
+            key: 6
+            name: "Status Network Token"
+            shortName: "SNT"
+            symbol: ""
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
+            category: "Tokens"
+            selected: false
+        }
+
+        ListElement {
+            key: 7
+            name: "Emirati Dirham"
+            shortName: "AED"
+            symbol: "د.إ"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: "Other Fiat"
+            selected: false
+        }
+        ListElement {
+            key: 8
+            name: "Afghani"
+            shortName: "AFN"
+            symbol: "؋"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
+            category: "Other Fiat"
+            selected: false
+        }
+        ListElement {
+            key: 9
+            name: "Argentine Peso"
+            shortName: "AFN"
+            symbol: "$"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
+            category: "Other Fiat"
+            selected: false
+        }
+    }
+
+    property ListModel languagePickerModel: ListModel {
+        ListElement {
+            key: 0
+            name: "English"
+            shortName: "English"
+            imageSource: "../../assets/twemoji/svg/1f1ec-1f1e7.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 1
+            name: "Korean"
+            shortName: "한국어"
+            imageSource: "../../assets/twemoji/svg/1f1f0-1f1f7.svg"
+            category: ""
+            selected: false
+        }
+        ListElement {
+            key: 2
+            name: "Portuguese (Brazilian)"
+            shortName: "Português"
+            imageSource: "../../assets/twemoji/svg/1f1e7-1f1f7.svg"
+            category: ""
+            selected: true
+        }
+        ListElement {
+            key: 3
+            name: "Dutch"
+            shortName: "Nederlands"
+            imageSource: "../../assets/twemoji/svg/1f1f3-1f1f1.svg"
+            category: "Beta Languages"
+            selected: false
+        }
+        ListElement {
+            key: 4
+            name: "Indonesian"
+            shortName: "Bahasa Indonesia"
+            imageSource: "../../assets/twemoji/svg/1f1ee-1f1e9.svg"
+            category: "Beta Languages"
+            selected: false
+        }
+        ListElement {
+            key: 5
+            name: "Spanish"
+            shortName: "Español"
+            imageSource: "../../assets/twemoji/svg/1f1ea-1f1e6.svg"
+            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: "👻"}
+    }
+
+    property var communityTags :{"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼","Collaboration":"🤝","Commerce":"🛒","Crypto":"Ξ","Culture":"🎎","DAO":"🚀","DIY":"🔨","DeFi":"📈","Design":"🧩","Education":"🎒","Entertainment":"🍿","Environment":"🌿","Event":"🗓","Fantasy":"🧙‍♂️","Fashion":"🧦","Food":"🌶","Gaming":"🎮","Global":"🌍","Health":"🧠","Hobby":"📐","Innovation":"🧪","Language":"📜","Lifestyle":"✨","Local":"📍","Love":"❤️","Markets":"💎","Movies & TV":"🎞","Music":"🎶","NFT":"🖼","NSFW":"🍆","News":"🗞","Non-profit":"🙏","Org":"🏢","Pets":"🐶","Play":"🎲","Podcast":"🎙️","Politics":"🗳️","Privacy":"👻","Product":"🍱","Psyche":"🍁","Security":"🔒","Social":"☕","Software dev":"👩‍💻","Sports":"⚽️","Tech":"📱","Travel":"🗺","Vehicles":"🚕","Web3":"🌐"}
 }

sandbox/examples/FilteringSorting.qml

@@ -0,0 +1,154 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
+
+import SortFilterProxyModel 0.2
+
+ColumnLayout {
+    id: root
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        StatusIconTextButton {
+            id: sortBtn
+
+            property int sortOrder: -1
+            statusIcon: {
+                if (sortOrder == Qt.AscendingOrder) return "chevron-down"
+                if (sortOrder == Qt.DescendingOrder) return "chevron-up"
+                return "remove"
+            }
+
+            onClicked: {
+                var st = sortOrder + 1
+                sortOrder = st > 1 ? -1 : st
+            }
+        }
+
+        StatusInput {
+            id: searchInput
+
+            Layout.fillWidth: true
+            input.icon.name: "search"
+            placeholderText: "nickname.."
+        }
+
+        StatusIconTabButton {
+            id: contactBtn
+
+            icon.name: "tiny/tiny-contact"
+            identicon.icon.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusIconTabButton {
+            id: verifiedBtn
+
+            icon.name: "tiny/tiny-checkmark"
+            identicon.icon.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+    }
+
+    ListView {
+        Layout.fillWidth: true
+        implicitHeight: contentItem.childrenRect.height
+        spacing: 4
+
+        model: SortFilterProxyModel {
+            sourceModel: d.users
+            sorters: StringSorter {
+                enabled: sortBtn.sortOrder !== -1
+                roleName: "nick"
+                sortOrder: sortBtn.sortOrder
+            }
+            filters: [
+                ExpressionFilter {
+                    expression: model.nick.startsWith(searchInput.text)
+                },
+                AllOf {
+                    enabled: contactBtn.highlighted || verifiedBtn.highlighted
+                    ValueFilter {
+                        enabled: contactBtn.highlighted
+                        roleName: "isContact"
+                        value: true
+                    }
+                    ValueFilter {
+                        enabled: verifiedBtn.highlighted
+                        roleName: "isVerified"
+                        value: true
+                    }
+                }
+            ]
+        }
+
+        delegate: StatusMemberListItem {
+            width: parent.width
+            userName: model.name
+            nickName: model.nick
+            isVerified: model.isVerified
+            isContact: model.isContact
+        }
+    }
+
+    QtObject {
+        id: d
+
+        readonly property ListModel users: ListModel {
+            ListElement {
+                name: "Richard"
+                nick: "Ricky"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Susan"
+                nick: "Sue"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Edward"
+                nick: "Ed"
+                isVerified: true
+                isContact: false
+            }
+            ListElement {
+                name: "Toomas"
+                nick: "Tommy"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Elizabeth"
+                nick: "Bess"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Thomas"
+                nick: "Tom"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Fernando"
+                nick: "Alonso"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Alexander"
+                nick: "Alex"
+                isVerified: true
+                isContact: false
+            }
+        }
+    }
+}

sandbox/main.cpp

@@ -4,6 +4,8 @@
 
 #include "sandboxapp.h"
 
+#include <qqmlsortfilterproxymodeltypes.h>
+
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
@@ -11,6 +13,15 @@ int main(int argc, char *argv[])
 #endif
 
     SandboxApp app(argc, argv);
+
+    qqsfpm::registerTypes();
+
+    qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
+
+    app.setOrganizationName("Status");
+    app.setOrganizationDomain("status.im");
+    app.setApplicationName("Sandbox");
+
     app.startEngine();
 
     return app.exec();

sandbox/main.qml

@@ -2,6 +2,9 @@ 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 QtQml.Models 2.14
 
 import Sandbox 0.1
 
@@ -12,6 +15,8 @@ import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
 
+import SortFilterProxyModel 0.2
+
 import "demoapp/data" 1.0
 
 StatusWindow {
@@ -31,10 +36,7 @@ StatusWindow {
 
     property real factor: 1.0
 
-    Component.onCompleted: {
-        Theme.palette = lightTheme
-        rootWindow.updatePosition();
-    }
+    Component.onCompleted: rootWindow.updatePosition()
 
     QtObject {
         id: appSectionType
@@ -45,7 +47,8 @@ StatusWindow {
         readonly property int nodeManagement: 4
         readonly property int profileSettings: 5
         readonly property int apiDocumentation: 100
-        readonly property int demoApp: 101
+        readonly property int examples: 101
+        readonly property int demoApp: 102
     }
 
     function setActiveItem(sectionId) {
@@ -88,13 +91,16 @@ StatusWindow {
                     if(model.sectionType === appSectionType.apiDocumentation)
                     {
                         stackView.push(libraryDocumentationCmp)
-                        rootWindow.setActiveItem(sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.examples)
+                    {
+                        stackView.push(examplesCmp)
                     }
                     else if(model.sectionType === appSectionType.demoApp)
                     {
                         stackView.push(demoAppCmp)
-                        rootWindow.setActiveItem(model.sectionId)
                     }
+                    rootWindow.setActiveItem(model.sectionId)
                 }
             }
         }
@@ -110,12 +116,10 @@ StatusWindow {
             anchors.topMargin: 32
             anchors.right: parent.right
             anchors.rightMargin: 32
-            onCheckedChanged: {
-                if (Theme.palette === rootWindow.lightTheme) {
-                    Theme.palette = rootWindow.darkTheme
-                } else {
-                    Theme.palette = rootWindow.lightTheme
-                }
+            lightThemeEnabled: storeSettings.lightTheme
+            onLightThemeEnabledChanged: {
+                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
+                storeSettings.lightTheme = lightThemeEnabled
             }
         }
     }
@@ -126,178 +130,205 @@ StatusWindow {
         StatusAppTwoPanelLayout {
             id: mainPageView
 
-            function page(name) {
+            function page(name, fillPage) {
+                storeSettings.fillPage = fillPage ? true : false
                 viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
             }
             function control(name) {
                 viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
+                storeSettings.fillPage = false
             }
 
-            leftPanel: Item {
+            leftPanel: StatusScrollView {
                 anchors.fill: parent
-                ScrollView {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + 56
-                    contentWidth: navigation.width
-                    clip: true
-                    Column {
-                        id: navigation
-                        anchors.top: parent.top
-                        anchors.topMargin: 48
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        spacing: 0
+                anchors.topMargin: 48
 
-                        StatusListSectionHeadline { text: "StatusQ.Core" }
-                        StatusNavigationListItem { 
-                            title: "Icons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
+                Column {
+                    id: navigation
+                    spacing: 0
 
-                        StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem { 
-                            title: "Layouts"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Core" }
+                    StatusNavigationListItem {
+                        title: "Icons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
 
-                        StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem { 
-                            title: "Buttons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusSwitchTab"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusTabSwitch");
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusChatCommandButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "Controls"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusTabBarIconButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusAccountSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusAssetSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusColorSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusWalletColorButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusWalletColorSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusPasswordStrengthIndicator"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusPinInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Components" }
-                        StatusNavigationListItem { 
-                            title: "StatusAddress"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "List Items"
-                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
-                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusChatInfoToolBar"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "Others"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusExpandableItem"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusExpandableSettingsItem");
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusTagSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusToastMessage"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusWizardStepper"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem { 
-                            title: "StatusPopupMenu"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Layout" }
+                    StatusNavigationListItem {
+                        title: "Layouts"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title.substring(0, title.length - 1));
+                    }
 
-                        StatusNavigationListItem {
-                            title: "StatusModal"
-                            selected: viewLoader.source.toString().includes("Popups")
-                            onClicked: mainPageView.control("Popups");
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Platform" }
-                        StatusNavigationListItem {
-                            title: "StatusMacNotification"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusColorSelectorGrid"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Controls" }
+                    StatusNavigationListItem {
+                        title: "Buttons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSwitchTab"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusTabSwitch");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatCommandButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    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 {
+                        title: "StatusInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusAccountSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPasswordStrengthIndicator"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPinInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Components" }
+                    StatusNavigationListItem {
+                        title: "StatusAddress"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "List Items"
+                        selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                        onClicked: mainPageView.control(title.replace(/\s+/g, ''));
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatInfoToolBar"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Others"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusExpandableItem"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusExpandableSettingsItem");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTagSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusToastMessage"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWizardStepper"
+                        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);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityTags"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Popup" }
+                    StatusNavigationListItem {
+                        title: "StatusPopupMenu"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusModal"
+                        selected: viewLoader.source.toString().includes("Popups")
+                        onClicked: mainPageView.control("Popups");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusDialog"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Platform" }
+                    StatusNavigationListItem {
+                        title: "StatusMacNotification"
+                        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);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
                     }
                 }
             }
@@ -305,8 +336,11 @@ StatusWindow {
             rightPanel: Item {
                 id: rightPanel
                 anchors.fill: parent
-                ScrollView {
+
+                StatusScrollView {
+                    visible: !storeSettings.fillPage
                     anchors.fill: parent
+                    anchors.topMargin: 64
                     contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                     contentWidth: (pageWrapper.width * rootWindow.factor)
                     clip: true
@@ -315,14 +349,16 @@ 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: mainPageView.control("Icons")
+                            source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
                             onSourceChanged: {
+                                storeSettings.selected = viewLoader.source
                                 if (source.toString().includes("Icons")) {
                                     item.iconColor = Theme.palette.primaryColor1;
                                 }
@@ -330,6 +366,15 @@ StatusWindow {
                         }
                     }
                 }
+                Loader {
+                    active: storeSettings.fillPage
+                    anchors.fill: parent
+                    anchors.topMargin: 64
+                    visible: storeSettings.fillPage
+                    clip: true
+
+                    source: viewLoader.source
+                }
             }
         }
     }
@@ -357,6 +402,53 @@ StatusWindow {
         }
     }
 
+    Component {
+        id: examplesCmp
+
+        StatusAppTwoPanelLayout {
+            id: examplesView
+
+            function example(name) {
+                examplesLoader.source = Qt.resolvedUrl("./examples/" + name + ".qml")
+                storeSettings.selectedExample = examplesLoader.source
+            }
+
+            readonly property string defaultExampleSource: example("FilteringSorting")
+
+            leftPanel: StatusScrollView {
+                id: examplesLeftPanel
+
+                anchors.fill: parent
+                anchors.topMargin: 48
+
+                ColumnLayout {
+                    width: examplesLeftPanel.availableWidth
+                    spacing: 0
+
+                    StatusNavigationListItem {
+                        Layout.fillWidth: true
+                        title: "FilteringSorting"
+                        selected: examplesLoader.source.toString().includes(title)
+                        onClicked: examplesView.example(title)
+                    }
+                }
+            }
+
+            rightPanel: StatusScrollView {
+                id: examplesRightPanel
+                anchors.fill: parent
+                anchors.margins: 64
+                anchors.topMargin: anchors.margins + 32
+
+                Loader {
+                    id: examplesLoader
+                    width: examplesRightPanel.availableWidth
+                    source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
+                }
+            }
+        }
+    }
+
     Component {
         id: demoAppCmp
 
@@ -447,4 +539,12 @@ StatusWindow {
             rootWindow.toggleFullScreen()
         }
     }
+
+    Settings {
+        id: storeSettings
+        property string selected: ""
+        property string selectedExample: ""
+        property bool lightTheme: true
+        property bool fillPage: false
+    }
 }

sandbox/pages/StatusAssetSelectorPage.qml

@@ -1,40 +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.Popups 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusAssetSelector {
-        getCurrencyBalanceString: function (currencyBalance) {
-            return currencyBalance.toFixed(2) + " USD"
-        }
-        tokenAssetSourceFn: function (symbol) {
-            return "../../assets/img/icons/snt.svg"
-        }
-        assets: ListModel {
-            ListElement {
-                address: "0x1234"
-                name: "Status Network Token"
-                balance: "20"
-                symbol: "SNT"
-                currencyBalance: 9992.01
-            }
-            ListElement {
-                address: "0x1234"
-                name: "DAI Token"
-                balance: "15"
-                symbol: "DAI"
-                currencyBalance: 20.00001
-            }
-        }
-    }
-}
-

sandbox/pages/StatusCardPage.qml

@@ -0,0 +1,253 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Sandbox 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+
+Item {
+
+    ColumnLayout {
+        id: layout
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        spacing: 20
+
+        RowLayout {
+            StatusSelect {
+                id: select
+                label: "Select Card State"
+                model: ListModel {
+                    ListElement {
+                        name: "default"
+                    }
+                    ListElement {
+                        name: "unavailable"
+                    }
+                    ListElement {
+                        name: "error"
+                    }
+                    ListElement {
+                        name: "unpreferred"
+                    }
+                }
+                selectMenu.delegate: StatusMenuItemDelegate {
+                    statusPopupMenu: select
+                    action: StatusMenuItem {
+                        text: name
+                        onTriggered: {
+                            selectedItem.text = name
+                            card.state = name
+                        }
+                    }
+                }
+                selectedItemComponent: Item {
+                    id: selectedItem
+                    anchors.fill: parent
+                    property string text: "default"
+
+                    StatusBaseText {
+                        text: selectedItem.text
+                        anchors.centerIn: parent
+                        color: Theme.palette.directColor1
+                    }
+                }
+            }
+
+            StatusCheckBox {
+                text: "advancedMode"
+                onClicked: {
+                    card.advancedMode = checked
+                }
+            }
+        }
+
+        StatusCard {
+            id: card
+            primaryText: "Mainnet"
+            secondaryText: state === "unavailable" ? "No Gas" : "75"
+            tertiaryText: state === "unpreferred"  ? "UNPREFERRED" : "BALANCE: " + 250
+            cardIconName: "status"
+            advancedInputText: "75"
+            disabledText: "Disabled"
+        }
+
+        Rectangle {
+            height: 1
+            width: 700
+            color: "black"
+        }
+
+        // Below is an example on how to implement the network routing using StatusCard and Canvas, also the function in Utils to draw an arrow
+        Row {
+            id: cards
+            spacing: 200
+            Column {
+                id: leftColumn
+                spacing: 20
+                Repeater {
+                    model: fromNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: balance === 0 ? "No Balance" : !hasGas ? "No Gas" : tokensToSend
+                        tertiaryText: "BALANCE: " + balance
+                        state: balance === 0 || !hasGas ? "unavailable" :  "default"
+                        cardIconName: iconName
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToSend
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+
+            Column {
+                id: rightColumn
+                spacing: 20
+                Repeater {
+                    model: toNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: tokensToReceive
+                        tertiaryText: ""
+                        state: preferred ? "default" : "unprefeered"
+                        cardIconName: iconName
+                        opacity: preferred ? 1 : 0
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToReceive
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+        }
+    }
+
+    Canvas {
+        id: canvas
+        x: layout.x + leftColumn.x
+        y: cards.y
+        width: cards.width
+        height: cards.height
+
+        function clear() {
+            var ctx = getContext("2d");
+            ctx.reset()
+        }
+
+        onPaint: {
+            // Get the canvas context
+            var ctx = getContext("2d");
+
+            for(var i = 0; i< fromNetworksList.count; i++) {
+                if(fromNetworksList.get(i).routedTo !== "") {
+                    for(var j = 0; j< toNetworksList.count; j++) {
+                        if(fromNetworksList.get(i).routedTo === toNetworksList.get(j).name) {
+                            Utils.drawArrow(ctx, leftColumn.children[i].x + leftColumn.children[i].width,
+                                            leftColumn.children[i].y + leftColumn.children[i].height/2,
+                                            rightColumn.x + rightColumn.children[j].x,
+                                            rightColumn.children[j].y + rightColumn.children[j].height/2,
+                                            '#627EEA')
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    ListModel {
+        id: toNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: true
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToReceive: 100
+            preferred: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+    }
+
+    ListModel {
+        id: fromNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Mainnet"
+            hasGas: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 75
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Hermez"
+            hasGas: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 0
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Optimism"
+            hasGas: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToSend: 25
+            balance: 25
+            routedTo: "Optimism"
+            hasGas: true
+        }
+    }
+}

sandbox/pages/StatusChatInfoToolBarPage.qml

@@ -14,7 +14,7 @@ GridLayout {
     StatusChatInfoToolBar {
         chatInfoButton.title: "Cryptokitties"        
         chatInfoButton.subTitle: "128 Members"
-        chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         chatInfoButton.icon.color: Theme.palette.miscColor6
 
         popupMenu: StatusPopupMenu {

sandbox/pages/StatusColorSpacePage.qml

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

@@ -0,0 +1,47 @@
+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/StatusCommunityTagsPage.qml

@@ -0,0 +1,83 @@
+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
+
+import "../demoapp/data" 1.0
+
+Item {
+
+    property int cntSelectedTags: 0
+    property int maxSelectedTags: 4
+    property ListModel tagsModel: ListModel {}
+
+    Component.onCompleted: {
+        tagsModel.clear();
+        for (const key of Object.keys(Models.communityTags)) {
+            tagsModel.append({ name: key, emoji: Models.communityTags[key], selected: false });
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        anchors.centerIn: parent
+        width: 600
+        height: 500
+        spacing: 20
+
+        StatusInput {
+            id: tagsFilter
+            leftPadding: 0
+            rightPadding: 0
+            label: qsTr("Select tags that will fit your Community")
+            input.icon.name: "search"
+            placeholderText: qsTr("Search tags")
+            Layout.fillWidth: true
+        }
+
+        StatusCommunityTags {
+            filterString: tagsFilter.text
+            model: tagsModel
+            enabled: cntSelectedTags < maxSelectedTags
+            onClicked: {
+                cntSelectedTags++;
+                item.selected = true;
+            }
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            StatusBaseText {
+                text: qsTr("Selected tags")
+                font.pixelSize: 15
+                Layout.fillWidth: true
+            }
+
+            StatusBaseText {
+                text: cntSelectedTags + "/" + maxSelectedTags
+                color: Theme.palette.baseColor1
+                font.pixelSize: 13
+            }
+        }
+
+        StatusCommunityTags {
+            model: tagsModel
+            showOnlySelected: true
+            onClicked: {
+                cntSelectedTags--;
+                item.selected = false;
+            }
+            Layout.fillWidth: true
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}

sandbox/pages/StatusDialogPage.qml

@@ -0,0 +1,282 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtQml.Models 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups.Dialog 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+ColumnLayout {
+    id: root
+
+    StatusButton {
+        text: "Content"
+        onClicked: contentDialog.open()
+
+        StatusDialog {
+            id: contentDialog
+
+            standardButtons: Dialog.ApplyRole
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Title and content"
+        onClicked: titleContentDialog.open()
+
+        StatusDialog {
+            id: titleContentDialog
+            title: "Title"
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "No buttons"
+        onClicked: noButtonsDialog.open()
+
+        StatusDialog {
+            id: noButtonsDialog
+            title: "No buttons"
+
+            standardButtons: Dialog.NoButton
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Long title"
+        onClicked: longTitleDialog.open()
+
+        StatusDialog {
+            id: longTitleDialog
+            title: "Long title long title Long title long title Long title long title"
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Long title elided"
+        onClicked: longTitleElidedDialog.open()
+
+        StatusDialog {
+            id: longTitleElidedDialog
+            title: "Long title long title Long title long title Long title long title"
+
+            width: 400
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Title subtitle"
+        onClicked: titleSubtitleDialog.open()
+
+        StatusDialog {
+            id: titleSubtitleDialog
+            title: "This title will be ignored"
+
+            header: StatusDialogHeader {
+                headline.title: "Title"
+                headline.subtitle: "Subtitle"
+
+                actions.closeButton.onClicked: titleSubtitleDialog.close()
+            }
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Auto adjustable"
+        onClicked: autoAdjustableDialog.open()
+
+        StatusDialog {
+            id: autoAdjustableDialog
+
+            header: StatusDialogHeader {
+                headline.title: "Dialog size will auto adapt"
+                headline.subtitle: "To conent size"
+
+                actions.closeButton.onClicked: autoAdjustableDialog.close()
+            }
+
+            footer: StatusDialogFooter {
+                leftButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-left"
+                        onClicked: autoAdjustableDialogContent.implicitWidth -= 100
+                    }
+                    StatusRoundButton {
+                        icon.name: "arrow-right"
+                        onClicked: autoAdjustableDialogContent.implicitWidth += 100
+                    }
+                }
+                rightButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-down"
+                        onClicked: autoAdjustableDialogContent.implicitHeight -= 100
+                    }
+                    StatusRoundButton {
+                        icon.name: "arrow-up"
+                        onClicked: autoAdjustableDialogContent.implicitHeight += 100
+                    }
+                }
+            }
+
+            Rectangle {
+                id: autoAdjustableDialogContent
+
+                anchors.fill: parent
+
+                implicitWidth: 200
+                implicitHeight: 200
+
+                color: Theme.palette.primaryColor3
+
+                StatusBaseText {
+                    anchors.centerIn: parent
+                    text: "W: %1 H: %2\nIW: %3 IH: %4".arg(parent.width).arg(parent.height).arg(parent.implicitWidth).arg(parent.implicitHeight)
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Complex dialog"
+        onClicked: complexDialog.open()
+
+        StatusDialog {
+            id: complexDialog
+
+            header: StatusDialogHeader {
+                id: dialogHeader
+
+                headline.title: "Complex dialog"
+                headline.subtitle: "identicon, title subtitle, custom actions"
+
+                leftComponent: StatusLetterIdenticon {
+                    name: dialogHeader.headline.title
+                }
+
+                actions {
+                    infoButton.visible: true
+
+                    customButtons: ObjectModel {
+                        StatusFlatRoundButton {
+                            icon.name: "warning"
+                            icon.width: 20
+                            icon.height: 20
+                        }
+                    }
+
+                    closeButton.onClicked: complexDialog.close()
+                }
+            }
+
+            footer: StatusDialogFooter {
+                leftButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-left"
+                    }
+                }
+                rightButtons: ObjectModel {
+                    StatusButton {
+                        text: "Custom cancel action"
+                        type: StatusButton.Danger
+                    }
+                    StatusButton {
+                        text: "Custom approve action"
+                    }
+                }
+            }
+
+            ColumnLayout {
+                anchors.fill: parent
+
+                StatusBaseText {
+                    text: "Content A"
+                }
+
+                StatusBaseText {
+                    text: "Content B"
+                }
+
+                StatusBaseText {
+                    text: "Content C"
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Custom header/footer"
+        onClicked: customHeaderAndFooter.open()
+
+        StatusDialog {
+            id: customHeaderAndFooter
+            title: "No buttons"
+
+            header: Rectangle {
+                implicitHeight: customHeaderText.height * 2
+                implicitWidth: customHeaderText.width * 2
+
+                border.width: 2
+                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
+
+                StatusBaseText {
+                    id: customHeaderText
+                    anchors.centerIn: parent
+                    text: "Custom header"
+                }
+            }
+
+            footer: Rectangle {
+                implicitHeight: customHeaderText.height * 2
+                implicitWidth: customHeaderText.width * 2
+
+                border.width: 2
+                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
+
+                StatusBaseText {
+                    id: customFooter
+                    anchors.centerIn: parent
+                    text: "Custom footer"
+                }
+            }
+
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+}

sandbox/pages/StatusExpandableSettingsItemPage.qml

@@ -74,7 +74,7 @@ Column {
 
         type: StatusExpandableItem.Type.Secondary
         expandable: true
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         primaryText: "CryptoKitties"
         additionalText: "1456 USD"
         expandableComponent: notImplemented
@@ -85,7 +85,7 @@ Column {
 
         type: StatusExpandableItem.Type.Secondary
         expandable: true
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
         additionalText: "564.90 USD"
         expandableComponent: notImplemented

sandbox/pages/StatusImageCropPanelPage.qml

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

@@ -12,22 +12,22 @@ Column {
     spacing: 8
 
     StatusInput {
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
     }
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Disabled"
+        placeholderText: "Disabled"
         input.enabled: false
     }
 
     StatusInput {
-        input.placeholderText: "Clearable"
+        placeholderText: "Clearable"
         input.clearable: true
     }
 
     StatusInput {
-        input.placeholderText: "Invalid"
+        placeholderText: "Invalid"
         input.valid: false
     }
 
@@ -35,36 +35,37 @@ Column {
         label: "Label"
 
         input.icon.name: "search"
-        input.placeholderText: "Input with icon"
+        placeholderText: "Input with icon"
     }
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     StatusInput {
         charLimit: 30
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     StatusInput {
         label: "Label"
         charLimit: 30
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     Item {
         implicitWidth: 480
-        implicitHeight: 102
+        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
@@ -88,10 +89,9 @@ Column {
         label: "Label"
         charLimit: 30
         errorMessage: "Error message"
-
         input.clearable: true
         input.valid: false
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
     }
 
     StatusInput {
@@ -106,7 +106,7 @@ Column {
     StatusInput {
         label: "Label"
         secondaryLabel: "secondary label"
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.implicitHeight: 56
     }
 
@@ -114,7 +114,7 @@ Column {
         id: input
         label: "Label"
         charLimit: 30
-        input.placeholderText: "Input with validator"
+        placeholderText: "Input with validator"
 
         validators: [
             StatusMinLengthValidator {
@@ -132,7 +132,7 @@ Column {
     StatusInput {
         label: "Input with <i>StatusRegularExpressionValidator</i>"
         charLimit: 30
-        input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+        placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
         validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
 
         validators: [
@@ -145,7 +145,7 @@ Column {
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Input width component (right side)"
+        placeholderText: "Input width component (right side)"
         input.rightComponent: StatusIcon {
             icon: "cancel"
             height: 16
@@ -156,26 +156,26 @@ Column {
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline"
+        placeholderText: "Multiline"
     }
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline with static height"
+        placeholderText: "Multiline with static height"
         input.implicitHeight: 100
     }
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
+        placeholderText: "Multiline with max/min"
+        minimumHeight: 80
+        maximumHeight: 200
     }
 
     StatusInput {
         property bool toggled: true
         label: "Input with emoji icon"
-        input.placeholderText: "Enter Name"
+        placeholderText: "Enter Name"
         input.icon.emoji: toggled ? "😁" : "🧸"
         input.icon.color: "blue"
         input.isIconSelectable: true
@@ -187,7 +187,7 @@ Column {
     StatusInput {
         property bool toggled: true
         label: "Input with selectable icon which is not an emoji"
-        input.placeholderText: "Enter Name"
+        placeholderText: "Enter Name"
         input.icon.emoji: ""
         input.icon.name: toggled ? "filled-account" : "image"
         input.icon.color: "blue"

sandbox/pages/StatusItemSelectorPage.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.14
+
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+ColumnLayout {
+    spacing: 20
+    StatusItemSelector {
+        id: selector
+        icon: "qrc:/images/SNT.png"
+        iconSize: 24
+        title: "Item Selector Title"
+        defaultItemText: "Example: Empty items"
+        andOperatorText: "and"
+        orOperatorText: "or"
+        popupItem: StatusDropdown {
+            id: dropdown
+            width: 200
+            contentItem: ColumnLayout {
+                spacing: 10
+                StatusInput {
+                    id: input
+                    Layout.fillWidth: true
+                }
+                StatusButton {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: "Add element"
+                    onClicked: {
+                        selector.addItem(input.text, "qrc:/images/SNT.png", selector.itemsModel.count > 0 ? Utils.Operators.Or : Utils.Operators.None)
+                        dropdown.close()
+                    }
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        Layout.alignment: Qt.AlignHCenter
+        text: "Clear list"
+        onClicked: { selector.itemsModel.clear() }
+    }
+}

sandbox/pages/StatusListPickerPage.qml

@@ -0,0 +1,81 @@
+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/StatusPopupMenuPage.qml

@@ -28,6 +28,11 @@ GridLayout {
         onClicked: customMenu.popup()
     }
 
+    StatusButton {
+        text: "Menu with custom font settings"
+        onClicked: differentFontMenu.popup()
+    }
+
 
     StatusPopupMenu {
         id: simpleMenu
@@ -84,7 +89,7 @@ GridLayout {
         subMenuItemIcons: [
             { icon: "chat" },
             { 
-                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
+                source: "qrc:/demoapp/data/profile-image-1.jpeg"
             },
             { 
                 isLetterIdenticon: true, 
@@ -110,7 +115,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 
             StatusMenuItem { 
                 text: "Pascal"
-                image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             }
         }
 
@@ -147,4 +152,22 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             }
         }
     }
+
+    StatusPopupMenu {
+        id: differentFontMenu
+        StatusMenuItem {
+            text: "Bold"
+            fontSettings.bold: true
+        }
+
+        StatusMenuItem {
+            text: "Italic"
+            fontSettings.italic: true
+        }
+
+        StatusMenuItem {
+            text: "16px"
+            fontSettings.pixelSize: 16
+        }
+    }
 }

sandbox/pages/StatusTabBarButtonPage.qml

@@ -0,0 +1,27 @@
+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,17 +9,21 @@ Item {
     property ListModel asortedContacts: ListModel {
         ListElement {
             publicId: "0x0"
-            name: "Maria"
+            name: "emily.eth"
             icon: ""
             isIdenticon: false
             onlineStatus: 3
+            isReadonly: false
+            tagIcon: ""
         }
         ListElement {
             publicId: "0x1"
-            name: "James"
-            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            name: "vitalikbuterin"
+            icon: "qrc:/demoapp/data/profile-image-1.jpeg"
             isIdenticon: false
             onlineStatus: 1
+            isReadonly: false
+            tagIcon: ""
         }
         ListElement {
             publicId: "0x2"
@@ -27,13 +31,17 @@ Item {
             icon: ""
             isIdenticon: false
             onlineStatus: 2
+            isReadonly: false
+            tagIcon: ""
         }
         ListElement {
             publicId: "0x3"
-            name: "Tracy"
+            name: "carmen.eth"
             icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             onlineStatus: 3
+            isReadonly: true
+            tagIcon: "crown"
         }
         ListElement {
             publicId: "0x4"
@@ -41,6 +49,8 @@ Item {
             icon: ""
             isIdenticon: false
             onlineStatus: 3
+            isReadonly: false
+            tagIcon: ""
         }
     }
 

sandbox/pages/StatusToastMessagePage.qml

@@ -15,10 +15,11 @@ 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":""},
-                {"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":""}
+                {"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}
             ]
             delegate: StatusToastMessage {
                 primaryText: modelData.title
@@ -27,12 +28,15 @@ Item {
                 loading: modelData.loading
                 type: modelData.type
                 linkUrl: modelData.url
+                duration: modelData.duration
                 onLinkActivated: {
                     Qt.openUrlExternally(link);
                 }
-                //simulate open
-                Component.onCompleted: {
-                    open = true;
+                onClose: {
+                    console.warn("toast closed: ", modelData.title)
+                }
+                onClicked: {
+                    console.warn("toast clicked")
                 }
             }
         }

sandbox/pages/StatusWalletColorSelectPage.qml

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

sandbox/qml.qrc

@@ -1,22 +1,5 @@
 <RCC>
     <qresource prefix="/">
-        <file>main.qml</file>
-        <file>pages/StatusAccountSelectorPage.qml</file>
-        <file>pages/StatusAddressPage.qml</file>
-        <file>pages/StatusAssetSelectorPage.qml</file>
-        <file>pages/StatusChatCommandButtonPage.qml</file>
-        <file>pages/StatusChatInfoToolBarPage.qml</file>
-        <file>pages/StatusColorSelectorPage.qml</file>
-        <file>pages/StatusExpandableSettingsItemPage.qml</file>
-        <file>pages/StatusInputPage.qml</file>
-        <file>pages/StatusMacNotificationPage.qml</file>
-        <file>pages/StatusPopupMenuPage.qml</file>
-        <file>pages/StatusSelectPage.qml</file>
-        <file>pages/StatusTabBarIconButtonPage.qml</file>
-        <file>pages/StatusTabSwitchPage.qml</file>
-        <file>pages/StatusWalletColorButtonPage.qml</file>
-        <file>pages/StatusWalletColorSelectPage.qml</file>
-		<file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
         <file>controls/Buttons.qml</file>
         <file>controls/Controls.qml</file>
         <file>controls/Icons.qml</file>
@@ -24,12 +7,78 @@
         <file>controls/ListItems.qml</file>
         <file>controls/Others.qml</file>
         <file>controls/Popups.qml</file>
+        <file>demoapp/data/logo-test-image.png</file>
+        <file>demoapp/data/Models.qml</file>
+        <file>demoapp/data/qmldir</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>
+        <file>demoapp/StatusAppCommunitiesPortalView.qml</file>
         <file>demoapp/StatusAppCommunityView.qml</file>
         <file>demoapp/StatusAppProfileSettingsView.qml</file>
-        <file>demoapp/data/Models.qml</file>
-        <file>demoapp/data/qmldir</file>
+        <file>images/Coinbase.png</file>
+        <file>images/CoinBaseCommunityBanner.png</file>
+        <file>images/CommunityBanner1.png</file>
+        <file>images/CryptoKitties.png</file>
+        <file>images/CryptoPunks.png</file>
+        <file>images/Dragonerum.png</file>
+        <file>images/DribbbleCommunityBanner.png</file>
+        <file>images/Ethereum.png</file>
+        <file>images/EthereumCommunityBanner.png</file>
+        <file>images/Fluff.png</file>
+        <file>images/FriendsBenefits.png</file>
+        <file>images/logo-test-image.png</file>
+        <file>images/P2PCrypto.png</file>
+        <file>images/RARI.png</file>
+        <file>images/Rarible.png</file>
+        <file>images/RaribleCommunityBanner.png</file>
+        <file>images/SNT.png</file>
+        <file>images/Socks.png</file>
+        <file>images/Spotify.png</file>
+        <file>images/SpotifyCommunityBanner.png</file>
+        <file>images/SR.png</file>
+        <file>images/SRToken.png</file>
+        <file>images/StatusPunks.png</file>
+        <file>images/SuperRareCommunityBanner.png</file>
+        <file>pages/StatusAccountSelectorPage.qml</file>
+        <file>pages/StatusAddressPage.qml</file>
+        <file>pages/StatusAssetSelectorPage.qml</file>
+        <file>pages/StatusCardPage.qml</file>
+        <file>pages/StatusChatCommandButtonPage.qml</file>
+        <file>pages/StatusChatInfoToolBarPage.qml</file>
+        <file>pages/StatusColorSelectorGridPage.qml</file>
+        <file>pages/StatusColorSelectorPage.qml</file>
+        <file>pages/StatusColorSpacePage.qml</file>
+        <file>pages/StatusCommunityCardPage.qml</file>
+        <file>pages/StatusCommunityTagsPage.qml</file>
+        <file>pages/StatusDialogPage.qml</file>
+        <file>pages/StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusImageCropPanelPage.qml</file>
+        <file>pages/StatusInputPage.qml</file>
+        <file>pages/StatusItemSelectorPage.qml</file>
+        <file>pages/StatusListPickerPage.qml</file>
+        <file>pages/StatusMacNotificationPage.qml</file>
+        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+        <file>pages/StatusPinInputPage.qml</file>
+        <file>pages/StatusPopupMenuPage.qml</file>
+        <file>pages/StatusSelectPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
+        <file>pages/StatusTabBarIconButtonPage.qml</file>
+        <file>pages/StatusTabSwitchPage.qml</file>
+        <file>pages/StatusTagSelectorPage.qml</file>
+        <file>pages/StatusToastMessagePage.qml</file>
+        <file>pages/StatusWalletColorButtonPage.qml</file>
+        <file>pages/StatusWalletColorSelectPage.qml</file>
+        <file>pages/StatusWizardStepperPage.qml</file>
+        <file>DemoApp.qml</file>
+        <file>main.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>examples/FilteringSorting.qml</file>
+        <file>images/RARI.png</file>
+        <file>images/SRToken.png</file>
+        <file>demoapp/data/profile-image-1.jpeg</file>
+        <file>demoapp/data/profile-image-2.jpeg</file>
     </qresource>
-</RCC>
+</RCC>

sandbox/sandbox.pro

@@ -1,96 +0,0 @@
-QT += quick svg
-
-CONFIG += c++11 warn_on qtquickcompiler
-
-QML_IMPORT_PATH= $$PWD/../src
-
-DEFINES += QT_DEPRECATED_WARNINGS
-
-
-# You can make your code fail to compile if it uses deprecated APIs.
-# In order to do so, uncomment the following line.
-#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
-
-SOURCES += \
-        handler.cpp \
-        main.cpp \
-        sandboxapp.cpp \
-        spellchecker.cpp \
-
-!macx {
-    SOURCES += statuswindow.cpp
-}
-
-TARGET = sandboxapp
-DESTDIR = $$PWD/bin
-
-DESTDIR = $$PWD/bin
-
-macx {
-    CONFIG -= app_bundle
-    OBJECTIVE_SOURCES += \
-        statuswindow_mac.mm
-
-    hunspellTarget.depends = FORCE
-    hunspellTarget.commands = brew install hunspell
-    QMAKE_EXTRA_TARGETS += hunspellTarget
-
-    exists (/usr/local/lib/libhunspell-1.7.a) {
-        LIBS += -L"/usr/local/lib" -lhunspell-1.7
-        INCLUDEPATH += /usr/local/include/hunspell
-        DEFINES += USE_HUNSPELL
-        message("hunspell exists in /usr/local/lib")
-    }
-
-    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
-    first.depends = $(first) copydata
-    export(first.depends)
-    export(copydata.commands)
-    QMAKE_EXTRA_TARGETS += first copydata
-}
-
-ios {
-   LIBS += -framework UIKit
-
-   QMAKE_TARGET_BUNDLE_PREFIX = "im.status"
-   #QMAKE_XCODE_CODE_SIGN_IDENTITY = "iPhone Developer"
-   MY_DEVELOPMENT_TEAM.name = "STATUS HOLDINGS PTE.LTD"
-   MY_DEVELOPMENT_TEAM.value = "DTX7Z4U3YA"
-   QMAKE_MAC_XCODE_SETTINGS += MY_DEVELOPMENT_TEAM
-
-}
-
-RESOURCES += qml.qrc \
-            $$PWD/../statusq.qrc
-
-# Default rules for deployment.
-qnx: target.path = /tmp/$${TARGET}/bin
-else: unix:!android: target.path = /opt/$${TARGET}/bin
-!isEmpty(target.path): INSTALLS += target
-#OTHER_FILES += $$files($$PWD/../src/*, true)
-
-HEADERS += \
-    handler.h \
-    sandboxapp.h \
-    statuswindow.h \
-    spellchecker.h
-
-OTHER_FILES += $$files($$PWD/../*.qml, true)
-OTHER_FILES += $$files($$PWD/*.qml, true)
-
-android {
-
-DISTFILES += \
-    android/AndroidManifest.xml \
-    android/build.gradle \
-    android/gradle/wrapper/gradle-wrapper.jar \
-    android/gradle/wrapper/gradle-wrapper.properties \
-    android/gradlew \
-    android/gradlew.bat \
-    android/res/values/libs.xml
-
-    contains(ANDROID_TARGET_ARCH,armeabi-v7a) {
-        ANDROID_PACKAGE_SOURCE_DIR = \
-            $$PWD/android
-    }
-}

sandbox/sandboxapp.cpp

@@ -20,7 +20,7 @@ void SandboxApp::startEngine()
     qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
 
 #ifdef QT_DEBUG
-    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
+    const QUrl url = QUrl::fromLocalFile(SRC_DIR + QStringLiteral("/main.qml"));
 #else
     const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif
@@ -29,9 +29,9 @@ void SandboxApp::startEngine()
 
 
 #ifdef QT_DEBUG
-    m_engine.addImportPath(applicationDirPath() + "/../../src");
+    m_engine.addImportPath(SRC_DIR + QStringLiteral("/../src"));
 #else
-    m_engine.addImportPath(QStringLiteral("qrc:/src"));
+    m_engine.addImportPath(QStringLiteral(":/"));
 #endif
     qDebug() << m_engine.importPathList();
     QObject::connect(&m_engine, &QQmlApplicationEngine::objectCreated,

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
+cmake -B build
+cmake --build build

sandbox/spellchecker.cpp

@@ -9,7 +9,7 @@
 #include <QLocale>
 
 #include <QRegularExpression>
-#include <QApplication>
+#include <QGuiApplication>
 #include <QDir>
 
 SpellChecker::SpellChecker(QObject *parent)
@@ -53,8 +53,8 @@ void SpellChecker::initHunspell()
         delete m_hunspell;
     }
 
-    QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
-    QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
+    QString dictFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
+    QString affixFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
     QByteArray dictFilePathBA = dictFile.toLocal8Bit();
     QByteArray affixFilePathBA = affixFile.toLocal8Bit();
     m_hunspell = new Hunspell(affixFilePathBA.constData(),

sandbox/statuswindow.cpp

@@ -1,5 +1,33 @@
 #include "statuswindow.h"
 
+StatusWindow::StatusWindow(QQuickWindow *parent)
+    : QQuickWindow(parent)
+    , m_isFullScreen(false)
+{
+    removeTitleBar();
+
+    connect(this, &QQuickWindow::windowStateChanged, [&](Qt::WindowState windowState) {
+        if (windowState == Qt::WindowNoState) {
+            removeTitleBar();
+            m_isFullScreen = false;
+            emit isFullScreenChanged();
+        } else if (windowState == Qt::WindowFullScreen) {
+            m_isFullScreen = true;
+            emit isFullScreenChanged();
+            showTitleBar();
+        }
+    });
+}
+
+void StatusWindow::updatePosition()
+{
+    auto point = QPoint(screen()->geometry().center().x() - geometry().width() / 2,
+                        screen()->geometry().center().y() - geometry().height() / 2);
+    if (point != this->position()) {
+        this->setPosition(point);
+    }
+}
+
 void StatusWindow::toggleFullScreen()
 {
     if (m_isFullScreen) {
@@ -16,10 +44,26 @@ bool StatusWindow::isFullScreen() const
 
 void StatusWindow::removeTitleBar()
 {
-
+#ifdef Q_OS_WIN
+    removeTitleBarWin();
+#elif defined Q_OS_MACOS
+    removeTitleBarMac();
+#endif
 }
 
 void StatusWindow::showTitleBar()
 {
-
+#ifdef Q_OS_WIN
+    showTitleBarWin();
+#elif defined Q_OS_MACOS
+    showTitleBarMac();
+#endif
 }
+
+#ifdef Q_OS_WIN
+void StatusWindow::removeTitleBarWin()
+{}
+
+void StatusWindow::showTitleBarWin()
+{}
+#endif

sandbox/statuswindow.h

@@ -11,40 +11,11 @@ class StatusWindow: public QQuickWindow
     Q_PROPERTY(bool isFullScreen READ isFullScreen NOTIFY isFullScreenChanged)
 
 public:
-    struct EventCallbacks {
-        std::function<void()> onResize;
-        std::function<void()> willExitFullScreen;
-        std::function<void()> didExitFullScreen;
-    };
-
-    explicit StatusWindow(QWindow *parent = nullptr)
-        : QQuickWindow(parent),
-          m_isFullScreen(false)
-    {
-        removeTitleBar();
-
-        connect(this, &QQuickWindow::windowStateChanged, [&](Qt::WindowState windowState) {
-            if (windowState == Qt::WindowNoState) {
-                removeTitleBar();
-                m_isFullScreen = false;
-                emit isFullScreenChanged();
-            } else if (windowState == Qt::WindowFullScreen) {
-                m_isFullScreen = true;
-                emit isFullScreenChanged();
-                showTitleBar();
-            }
-        });
-
-    }
+    explicit StatusWindow(QQuickWindow *parent = nullptr);
 
     Q_INVOKABLE void toggleFullScreen();
 
-    Q_INVOKABLE void updatePosition() {
-        auto point = QPoint(screen()->geometry().center().x() - geometry().width() / 2, screen()->geometry().center().y() - geometry().height() / 2);
-        if (point != this->position()) {
-            this->setPosition(point);
-        }
-    }
+    Q_INVOKABLE void updatePosition();
 
     bool isFullScreen() const;
 
@@ -54,10 +25,15 @@ signals:
 private:
     void removeTitleBar();
     void showTitleBar();
-    void initCallbacks();
+#ifdef Q_OS_WIN
+    void removeTitleBarWin();
+    void showTitleBarWin();
+#elif defined Q_OS_MACOS
+    void removeTitleBarMac();
+    void showTitleBarMac();
+#endif
 
 private:
-    EventCallbacks m_callbacks;
     bool m_isFullScreen;
 };
 

sandbox/statuswindow_mac.mm

@@ -12,21 +12,7 @@
 #include <AppKit/NSButton.h>
 #include <AppKit/AppKit.h>
 
-void StatusWindow::toggleFullScreen()
-{
-    if (m_isFullScreen) {
-        showNormal();
-    } else {
-        showFullScreen();
-    }
-}
-
-bool StatusWindow::isFullScreen() const
-{
-    return m_isFullScreen;
-}
-
-void StatusWindow::removeTitleBar()
+void StatusWindow::removeTitleBarMac()
 {
     NSView *nsView = reinterpret_cast<NSView*>(this->winId());
     NSWindow *window = [nsView window];
@@ -39,7 +25,7 @@ void StatusWindow::removeTitleBar()
     [titleBarContainerView setHidden:YES];
 }
 
-void StatusWindow::showTitleBar()
+void StatusWindow::showTitleBarMac()
 {
     NSView *nsView = reinterpret_cast<NSView*>(this->winId());
     NSWindow *window = [nsView window];

src/StatusQ/Animations/SkeletonAnimation.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.14
+
+Item {
+    id: root
+
+    property Item mask
+    property color color: "#F6F8FA"
+
+    Rectangle {
+        id: gradient
+        anchors.fill: parent
+        visible: false
+
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+            SkeletonGradientStop { color: "transparent"; from: -3; }
+            SkeletonGradientStop { color: "transparent"; from: -2; }
+            SkeletonGradientStop { color: root.color; from: -1 ; }
+            SkeletonGradientStop { color: "transparent"; from: 0; }
+            SkeletonGradientStop { color: "transparent"; from: 1; }
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: gradient
+        maskSource: root.mask
+    }
+}

src/StatusQ/Animations/SkeletonGradientStop.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.14
+
+/*
+    TODO:   This component should be implemented as inline component of `SkeletonAnimation.qml`
+            when we use Qt > 5.15
+*/
+
+GradientStop {
+    id: root
+
+    property real from: 0
+
+    color: "transparent"
+
+    NumberAnimation on position {
+        easing.type: Easing.Linear
+        loops: Animation.Infinite
+        running: visible
+        from: root.from
+        to: from + 4
+        duration: 2000
+    }
+}

src/StatusQ/Animations/qmldir

@@ -0,0 +1,4 @@
+module StatusQ.Animations
+
+SkeletonAnimation 0.1 SkeletonAnimation.qml
+SkeletonGradientStop 0.1 SkeletonGradientStop.qml

src/StatusQ/Components/StatusBadge.qml

@@ -30,9 +30,11 @@ Rectangle {
         font.weight: Font.Medium
         color: Theme.palette.statusBadge.foregroundColor
         anchors.centerIn: parent
+        anchors.verticalCenterOffset: statusBadge.border.width/4
+        anchors.horizontalCenterOffset: statusBadge.border.width/4
         text: {
             if (statusBadge.value > 99) {
-                return "99+";
+                return qsTr("99+");
             }
             return statusBadge.value;
         }

src/StatusQ/Components/StatusCard.qml

@@ -0,0 +1,498 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusCard
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief This component represents a StatusCard as defined in design under https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=3161%3A171040
+
+   There is an advanced mode available where a StatusInput is provided for the user to be able to change values.
+
+   Example of how the component looks like:
+   \image status_card.png
+
+   Example of how to use it:
+   \qml
+        StatusCard {
+            id: card
+            primaryText: "Mainnet"
+            secondaryText: "75"
+            tertiaryText: "BALANCE: " + 250
+            cardIconName: "status"
+            advancedMode: false
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+
+Rectangle {
+    id: root
+
+    /*!
+       \qmlproperty string StatusCard::disabledText
+       This property is the text to be shown when the card is disabled
+    */
+    property string disabledText: ""
+    /*!
+       \qmlproperty bool StatusCard::disabled
+        This property holds if the card is disbaled
+    */
+    property bool disabled: false
+
+    /*!
+       \qmlproperty bool StatusCard::clickable
+        This property holds if the card is clickable
+    */
+    property bool clickable: true
+
+    /*!
+       \qmlproperty bool StatusCard::advancedMode
+       This property holds if advanced mode is on for the StatusCard component
+    */
+    property bool advancedMode: false
+    /*!
+       \qmlproperty int StatusCard::lockTimeout
+       This property enables user to customise the amount of time given to the user to enter a new value in
+       advanced mode before it locked for any new changes
+    */
+    property int lockTimeout: 1500
+
+    /*!
+       \qmlproperty alias StatusCard::primaryText
+       Used to set Primary text in the StatusCard
+    */
+    property alias primaryText: primaryText.text
+    /*!
+       \qmlproperty string StatusCard::secondaryText
+       Used to set Secondary text in the StatusCard
+    */
+    property string secondaryText: ""
+    /*!
+       \qmlproperty alias StatusCard::tertiaryText
+       Used to set Tertiary text in the StatusCard
+    */
+    property alias tertiaryText: tertiaryText.text
+    /*!
+       \qmlproperty alias StatusCard::advancedInputText
+       Used to set text in the StatusInput in advancedMode
+    */
+    property alias advancedInputText: advancedInput.text
+    /*!
+       \qmlproperty alias StatusCard::errorIconName
+       Used to assign an icon to the error icon in StatusCard
+    */
+    property alias errorIconName: errorIcon.icon
+    /*!
+       \qmlproperty alias StatusCard::cardIconName
+       Used to assign an icon to the card icon in StatusCard
+    */
+    property alias cardIconName: cardIcon.icon
+
+    /*!
+       \qmlproperty alias StatusCard::primaryLabel
+       This property allows user to customize the primary label in the StatusCard
+    */
+    property alias primaryLabel: primaryText
+    /*!
+       \qmlproperty alias StatusCard::secondaryLabel
+       This property allows user to customize the secondary label in the StatusCard
+    */
+    property alias secondaryLabel: secondaryLabel
+    /*!
+       \qmlproperty alias StatusCard::tertiaryLabel
+       This property allows user to customize the tertiary label in the StatusCard
+    */
+    property alias tertiaryLabel: tertiaryText
+    /*!
+       \qmlproperty alias StatusCard::advancedInput
+       This property allows user to customize the StatusInput in advanced mode
+    */
+    property alias advancedInput: advancedInput
+    /*!
+       \qmlproperty alias StatusCard::errorIcon
+       This property allows user to customize the error icon in the StatusCard
+    */
+    property alias errorIcon: errorIcon
+    /*!
+       \qmlproperty alias StatusCard::cardIcon
+       This property allows user to customize the card icon in the StatusCard
+    */
+    property alias cardIcon: cardIcon
+
+    /*!
+        \qmlsignal StatusCard::clicked
+        This signal is emitted when the card is clicked
+    */
+    signal clicked()
+
+    /*!
+       \qmlproperty string StatusCard::state
+       This property holds the states of the StatusCard.
+       Possible values are:
+        \ "default" : Normal state
+        \ "unavailable" : Unavailable state
+        \ "unpreferred": Not preffered state
+        \ "error" : Error state
+    */
+    state: "default"
+
+    implicitHeight: advancedInput.visible ? 90 : 76
+    implicitWidth: 128
+    radius: 8
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        enabled: root.clickable && root.state !== "unavailable"
+        onClicked: {
+            disabled = !disabled
+            root.clicked()
+        }
+    }
+
+    RowLayout {
+        id: layout
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.leftMargin: 8
+        anchors.rightMargin: 8
+        anchors.topMargin: 8
+        ColumnLayout {
+            Layout.maximumWidth: root.width - cardIcon.width - 24
+            StatusBaseText {
+                id: primaryText
+                Layout.maximumWidth: parent.width
+                font.pixelSize: 15
+                font.weight: Font.Medium
+                elide: Text.ElideRight
+            }
+            RowLayout {
+                id: basicInput
+                StatusBaseText {
+                    id: secondaryLabel
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                }
+                StatusIcon {
+                    id: errorIcon
+                    width: 14
+                    height: 14
+                    Layout.alignment: Qt.AlignTop
+                    icon: "tiny/warning"
+                    color: Theme.palette.pinColor1
+                }
+            }
+
+            StatusInput {
+                id: advancedInput
+                property bool locked: false
+                implicitWidth: 80
+                maximumHeight: 32
+                topPadding: 0
+                bottomPadding: 0
+                leftPadding: 8
+                rightPadding: 5
+                input.edit.font.pixelSize: 13
+                input.edit.readOnly: locked || disabled
+                input.rightComponent: Row {
+                    width: implicitWidth
+                    spacing: 4
+                    StatusFlatRoundButton {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 12
+                        height: 12
+                        icon.name: advancedInput.locked ? "lock" : "unlock"
+                        icon.width: 12
+                        icon.height: 12
+                        icon.color: advancedInput.locked ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
+                        type: StatusFlatRoundButton.Type.Secondary
+                        enabled: !disabled
+                        onClicked: {
+                            advancedInput.locked = !advancedInput.locked
+                            waitTimer.restart()
+                        }
+                    }
+                    StatusFlatRoundButton {
+                        width: 14
+                        height: 14
+                        icon.name: "clear"
+                        icon.width: 14
+                        icon.height: 14
+                        icon.color: Theme.palette.baseColor1
+                        type: StatusFlatRoundButton.Type.Secondary
+                        onClicked: advancedInput.edit.clear()
+                    }
+                }
+                onTextChanged: {
+                    locked = false
+                    waitTimer.restart()
+                }
+                Timer {
+                    id: waitTimer
+                    interval: lockTimeout
+                    onTriggered: {
+                        if(advancedInput.edit.text)
+                            advancedInput.locked = true
+                    }
+                }
+            }
+            StatusBaseText {
+                id: tertiaryText
+                font.pixelSize: 10
+            }
+        }
+        StatusIcon {
+            id: cardIcon
+            Layout.alignment: Qt.AlignTop | Qt.AlignRight
+            Layout.preferredHeight: 32
+            Layout.preferredWidth: 32
+            mipmap: true
+        }
+    }
+
+    states: [
+        State {
+            name: "default"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent" : Theme.palette.primaryColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5: Theme.palette.primaryColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ?  0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "error"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent" : Theme.palette.primaryColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5: Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ?  0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "unpreferred"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent": Theme.palette.pinColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.pinColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.pinColor1
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ? 0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: !disabled && !advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "unavailable"
+            PropertyChanges {
+                target: root
+                color: "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: "transparent"
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: 0.4
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: true
+            }
+        }
+    ]}

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -27,7 +27,6 @@ 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
@@ -37,7 +36,6 @@ Item {
     StatusRoundButton {
         id: statusMenuButton
         anchors.right: parent.right
-        anchors.rightMargin: 8
         anchors.verticalCenter: parent.verticalCenter
 
         visible: popupMenuSlot.active
@@ -75,6 +73,7 @@ Item {
                     duration: 150
                     direction: RotationAnimation.Clockwise
                     easing.type: Easing.InCubic
+                    running: visible
                 }
             },
             Transition {
@@ -84,6 +83,7 @@ Item {
 										duration: 150
 										direction: RotationAnimation.Counterclockwise
 										easing.type: Easing.OutCubic
+										running: visible
 								}
         		}
         ]
@@ -104,5 +104,4 @@ Item {
             }
         }
     }
-
 }

src/StatusQ/Components/StatusChatList.qml

@@ -17,6 +17,7 @@ Column {
     property string categoryId: ""
     property var model: null
     property bool draggableItems: false
+    property bool highlightItem: true
 
     property alias statusChatListItems: statusChatListItems
 
@@ -39,7 +40,7 @@ Column {
         model: statusChatList.model
         delegate: Item {
             id: draggable
-            width: statusChatListItem.width
+            width: statusChatList.width
             height: statusChatListItem.height
             property alias chatListItem: statusChatListItem
 
@@ -90,23 +91,26 @@ Column {
                 }
 
                 StatusChatListItem {
-
                     id: statusChatListItem
+
+                    width: parent.width
                     opacity: dragSensor.active ? 0.0 : 1.0
                     originalOrder: model.position
                     chatId: model.itemId
                     categoryId: model.parentItemId? model.parentItemId : ""
                     name: model.name
-                    icon.emoji: model.emoji
                     type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
                     muted: model.muted
                     hasUnreadMessages: model.hasUnreadMessages
                     notificationsCount: model.notificationsCount
                     highlightWhenCreated: !!model.highlight
-                    selected: model.active
-                    icon.color: model.color
-                    image.isIdenticon: model.isIdenticon
+                    selected: (model.active && statusChatList.highlightItem)
+
+                    icon.emoji: model.emoji
+                    icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
+                    image.isIdenticon: false
                     image.source: model.icon
+                    ringSettings.ringSpecModel: model.colorHash
 
                     sensor.cursorShape: dragSensor.cursorShape
                     onClicked: {