fix(Theme): Updated userCustomizationColors list per designs

2022-06-13 17:50:22 +03:00
248 changed files with 14238 additions and 42880 deletions
@@ -1,3 +0,0 @@
-[submodule "vendor/SortFilterProxyModel"]
-	path = vendor/SortFilterProxyModel
-	url = https://github.com/status-im/SortFilterProxyModel.git
@@ -2,22 +2,4 @@ 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)
@@ -2,9 +2,6 @@

 > An emerging reusable QML UI component library for Status applications.

-:bangbang: | This repository is set to read-only. `StatusQ` library is further developed in the [status-desktop](https://github.com/status-im/status-desktop) repository.
-:---: | :---
-
 ## Usage

 StatusQ introduces a module namespace that semantically groups components so they can be easily imported.
@@ -39,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 `CMakeLists.txt` file using Qt Creator.
+The easiest way to run the sandbox application is to simply open the provided `sandbox.pro` file using Qt Creator.

 ### Using command line interface

@@ -47,13 +44,14 @@ To run the sandbox from within a command line interface, run the following comma

 ```
 $ git clone https://github.com/status-im/StatusQ
-$ cd StatusQ
-$ git submodule update --init
-$ ./sandbox/scripts/build
+$ cd StatusQ/sandbox
+$ ./scripts/build
 ```

 Once that is done, the sandbox can be started with the generated executable:

 ```
-$ ./build/sandbox/Sandbox
+$ ./bin/sandbox
 ```
+
+More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)
@@ -20,7 +20,6 @@
       \li \l{StatusChatToolBar}
       \li \l{StatusContactRequestsIndicatorListItem}
       \li \l{StatusDescriptionListItem}
-       \li \l{StatusItemSelector}
       \li \l{StatusLetterIdenticon}
       \li \l{StatusListItem}
       \li \l{StatusListPicker}
@@ -15,7 +15,6 @@
       \li \l{StatusChatInfoButton}
       \li \l{StatusChatListCategoryItemButton}
       \li \l{StatusColorSelector}
-       \li \l{StatusDropdown}
       \li \l{StatusIconTabButton}
       \li \l{StatusNavBarTabButton}
       \li \l{StatusTabBarIconButton}
@@ -31,7 +30,6 @@
       \li \l{StatusSlider}
       \li \l{StatusSelect}
       \li \l{StatusBaseInput}
-       \li \l{StatusIconTextButton}
       \li \l{StatusIdenticonRing}
       \li \l{StatusInput}
       \li \l{StatusItemPicker}
@@ -12,7 +12,6 @@
   \list
       \li \l{StatusAppNavBarFilterModel}
       \li \l{StatusBaseText}
-       \li \l{StatusFontSettings}
       \li \l{StatusIcon}
       \li \l{StatusIconBackgroundSettings}
       \li \l{StatusIconSettings}
@@ -1,38 +0,0 @@
-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()
@@ -63,7 +63,7 @@ Rectangle {
        visible: titleStyle === "windows"
    }

-    StatusMainLayout {
+    StatusAppLayout {
        id: statusAppLayout
        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
        anchors.left: demoApp.left
@@ -73,7 +73,7 @@ Rectangle {
        height: demoApp.height - demoApp.border.width * 2
        width: demoApp.width - demoApp.border.width * 2

-        leftPanel: StatusAppNavBar {
+        appNavBar: StatusAppNavBar {

            id: navBar

@@ -174,14 +174,16 @@ Rectangle {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
            }
        }

-        rightPanel: Loader {
+        appView: Loader {
            id: appView
            anchors.fill: parent
            sourceComponent: statusAppChatView
@@ -197,7 +199,7 @@ Rectangle {
        id: statusAppCommunityView
        StatusAppCommunityView {
            communityDetailModalTitle: demoCommunityDetailModal.header.title
-            communityDetailModalImage: demoCommunityDetailModal.header.asset.name
+            communityDetailModalImage: demoCommunityDetailModal.header.image.source
            onChatInfoButtonClicked: {
                demoCommunityDetailModal.open();
            }
@@ -17,43 +17,6 @@ Column {

        horizontalItemAlignment: Grid.AlignHCenter

-        // Primary
-        StatusButton {
-            text: "Button"
-            type: StatusBaseButton.Type.Primary
-
-            StatusToolTip {
-                visible: parent.hovered
-                text: "Look I'm a tooltip on a button!"
-            }
-            onClicked: console.warn("Primary button clicked")
-            onPressed: console.warn("Primary button pressed")
-        }
-
-        StatusButton {
-            text: "Button"
-            enabled: false
-            type: StatusBaseButton.Type.Primary
-
-            StatusToolTip {
-                visible: parent.hovered
-                text: "Tooltip on a disabled button, should not be visible!"
-            }
-            onClicked: console.warn("Primary disabled button clicked, this should not happen !!!")
-        }
-
-        StatusButton {
-            text: "Button"
-            loading: true
-            type: StatusBaseButton.Type.Primary
-
-            StatusToolTip {
-                visible: parent.hovered
-                text: "Look I'm a tooltip on a loading button!"
-            }
-            onClicked: console.warn("Primary loading button clicked, this should not happen !!!")
-        }
-
        // Large
        StatusButton {
            text: "Button"
@@ -69,25 +32,6 @@ Column {
            loading: true
        }

-        // Large + Icon
-        StatusButton {
-            text: "Button"
-            icon.name: "info"
-        }
-
-        StatusButton {
-            text: "Button"
-            enabled: false
-            icon.name: "info"
-        }
-
-        StatusButton {
-            text: "Button"
-            loading: true
-            icon.name: "info"
-        }
-
-        // Danger
        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
@@ -105,7 +49,6 @@ Column {
            type: StatusBaseButton.Type.Danger
        }

-        // Flat
        StatusFlatButton {
            text: "Button"
        }
@@ -113,6 +56,7 @@ Column {
        StatusFlatButton {
            text: "Button"
            enabled: false
+
        }

        StatusFlatButton {
@@ -120,7 +64,6 @@ Column {
            loading: true
        }

-        // Flat + Danger
        StatusFlatButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
@@ -156,7 +99,6 @@ Column {
            loading: true
        }

-        // Small + danger
        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
@@ -177,7 +119,6 @@ Column {
            loading: true
        }

-        // Flat + small
        StatusFlatButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
@@ -233,25 +174,6 @@ 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 {
@@ -397,36 +319,4 @@ Column {
        }
    }

-    // Button with emoji
-    StatusButton {
-        text: "Button with Emoji"
-        asset.emoji: "🖼️️"
-    }
-
-    StatusButton {
-        width: parent.width
-        text: "wide"
-    }
-
-    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
-        }
-    }
 }
@@ -32,14 +32,14 @@ GridLayout {
    }

    StatusIconTabButton {
-        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    }

    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://httpstat.us/404"
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
        name: "Pascal"
    }

@@ -86,7 +86,7 @@ GridLayout {
    }

    StatusNavBarTabButton {
-        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        tooltip.text: "Some Community"
    }

@@ -113,33 +113,18 @@ GridLayout {
    StatusSwitch {

    }
-    StatusSwitch {
-        text: "Switch with text"
-    }

    StatusRadioButton {
-        text: "Radio button 1"
-        checked: true
-    }
-    StatusRadioButton {
-        text: "Radio button 2 (clicking on this text will uncheck the above)"
-    }
-    StatusRadioButton {
-        LayoutMirroring.enabled : true
-        text: "Radio button 3 (forced right-to-left)"
+        text: "i'm radio!"
    }

    StatusCheckBox {}
-    StatusCheckBox { checkState: Qt.Checked}
-    StatusCheckBox { text: "Check me on left side"}
-    StatusCheckBox { text: "Check me on right side"; leftSide: false}

    StatusChatInfoButton {
        title: "Iuri Matias"
        subTitle: "Contact"
-        asset.color: Theme.palette.miscColor7
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        icon.color: Theme.palette.miscColor7
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        type: StatusChatInfoButton.Type.OneToOneChat
        muted: true
        pinnedMessagesCount: 1
@@ -150,13 +135,12 @@ GridLayout {
        implicitHeight: 48
        StatusChatInfoButton {
            title: "Iuri Matias elided"
-            subTitle: "Very long subtitle should elide as well"
-            asset.color: Theme.palette.miscColor7
-            asset.isImage: true
-            asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            type: StatusChatInfoButton.Type.OneToOneChat
            muted: true
-            pinnedMessagesCount: 10
+            pinnedMessagesCount: 1
            width: 100
        }
    }
@@ -167,9 +151,8 @@ GridLayout {
        StatusChatInfoButton {
            title: "Iuri Matias big not elided"
            subTitle: "Contact"
-            asset.color: Theme.palette.miscColor7
-            asset.isImage: true
-            asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            type: StatusChatInfoButton.Type.OneToOneChat
            muted: true
            pinnedMessagesCount: 1
@@ -181,32 +164,24 @@ GridLayout {
        title: "group"
        subTitle: "Group Chat"
        pinnedMessagesCount: 1
-        asset.color: Theme.palette.miscColor7
+        icon.color: Theme.palette.miscColor7
        type: StatusChatInfoButton.Type.GroupChat
    }

    StatusChatInfoButton {
        title: "public-chat"
        subTitle: "Public Chat"
-        asset.color: Theme.palette.miscColor7
+        icon.color: Theme.palette.miscColor7
        type: StatusChatInfoButton.Type.PublicChat
    }

    StatusChatInfoButton {
        title: "community-channel"
        subTitle: "Community Chat"
-        asset.color: Theme.palette.miscColor7
+        icon.color: Theme.palette.miscColor7
        type: StatusChatInfoButton.Type.CommunityChat
    }

-    StatusChatInfoButton {
-        title: "community-channel"
-        subTitle: "Some very long description text to see how the whole item wraps or elides"
-        asset.color: Theme.palette.miscColor7
-        type: StatusChatInfoButton.Type.CommunityChat
-        pinnedMessagesCount: 3
-    }
-
    StatusSlider {
        width: 360
        from: 0
@@ -12,94 +12,93 @@ import StatusQ.Popups 0.1
 Column {
    spacing: 10

-    StatusToolBar {
+    StatusChatToolBar {
+        toolbarComponent: chatInfoButton1
        width: 518
-        headerContent: StatusChatInfoButton {
-            width: Math.min(implicitWidth, parent.width)
-            title: "Some contact"
-            subTitle: "Contact"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.OneToOneChat
+
+        Component {
+            id: chatInfoButton1
+
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.OneToOneChat
+             }
        }
    }

-    StatusToolBar {
+    StatusChatToolBar {
+        toolbarComponent: chatInfoButton2
        width: 518

-        headerContent: StatusChatInfoButton {
-            width: Math.min(implicitWidth, parent.width)
-            title: "Muted public chat"
-            subTitle: "Some subtitle"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.PublicChat
-            pinnedMessagesCount: 1
-            muted: true
+        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
+             }
        }
    }


-    StatusToolBar {
+    StatusChatToolBar {
        notificationCount: 1
+        toolbarComponent: chatInfoButton3
        width: 518

-        headerContent: StatusChatInfoButton {
-            width: Math.min(implicitWidth, parent.width)
-            title: "Group chat"
-            subTitle: "Group chat subtitle"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.GroupChat
-            pinnedMessagesCount: 1
+        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
+             }
        }
    }

-    StatusToolBar {
-        width: 518
-
-        headerContent: StatusChatInfoButton {
-            title: "Community chat"
-            subTitle: "Some very long description text to see how the whole item wraps or ellides"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.CommunityChat
-            pinnedMessagesCount: 3
-        }
-    }
-
-    StatusToolBar {
-        headerContent: StatusChatInfoButton {
-            title: "Very long chat name"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.CommunityChat
-            pinnedMessagesCount: 1234567891
-        }
-    }
-
-    StatusToolBar {
+    StatusChatToolBar {
        notificationCount: 1
+        toolbarComponent: tagSelector
        width: 518

-        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: ""
+        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")
            }
-            toLabelText: qsTr("To: ")
-            warningText: qsTr("USER LIMIT REACHED")
        }
    }

@@ -224,7 +223,9 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -307,7 +308,9 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -395,7 +398,9 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -488,11 +493,16 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
            }
        }
+
+
    }
 }
+
@@ -1,6 +1,4 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQml.Models 2.14
 import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -8,8 +6,10 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Utils 0.1

-ColumnLayout {
-    spacing: 5
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5

    StatusNavigationListItem {
        title: "Menu Item"
@@ -17,18 +17,18 @@ ColumnLayout {

    StatusNavigationListItem {
        title: "Menu Item"
-        asset.name: "info"
+        icon.name: "info"
    }

    StatusNavigationListItem {
        title: "Menu Item"
-        asset.name: "info"
+        icon.name: "info"
        badge.value: 1
    }
    StatusNavigationListItem {
        title: "Menu Item (selected) with very long text"
        selected: true
-        asset.name: "info"
+        icon.name: "info"
        badge.value: 1
    }

@@ -55,59 +55,6 @@ ColumnLayout {
        opened: true
    }

-    StatusChatListCategoryItem {
-        id: categoryItemInteractive
-        title: "Chat category interactive"
-        showActionButtons: true
-        onAddButtonClicked: testEventsList.eventTriggered("Add button clicked")
-        onMenuButtonClicked: testEventsList.eventTriggered("Menu button clicked")
-        onToggleButtonClicked: {
-            opened = !opened
-            testEventsList.eventTriggered("Toggle button clicked")
-        }
-        onTitleClicked: {
-            testEventsList.eventTriggered("Title clicked")
-        }
-        onClicked: {
-            opened = !opened
-            testEventsList.eventTriggered("Item clicked", itemId)
-        }
-    }
-
-    ListView {
-        id: testEventsList
-
-        Layout.fillWidth: true
-        Layout.preferredHeight: categoryItemInteractive.opened ? 20 * count : 0
-
-        clip: true
-
-        function eventTriggered(message) {
-            let obj = eventDelegateComponent.createObject()
-            obj.text = message
-            model.insert(0, obj)
-        }
-
-        Component {
-            id: eventDelegateComponent
-
-            ItemDelegate {
-                implicitHeight: 20
-
-                property int index: ObjectModel.index
-
-                Timer {
-                    interval: 5000; running: true
-                    onTriggered: testObjectModel.remove(index)
-                }
-            }
-        }
-
-        model: ObjectModel {
-            id: testObjectModel
-        }
-    }
-
    StatusChatListItem {
        name: "group-chat"
        type: StatusChatListItem.Type.GroupChat
@@ -121,20 +68,18 @@ ColumnLayout {
    StatusChatListItem {
        name: "community-channel-emoji"
        type: StatusChatListItem.Type.CommunityChat
-        asset.emoji: "😁"
+        icon.emoji: "😁"
    }

    StatusChatListItem {
        name: "community-channel-with-image"
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        type: StatusChatListItem.Type.CommunityChat
    }

    StatusChatListItem {
        name: "Weird Crazy Otter"
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        type: StatusChatListItem.Type.OneToOneChat
    }

@@ -219,7 +164,7 @@ ColumnLayout {
        title: "Title"
        subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
        tertiaryTitle: "Tertiary title"
-        asset.name: "info"
+        icon.name: "info"

        statusListItemTitle.font.pixelSize: 17
        statusListItemTitle.font.weight: Font.Bold
@@ -228,29 +173,27 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
@@ -260,35 +203,35 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusSwitch {}]
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusRadioButton {}]
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusCheckBox {}]
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [
            StatusButton {
@@ -301,7 +244,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [StatusSwitch {}]
    }
@@ -309,7 +252,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [
          StatusRadioButton {}
@@ -319,7 +262,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [StatusCheckBox {}]
    }
@@ -327,7 +270,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [
            StatusBadge {
@@ -344,14 +287,14 @@ ColumnLayout {

    StatusListItem {
        title: "Title"
-        asset.name: "info"
+        icon.name: "info"
        type: StatusListItem.Type.Secondary
    }

    StatusListItem {
        title: "Title"
-        asset.isLetterIdenticon: true
-        asset.color: "orange"
+        icon.isLetterIdenticon: true
+        icon.color: "orange"
    }

    StatusListItem {
@@ -361,19 +304,17 @@ ColumnLayout {

    StatusListItem {
        title: "Title"
-        asset.name: "delete"
+        icon.name: "delete"
        type: StatusListItem.Type.Danger
    }

    StatusListItem {
        title: "List Item with Badge"
        subTitle: "Subtitle"
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
-        badge.asset.isImage: true
-        badge.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        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.primaryText: "CryptoKitties"
        badge.secondaryText: "#test"
    }
@@ -381,57 +322,36 @@ ColumnLayout {
    StatusListItem {
        title: "List Item with Badge 2"
        subTitle: "Subtitle"
-        asset.isLetterIdenticon: true
+        icon.isLetterIdenticon: true
        badge.primaryText: "CryptoKitties"
        badge.secondaryText: "#test"
-        badge.asset.color: "orange"
-        badge.asset.isLetterIdenticon: true
+        badge.icon.color: "orange"
+        badge.icon.isLetterIdenticon: true
    }

    StatusListItem {
        title: "List Item with Tags"
-        asset.isLetterIdenticon: true
+        icon.isLetterIdenticon: true
        bottomModel: 3
        bottomDelegate: StatusListItemTag {
            title: "tag"
-            asset.isLetterIdenticon: true
+            icon.isLetterIdenticon: true
        }
    }

    StatusListItem {
        title: "List Item with Inline Tags"
-        asset.isLetterIdenticon: true
-        tagsModel: ListModel{
-            ListElement {
-                name: "helloworld.eth"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account1"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account2"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account3"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account4"
-                emoji: "😁"
-            }
-        }
+        icon.isLetterIdenticon: true
+        tagsModel : 2
        tagsDelegate: StatusListItemTag {
            color: "blue"
            height: 24
            radius: 6
            closeButtonVisible: false
-            asset.emoji: model.emoji
-            asset.emojiSize: Emoji.size.verySmall
-            asset.isLetterIdenticon: true
-            title: model.name
+            icon.emoji: "😁"
+            icon.emojiSize: Emoji.size.verySmall
+            icon.isLetterIdenticon: true
+            title: "helloworld.eth"
            titleText.font.pixelSize: 12
            titleText.color: Theme.palette.indirectColor1
        }
@@ -440,10 +360,10 @@ ColumnLayout {
    StatusListItem {
        title: "List Item with Emoji"
        subTitle: "Emoji"
-        asset.emoji: "😁"
-        asset.color: "yellow"
-        asset.letterSize: 14
-        asset.isLetterIdenticon: true
+        icon.emoji: "😁"
+        icon.color: "yellow"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
    }

    StatusDescriptionListItem {
@@ -462,7 +382,7 @@ ColumnLayout {
        title: "Title"
        subTitle: "Subtitle"
        tooltip.text: "Tooltip"
-        asset.name: "info"
+        icon.name: "info"
        iconButton.onClicked: tooltip.visible = !tooltip.visible
    }

@@ -477,10 +397,9 @@ ColumnLayout {
        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
        isVerified: true
        isContact: true
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
+        image.isIdenticon: true
        status: 1 // FIXME: use enum
        ringSettings.ringSpecModel:
            ListModel {
@@ -498,27 +417,16 @@ ColumnLayout {
    StatusMemberListItem {
        nickName: "carmen.eth"
        isUntrustworthy: true
-        asset.isLetterIdenticon: true
    }

    StatusMemberListItem {
        nickName: "very-long-annoying-nickname.eth"
        isUntrustworthy: true
-        asset.isLetterIdenticon: true
-    }
-
-    StatusMemberListItem {
-        nickName: "untrusted-admin.eth"
-        asset.isLetterIdenticon: true
-        isUntrustworthy: true
-        isAdmin: true
-        isContact: true
    }

    StatusMemberListItem {
        nickName: "This girl I know from work"
        userName: "annabelle"
-        asset.isLetterIdenticon: true
        status: 1 // FIXME: use enum
    }

@@ -527,91 +435,14 @@ ColumnLayout {
        userName: "annabelle"
        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
        isContact: true
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
+        image.isIdenticon: true
    }

    StatusMemberListItem {
        nickName: "admin.guy"
-        userName: "adguy"
        isAdmin: true
-        asset.isLetterIdenticon: true
        isUntrustworthy: true
-        Component.onCompleted: {
-            print(asset.name, asset.isImage, asset.isLetterIdenticon)
-        }
-    }
-
-    StatusBaseText {
-        Layout.fillWidth: true
-        Layout.topMargin: 16
-        text: "Loading features:"
-        font.pixelSize: 17
-    }
-
-    StatusListItem {
-        title: "Nokia 3310"
-        subTitle: "Incoming device"
-        label: "loading: true"
-        asset.width: 40
-        asset.height: 40
-        asset.emoji: "😁"
-        asset.color: "hotpink"
-        asset.letterSize: 14
-        asset.isLetterIdenticon: true
-        loading: true
-    }
-
-    StatusListItem {
-        title: "Nokia 3310"
-        subTitle: "Device"
-        label: "loadingFailed: true"
-        asset.width: 40
-        asset.height: 40
-        asset.emoji: "😁"
-        asset.color: "hotpink"
-        asset.letterSize: 14
-        asset.isLetterIdenticon: true
-        loadingFailed: true
-    }
-
-    StatusListItem {
-        implicitWidth: 600
-        title: "List Item with Tags"
-        subTitle: "03:32"
-        asset.isLetterIdenticon: true
-        inlineTagModel: 6
-        inlineTagDelegate: StatusListItemTag {
-            height: 24
-            title: "tag"
-            asset.isLetterIdenticon: true
-        }
-        components: [
-            ColumnLayout {
-                Row {
-                    Layout.alignment: Qt.AlignRight
-                    spacing: 4
-                    StatusIcon {
-                        color:  Theme.palette.successColor1
-                        icon: "arrow-up"
-                        rotation: 135
-                        height: 18
-                    }
-                    StatusBaseText {
-                        text: "0.0000015 ETH"
-                        font.pixelSize: 15
-                        color: Theme.palette.directColor1
-                    }
-                }
-                StatusBaseText {
-                    Layout.alignment: Qt.AlignRight
-                    text: "1201.10 USD"
-                    font.pixelSize: 15
-                    color: Theme.palette.baseColor1
-                }
-            }
-        ]
    }
 }
@@ -22,7 +22,7 @@ ColumnLayout {
        }

        StatusRoundedImage {
-            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        }

        StatusBadge {}
@@ -40,7 +40,7 @@ ColumnLayout {
        }

        StatusRoundIcon {
-            asset.name: "info"
+            icon.name: "info"
        }
    }

@@ -57,8 +57,5 @@ ColumnLayout {
            }
        }
    }
-
-    StatusDatePicker {
-        label: "Select date"
-    }
 }
+
@@ -4,8 +4,6 @@ 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
@@ -85,12 +83,6 @@ Column {
        onClicked: advancedHeaderFooterModal.open()
    }

-
-    StatusButton {
-        text: "Modal with Floating header Buttons"
-        onClicked: floatingHeaderModal.open()
-    }
-
    StatusModal {
        id: simpleModal
        anchors.centerIn: parent
@@ -109,8 +101,7 @@ Column {
        anchors.centerIn: parent
        header.title: "Some Title"
        header.subTitle: "Subtitle"
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    }

    StatusModal {
@@ -118,10 +109,12 @@ Column {
        anchors.centerIn: parent
        header.title: "Some Title"
        header.subTitle: "Subtitle"
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        leftButtons: [
-            StatusBackButton { }
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
        ]
        rightButtons: [
            StatusButton {
@@ -138,8 +131,7 @@ Column {
        anchors.centerIn: parent
        header.title: "Some Title"
        header.subTitle: "Subtitle"
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"

        headerActionButton: StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
@@ -152,7 +144,10 @@ Column {
        }

        leftButtons: [
-            StatusBackButton { }
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
        ]
        rightButtons: [
            StatusButton {
@@ -167,8 +162,7 @@ Column {
    StatusModal {
        id: modalExample
        anchors.centerIn: parent
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        header.title: "Header"
        header.subTitle: "SubTitle"
        rightButtons: [
@@ -181,7 +175,10 @@ Column {
        ]

        leftButtons: [
-            StatusBackButton { }
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
        ]

        contentItem: StatusBaseText {
@@ -231,8 +228,8 @@ Column {
        anchors.centerIn: parent
        header.title: "Header"
        header.subTitle: "SubTitle"
-        header.asset.isLetterIdenticon: true
-        header.asset.bgColor: "red"
+        header.icon.isLetterIdenticon: true
+        header.icon.background.color: "red"

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -256,9 +253,9 @@ Column {
        anchors.centerIn: parent
        header.title: "Header"
        header.subTitle: "SubTitle"
-        header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        header.asset.imgIsIdenticon: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -283,9 +280,9 @@ Column {
        header.title: "Header"
        header.subTitle: "SubTitle"
        header.headerImageEditable: true
-        header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        header.asset.imgIsIdenticon: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -310,9 +307,9 @@ Column {
        header.title: "Some super long text here that exceeds the available space"
        header.subTitle: "Some super long text here that exceeds the available space"
        header.subTitleElide: Text.ElideMiddle
-        header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        header.asset.imgIsIdenticon: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -344,7 +341,7 @@ Column {
                    sourceComponent: popupMenu.delegate
                    onLoaded: {
                        item.action.text = model.name
-                        item.action.assetSettings.name = model.iconName
+                        item.action.iconSettings.name = model.iconName
                    }
                }
            }
@@ -397,58 +394,10 @@ Column {
        }
    }

-    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
-                    leftPadding: 4
-                    text: name
-                    asset.emoji: !!emoji ? emoji: ""
-                    asset.emojiSize: Emoji.size.middle
-                    asset.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"; emoji:  "🥑"}
+        ListElement{name: "Account 1"; iconName: "filled-account"}
        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 {
@@ -14,10 +14,9 @@ ListView {
    anchors.fill: parent
    anchors.margins: 15
    clip: true
-
    delegate: StatusMessage {
        id: delegate
-        width: ListView.view.width
+        width: parent.width

        audioMessageInfoText: "Audio Message"
        cancelButtonText: "Cancel"
@@ -27,69 +26,44 @@ ListView {
        resendText: "Resend"
        pinnedMsgInfoText: "Pinned by"

-        timestamp: model.timestamp
-        isAReply: model.isReply
-        hasMention: model.hasMention
-        isPinned: model.isPinned
-        pinnedBy: model.pinnedBy
-        hasExpired: model.hasExpired
-        reactionsModel: model.reactions || []
-
        messageDetails: StatusMessageDetails {
            contentType: model.contentType
            messageContent: model.messageContent
            amISender: model.amIsender
-            sender.id: model.senderId
-            sender.displayName: model.senderDisplayName
-            sender.secondaryName: model.senderOptionalName
-            sender.isContact: model.isContact
-            sender.trustIndicator: model.trustIndicator
-            sender.profileImage: StatusProfileImageSettings {
+            displayName: model.userName
+            secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
+            chatID: model.chatKey
+            profileImage: StatusImageSettings {
                width: 40
                height: 40
-                pubkey: model.senderId
-                name: model.profileImage || ""
-                colorId: 1
-                colorHash: ListModel {
-                    ListElement { colorId: 13; segmentLength: 5 }
-                    ListElement { colorId: 31; segmentLength: 5 }
-                    ListElement { colorId: 10; segmentLength: 1 }
-                    ListElement { colorId: 2; segmentLength: 5 }
-                    ListElement { colorId: 26; segmentLength: 2 }
-                    ListElement { colorId: 19; segmentLength: 4 }
-                    ListElement { colorId: 28; segmentLength: 3 }
-                }
+                source: model.profileImage
+                isIdenticon: model.isIdenticon
            }
-
            messageText: model.message
+            hasMention: model.hasMention
+            isMutualContact: model.isMutualContact
+            trustIndicator: model.trustIndicator
+            isPinned: model.isPinned
+            pinnedBy: model.pinnedBy
+            hasExpired: model.hasExpired
        }
-
+        timestamp.text: "10:00 am"
+        timestamp.tooltip.text: "10:01 am"
+        // reply related data
+        isAReply: model.isReply
        replyDetails: StatusMessageDetails {
-            amISender:  model.isReply && model.replyAmISender
-            sender.id: model.replySenderId || ""
-            sender.displayName:  model.isReply ? model.replySenderName: ""
-            sender.secondaryName: model.isReply ? model.replySenderEnsName : ""
-            sender.profileImage: StatusProfileImageSettings {
+            amISender:  model.isReply ? model.replyAmISender : ""
+            displayName:  model.isReply ? model.replySenderName: ""
+            profileImage: StatusImageSettings {
                width: 20
                height: 20
-                name: model.isReply ? model.replyProfileImage: ""
-                pubkey: model.replySenderId
-                colorId: 1
-                colorHash: ListModel {
-                    ListElement { colorId: 13; segmentLength: 5 }
-                    ListElement { colorId: 31; segmentLength: 5 }
-                    ListElement { colorId: 10; segmentLength: 1 }
-                    ListElement { colorId: 2; segmentLength: 5 }
-                    ListElement { colorId: 26; segmentLength: 2 }
-                    ListElement { colorId: 19; segmentLength: 4 }
-                    ListElement { colorId: 28; segmentLength: 3 }
-                }
+                source:  model.isReply ? model.replyProfileImage: ""
+                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
            }
            messageText:  model.isReply ? model.replyMessageText: ""
            contentType: model.replyContentType
            messageContent: model.replyMessageContent
        }
-
        quickActions: [
            StatusFlatRoundButton {
                id: emojiBtn
@@ -20,7 +20,6 @@ Page {
        height: tagSelector.height
        anchors.right: parent.right
        anchors.rightMargin: 8
-        spacing: 16

        StatusTagSelector {
            id: tagSelector
@@ -74,42 +73,27 @@ Page {
        }

        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 {
-            width: Math.min(553, parent.width - 32)
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenterOffset: -(headerRow.height/2)
+            visible: (contactsModel.count === 0)
+            anchors.centerIn: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
-            visible: contactsModel.count === 0
-            wrapMode: Text.WordWrap
            font.pixelSize: 15
            color: Theme.palette.baseColor1
-            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.")
+            text: qsTr("You can only send direct messages to your Contacts. \n\n
+Send a contact request to the person you would like to chat with, you will be\n able to
+chat with them once they have accepted your contact request.")
            Component.onCompleted: {
                if (visible) {
                    tagSelector.enabled = false;
@@ -13,8 +13,7 @@ StatusModal {

    header.title: "Cryptokitties"
    header.subTitle: "Public Community"
-    header.asset.isImage: true
-    header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"

    contentItem: Column {
        width: root.width
@@ -44,7 +43,7 @@ StatusModal {
            title: "Share community"
            subTitle: "https://join.status.im/u/0x04...45f19"
            tooltip.text: "Copy to clipboard"
-            asset.name: "copy"
+            icon.name: "copy"
            iconButton.onClicked: tooltip.visible = !tooltip.visible
            width: parent.width
        }
@@ -58,7 +57,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Members"
-            asset.name: "group-chat"
+            icon.name: "group-chat"
            label: "184"
            components: [
                StatusIcon {
@@ -73,7 +72,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Notifications"
-            asset.name: "notification"
+            icon.name: "notification"
            components: [
                StatusSwitch {}
            ]
@@ -88,7 +87,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Edit community"
-            asset.name: "edit"
+            icon.name: "edit"
            type: StatusListItem.Type.Secondary
        }

@@ -96,7 +95,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Transfer ownership"
-            asset.name: "exchange"
+            icon.name: "exchange"
            type: StatusListItem.Type.Secondary
        }

@@ -104,7 +103,8 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Leave community"
-            asset.name: "arrow-left"
+            icon.name: "arrow-right"
+            icon.rotation: 180
            type: StatusListItem.Type.Secondary
        }
    }
@@ -10,195 +10,66 @@ import StatusQ.Core.Theme 0.1

 import "data" 1.0

-StatusSectionLayout {
+StatusAppThreePanelLayout {
    id: root
    property bool createChat: false

-    notificationCount: 1
-    onNotificationButtonClicked: { notificationCount = 0; }
-    showHeader: !root.createChat
-
-    headerContent: RowLayout {
-        id: chatHeader
-
-        signal chatInfoButtonClicked()
-        signal menuButtonClicked()
-        signal membersButtonClicked()
-        signal searchButtonClicked()
-
-        StatusChatInfoButton {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            Layout.alignment: Qt.AlignLeft
-            Layout.leftMargin: padding
-            title: "Amazing Funny Squirrel"
-            subTitle: "Contact"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.OneToOneChat
-            pinnedMessagesCount: 1
-        }
-
-        RowLayout {
-            id: actionButtons
-            Layout.alignment: Qt.AlignRight
-            Layout.rightMargin: padding
-            spacing: 8
-
-            StatusFlatRoundButton {
-                id: menuButton
-                objectName: "chatToolbarMoreOptionsButton"
-                width: 32
-                height: 32
-                icon.name: "more"
-                type: StatusFlatRoundButton.Type.Secondary
-
-                // initializing the tooltip
-                tooltip.visible: !!tooltip.text && menuButton.hovered && !contextMenu.open
-                tooltip.text: qsTr("More")
-                tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
-
-                property bool showMoreMenu: false
-                onClicked: {
-                    menuButton.highlighted = true
-
-                    let originalOpenHandler = contextMenu.openHandler
-                    let originalCloseHandler = contextMenu.closeHandler
-
-                    contextMenu.openHandler = function () {
-                        if (!!originalOpenHandler) {
-                            originalOpenHandler()
-                        }
-                    }
-
-                    contextMenu.closeHandler = function () {
-                        menuButton.highlighted = false
-                        if (!!originalCloseHandler) {
-                            originalCloseHandler()
-                        }
-                    }
-
-                    contextMenu.openHandler = originalOpenHandler
-                    contextMenu.popup(-contextMenu.width + menuButton.width, menuButton.height + 4)
-                }
-                StatusPopupMenu {
-                    id: contextMenu
-
-                    StatusMenuItem {
-                        text: "Mute Chat"
-                        icon.name: "notification"
-                    }
-                    StatusMenuItem {
-                        text: "Mark as Read"
-                        icon.name: "checkmark-circle"
-                    }
-                    StatusMenuItem {
-                        text: "Clear History"
-                        icon.name: "close-circle"
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: "Leave Chat"
-                        icon.name: "arrow-left"
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-            }
-
-            Rectangle {
-                width: 1
-                height: 24
-                color: Theme.palette.directColor7
-                Layout.alignment: Qt.AlignVCenter
-                visible: (notificationButton.visible && menuButton.visible)
-            }
-        }
-    }
-
    leftPanel: Item {
        anchors.fill: parent
-        anchors.margins: 16
+
+        StatusNavigationPanelHeadline {
+            id: headline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Chat"
+        }
+
        RowLayout {
            id: searchInputWrapper
-            width: parent.width
+            width: 288
+            height: searchInput.height
+            anchors.top: headline.bottom
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter

-            StatusNavigationPanelHeadline {
-                id: headline
-                Layout.alignment: Qt.AlignVCenter
-                text: "Chat"
-            }
-
-            Item {
+            StatusBaseInput {
+                id: searchInput
                Layout.fillWidth: true
-            }
-
-
-            StatusRoundButton {
                Layout.alignment: Qt.AlignVCenter
+                implicitHeight: 36
+                topPadding: 8
+                bottomPadding: 8
+                placeholderText: "Search"
+                icon.name: "search"
+            }
+
+            StatusIconTabButton {
                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
-                }
            }
        }

-        StatusInput {
-            id: searchInput
-            anchors.top: searchInputWrapper.bottom
-            anchors.topMargin: 16
-            width: parent.width
-            maximumHeight: 36
-            topPadding: 8
-            bottomPadding: 8
-            placeholderText: "Search"
-            input.asset.name: "search"
-        }
-
        Column {
-            width: parent.width
-            anchors.top: searchInput.bottom
+            anchors.top: searchInputWrapper.bottom
            anchors.topMargin: 16
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 8

            StatusContactRequestsIndicatorListItem {
-                width: parent.width
                anchors.horizontalCenter: parent.horizontalCenter
                title: "Contact requests"
                requestsCount: 3
-                onClicked: demoContactRequestsModal.open()
+                sensor.onClicked: demoContactRequestsModal.open()
            }

            StatusChatList {
-                width: parent.width
                model: Models.demoChatListItems
                highlightItem: !root.createChat
                onChatItemUnmuted: {
@@ -269,4 +140,58 @@ StatusSectionLayout {
            }
        }
    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+
+        StatusChatToolBar {
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+            searchButton.visible: false
+            membersButton.visible: false
+            notificationCount: 1
+
+            onNotificationButtonClicked: notificationCount = 0
+
+            popupMenu: StatusPopupMenu {
+                id: contextMenu
+
+                StatusMenuItem {
+                    text: "Mute Chat"
+                    icon.name: "notification"
+                }
+                StatusMenuItem {
+                    text: "Mark as Read"
+                    icon.name: "checkmark-circle"
+                }
+                StatusMenuItem {
+                    text: "Clear History"
+                    icon.name: "close-circle"
+                }
+
+                StatusMenuSeparator {}
+
+                StatusMenuItem {
+                    text: "Leave Chat"
+                    icon.name: "arrow-right"
+                    icon.width: 14
+                    iconRotation: 180
+                    type: StatusMenuItem.Type.Danger
+                }
+            }
+
+            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
+                }
+            }
+        }
+    }
 }
@@ -5,12 +5,12 @@ import QtQuick.Layouts 1.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Layout 0.1
 import StatusQ.Components 0.1

 import "../demoapp/data" 1.0

-StatusSectionLayout {
+
+ScrollView {
    id: root

    QtObject {
@@ -31,127 +31,124 @@ StatusSectionLayout {
            console.info("Clicked community ID: " + communityId)
        }
    }
-    centerPanel: Item {
-        anchors.fill: parent
-        clip: true
-        StatusScrollView {
-            anchors.fill: parent
-            contentHeight: column.height + d.layoutVMargin
-            contentWidth: column.width + d.layoutHMargin

-            ColumnLayout {
-                id: column
-                spacing: 18
+    contentHeight: column.height + d.layoutVMargin
+    contentWidth: column.width + d.layoutHMargin
+    clip: true

-                StatusBaseText {
-                    text: qsTr("Find community")
-                    font.weight: Font.Bold
-                    font.pixelSize: d.titlePixelSize
-                    color: Theme.palette.directColor1
+    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
                }
+            }
+        }

-                // 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
+        StatusBaseText {
+            Layout.leftMargin: d.layoutHMargin
+            Layout.topMargin: 20
+            text: qsTr("Featured")
+            font.weight: Font.Bold
+            font.pixelSize: d.subtitlePixelSize
+            color: Theme.palette.directColor1
+        }

-                    Repeater {
-                        model: d.tagsModel
-                        delegate: StatusListItemTag {
-                            border.color: Theme.palette.baseColor2
-                            color: "transparent"
-                            height: 32
-                            radius: 36
-                            closeButtonVisible: false
-                            asset.emoji: model.emoji
-                            asset.height: 32
-                            asset.width: asset.height
-                            asset.color: "transparent"
-                            asset.isLetterIdenticon: true
-                            title: model.name
-                            titleText.font.pixelSize: 15
-                            titleText.color: Theme.palette.primaryColor1
-                        }
+        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("Featured")
-                    font.weight: Font.Bold
-                    font.pixelSize: d.subtitlePixelSize
-                    color: Theme.palette.directColor1
-                }
+        StatusBaseText {
+            Layout.leftMargin: d.layoutHMargin
+            Layout.topMargin: 20
+            text: qsTr("Popular")
+            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
+        GridLayout {
+            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: "👻"}
-                            }
+            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) }
-                        }
-                    }
-                }
-
-                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) }
-                        }
-                    }
+                    onClicked: { d.navigateToCommunity(communityId) }
                }
            }
        }
@@ -1,6 +1,5 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.12

 import StatusQ.Core 0.1
 import StatusQ.Popups 0.1
@@ -11,7 +10,7 @@ import StatusQ.Core.Theme 0.1

 import "data" 1.0

-StatusSectionLayout {
+StatusAppThreePanelLayout {
    id: root

    property string communityDetailModalTitle: ""
@@ -23,101 +22,6 @@ StatusSectionLayout {
        color: SplitHandle.pressed ? Theme.palette.baseColor2
                                   : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
    }
-
-    headerContent: RowLayout {
-        id: statusToolBar
-
-        StatusFlatRoundButton {
-            id: searchButton
-            Layout.alignment: Qt.AlignLeft
-            Layout.leftMargin: padding
-            icon.name: "search"
-            type: StatusFlatRoundButton.Type.Secondary
-            // initializing the tooltip
-            tooltip.text: qsTr("Search")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-            onClicked: {
-                searchButton.highlighted = !searchButton.highlighted;
-                searchPopup.setSearchSelection(communityDetailModalTitle,
-                                               "",
-                                               communityDetailModalImage);
-                searchPopup.open();
-            }
-        }
-
-        StatusChatInfoButton {
-            Layout.preferredWidth: Math.min(implicitWidth, parent.width)
-            Layout.fillHeight: true
-            title: "general"
-            subTitle: "Community Chat"
-            asset.color: Theme.palette.miscColor6
-            type: StatusChatInfoButton.Type.CommunityChat
-        }
-
-        Item {
-            Layout.fillWidth: true
-        }
-
-        StatusFlatRoundButton {
-            id: membersButton
-            icon.name: "group-chat"
-            type: StatusFlatRoundButton.Type.Secondary
-            // initializing the tooltip
-            tooltip.text: qsTr("Members")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-            onClicked: {
-                membersButton.highlighted = !membersButton.highlighted;
-                root.showRightPanel = !root.showRightPanel;
-            }
-        }
-
-        StatusSearchPopup {
-            id: searchPopup
-            searchOptionsPopupMenu: searchPopupMenu
-            onAboutToHide: {
-                if (searchPopupMenu.visible) {
-                    searchPopupMenu.close();
-                }
-                //clear menu
-                for (var i = 2; i < searchPopupMenu.count; i++) {
-                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
-                }
-            }
-            onClosed: {
-                statusToolBar.searchButton.highlighted = false
-                searchPopupMenu.dismiss();
-            }
-            onSearchTextChanged: {
-                if (searchPopup.searchText !== "") {
-                    searchPopup.loading = true;
-                    searchModelSimTimer.start();
-                } else {
-                    searchPopup.searchResults = [];
-                    searchModelSimTimer.stop();
-                }
-            }
-            Timer {
-                id: searchModelSimTimer
-                interval: 500
-                onTriggered: {
-                    if (searchPopup.searchText.startsWith("c")) {
-                        searchPopup.searchResults = Models.searchResultsA;
-                    } else {
-                        searchPopup.searchResults = Models.searchResultsB;
-                    }
-                    searchPopup.loading = false;
-                }
-            }
-        }
-        StatusSearchLocationMenu {
-            id: searchPopupMenu
-            searchPopup: searchPopup
-            locationModel: Models.optionsModel
-        }
-    }
-
    leftPanel: Item {
        id: leftPanel

@@ -129,9 +33,8 @@ StatusSectionLayout {

            chatInfoButton.title: "CryptoKitties"
            chatInfoButton.subTitle: "128 Members"
-            chatInfoButton.asset.isImage: true
-            chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
-            chatInfoButton.asset.color: Theme.palette.miscColor6
+            chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
            chatInfoButton.onClicked:  { chatInfoButtonClicked(); }

            popupMenu: StatusPopupMenu {
@@ -156,7 +59,7 @@ StatusSectionLayout {
            }
        }

-        StatusScrollView {
+        ScrollView {
            id: scrollView

            anchors.top: statusChatInfoToolBar.bottom
@@ -261,11 +164,79 @@ StatusSectionLayout {
    }

    centerPanel: Item {
-        anchors.fill: parent
-        StatusBaseText {
-            anchors.centerIn: parent
-            font.pixelSize: 15
-            text: qsTr("Community content here")
+        StatusChatToolBar {
+            id: statusChatToolBar
+
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+
+            onSearchButtonClicked: {
+                searchButton.highlighted = !searchButton.highlighted;
+                searchPopup.setSearchSelection(communityDetailModalTitle,
+                                               "",
+                                               communityDetailModalImage);
+                searchPopup.open();
+            }
+            membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+            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 {
+            id: searchPopup
+            searchOptionsPopupMenu: searchPopupMenu
+            onAboutToHide: {
+                if (searchPopupMenu.visible) {
+                    searchPopupMenu.close();
+                }
+                //clear menu
+                for (var i = 2; i < searchPopupMenu.count; i++) {
+                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                }
+            }
+            onClosed: {
+                statusChatToolBar.searchButton.highlighted = false
+                searchPopupMenu.dismiss();
+            }
+            onSearchTextChanged: {
+                if (searchPopup.searchText !== "") {
+                    searchPopup.loading = true;
+                    searchModelSimTimer.start();
+                } else {
+                    searchPopup.searchResults = [];
+                    searchModelSimTimer.stop();
+                }
+            }
+            Timer {
+                id: searchModelSimTimer
+                interval: 500
+                onTriggered: {
+                    if (searchPopup.searchText.startsWith("c")) {
+                        searchPopup.searchResults = Models.searchResultsA;
+                    } else {
+                        searchPopup.searchResults = Models.searchResultsB;
+                    }
+                    searchPopup.loading = false;
+                }
+            }
+        }
+        StatusSearchLocationMenu {
+            id: searchPopupMenu
+            searchPopup: searchPopup
+            locationModel: Models.optionsModel
        }
    }

@@ -302,10 +273,8 @@ StatusSectionLayout {
                isVerified: model.isVerified
                isUntrustworthy: model.isUntrustworthy
                isContact: model.isContact
-                asset.name: model.icon
-                asset.isImage: (asset.name !== "")
-                asset.isLetterIdenticon: (asset.name === "")
-                asset.imgIsIdenticon: false
+                image.source: model.icon
+                image.isIdenticon: false
                status: model.onlineStatus
            }
        }
@@ -3,12 +3,11 @@ 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

-StatusSectionLayout {
+StatusAppTwoPanelLayout {
    id: root

    leftPanel: Item {
@@ -22,7 +21,7 @@ StatusSectionLayout {
            text: "Profile"
        }

-        StatusScrollView {
+        ScrollView {
            anchors.top: profileHeadline.bottom
            anchors.topMargin: 16
            anchors.bottom: parent.bottom
@@ -41,7 +40,7 @@ StatusSectionLayout {
                    model: Models.demoProfileGeneralMenuItems
                    delegate: StatusNavigationListItem {
                        title: model.title
-                        asset.name: model.icon
+                        icon.name: model.icon
                    }
                }

@@ -51,7 +50,7 @@ StatusSectionLayout {
                    model: Models.demoProfileSettingsMenuItems
                    delegate: StatusNavigationListItem {
                        title: model.title
-                        asset.name: model.icon
+                        icon.name: model.icon
                    }
                }

@@ -65,7 +64,7 @@ StatusSectionLayout {
                    model: Models.demoProfileOtherMenuItems
                    delegate: StatusNavigationListItem {
                        title: model.title
-                        asset.name: model.icon
+                        icon.name: model.icon
                    }
                }
            }
@@ -1,155 +0,0 @@
-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.asset.name: "search"
-            placeholderText: "nickname.."
-        }
-
-        StatusIconTabButton {
-            id: contactBtn
-
-            icon.name: "tiny/tiny-contact"
-            identicon.asset.color: Theme.palette.primaryColor1
-            onClicked: highlighted = !highlighted
-        }
-
-        StatusIconTabButton {
-            id: verifiedBtn
-
-            icon.name: "tiny/tiny-checkmark"
-            identicon.asset.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
-            asset.isLetterIdenticon: true
-        }
-    }
-
-    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
-            }
-        }
-    }
-}
@@ -0,0 +1,6 @@
+#include "handler.h"
+
+Handler::Handler(QObject *parent) : QObject(parent)
+{
+
+}
@@ -0,0 +1,16 @@
+#ifndef HANDLER_H
+#define HANDLER_H
+
+#include <QObject>
+
+class Handler : public QObject
+{
+    Q_OBJECT
+public:
+    explicit Handler(QObject *parent = nullptr);
+
+signals:
+    void restartQml();
+};
+
+#endif // HANDLER_H
@@ -4,8 +4,6 @@

 #include "sandboxapp.h"

-#include <qqmlsortfilterproxymodeltypes.h>
-
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
@@ -14,10 +12,6 @@ int main(int argc, char *argv[])

    SandboxApp app(argc, argv);

-    qqsfpm::registerTypes();
-
-    qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
-
    app.setOrganizationName("Status");
    app.setOrganizationDomain("status.im");
    app.setApplicationName("Sandbox");
@@ -4,7 +4,6 @@ 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

@@ -15,8 +14,6 @@ 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 {
@@ -47,8 +44,7 @@ StatusWindow {
        readonly property int nodeManagement: 4
        readonly property int profileSettings: 5
        readonly property int apiDocumentation: 100
-        readonly property int examples: 101
-        readonly property int demoApp: 102
+        readonly property int demoApp: 101
    }

    function setActiveItem(sectionId) {
@@ -63,11 +59,11 @@ StatusWindow {
        }
    }

-    StatusMainLayout {
+    StatusAppLayout {
        id: appLayout
        anchors.fill: parent

-        leftPanel: StatusAppNavBar {
+        appNavBar: StatusAppNavBar {
            height: rootWindow.height

            communityTypeRole: "sectionType"
@@ -91,48 +87,41 @@ StatusWindow {
                    if(model.sectionType === appSectionType.apiDocumentation)
                    {
                        stackView.push(libraryDocumentationCmp)
-                    }
-                    else if(model.sectionType === appSectionType.examples)
-                    {
-                        stackView.push(examplesCmp)
+                        rootWindow.setActiveItem(sectionId)
                    }
                    else if(model.sectionType === appSectionType.demoApp)
                    {
                        stackView.push(demoAppCmp)
+                        rootWindow.setActiveItem(model.sectionId)
                    }
-                    rootWindow.setActiveItem(model.sectionId)
                }
            }
        }

-        rightPanel: Item {
+        appView: StackView {
+            id: stackView
            anchors.fill: parent
-            StackView {
-                id: stackView
-                anchors.fill: parent
-                initialItem: libraryDocumentationCmp
-            }
-            ThemeSwitch {
-                anchors.top: parent.top
-                anchors.topMargin: 32
-                anchors.right: parent.right
-                anchors.rightMargin: 32
-                lightThemeEnabled: storeSettings.lightTheme
-                onLightThemeEnabledChanged: {
-                    Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
-                    storeSettings.lightTheme = lightThemeEnabled
-                }
-            }
+            initialItem: libraryDocumentationCmp
        }

+        ThemeSwitch {
+            anchors.top: parent.top
+            anchors.topMargin: 32
+            anchors.right: parent.right
+            anchors.rightMargin: 32
+            lightThemeEnabled: storeSettings.lightTheme
+            onLightThemeEnabledChanged: {
+                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
+                storeSettings.lightTheme = lightThemeEnabled
+            }
+        }
    }

    Component {
        id: libraryDocumentationCmp

-        StatusSectionLayout {
+        StatusAppTwoPanelLayout {
            id: mainPageView
-            showHeader: false

            function page(name, fillPage) {
                storeSettings.fillPage = fillPage ? true : false
@@ -143,225 +132,205 @@ StatusWindow {
                storeSettings.fillPage = false
            }

-            leftPanel: StatusScrollView {
+            leftPanel: Item {
                anchors.fill: parent
-                anchors.topMargin: 48
+                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

-                Column {
-                    id: navigation
-                    spacing: 0
+                        StatusListSectionHeadline { text: "StatusQ.Core" }
+                        StatusNavigationListItem {
+                            title: "Icons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
+                        }

-                    StatusListSectionHeadline { text: "StatusQ.Core" }
-                    StatusNavigationListItem {
-                        title: "Icons"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.control(title);
-                    }
+                        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.Layout" }
-                    StatusNavigationListItem {
-                        title: "Layouts"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.control(title.substring(0, title.length - 1));
-                    }
+                        StatusListSectionHeadline { text: "StatusQ.Controls" }
+                        StatusNavigationListItem {
+                            title: "Buttons"
+                            selected: 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: "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);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusListPicker"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusCommunityCard"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Popup" }
+                        StatusNavigationListItem {
+                            title: "StatusPopupMenu"
+                            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: "StatusTextArea"
-                        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: "StatusComboBox"
-                        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);
-                    }
-                    StatusNavigationListItem {
-                        title: "StatusItemSelector"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.page(title, true);
-                    }
-                    StatusNavigationListItem {
-                        title: "StatusChartPanel"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.page(title, true);
-                    }
-                    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);
+                        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);
+                        }
+                        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);
+                        }
                    }
                }
            }

-            centerPanel: Item {
-                id: centerPanel
+            rightPanel: Item {
+                id: rightPanel
                anchors.fill: parent

-                StatusScrollView {
+                ScrollView {
                    visible: !storeSettings.fillPage
                    anchors.fill: parent
                    anchors.topMargin: 64
@@ -371,7 +340,7 @@ StatusWindow {

                    Item {
                        id: pageWrapper
-                        width: centerPanel.width
+                        width: rightPanel.width
                        anchors.top: parent.top
                        height: Math.max(rootWindow.height, viewLoader.height + 128)
                        scale: rootWindow.factor
@@ -426,57 +395,6 @@ StatusWindow {
        }
    }

-    Component {
-        id: examplesCmp
-
-        StatusSectionLayout {
-            id: examplesView
-            showHeader: false
-
-            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)
-                    }
-                }
-            }
-
-            centerPanel: Item {
-                anchors.fill: parent
-                StatusScrollView {
-                    id: examplesCenterPanel
-                    anchors.fill: parent
-                    anchors.margins: 64
-                    anchors.topMargin: anchors.margins + 32
-
-                    Loader {
-                        id: examplesLoader
-                        width: examplesCenterPanel.availableWidth
-                        source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
-                    }
-                }
-            }
-        }
-    }
-
    Component {
        id: demoAppCmp

@@ -571,7 +489,6 @@ StatusWindow {
    Settings {
        id: storeSettings
        property string selected: ""
-        property string selectedExample: ""
        property bool lightTheme: true
        property bool fillPage: false
    }
@@ -8,61 +8,57 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1

+
 Column {
    spacing: 8

    StatusAccountSelector {
-        id: selector1
-        width: 300
-        accounts: accountsModel
-    }
-
-    ListModel {
-        id: accountsModel
-
-        ListElement {
-            name: "Pascal"
-            address: "0x1234567891011"
-            path: ""
-            color: "red"
-            publicKey: ""
-            walletType: "generated"
-            isChat: ""
-            currencyBalance:  "1199.02"
-            assets: []
-        }
-        ListElement {
-            name: "Boris"
-            address: "0x123"
-            path: ""
-            color: "red"
-            publicKey: ""
-            walletType: "generated"
-            isChat: ""
-            currencyBalance:  "42.42"
-            assets: []
-        }
-        ListElement {
-            name: "Alexandra"
-            address: "0x123"
-            path: ""
-            color: "yellow"
-            publicKey: ""
-            walletType: "generated"
-            isChat: ""
-            currencyBalance:  "0"
-            assets: []
-        }
-        ListElement {
-            name: "Khushboo"
-            address: "0x123"
-            path: ""
-            color: "blue"
-            publicKey: ""
-            walletType: "watch" // Will be automatically filtered by StatusAccountSelector
-            isChat: ""
-            currencyBalance:  "0"
-            assets: []
+        id: accountSelector
+        accounts: ListModel {
+            ListElement {
+                name: "Pascal"
+                address: "0x1234567891011"
+                path: ""
+                color: "red"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "1199.02"
+                assets: []
+            }
+            ListElement {
+                name: "Boris"
+                address: "0x123"
+                path: ""
+                color: "red"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
+            ListElement {
+                name: "Alexandra"
+                address: "0x123"
+                path: ""
+                color: "yellow"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
+            ListElement {
+                name: "Khushboo"
+                address: "0x123"
+                path: ""
+                color: "blue"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
        }
    }
 }
@@ -2,97 +2,24 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14

-import StatusQ.Core 0.1
 import StatusQ.Components 0.1

 import Sandbox 0.1

-Item {
-    id: root
+Column {
+    spacing: 8

-    implicitWidth: mainLayout.implicitWidth
-    implicitHeight: mainLayout.implicitHeight
+    StatusAddress {
+        text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+    }

-    GridLayout {
-        id: mainLayout
-
-        columns: 2
-
-        anchors.fill: parent
-
-        columnSpacing: 15
-        rowSpacing: 8
-
-        StatusBaseText { text: "StatusAddress\nsimple" }
+    Item {
+        width: 200
+        height: childrenRect.height
        StatusAddress {
            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
-        }
-
-        StatusBaseText { text: "StatusAddress\nclick-expandable" }
-        StatusAddress {
-            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
-
-            Layout.preferredWidth: 200
-
            expandable: true
-        }
-
-        StatusBaseText { text: `StatusAddressPanel\nfont.pixelSize: 13, copyable, no frame`}
-        StatusAddressPanel {
-            address: "0xDC2c4826f6C56F61C1b9cC6Bb531d0Fe45402fC9"
-
-            font.pixelSize: 13
-            font.weight: Font.Normal
-
-            showFrame: false
-
-            onDoCopy: copyAction.text = address
-        }
-
-        StatusBaseText { text: `StatusAddressPanel\ncompact; width ${simpleAddressPanel.width}px ${simpleAddressPanel.height}px`}
-        StatusAddressPanel {
-            id: simpleAddressPanel
-            address: "0xd8593DEACe2f44dF35dd23fD2BAFC2daeC2ae033"
-            showCopy: false
-            expanded: false
-            onDoCopy: copyAction.text = address
-            expandable: true
-        }
-
-        StatusBaseText { text: "StatusAddressPanel\ncopy-icon, non-expandable" }
-        StatusAddressPanel {
-            address: "0xDd5A0755e99D66a583253372B569231968A6CF7b"
-            onDoCopy: copyAction.text = address
-        }
-
-        StatusBaseText { text: "StatusAddressPanel\ncopy hiden" }
-        StatusAddressPanel {
-            address: "0xd2D44C2A1E78975506e474Ecdc7E4F272D7e9A6c"
-            autHideCopyIcon: true
-            onDoCopy: copyAction.text = address
-            expandable: true
-        }
-        StatusBaseText { text: "StatusAddressPanel\ncopy hiden, non-expandable" }
-        StatusAddressPanel {
-            address: "0xd2a44BA31E78975506e474Ecdc7E4F272D7F3BC5"
-            autHideCopyIcon: true
-            expanded: false
-            onDoCopy: copyAction.text = address
-        }
-
-        Rectangle {
-            color: "lightblue"
-
-            Layout.fillWidth: true
-            Layout.columnSpan: mainLayout.columns
-            Layout.preferredHeight: 2
-        }
-
-        StatusBaseText {
-            text: qsTr("Copy Action: ")
-        }
-        StatusBaseText {
-            id: copyAction
+            width: parent.width
        }
    }
 }
@@ -0,0 +1,40 @@
+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
+            }
+        }
+    }
+}
+
@@ -1,239 +0,0 @@
-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 {
-            Layout.fillWidth: true
-
-            StatusCard {
-                id: card
-                Layout.alignment: Qt.AlignVCenter
-                primaryText: "Mainnet"
-                secondaryText: state === "unavailable" ? "No Gas" : "75"
-                tertiaryText: state === "unpreferred"  ? "UNPREFERRED" : "BALANCE: " + 250
-                cardIconName: "status"
-                advancedInputText: "75"
-                disabledText: "Disabled"
-            }
-
-            StatusComboBox {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.maximumWidth: 200
-                label: "Card State"
-                onCurrentValueChanged: card.state = currentValue
-                model: ListModel {
-                    ListElement {
-                        name: "default"
-                    }
-                    ListElement {
-                        name: "unavailable"
-                    }
-                    ListElement {
-                        name: "error"
-                    }
-                    ListElement {
-                        name: "unpreferred"
-                    }
-                }
-            }
-
-            StatusCheckBox {
-                Layout.alignment: Qt.AlignVCenter
-                text: "advancedMode"
-                font.family: Theme.palette.monoFont.name
-                onClicked: {
-                    card.advancedMode = checked
-                }
-            }
-        }
-
-        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
-        }
-    }
-}
@@ -1,193 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-import Sandbox 0.1
-
-Item {
-
-    QtObject {
-        id: d
-        //dummy data
-        property real stepSize: 1000
-        property real minStep: 12000
-        property real maxStep: 22000
-
-        property var graphTabsModel: [{text: "Price", enabled: true}, {text: "Balance", enabled: false}]
-        property var timeRangeTabsModel: [{text: "1H", enabled: true},
-                {text: "1D", enabled: true},{text: "7D", enabled: true},
-                {text: "1M", enabled: true}, {text: "6M", enabled: true},
-                {text: "1Y", enabled: true}, {text: "ALL", enabled: true}]
-
-        property var simTimer: Timer {
-            running: true
-            interval: 3000
-            repeat: true
-            onTriggered: {
-                d.generateData();
-            }
-        }
-
-        function minutes(minutes = 0) {
-            var newMinute = new Date(new Date().getTime() - (minutes * 60 * 1000)).toString();
-            if (newMinute.slice(10,12) === "00") {
-                var dateToday = new Date(Date.now()).toString();
-                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
-            }
-            return newMinute.slice(10,16);
-        }
-
-        function hour(hours = 0) {
-            var newHour = new Date(new Date().getTime() - (hours * 60 * 60 * 1000)).toString();
-            if (newHour.slice(10,12) === "00") {
-                var dateToday = new Date(Date.now()).toString();
-                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
-            }
-            return newHour.slice(10,16);
-        }
-
-        function day(before = 0) {
-            var newDay = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
-            return newDay.slice(4,7) + " " + newDay.slice(8,10);
-        }
-
-        function month(before = 0) {
-            var newMonth = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
-            return newMonth.slice(4,7) + " '" + newMonth.slice(newMonth.indexOf("G")-3, newMonth.indexOf("G")-1);
-        }
-
-        property var timeRange: [
-            {'1H': [minutes(60), minutes(55), minutes(50), minutes(45), minutes(40), minutes(35), minutes(30), minutes(25), minutes(20), minutes(15), minutes(10), minutes(5), minutes()]},
-            {'1D': [hour(24), hour(23), hour(22), hour(21), hour(20), hour(19), hour(18), hour(17), hour(16), hour(15), hour(14), hour(13),
-                    hour(12), hour(11), hour(10), hour(9), hour(8), hour(7), hour(6), hour(5), hour(4), hour(3), hour(2), hour(1), hour()]},
-            {'7D': [day(6), day(5), day(4), day(3), day(2), day(1), day()]},
-            {'1M': [day(30), day(28), day(26), day(24), day(22), day(20), day(18), day(16), day(14), day(12), day(10), day(8), day(6), day(4), day()]},
-            {'6M': [month(150), month(120), month(90), month(60), month(30), month()]},
-            {'1Y': [month(330), month(300), month(270), month(240), month(210), month(180), month(150), month(120), month(90), month(60), month(30), month()]},
-            {'ALL': ['2016', '2017', '2018', '2019', '2020', '2021', '2022']}
-        ]
-
-        function generateData() {
-            var result = [];
-            for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
-                result[i] = Math.random() * (maxStep - minStep) + minStep;
-            }
-            graphDetail.chart.chartData.datasets[0].data = result;
-            graphDetail.chart.animateToNewData();
-        }
-    }
-
-    StatusChartPanel {
-        id: graphDetail
-        height: 290
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        anchors.right: parent.right
-        anchors.rightMargin: 24
-        anchors.verticalCenter: parent.verticalCenter
-        graphsModel: d.graphTabsModel
-        timeRangeModel: d.timeRangeTabsModel
-        onHeaderTabClicked: {
-            //TODO
-            //if time range tab
-            d.generateData();
-            //if graph bar
-            //switch graph
-        }
-        chart.chartType: 'line'
-        chart.chartData: {
-            return {
-                labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
-                datasets: [{
-                    label: 'Price',
-                    xAxisId: 'x-axis-1',
-                    yAxisId: 'y-axis-1',
-                    backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
-                    borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
-                    borderWidth: 3,
-                    pointRadius: 0,
-                    //data: d.generateData()
-                }]
-            }
-        }
-
-        chart.chartOptions: {
-            return {
-                maintainAspectRatio: false,
-                responsive: true,
-                legend: {
-                    display: false
-                },
-                //TODO enable zoom
-//                zoom: {
-//                    enabled: true,
-//                    drag: true,
-//                    speed: 0.1,
-//                    threshold: 2
-//                },
-//                pan:{enabled:true,mode:'x'},
-                tooltips: {
-                    intersect: false,
-                    displayColors: false,
-                    callbacks: {
-                        footer: function(tooltipItem, data) { return 'Vol: $43,042,678,876'; },
-                        label: function(tooltipItem, data) {
-                          let label = data.datasets[tooltipItem.datasetIndex].label || '';
-                            if (label) {
-                                label += ': ';
-                            }
-                            label += tooltipItem.yLabel.toFixed(2);
-                            return label.slice(0,label.indexOf(":")+1)+ " $"+label.slice(label.indexOf(":")+2, label.length);
-                       }
-                    }
-                },
-                scales: {
-                    xAxes: [{
-                       id: 'x-axis-1',
-                       position: 'bottom',
-                       gridLines: {
-                           drawOnChartArea: false,
-                           drawBorder: false,
-                           drawTicks: false,
-                       },
-                       ticks: {
-                           fontSize: 10,
-                           fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
-                           padding: 16
-                       }
-                    }],
-                    yAxes: [{
-                       position: 'left',
-                       id: 'y-axis-1',
-                       gridLines: {
-                          borderDash: [8, 4],
-                          drawBorder: false,
-                          drawTicks: false,
-                          color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
-                       },
-                       beforeDataLimits: (axis) => {
-                          axis.paddingTop = 25;
-                          axis.paddingBottom = 0;
-                        },
-                       ticks: {
-                          fontSize: 10,
-                          fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
-                          padding: 8,
-                          min: d.minStep,
-                          max: d.maxStep,
-                          stepSize: d.stepSize,
-                          callback: function(value, index, ticks) {
-                                return '$' + value;
-                          },
-                       }
-                    }]
-                }
-            }
-        }
-    }
-}
@@ -14,9 +14,8 @@ GridLayout {
    StatusChatInfoToolBar {
        chatInfoButton.title: "Cryptokitties"        
        chatInfoButton.subTitle: "128 Members"
-        chatInfoButton.asset.isImage: true
-        chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
-        chatInfoButton.asset.color: Theme.palette.miscColor6
+        chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        chatInfoButton.icon.color: Theme.palette.miscColor6

        popupMenu: StatusPopupMenu {

@@ -8,7 +8,7 @@ import StatusQ.Controls 0.1

 import Sandbox 0.1

-Row {
+Column {
    spacing: 8

    StatusColorSelector {
@@ -1,72 +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: 20
-
-    ListModel {
-        id: commmonModel
-        ListElement {
-            name: "Pascal"
-        }
-        ListElement {
-            name: "Khushboo"
-        }
-        ListElement {
-            name: "Alexandra"
-        }
-        ListElement {
-            name: "Eric"
-        }
-    }
-
-    StatusComboBox {
-        id: combobox
-        label: "ComboBox"
-        model: commmonModel
-    }
-
-    StatusComboBox {
-        id: comboBox1
-        label: "ComboBox with custom delegate"
-        model: commmonModel
-        delegate: StatusItemDelegate {
-            width: comboBox1.control.width
-            highlighted: comboBox1.control.highlightedIndex === index
-            text: modelData
-            font: comboBox1.control.font
-            icon {
-                name: "filled-account"
-                color: Theme.palette.primaryColor1
-            }
-            enabled: index != 2
-        }
-    }
-
-    StatusComboBox {
-        model: commmonModel
-        label: "Disabled ComboBox"
-        enabled: false
-    }
-
-    StatusComboBox {
-        model: commmonModel
-        label: "ComboBox with validation error"
-        validationError: "Validation failed example"
-    }
-
-    StatusComboBox {
-        model: commmonModel
-        label: "Mirrored ComboBox"
-        LayoutMirroring.enabled: true
-    }
-}
-
@@ -1,83 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-import Sandbox 0.1
-
-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.asset.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
-        }
-    }
-}
@@ -1,282 +0,0 @@
-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"
-            }
-        }
-    }
-}
@@ -26,7 +26,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter

        expandable: false
-        asset.name: "seed-phrase"
+        icon.name: "seed-phrase"
        primaryText: "Back up seed phrase"
        secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
        button.text: qsTr("Back up seed phrase")
@@ -36,7 +36,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter

        expandable: true
-        asset.name: "secret"
+        icon.name: "secret"
        primaryText: "Account signing phrase"
        secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
        expandableComponent: notImplemented
@@ -46,7 +46,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter

        expandable: true
-        asset.name: "seed-phrase"
+        icon.name: "seed-phrase"
        primaryText: "View private key"
        secondaryText: "Back up your seed phrase now to secure this account"
        expandableComponent: notImplemented
@@ -74,8 +74,7 @@ Column {

        type: StatusExpandableItem.Type.Secondary
        expandable: true
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        primaryText: "CryptoKitties"
        additionalText: "1456 USD"
        expandableComponent: notImplemented
@@ -86,8 +85,7 @@ Column {

        type: StatusExpandableItem.Type.Secondary
        expandable: true
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
        additionalText: "564.90 USD"
        expandableComponent: notImplemented
@@ -1,20 +1,11 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
-import QtQuick.Dialogs 1.3
-import QtQml 2.14

 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1

 import QtGraphicalEffects 1.14

-import StatusQ.Components 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Popups 0.1
-
 Item {
    id: root

@@ -24,12 +15,6 @@ Item {
    property var testControls: [ctrl1, ctrl2, ctrl3]

    property bool globalStylePreferRound: true
-    property var testImageList: ["qrc:/demoapp/data/logo-test-image.png",
-                                 "qrc:/demoapp/data/profile-image-2.jpeg",
-                                 "qrc:/demoapp/data/profile-image-1.jpeg"]
-    property int testImageIndex: 0
-    property int testSpacing: 0
-    property int testFrameMargins: 10

    ColumnLayout {
        id: mainLayout
@@ -37,12 +22,7 @@ Item {
        anchors.fill: parent

        RowLayout {
-            spacing: root.testSpacing
-
            ColumnLayout {
-                spacing: root.testSpacing
-                Layout.margins: root.testSpacing
-
                Text {
                    text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
                }
@@ -52,9 +32,8 @@ Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true

-                    source: root.testImageList[root.testImageIndex]
+                    source: "qrc:/demoapp/data/logo-test-image.png"
                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                    margins: root.testFrameMargins
                }
                Text {
                    text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
@@ -64,15 +43,13 @@ Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true

-                    source: root.testImageList[root.testImageIndex]
+                    source: "qrc:/demoapp/data/logo-test-image.png"
                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
                    aspectRatio: 16/9
                    enableCheckers: true
-                    margins: root.testFrameMargins + 2
                }
            }
            ColumnLayout {
-                Layout.margins: root.testSpacing
                Text {
                    text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
                }
@@ -82,178 +59,36 @@ Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true

-                    source: root.testImageList[root.testImageIndex]
+                    source: "qrc:/demoapp/data/logo-test-image.png"
                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
                    aspectRatio: 0.8
-
-                    margins: root.testFrameMargins + 5.3
                }
            }
        }
-        RowLayout {
-            StatusButton {
-                text: qsTr("Cycle image")
-                onClicked: {
-                    let newIndex = root.testImageIndex
-                    newIndex++
-                    if(newIndex >= root.testImageList.length)
-                        newIndex = 0
-                    root.testImageIndex = newIndex
-                }
-            }
-            StatusButton {
-                text: qsTr("Cycle spacing")
-                onClicked: {
-                    root.testSpacing += (root.testSpacing/2) + 1
-                    if(root.testSpacing > 35)
-                        root.testSpacing = 0
-                }
-            }
-            StatusButton {
-                text: qsTr("Cycle frame margins")
-                onClicked: {
-                    root.testFrameMargins += (root.testFrameMargins/2) + 1
-                    if(root.testFrameMargins > 50)
-                        root.testFrameMargins = 0
-                }
-            }
-            StatusButton {
-                text: qsTr("Load external image")
-                onClicked: workflowLoader.active = true
-            }
-        }
-    }

-    Loader {
-        id: workflowLoader
-
-        sourceComponent: workflowComponent
-        active: false
-        onStatusChanged: {
-            if(status === Loader.Ready) {
-                item.imageFileDialogTitle = qsTr("Test Title")
-                item.title = "Test popup"
-                item.acceptButtonText = "Load Custom Image"
-                item.chooseImageToCrop()
+        Shortcut {
+            sequence: StandardKey.ZoomIn
+            onActivated: {
+                for(let i in testControls) {
+                    const c = testControls[i]
+                    c.setCropRect(ctrl1.inflateRectBy(c.cropRect, -0.05))
+                }
            }
        }

-        Connections {
-            target: workflowLoader.item
-            function onImageCropped(image, cropRect) {
-                ctrl1.source = image
-                ctrl2.source = image
-                ctrl3.source = image
-            }
-            function onCanceled() {
-                workflowLoader.active = false
-            }
-        }
-    }
-
-    Component {
-        id: workflowComponent
-
-        Item {
-            id: workflowItem
-
-            property alias aspectRatio: imageCropper.aspectRatio
-            property alias windowStyle: imageCropper.windowStyle
-            /*required*/ property string imageFileDialogTitle: ""
-            /*required*/ property string title: ""
-            /*required*/ property string acceptButtonText: ""
-            property bool roundedImage: true
-
-            signal imageCropped(var image, var cropRect)
-            signal canceled()
-
-            function chooseImageToCrop() {
-                fileDialog.open()
-            }
-
-            FileDialog {
-                id: fileDialog
-
-                title: workflowItem.imageFileDialogTitle
-                folder: workflowItem.userSelectedImage ? imageCropper.source.substr(0, imageCropper.source.lastIndexOf("/")) : shortcuts.pictures
-                nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg *.jpeg *.jfif *.webp *.png *.heif")]
-                onAccepted: {
-                    if (fileDialog.fileUrls.length > 0) {
-                        imageCropper.source = fileDialog.fileUrls[0]
-                        imageCropperModal.open()
-                    }
+        Shortcut {
+            sequence: StandardKey.ZoomOut
+            onActivated: {
+                for(let i in testControls) {
+                    const c = testControls[i]
+                    c.setCropRect(ctrl1.inflateRectBy(c.cropRect, 0.05))
                }
-                onRejected: workflowItem.canceled()
-            } // FileDialog
-
-            StatusModal {
-                id: imageCropperModal
-
-                header.title: workflowItem.title
-
-                anchors.centerIn: Overlay.overlay
-
-                width: workflowItem.roundedImage ? 480 : 580
-
-                onClosed: workflowItem.canceled()
-
-                StatusImageCropPanel {
-                    id: imageCropper
-
-                    implicitHeight: workflowItem.roundedImage ? 350 : 370
-
-                    anchors {
-                         fill: parent
-                         leftMargin: 10 * 2
-                         rightMargin: 10 * 2
-                         topMargin: 15
-                         bottomMargin: 15
-                    }
-
-                    margins: workflowItem.roundedImage ? 10 : 20
-                    windowStyle: workflowItem.roundedImage ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                    enableCheckers: true
-                }
-
-                rightButtons: [
-                    StatusButton {
-                        text: workflowItem.acceptButtonText
-
-                        enabled: imageCropper.sourceSize.width > 0 && imageCropper.sourceSize.height > 0
-
-                        onClicked: {
-                            workflowItem.imageCropped(imageCropper.source, imageCropper.cropRect)
-                            imageCropperModal.close()
-                        }
-                    }
-                ]
-            } // StatusModal
-        } // Item
-    }
-
-
-    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
        }
    }
-
-    Shortcut {
-        sequences: ["Ctrl+W"]
-        onActivated: globalStylePreferRound = !globalStylePreferRound
-    }
 }
@@ -12,59 +12,51 @@ Column {
    spacing: 8

    StatusInput {
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
    }

    StatusInput {
        label: "Label"
-        placeholderText: "Disabled"
+        input.placeholderText: "Disabled"
        input.enabled: false
    }

    StatusInput {
-        placeholderText: "Clearable"
+        input.placeholderText: "Clearable"
        input.clearable: true
    }

    StatusInput {
-        placeholderText: "Invalid"
+        input.placeholderText: "Invalid"
        input.valid: false
    }

    StatusInput {
        label: "Label"
-        input.asset.name: "search"
+
+        input.icon.name: "search"
        input.placeholderText: "Input with icon"
    }

    StatusInput {
        label: "Label"
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
        input.clearable: true
    }

    StatusInput {
        charLimit: 30
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
        input.clearable: true
    }

    StatusInput {
        label: "Label"
        charLimit: 30
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
        input.clearable: true
    }

-    StatusPasswordInput {
-        placeholderText: "Password"
-    }
-
-    StatusPasswordInput {
-        signingPhrase: "orange hello cygnet"
-        placeholderText: "Password"
-    }
-
    Item {
        implicitWidth: 480
        implicitHeight: 82
@@ -77,34 +69,19 @@ Column {
            textEdit.input.anchors.leftMargin: 16
            textEdit.input.anchors.rightMargin: 16
            textEdit.input.anchors.topMargin: 11
-            textEdit.label: "Input with drop down selection list" + (insertedWord ? ` (${insertedWord})` : "")
+            textEdit.label: "Input with drop down selection list"
            leftComponentText: "1"
            inputList: ListModel {
-                ListElement {
-                    seedWord: "add"
-                }
-                ListElement {
-                    seedWord: "address"
-                }
                ListElement {
                    seedWord: "panda"
                }
                ListElement {
                    seedWord: "posible"
                }
-                ListElement {
-                    seedWord: "win"
-                }
-                ListElement {
-                    seedWord: "wine"
-                }
                ListElement {
                    seedWord: "wing"
                }
            }
-
-            property string insertedWord: ""
-            onDoneInsertingWord: insertedWord = word
        }
    }

@@ -114,31 +91,30 @@ Column {
        errorMessage: "Error message"
        input.clearable: true
        input.valid: false
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
    }

    StatusInput {
        label: "StatusInput"
        secondaryLabel: "with right icon"
-        input.asset.width: 15
-        input.asset.height: 11
-        input.asset.name: text !== "" ? "checkmark" : ""
+        input.icon.width: 15
+        input.icon.height: 11
+        input.icon.name: text !== "" ? "checkmark" : ""
        input.leftIcon: false
    }

    StatusInput {
        label: "Label"
        secondaryLabel: "secondary label"
-        placeholderText: "Placeholder"
-        minimumHeight: 56
-        maximumHeight: 56
+        input.placeholderText: "Placeholder"
+        input.implicitHeight: 56
    }

    StatusInput {
        id: input
        label: "Label"
        charLimit: 30
-        placeholderText: "Input with validator"
+        input.placeholderText: "Input with validator"

        validators: [
            StatusMinLengthValidator {
@@ -156,7 +132,7 @@ Column {
    StatusInput {
        label: "Input with <i>StatusRegularExpressionValidator</i>"
        charLimit: 30
-        placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+        input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
        validationMode: StatusInput.ValidationMode.IgnoreInvalidInput

        validators: [
@@ -169,7 +145,7 @@ Column {

    StatusInput {
        label: "Label"
-        placeholderText: "Input width component (right side)"
+        input.placeholderText: "Input width component (right side)"
        input.rightComponent: StatusIcon {
            icon: "cancel"
            height: 16
@@ -180,29 +156,28 @@ Column {

    StatusInput {
        input.multiline: true
-        placeholderText: "Multiline"
+        input.placeholderText: "Multiline"
    }

    StatusInput {
        input.multiline: true
-        placeholderText: "Multiline with static height"
-        minimumHeight: 100
-        maximumHeight: 100
+        input.placeholderText: "Multiline with static height"
+        input.implicitHeight: 100
    }

    StatusInput {
        input.multiline: true
-        placeholderText: "Multiline with max/min"
-        minimumHeight: 80
-        maximumHeight: 200
+        input.placeholderText: "Multiline with max/min"
+        input.minimumHeight: 80
+        input.maximumHeight: 200
    }

    StatusInput {
        property bool toggled: true
        label: "Input with emoji icon"
        input.placeholderText: "Enter Name"
-        input.asset.emoji: toggled ? "😁" : "🧸"
-        input.asset.color: "blue"
+        input.icon.emoji: toggled ? "😁" : "🧸"
+        input.icon.color: "blue"
        input.isIconSelectable: true
        onIconClicked: {
            toggled = !toggled
@@ -213,9 +188,9 @@ Column {
        property bool toggled: true
        label: "Input with selectable icon which is not an emoji"
        input.placeholderText: "Enter Name"
-        input.asset.emoji: ""
-        input.asset.name: toggled ? "filled-account" : "image"
-        input.asset.color: "blue"
+        input.icon.emoji: ""
+        input.icon.name: toggled ? "filled-account" : "image"
+        input.icon.color: "blue"
        input.isIconSelectable: true
        onIconClicked: {
            toggled = !toggled
@@ -1,63 +0,0 @@
-import QtQuick 2.14
-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"
-
-        itemsModel: ListModel {
-            id: model
-        }
-
-        StatusDropdown {
-            id: dropdown
-
-            parent: selector.addButton
-            width: 200
-            contentItem: ColumnLayout {
-                spacing: 10
-                StatusInput {
-                    id: input
-                    text: "Sample"
-                    Layout.fillWidth: true
-                }
-                StatusButton {
-                    Layout.alignment: Qt.AlignHCenter
-                    text: "Add element"
-                    onClicked: {
-                        model.append({
-                            text: input.text,
-                            imageSource: "qrc:/images/SNT.png",
-                            operator: model.count > 0 ? Utils.Operators.Or : Utils.Operators.None
-                        })
-
-                        dropdown.close()
-                    }
-                }
-            }
-        }
-
-        addButton.onClicked: {
-            dropdown.x = mouse.x
-            dropdown.y = mouse.y
-            dropdown.open()
-        }
-    }
-
-    StatusButton {
-        Layout.alignment: Qt.AlignHCenter
-        text: "Clear list"
-        onClicked: { selector.itemsModel.clear() }
-    }
-}
@@ -34,7 +34,6 @@ GridLayout {
            inputList: Models.languageNoImagePickerModel
            placeholderSearchText: qsTr("Search Languages")
            menuAlignment: StatusListPicker.MenuAlignment.Center
-            multiSelection: true
        }

        StatusListPicker {
@@ -61,7 +60,7 @@ GridLayout {
        width: 500
        text: "4 different configurations for the `StatusListPicker` component:\n
    * Single selection. \n
-    * Multiple selection without images.\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
@@ -72,73 +72,4 @@ Column {
        text: "Introduced PIN: " + regexPinInput.pinInput
        font.pixelSize: 12
    }
-
-    // PUK input that accepts only numbers
-    StatusBaseText {
-        topPadding: 100
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter Keycard PUK"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: numbersPukInput
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
-        pinLen: 12
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only numbers allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PUK: " + numbersPukInput.pinInput
-        font.pixelSize: 12
-    }
-
-    // PUK input that accepts only numbers
-    StatusBaseText {
-        topPadding: 100
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter Keycard PUK"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: numbersPukInputWithSpacing
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
-        pinLen: 12
-        additionalSpacing: 32
-        additionalSpacingOnEveryNItems: 4
-
-        Component.onCompleted: {
-            numbersPukInputWithSpacing.statesInitialization()
-            numbersPukInputWithSpacing.forceFocus()
-        }
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only numbers allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PUK: " + numbersPukInputWithSpacing.pinInput
-        font.pixelSize: 12
-    }
 }
@@ -28,11 +28,6 @@ GridLayout {
        onClicked: customMenu.popup()
    }

-    StatusButton {
-        text: "Menu with custom font settings"
-        onClicked: differentFontMenu.popup()
-    }
-

    StatusPopupMenu {
        id: simpleMenu
@@ -55,30 +50,30 @@ GridLayout {

        StatusMenuItem { 
            text: "One" 
-            assetSettings.name: "info"
+            iconSettings.name: "info"
        }

        StatusMenuSeparator {}

        StatusMenuItem { 
            text: "Two"
-            assetSettings.name: "info"
+            iconSettings.name: "info"
        }

        StatusMenuItem { 
            text: "Three"
-            assetSettings.name: "info"
+            iconSettings.name: "info"
        }

        StatusPopupMenu {
            title: "Four"
            StatusMenuItem { 
                text: "One"
-                assetSettings.name: "info"
+                iconSettings.name: "info"
            }
            StatusMenuItem { 
                text: "Three"
-                assetSettings.name: "info"
+                iconSettings.name: "info"
            }
        }
    }
@@ -89,7 +84,7 @@ GridLayout {
        subMenuItemIcons: [
            { icon: "chat" },
            { 
-                source: "qrc:/demoapp/data/profile-image-1.jpeg"
+                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
            },
            { 
                isLetterIdenticon: true, 
@@ -108,16 +103,14 @@ GridLayout {

            StatusMenuItem { 
                text: "vitalik.eth"
-                assetSettings.isImage: true
-                assetSettings.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+                image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-                assetSettings.imgIsIdenticon: true
+                image.isIdenticon: true
            }

            StatusMenuItem { 
                text: "Pascal"
-                assetSettings.isImage: true
-                assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+                image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            }
        }

@@ -126,21 +119,21 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

            StatusMenuItem { 
                text: "welcome" 
-                assetSettings.name: "channel"
-                assetSettings.color: Theme.palette.directColor1
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
            }
            StatusMenuItem { 
                text: "support" 
-                assetSettings.name: "channel"
-                assetSettings.color: Theme.palette.directColor1
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
            }

            StatusMenuHeadline { text: "Public" }

            StatusMenuItem { 
                text: "news" 
-                assetSettings.name: "channel"
-                assetSettings.color: Theme.palette.directColor1
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
            }
        }

@@ -149,27 +142,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

            StatusMenuItem { 
                text: "welcome" 
-                assetSettings.isLetterIdenticon: true
-                assetSettings.bgColor: "red"
+                iconSettings.isLetterIdenticon: true
+                iconSettings.background.color: "red"
            }
        }
    }
-
-    StatusPopupMenu {
-        id: differentFontMenu
-        StatusMenuItem {
-            text: "Bold"
-            fontSettings.bold: true
-        }
-
-        StatusMenuItem {
-            text: "Italic"
-            fontSettings.italic: true
-        }
-
-        StatusMenuItem {
-            text: "16px"
-            fontSettings.pixelSize: 16
-        }
-    }
 }
@@ -8,49 +8,36 @@ import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1

 import Sandbox 0.1
-
 Column {
-    spacing: 20
-
-    ListModel {
-        id: commmonModel
-        ListElement {
-            name: "Pascal"
-        }
-        ListElement {
-            name: "Khushboo"
-        }
-        ListElement {
-            name: "Alexandra"
-        }
-        ListElement {
-            name: "Eric"
-        }
-    }
-
-    StatusBaseText {
-        font.pixelSize: 16
-        color: Theme.palette.dangerColor1
-        text: "This component should no longer be used.<br />Please, use `StatusComboBox` instead."
-        textFormat: Text.MarkdownText
-    }
+    spacing: 8

    StatusSelect {
        id: select
        label: "Some label"
-        model: commmonModel
-
+        model: ListModel {
+            ListElement {
+                name: "Pascal"
+            }
+            ListElement {
+                name: "Khushboo"
+            }
+            ListElement {
+                name: "Alexandra"
+            }
+            ListElement {
+                name: "Eric"
+            }
+        }
        selectMenu.delegate: StatusMenuItemDelegate {
            statusPopupMenu: select
            action: StatusMenuItem {
-                assetSettings.name: "filled-account"
+                iconSettings.name: "filled-account"
                text: name
                onTriggered: {
                    selectedItem.text = name
                }
            }
        }
-
        selectedItemComponent: Item {
            id: selectedItem
            anchors.fill: parent
@@ -19,7 +19,7 @@ Item {
        ListElement {
            publicId: "0x1"
            name: "vitalikbuterin"
-            icon: "qrc:/demoapp/data/profile-image-1.jpeg"
+            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            isIdenticon: false
            onlineStatus: 1
            isReadonly: false
@@ -1,61 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
-Column {
-    id: root
-
-    spacing: 8
-
-    Component.onCompleted: {
-        focusedTextArea.forceActiveFocus()
-    }
-
-    StatusTextArea {
-        id: focusedTextArea
-        width: parent.width
-        placeholderText: "Initially focused text area"
-        KeyNavigation.tab: unfocusedTextArea
-    }
-
-    StatusTextArea {
-        id: unfocusedTextArea
-        width: parent.width
-        placeholderText: "Unfocused text area (hover me to see the color change)"
-        KeyNavigation.tab: invalidTextArea
-    }
-
-    StatusTextArea {
-        id: invalidTextArea
-        width: parent.width
-        valid: false
-        placeholderText: "Invalid text area, should display red border"
-        KeyNavigation.tab: longTextArea
-    }
-
-    StatusScrollView {
-        padding: 0 // use our own (StatusTextArea) padding
-        width: parent.width
-        height: 120
-        TextArea.flickable: longTextArea
-        StatusTextArea {
-            id: longTextArea
-            text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet lectus quis justo. Sed vel lectus. \
-            Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Morbi scelerisque luctus velit. Nunc auctor. Nullam at \
-            arcu a est sollicitudin euismod. Cras elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, \
-            per inceptos hymenaeos. Fusce aliquam vestibulum ipsum. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. \
-            Nullam sit amet magna in magna gravida vehicula. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nullam faucibus \
-            mi quis velit. Nam sed tellus id magna elementum tincidunt. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, \
-            eget facilisis enim ipsum id lacus. Maecenas aliquet accumsan leo. Aliquam erat volutpat."
-            KeyNavigation.tab: focusedTextArea
-        }
-    }
-
-    StatusTextArea {
-        enabled: false
-        placeholderText: "Disabled text area"
-    }
-}
@@ -35,9 +35,6 @@ Item {
                onClose: {
                    console.warn("toast closed: ", modelData.title)
                }
-                onClicked: {
-                    console.warn("toast clicked")
-                }
            }
        }
    }
@@ -1,5 +1,22 @@
 <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>
@@ -7,76 +24,49 @@
        <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>images/Coinbase.png</file>
-        <file>images/CoinBaseCommunityBanner.png</file>
-        <file>images/CommunityBanner1.png</file>
+        <file>demoapp/data/Models.qml</file>
+        <file>demoapp/data/qmldir</file>
+        <file>demoapp/data/logo-test-image.png</file>
+        <file>DemoApp.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>pages/StatusColorSelectorGridPage.qml</file>
+        <file>pages/StatusListPickerPage.qml</file>
+        <file>pages/StatusPinInputPage.qml</file>
+        <file>pages/StatusTagSelectorPage.qml</file>
+        <file>pages/StatusToastMessagePage.qml</file>
+        <file>pages/StatusWizardStepperPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
+        <file>pages/StatusColorSpacePage.qml</file>
        <file>images/CryptoKitties.png</file>
        <file>images/CryptoPunks.png</file>
        <file>images/Dragonerum.png</file>
+        <file>images/FriendsBenefits.png</file>
+        <file>images/logo-test-image.png</file>
+        <file>images/P2PCrypto.png</file>
+        <file>images/SNT.png</file>
+        <file>images/Socks.png</file>
+        <file>images/StatusPunks.png</file>
+        <file>images/CommunityBanner1.png</file>
+        <file>images/Coinbase.png</file>
+        <file>images/CoinBaseCommunityBanner.png</file>
        <file>images/DribbbleCommunityBanner.png</file>
        <file>images/Ethereum.png</file>
        <file>images/EthereumCommunityBanner.png</file>
        <file>images/Fluff.png</file>
-        <file>images/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/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>demoapp/data/profile-image-1.jpeg</file>
-        <file>demoapp/data/profile-image-2.jpeg</file>
-        <file>pages/StatusComboBoxPage.qml</file>
+        <file>images/RARI.png</file>
+        <file>images/SRToken.png</file>
    </qresource>
 </RCC>
@@ -0,0 +1,96 @@
+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
+    }
+}
@@ -3,20 +3,15 @@
 #include <QQmlContext>
 #include <QWindow>
 #include <QDebug>
-#include <QDirIterator>

 #include "statuswindow.h"
 #include "spellchecker.h"

 SandboxApp::SandboxApp(int &argc, char **argv)
-    : QGuiApplication(argc, argv)
+    : QGuiApplication(argc, argv),
+      m_handler(new Handler(this))
 {
-#ifdef QT_DEBUG
-    connect(&m_watcher, &QFileSystemWatcher::directoryChanged, [this](const QString&) {
-        restartEngine();
-    });
-
-#endif
+    connect(m_handler, &Handler::restartQml, this, &SandboxApp::restartEngine, Qt::QueuedConnection);
 }

 void SandboxApp::startEngine()
@@ -25,23 +20,18 @@ void SandboxApp::startEngine()
    qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");

 #ifdef QT_DEBUG
-    const QUrl url = QUrl::fromLocalFile(SRC_DIR + QStringLiteral("/main.qml"));
-    m_watcher.addPath(applicationDirPath() + "/../");
-    QDirIterator it(applicationDirPath() + "/../", QDir::Dirs | QDir::NoDotAndDotDot, QDirIterator::Subdirectories);
-    while (it.hasNext()) {
-        if (!it.filePath().isEmpty()) {
-            m_watcher.addPath(it.filePath());
-        }
-        it.next();
-    }
+    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
 #else
    const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif

+    m_engine.rootContext()->setContextProperty("app", m_handler);
+
+
 #ifdef QT_DEBUG
-    m_engine.addImportPath(SRC_DIR + QStringLiteral("/../src"));
+    m_engine.addImportPath(applicationDirPath() + "/../../src");
 #else
-    m_engine.addImportPath(QStringLiteral(":/"));
+    m_engine.addImportPath(QStringLiteral("qrc:/src"));
 #endif
    qDebug() << m_engine.importPathList();
    QObject::connect(&m_engine, &QQmlApplicationEngine::objectCreated,
@@ -54,7 +44,7 @@ void SandboxApp::startEngine()

 void SandboxApp::restartEngine()
 {
-    const QUrl url = QUrl::fromLocalFile(SRC_DIR + QStringLiteral("/main.qml"));
+    const QUrl url(applicationDirPath() + "/../main.qml");
    QWindow *rootWindow = qobject_cast<QWindow*>(m_engine.rootObjects().at(0));
    if (rootWindow) {
        rootWindow->close();
@@ -4,9 +4,7 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>

-#ifdef QT_DEBUG
-#include <QFileSystemWatcher>
-#endif
+#include "handler.h"

 class SandboxApp : public QGuiApplication
 {
@@ -20,10 +18,7 @@ public slots:

 private:
    QQmlApplicationEngine m_engine;
-
-#ifdef QT_DEBUG
-    QFileSystemWatcher m_watcher;
-#endif
+    Handler *m_handler;
 };

 #endif // SANDBOXAPP_H
@@ -1,4 +1,10 @@
 #!/bin/bash

-cmake -B build
-cmake --build build
+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
@@ -9,7 +9,7 @@
 #include <QLocale>

 #include <QRegularExpression>
-#include <QGuiApplication>
+#include <QApplication>
 #include <QDir>

 SpellChecker::SpellChecker(QObject *parent)
@@ -53,8 +53,8 @@ void SpellChecker::initHunspell()
        delete m_hunspell;
    }

-    QString dictFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
-    QString affixFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
+    QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
+    QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
    QByteArray dictFilePathBA = dictFile.toLocal8Bit();
    QByteArray affixFilePathBA = affixFile.toLocal8Bit();
    m_hunspell = new Hunspell(affixFilePathBA.constData(),
@@ -1,33 +1,5 @@
 #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) {
@@ -44,26 +16,10 @@ 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
@@ -11,11 +11,40 @@ class StatusWindow: public QQuickWindow
    Q_PROPERTY(bool isFullScreen READ isFullScreen NOTIFY isFullScreenChanged)

 public:
-    explicit StatusWindow(QQuickWindow *parent = nullptr);
+    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();
+            }
+        });
+
+    }

    Q_INVOKABLE void toggleFullScreen();

-    Q_INVOKABLE void updatePosition();
+    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);
+        }
+    }

    bool isFullScreen() const;

@@ -25,15 +54,10 @@ signals:
 private:
    void removeTitleBar();
    void showTitleBar();
-#ifdef Q_OS_WIN
-    void removeTitleBarWin();
-    void showTitleBarWin();
-#elif defined Q_OS_MACOS
-    void removeTitleBarMac();
-    void showTitleBarMac();
-#endif
+    void initCallbacks();

 private:
+    EventCallbacks m_callbacks;
    bool m_isFullScreen;
 };

@@ -12,7 +12,21 @@
 #include <AppKit/NSButton.h>
 #include <AppKit/AppKit.h>

-void StatusWindow::removeTitleBarMac()
+void StatusWindow::toggleFullScreen()
+{
+    if (m_isFullScreen) {
+        showNormal();
+    } else {
+        showFullScreen();
+    }
+}
+
+bool StatusWindow::isFullScreen() const
+{
+    return m_isFullScreen;
+}
+
+void StatusWindow::removeTitleBar()
 {
    NSView *nsView = reinterpret_cast<NSView*>(this->winId());
    NSWindow *window = [nsView window];
@@ -25,7 +39,7 @@ void StatusWindow::removeTitleBarMac()
    [titleBarContainerView setHidden:YES];
 }

-void StatusWindow::showTitleBarMac()
+void StatusWindow::showTitleBar()
 {
    NSView *nsView = reinterpret_cast<NSView*>(this->winId());
    NSWindow *window = [nsView window];
@@ -1,30 +0,0 @@
-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
-    }
-}
@@ -1,24 +0,0 @@
-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
-    }
-}
@@ -1,4 +0,0 @@
-module StatusQ.Animations
-
-SkeletonAnimation 0.1 SkeletonAnimation.qml
-SkeletonGradientStop 0.1 SkeletonGradientStop.qml
@@ -4,7 +4,6 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1

-/// Forces size, hard to reuse it
 StatusBaseText {
    id: root 

@@ -19,6 +18,7 @@ StatusBaseText {
    color: Theme.palette.baseColor1

    Component.onCompleted: {
+        maxWidth = width
        expanded = actualWidth <= maxWidth
    }

@@ -29,9 +29,9 @@ StatusBaseText {

        onClicked: {
            if (root.expanded) {
-                root.width = root.maxWidth
+                width = root.width = root.maxWidth
            } else {
-                root.width = root.actualWidth
+                width = root.width = root.actualWidth
            }
            root.expanded = !root.expanded
        }
@@ -1,189 +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
-
-/*!
-    \qmltype StatusAddressPanel
-    \inherits Item
-    \inqmlmodule StatusQ.Components
-    \since StatusQ.Components 0.1
-    \brief Show an address as defined efined in design https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=4222%3A178403 and https://www.figma.com/file/h2Ab3k4wy1Y7SFHEvbcZZx/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop-(Copy)?node-id=1009%3A106451
-
-    Panel's components:
-      - Address: displays the rquired \c address property
-      - Frame: a rounded frame and the \c 0x icon prefix
-      - Copy action: clickable copy icon. Activable using \c showCopy
-
-    \qmlproperty string address address to show
-    \qmlproperty bool showCopy if \c true shows the copy action which triggers \c doCopy signal
-    \qmlproperty bool autHideCopyIcon if \c true shows the copy action when hovered. \see showCopy
-    \qmlproperty alias showFrame if \c true displays frame and \c 0x prefix
-    \qmlproperty bool expandable if \c true user can toggle between expanded and compact version; \see expanded
-    \qmlproperty bool expanded if \c true show address in full; if \c false show the address in compact mode eliding in the middle
-
-    \qmlproperty font: statusAddress.font
-
-    signal doCopy(string address)
-
-    \see StatusImageCrop for more details
-
-    Usage example:
-    \qml
-        StatusAddressPanel {
-            address: currentAccount.mixedcaseAddress
-
-            autHideCopyIcon: true
-            expanded: false
-
-            onDoCopy: (address) => root.store.copyToClipboard(address)
-        }
-    \endqml
-    For a list of components available see StatusQ.
- */
-Item {
-    id: root
-
-    /*required*/ property string address: ""
-    property bool showCopy: true
-    property bool autHideCopyIcon: false
-    property alias showFrame: frameRect.visible
-    property bool expandable: false
-    property bool expanded: true
-
-    property alias font: statusAddress.font
-
-    signal doCopy(string address)
-
-    implicitWidth: frameLayout.implicitWidth
-    implicitHeight: frameLayout.implicitHeight
-
-    RowLayout {
-        id: frameLayout
-
-        anchors.fill: parent
-
-        RowLayout {
-            Layout.leftMargin: frameRect.visible ? 8 : undefined // Theme.geometry.halfPadding
-            Layout.rightMargin: Layout.leftMargin
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            Layout.minimumWidth: 120
-            Layout.preferredHeight: 32
-
-            spacing: 6
-
-            StatusIcon {
-                icon: "address"
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: 19
-                Layout.preferredHeight: 19
-
-                visible: frameRect.visible
-
-                color: Theme.palette.baseColor1
-                opacity: 0.5
-            }
-
-            // Ensure the eliding is done in the middle of the value not taking into account `0x`
-            RowLayout {
-                spacing: 0
-
-                Layout.alignment: Qt.AlignVCenter
-
-                StatusBaseText {
-                    text: "0x"
-
-                    Layout.alignment: Qt.AlignVCenter
-
-                    font: statusAddress.font
-                    color: statusAddress.color
-                }
-
-                StatusBaseText {
-                    id: statusAddress
-
-                    text: root.address.replace("0x", "").replace("0X", "")
-
-                    Layout.preferredWidth: expanded ? implicitWidth : (implicitWidth * 0.25).toFixed()
-                    Layout.alignment: Qt.AlignVCenter
-
-                    font.family: Theme.palette.monoFont.name
-                    font.pixelSize: 15
-                    font.weight: Font.Medium
-                    elide: Text.ElideMiddle
-                    color: Theme.palette.baseColor1
-                }
-            }
-
-            StatusIcon {
-                icon: "copy"
-
-                visible: root.autHideCopyIcon ? (mainMouseArea.containsMouse || copyMouseArea.containsMouse )
-                                              : root.showCopy
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: (statusAddress.font.pixelSize * 1.2).toFixed()
-                Layout.preferredHeight: Layout.preferredWidth
-
-                color: Theme.palette.baseColor1
-
-                MouseArea {
-                    id: copyMouseArea
-
-                    anchors.fill: parent
-
-                    hoverEnabled: true
-                    cursorShape: Qt.ArrowCursor
-                    preventStealing: true
-
-                    onClicked: root.doCopy(root.address)
-                    z: frameRect.z + 1
-                }
-
-                StatusIcon {
-                    icon: parent.icon
-
-                    x: 1
-                    y: 1
-                    width: parent.width
-                    height: parent.height
-
-                    visible: copyMouseArea.containsMouse && !copyMouseArea.pressed
-
-                    color: "black"
-                    opacity: 0.4
-                    z: parent.z + 1
-                }
-            }
-        }
-    }
-
-    Rectangle {
-        id: frameRect
-
-        anchors.fill: frameLayout
-
-        color: "transparent"
-        border.width: 1
-        border.color: Theme.palette.baseColor2
-        radius: 36
-    }
-
-    MouseArea {
-        id: mainMouseArea
-
-        anchors.fill: parent
-
-        hoverEnabled: root.expandable || root.autHideCopyIcon
-        enabled: (root.autHideCopyIcon && root.showCopy) || root.expandable
-        acceptedButtons: root.expandable ? Qt.LeftButton : Qt.NoButton
-        cursorShape: root.expandable ? Qt.PointingHandCursor : Qt.ArrowCursor
-
-        onClicked: root.expanded = !root.expanded
-        z: frameLayout.z - 1
-    }
-}
@@ -30,8 +30,6 @@ 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 qsTr("99+");
@@ -1,498 +0,0 @@
-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.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
-                input.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
-                input.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
-                input.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
-                input.color: Theme.palette.directColor1
-            }
-            PropertyChanges {
-                target: basicInput
-                visible: true
-            }
-        }
-    ]}
@@ -1,144 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-import StatusQ.Controls 0.1
-
-import "private/chart"
-
-/*!
-     \qmltype StatusChartPanel
-     \inherits Page
-     \inqmlmodule StatusQ.Components
-     \since StatusQ.Components 0.1
-     \brief Displays a chart component together with an optional header in order to add a list of options.
-     Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-page.html}{Page}.
-
-     The \c StatusChartPanel displays a customizable chart component. Additionally, options
-     can be added in the header in both right and left sides given graphTabsModel and timeRangeTabsModel
-     property are set respectively.
-
-     For example:
-
-     \qml
-     StatusChartPanel {
-        id: graphDetail
-        width: parent.width
-        height: 290
-        anchors.verticalCenter: parent.verticalCenter
-        graphsModel: d.graphTabsModel
-        timeRangeModel: d.timeRangeTabsModel
-        chart.chartType: 'line'
-        chart.chartData: {
-            return {
-                datasets: [{
-                    data: d.data
-                }],
-                ...
-            }
-        }
-        chart.chartOptions: {
-            return {
-                legend: {
-                    display: false
-                },
-                ...
-            }
-        }
-    }
-    \endqml
-
-    \image status_chart_panel.png
-
-    For a list of components available see StatusQ.
-*/
-
-Page {
-    id: root
-
-    /*!
-        \qmlproperty var StatusChartPanel::graphsModel
-        This property holds the graphs model options to be set on the left side tab bar of the header.
-    */
-    property var graphsModel
-    /*!
-        \qmlproperty var StatusChartPanel::timeRangeModel
-        This property holds the time range options to be set on the right side tab bar of the header.
-    */
-    property var timeRangeModel
-
-    /*!
-        \qmlproperty alias StatusChartPanel::graphComponent
-        This property holds holds a reference to the graph component.
-    */
-    property alias chart: graphComponent
-
-    /*!
-        \qmlproperty alias StatusChartPanel::timeRangeTabBarIndex
-        This property holds holds a reference to the time range tab bar current index.
-    */
-    property alias timeRangeTabBarIndex: timeRangeTabBar.currentIndex
-
-    /*!
-        \qmlproperty string StatusChartPanel::selectedTimeRange
-        This property holds holds the text of the current time range tab bar selected tab.
-    */
-    property string selectedTimeRange: timeRangeTabBar.currentItem.text
-
-    /*!
-        \qmlsignal
-        This signal is emitted when a header tab bar is clicked.
-    */
-    signal headerTabClicked(string text)
-
-    Component {
-        id: tabButton
-        StatusTabButton {
-            leftPadding: 0
-            width: implicitWidth
-            onClicked: {
-                root.headerTabClicked(text);
-            }
-        }
-    }
-
-    Component.onCompleted: {
-        if (!!timeRangeModel) {
-            for (var i = 0; i < timeRangeModel.length; i++) {
-                var timeTab = tabButton.createObject(root, { text: timeRangeModel[i].text,
-                                                             enabled: timeRangeModel[i].enabled });
-                timeRangeTabBar.addItem(timeTab);
-            }
-        }
-        if (!!graphsModel) {
-            for (var j = 0; j < graphsModel.length; j++) {
-                var graphTab = tabButton.createObject(root, { text: graphsModel[j].text,
-                                                              enabled: graphsModel[j].enabled });
-                graphsTabBar.addItem(graphTab);
-            }
-        }
-    }
-
-    background: null
-    header: Item {
-        height: childrenRect.height
-        RowLayout {
-            anchors.left: parent.left
-            anchors.leftMargin: 46
-            anchors.right: parent.right
-            StatusTabBar {
-                id: graphsTabBar
-            }
-            StatusTabBar {
-                id: timeRangeTabBar
-                Layout.alignment: Qt.AlignRight
-            }
-        }
-    }
-
-    contentItem: Item {
-        Chart {
-            id: graphComponent
-            anchors.fill: parent
-        }
-    }
-}
@@ -73,7 +73,6 @@ Item {
                    duration: 150
                    direction: RotationAnimation.Clockwise
                    easing.type: Easing.InCubic
-                    running: visible
                }
            },
            Transition {
@@ -83,7 +82,6 @@ Item {
 										duration: 150
 										direction: RotationAnimation.Counterclockwise
 										easing.type: Easing.OutCubic
-										running: visible
 								}
        		}
        ]
@@ -9,7 +9,7 @@ import StatusQ.Components 0.1
 import StatusQ.Controls 0.1

 Column {
-    id: root
+    id: statusChatList

    spacing: 4
    width: 288
@@ -23,6 +23,8 @@ Column {

    property Component popupMenu

+    property var filterFn
+
    signal chatItemSelected(string categoryId, string id)
    signal chatItemUnmuted(string id)
    signal chatItemReordered(string id, int from, int to)
@@ -33,36 +35,22 @@ Column {
        }
    }

-    onDraggableItemsChanged: delegateModel.items.setGroups(0, delegateModel.items.count, "unsorted")
-
-    QtObject {
-        id: d
-
-        property int destinationPosition: -1
-    }
-
    DelegateModel {
        id: delegateModel
-        model: root.model
-
-        items.includeByDefault: !root.draggableItems
-
-        groups: DelegateModelGroup {
-            id: unsortedItems
-
-            name: "unsorted"
-            includeByDefault: root.draggableItems
-            onChanged: Utils.delegateModelSort(unsortedItems, delegateModel.items,
-                                               (a, b) => a.position < b.position)
-        }
-
+        model: statusChatList.model
        delegate: Item {
            id: draggable
-            objectName: model.name
-            width: root.width
+            width: statusChatListItem.width
            height: statusChatListItem.height
            property alias chatListItem: statusChatListItem

+            visible: {
+                if (!!statusChatList.filterFn) {
+                    return statusChatList.filterFn(model)
+                }
+                return true
+            }
+
            MouseArea {
                id: dragSensor

@@ -70,7 +58,7 @@ Column {
                cursorShape: active ? Qt.ClosedHandCursor : Qt.PointingHandCursor
                hoverEnabled: true
                pressAndHoldInterval: 150
-                enabled: root.draggableItems
+                enabled: statusChatList.draggableItems

                property bool active: false
                property real startY: 0
@@ -86,8 +74,8 @@ Column {
                }
                onPressAndHold: active = true
                onReleased: {
-                    if (active && d.destinationPosition !== -1 && statusChatListItem.originalOrder !== d.destinationPosition) {
-                        root.chatItemReordered(statusChatListItem.chatId, statusChatListItem.originalOrder, d.destinationPosition)
+                    if (active) {
+                        statusChatList.chatItemReordered(statusChatListItem.chatId, statusChatListItem.originalOrder, statusChatListItem.originalOrder)
                    }
                    active = false
                }
@@ -101,12 +89,10 @@ Column {
                        active = true
                    }
                }
-                onActiveChanged: d.destinationPosition = -1

                StatusChatListItem {
                    id: statusChatListItem

-                    width: parent.width
                    opacity: dragSensor.active ? 0.0 : 1.0
                    originalOrder: model.position
                    chatId: model.itemId
@@ -117,35 +103,19 @@ Column {
                    hasUnreadMessages: model.hasUnreadMessages
                    notificationsCount: model.notificationsCount
                    highlightWhenCreated: !!model.highlight
-                    selected: (model.active && root.highlightItem)
-                    asset.emoji: !!model.emoji ? model.emoji : ""
-                    asset.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
-                    asset.isImage: model.icon.includes("data")
-                    asset.name: model.icon
+                    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
-                    onlineStatus: model.onlineStatus

                    sensor.cursorShape: dragSensor.cursorShape
-
-                    Connections {
-                        target: statusChatListItem
-                        enabled: root.draggableItems
-
-                        function onOriginalOrderChanged() {
-                            Qt.callLater(() => {
-                                if (!delegateModel)
-                                    return
-
-                                delegateModel.items.setGroups(0, delegateModel.items.count, "unsorted")
-                            })
-                        }
-
-                    }
-
                    onClicked: {
                        highlightWhenCreated = false

-                        if (mouse.button === Qt.RightButton && !!root.popupMenu) {
+                        if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
                            statusChatListItem.highlighted = true

                            let originalOpenHandler = popupMenuSlot.item.openHandler
@@ -166,17 +136,17 @@ Column {
                                }
                            }

-                            let p = statusChatListItem.mapToItem(root, mouse.x, mouse.y)
+                            let p = statusChatListItem.mapToItem(statusChatList, mouse.x, mouse.y)

                            popupMenuSlot.item.popup(p.x + 4, p.y + 6)
                            popupMenuSlot.item.openHandler = originalOpenHandler
                            return
                        }
                        if (!statusChatListItem.selected) {
-                            root.chatItemSelected(model.parentItemId, model.itemId)
+                            statusChatList.chatItemSelected(model.parentItemId, model.itemId)
                        }
                    }
-                    onUnmute: root.chatItemUnmuted(model.itemId)
+                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
                }
            }

@@ -187,6 +157,7 @@ Column {
                keys: ["chat-item-category-" + statusChatListItem.categoryId]

                onEntered: reorderDelay.start()
+                onDropped: statusChatList.chatItemReordered(statusChatListItem.chatId, drag.source.originalOrder, statusChatListItem.DelegateModel.itemsIndex)

                Timer {
                    id: reorderDelay
@@ -194,7 +165,7 @@ Column {
                    repeat: false
                    onTriggered: {
                        if (dropArea.containsDrag) {
-                            d.destinationPosition = delegateModel.model.get(draggable.DelegateModel.itemsIndex).position
+                            dropArea.drag.source.chatListItem.originalOrder = statusChatListItem.originalOrder
                            delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
                        }
                    }
@@ -228,9 +199,9 @@ Column {
                    notificationsCount: model.notificationsCount
                    selected: draggable.chatListItem.selected

-                    asset.color: draggable.chatListItem.asset.color
-                    asset.imgIsIdenticon: draggable.chatListItem.asset.imgIsIdenticon
-                    asset.name: draggable.chatListItem.asset.name
+                    icon.color: draggable.chatListItem.icon.color
+                    image.isIdenticon: draggable.chatListItem.image.isIdenticon
+                    image.source: draggable.chatListItem.image.source
                }
            }
        }
@@ -238,12 +209,11 @@ Column {

    Repeater {
        id: statusChatListItems
-        objectName: "chatListItems"
        model: delegateModel
    }

    Loader {
        id: popupMenuSlot
-        active: !!root.popupMenu
+        active: !!statusChatList.popupMenu
    }
 }
@@ -7,16 +7,12 @@ import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Core 0.1

-import SortFilterProxyModel 0.2
-
 Item {
-    id: root
+    id: statusChatListAndCategories

    implicitHeight: chatListsAndCategories.height
    implicitWidth: chatListsAndCategories.width

-    property alias highlightItem: statusChatList.highlightItem
-
    property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
        text: qsTr("Add channel inside category")
    }
@@ -32,7 +28,7 @@ Item {
    property bool draggableCategories: false
    // Keeps track of expanded category state. Should only be modified
    // internally at runtime.
-    property var openedCategoryState: ({})
+    property var openedCategoryState: new Object({})

    property Component categoryPopupMenu
    property Component chatListPopupMenu
@@ -53,11 +49,11 @@ Item {
    MouseArea {
        id: sensor
        anchors.top: parent.top
-        width: root.width
-        height: root.height
+        width: statusChatListAndCategories.width
+        height: statusChatListAndCategories.height
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
-            if (mouse.button === Qt.RightButton && showPopupMenu && !!root.popupMenu) {
+            if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                return
            }
@@ -71,50 +67,24 @@ Item {
            spacing: 4

            StatusChatList {
-                objectName: "statusChatListAndCategoriesChatList"
                id: statusChatList
                visible: statusChatList.model.count > 0
-                onChatItemSelected: root.chatItemSelected(categoryId, id)
-                onChatItemUnmuted: root.chatItemUnmuted(id)
-                onChatItemReordered: root.chatItemReordered(categoryId, id, from, to)
-                draggableItems: root.draggableItems
-
-                model: SortFilterProxyModel {
-                    sourceModel: root.model
-
-                    filters: ValueFilter { roleName: "isCategory"; value: false }
-                    sorters: RoleSorter { roleName: "position" }
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
+                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
+                draggableItems: statusChatListAndCategories.draggableItems
+                model: statusChatListAndCategories.model
+                filterFn: function (model) {
+                    return !model.isCategory
                }
-
-                popupMenu: root.chatListPopupMenu
+                popupMenu: statusChatListAndCategories.chatListPopupMenu
            }

            DelegateModel {
                id: delegateModel
-
-                property int destinationPosition: -1
-
-                model: SortFilterProxyModel {
-                    sourceModel: root.model
-
-                    filters: ValueFilter { roleName: "isCategory"; value: true }
-                    sorters: RoleSorter { roleName: "position" }
-                }
-
-                items.includeByDefault: false
-
-                groups: DelegateModelGroup {
-                    id: unsortedItems
-
-                    name: "unsorted"
-                    includeByDefault: true
-                    onChanged: Utils.delegateModelSort(unsortedItems, delegateModel.items,
-                                                       (a, b) => a.position < b.position)
-                }
-
+                model: statusChatListAndCategories.model
                delegate: Item {
                    id: draggable
-                    objectName: model.name
                    width: statusChatListCategory.width
                    height: statusChatListCategory.height
                    property alias chatListCategory: statusChatListCategory
@@ -132,13 +102,13 @@ Item {
                        dragSensor.drag.threshold: 0.1
                        dragSensor.drag.filterChildren: true
                        dragSensor.onPressAndHold: {
-                            if (root.draggableCategories) {
+                            if (statusChatListAndCategories.draggableCategories) {
                                dragActive = true
                            }
                        }
                        dragSensor.onReleased: {
-                            if (dragActive && delegateModel.destinationPosition !== -1 && statusChatListCategory.originalOrder !== delegateModel.destinationPosition) {
-                                root.chatListCategoryReordered(statusChatListCategory.categoryId, statusChatListCategory.originalOrder, delegateModel.destinationPosition)
+                            if (dragActive) {
+                                statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, statusChatListCategory.originalOrder, statusChatListCategory.originalOrder)
                            }
                            dragActive = false
                        }
@@ -148,44 +118,38 @@ Item {
                            startX = dragSensor.mouseX
                        }
                        dragSensor.onMouseYChanged: {
-                            if (root.draggableCategories && (Math.abs(startY - dragSensor.mouseY) > 1) && dragSensor.pressed) {
+                            if (statusChatListAndCategories.draggableCategories && (Math.abs(startY - dragSensor.mouseY) > 1) && dragSensor.pressed) {
                                dragActive = true
                            }
                        }
                        dragSensor.onMouseXChanged: {
-                            if (root.draggableCategories && (Math.abs(startX - dragSensor.mouseX) > 1) && dragSensor.pressed) {
+                            if (statusChatListAndCategories.draggableCategories && (Math.abs(startX - dragSensor.mouseX) > 1) && dragSensor.pressed) {
                                dragActive = true
                            }
                        }
-                        onDragActiveChanged: delegateModel.destinationPosition = -1

-                        addButton.tooltip: root.categoryAddButtonToolTip
-                        menuButton.tooltip: root.categoryMenuButtonToolTip
+                        addButton.tooltip: statusChatListAndCategories.categoryAddButtonToolTip
+                        menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip

                        originalOrder: model.position
                        categoryId: model.itemId
                        name: model.name
+                        showActionButtons: statusChatListAndCategories.showCategoryActionButtons
+                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)

-                        showActionButtons: root.showCategoryActionButtons
-                        addButton.onClicked: root.categoryAddButtonClicked(model.itemId)
+                        chatList.model: model.subItems
+                        chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
+                        chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
+                        chatList.draggableItems: statusChatListAndCategories.draggableItems

-                        chatList.model: SortFilterProxyModel {
-                            sourceModel: model.subItems
-                            sorters: RoleSorter { roleName: "position" }
-                        }
-
-                        chatList.onChatItemSelected: root.chatItemSelected(categoryId, id)
-                        chatList.onChatItemUnmuted: root.chatItemUnmuted(id)
-                        chatList.onChatItemReordered: root.chatItemReordered(model.itemId, id, from, to)
-                        chatList.draggableItems: root.draggableItems
-
-                        popupMenu: root.categoryPopupMenu
-                        chatListPopupMenu: root.chatListPopupMenu
+                        popupMenu: statusChatListAndCategories.categoryPopupMenu
+                        chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu

                        // Used to set the initial value of "opened" when the
                        // model is bound/changed.
                        opened: {
-                            let openedState = root.openedCategoryState[model.itemId]
+                            let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
                            return openedState !== undefined ? openedState : true // defaults to open
                        }

@@ -194,18 +158,7 @@ Item {
                        // as the state would be lost each time the model is
                        // changed.
                        onOpenedChanged: {
-                            root.openedCategoryState[model.itemId] = statusChatListCategory.opened
-                        }
-
-                        Connections {
-                            function onOriginalOrderChanged() {
-                                Qt.callLater(() => {
-                                    if (!delegateModel)
-                                        return
-
-                                    delegateModel.items.setGroups(0, delegateModel.items.count, "unsorted")
-                                })
-                            }
+                            statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
                        }
                    }

@@ -216,6 +169,7 @@ Item {
                        keys: ["chat-category"]

                        onEntered: reorderDelay.start()
+                        onDropped: statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, drag.source.originalOrder, statusChatListCategory.DelegateModel.itemsIndex)

                        Timer {
                            id: reorderDelay
@@ -223,7 +177,7 @@ Item {
                            repeat: false
                            onTriggered: {
                                if (dropArea.containsDrag) {
-                                    delegateModel.destinationPosition = delegateModel.model.get(draggable.DelegateModel.itemsIndex).position
+                                    dropArea.drag.source.chatListCategory.originalOrder = statusChatListCategory.originalOrder
                                    delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
                                }
                            }
@@ -261,7 +215,6 @@ Item {

            Repeater {
                id: statusChatListCategories
-                objectName: "communityChatListCategories"
                visible: !!model && model.count > 0
                model: delegateModel
            }
@@ -270,6 +223,6 @@ Item {

    Loader {
        id: popupMenuSlot
-        active: !!root.popupMenu
+        active: !!statusChatListAndCategories.popupMenu
    }
 }
@@ -16,7 +16,6 @@ Column {
    property bool opened: true
    property bool dragged: false

-    property alias statusChatListCategoryItem: statusChatListCategoryItem
    property alias showActionButtons: statusChatListCategoryItem.showActionButtons
    property alias addButton: statusChatListCategoryItem.addButton
    property alias menuButton: statusChatListCategoryItem.menuButton
@@ -36,22 +35,23 @@ Column {
    StatusChatListCategoryItem {
        id: statusChatListCategoryItem
        title: statusChatListCategory.name
+        visible: model.isCategory
        opened: statusChatListCategory.opened
        sensor.pressAndHoldInterval: 150
-        propagateTitleClicks: true // title click is handled as a normal click (fallthru)
+
        showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
        highlighted: statusChatListCategory.dragged
-        onClicked: {
+        sensor.onClicked: {
            if (sensor.enabled) {
                if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
                    highlighted = true;
                    popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
-                } else if (mouse.button === Qt.LeftButton) {
-                    statusChatListCategory.opened = !statusChatListCategory.opened
+                    return
                }
            }
        }
-        onToggleButtonClicked: statusChatListCategory.opened = !statusChatListCategory.opened
+        onTitleClicked: statusChatListCategory.opened = !opened
+        onToggleButtonClicked: statusChatListCategory.opened = !opened
        onMenuButtonClicked: {
            highlighted = true
            menuButton.highlighted = true
@@ -66,6 +66,9 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter
        visible: statusChatListCategory.opened
        categoryId: statusChatListCategory.categoryId
+        filterFn: function (model) {
+            return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
+        }

        popupMenu: statusChatListCategory.chatListPopupMenu
    }
@@ -60,7 +60,15 @@ StatusListItem {
            icon.name: "chevron-down"
            icon.width: 18
            icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
-            onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
+            onPressed: {
+                sensor.enabled = false;
+            }
+            onClicked: {
+                statusChatListCategoryItem.toggleButtonClicked(mouse);
+            }
+            onReleased: {
+                sensor.enabled = true;
+            }
        }
    ]
 }
@@ -21,9 +21,11 @@ Rectangle {
    property bool hasUnreadMessages: false
    property int notificationsCount: 0
    property bool muted: false
-    property int onlineStatus: StatusChatListItem.OnlineStatus.Inactive
-
-    property StatusAssetSettings asset: StatusAssetSettings {
+    property StatusImageSettings image: StatusImageSettings {
+        width: 24
+        height: 24
+    }
+    property StatusIconSettings icon: StatusIconSettings {
        width: 24
        height: 24
        color: Theme.palette.miscColor5
@@ -51,11 +53,6 @@ Rectangle {
        CommunityChat // 6
    }

-    enum OnlineStatus {
-        Inactive,
-        Online
-    }
-
    implicitWidth: 288
    implicitHeight: 40

@@ -88,17 +85,9 @@ Rectangle {
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.verticalCenter: parent.verticalCenter
-            asset: root.asset
+            image: root.image
+            icon: root.icon
            name: root.name
-
-            badge {
-                visible: type === StatusChatListItem.Type.OneToOneChat
-                color: onlineStatus === StatusChatListItem.OnlineStatus.Online ? Theme.palette.successColor1 : Theme.palette.baseColor1
-                border.width: 1
-                border.color: root.color
-                implicitHeight: 9
-                implicitWidth: 9
-            }
        }

        StatusIcon {
@@ -123,14 +112,17 @@ Rectangle {

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

-    implicitWidth: d.cardWidth
-    implicitHeight: d.totalHeigth
+    width: d.cardWidth
+    height: d.totalHeigth
    radius: d.bannerRadius
    color: "transparent"
    layer.enabled: true
@@ -360,11 +360,11 @@ Rectangle {
                        height: 24
                        radius: 20
                        closeButtonVisible: false
-                        asset.emoji: model.emoji
-                        asset.width: 24
-                        asset.height: 24
-                        asset.color: "transparent"
-                        asset.isLetterIdenticon: true
+                        icon.emoji: model.emoji
+                        icon.height: 24
+                        icon.width: icon.height
+                        icon.color: "transparent"
+                        icon.isLetterIdenticon: true
                        title: model.name
                        titleText.font.pixelSize: 13
                        titleText.color: d.fontColor
@@ -1,50 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-
-Item {
-    id: root
-
-    property string filterString
-    property bool showOnlySelected: false
-    property bool active: true
-
-    property alias model: repeater.model
-    property alias contentWidth: flow.width
-
-    readonly property int itemsWidth: {
-        let result = 0;
-        for (let i = 0; i < repeater.count; ++i) {
-            result +=  flow.spacing + repeater.itemAt(i).width;
-        }
-        return result;
-    }
-
-    signal clicked(var item)
-
-    implicitWidth: itemsWidth
-    implicitHeight: flow.height
-
-    Flow {
-        id: flow
-        anchors.centerIn: parent
-        width: Math.min(parent.width, root.itemsWidth);
-        spacing: 10
-
-        Repeater {
-            id: repeater
-
-            delegate: StatusCommunityTag {
-                emoji: model.emoji
-                name: model.name
-                visible: (root.showOnlySelected ? model.selected : !model.selected) &&
-                         (filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1)
-                width: visible ? implicitWidth : -flow.spacing
-                height: visible ? implicitHeight : 0
-                removable: root.showOnlySelected && root.active
-                onClicked: root.clicked(model)
-            }
-        }
-    }
-}
@@ -6,17 +6,19 @@ import StatusQ.Core.Theme 0.1
 Row {
    id: root

-    property bool isContact: false
+    property bool isMutualContact: false
    property var trustIndicator: StatusContactVerificationIcons.TrustedType.None

-    property StatusAssetSettings mutualConnectionIcon: StatusAssetSettings {
+    property StatusIconSettings mutualConnectionIcon: StatusIconSettings {
        name: "tiny/tiny-contact"
        color: Theme.palette.indirectColor1
        width: dummyImage.width
        height: dummyImage.height
-        bgWidth: 10
-        bgHeight: 10
-        bgColor: Theme.palette.primaryColor1
+        background: StatusIconBackgroundSettings {
+            width: 10
+            height: 10
+            color: Theme.palette.primaryColor1
+        }
        // Only used to get implicit width and height from the actual image
        property Image dummyImage: Image {
            source: mutualConnectionIcon.name ? "../../assets/img/icons/" + mutualConnectionIcon.name + ".svg": ""
@@ -24,15 +26,17 @@ Row {
        }
    }

-    property StatusAssetSettings trustContactIcon: StatusAssetSettings {
+    property StatusIconSettings trustContactIcon: StatusIconSettings {
        // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
        name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract"
        color: Theme.palette.indirectColor1
        width: dummyImage.width
        height: dummyImage.height
-        bgWidth: 10
-        bgHeight: 10
-        bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
+        background: StatusIconBackgroundSettings {
+            width: 10
+            height: 10
+            color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
+        }
        // Only used to get implicit width and height from the actual image
        property Image dummyImage: Image {
            source: trustContactIcon.name ? "../../assets/img/icons/" + trustContactIcon.name + ".svg": ""
@@ -47,29 +51,29 @@ Row {
    }

    spacing: 4
-    visible: root.isContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
+    visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)

    StatusRoundIcon {
-        visible: root.isContact
-        asset.name: root.mutualConnectionIcon.name
-        asset.width: root.mutualConnectionIcon.width
-        asset.height: root.mutualConnectionIcon.height
-        asset.rotation: root.mutualConnectionIcon.rotation
-        asset.color: root.mutualConnectionIcon.color
-        asset.bgColor: root.mutualConnectionIcon.bgColor
-        asset.bgWidth: root.mutualConnectionIcon.bgWidth
-        asset.bgHeight: root.mutualConnectionIcon.bgHeight
+        visible: root.isMutualContact
+        icon.name: root.mutualConnectionIcon.name
+        icon.width: root.mutualConnectionIcon.width
+        icon.height: root.mutualConnectionIcon.height
+        icon.rotation: root.mutualConnectionIcon.rotation
+        icon.color: root.mutualConnectionIcon.color
+        icon.background.color: root.mutualConnectionIcon.background.color
+        icon.background.width: root.mutualConnectionIcon.background.width
+        icon.background.height: root.mutualConnectionIcon.background.height
    }

    StatusRoundIcon {
        visible: root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None
-        asset.name: root.trustContactIcon.name
-        asset.width: root.trustContactIcon.width
-        asset.height: root.trustContactIcon.height
-        asset.rotation: root.trustContactIcon.rotation
-        asset.color: root.trustContactIcon.color
-        asset.bgColor: root.trustContactIcon.bgColor
-        asset.bgWidth: root.trustContactIcon.bgWidth
-        asset.bgHeight: root.trustContactIcon.bgHeight
+        icon.name: root.trustContactIcon.name
+        icon.width: root.trustContactIcon.width
+        icon.height: root.trustContactIcon.height
+        icon.rotation: root.trustContactIcon.rotation
+        icon.color: root.trustContactIcon.color
+        icon.background.color: root.trustContactIcon.background.color
+        icon.background.width: root.trustContactIcon.background.width
+        icon.background.height: root.trustContactIcon.background.height
    }
 }
@@ -1,42 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-StatusBaseText {
-    id: root
-
-    property int previousMessageIndex: -1
-    property double previousMessageTimestamp
-    property double messageTimestamp
-
-    font.pixelSize: 13
-    color: Theme.palette.baseColor1
-    horizontalAlignment: Text.AlignHCenter
-
-    text: {
-        if (previousMessageIndex === -1)
-            return "";
-
-        const currentMsgDate = new Date(messageTimestamp);
-        const prevMsgDate = new Date(previousMessageTimestamp);
-
-        if (!!prevMsgDate && currentMsgDate.getDay() === prevMsgDate.getDay())
-            return "";
-
-        const now = new Date();
-        if (now.getFullYear() == currentMsgDate.getFullYear() && now.getMonth() == currentMsgDate.getMonth() && now.getDate() == currentMsgDate.getDate())
-            return qsTr("Today");
-
-        const yesterday = new Date();
-        yesterday.setDate(now.getDate()-1);
-        if (yesterday.getFullYear() == currentMsgDate.getFullYear() && yesterday.getMonth() == currentMsgDate.getMonth() && yesterday.getDate() == currentMsgDate.getDate())
-            return qsTr("Yesterday");
-
-        // FIXME Qt6: replace with Intl.DateTimeFormat
-        const monthName = Qt.locale().standaloneMonthName(currentMsgDate.getMonth(), Locale.LongFormat)
-        if (now.getFullYear() > currentMsgDate.getFullYear())
-            return "%1 %2, %3".arg(monthName).arg(currentMsgDate.getDate()).arg(currentMsgDate.getFullYear())
-        return "%1, %2".arg(monthName).arg(currentMsgDate.getDate())
-    }
-}
@@ -1,184 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import Qt.labs.calendar 1.0
-
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-/*!
-   \qmltype StatusDatePicker
-   \inherits StatusQ.Controls.StatusComboBox
-   \inqmlmodule StatusQ.Components
-   \since StatusQ.Components 0.1
-   \brief Displays a date picker based on a combobox with a calendar popup
-
-   The \c StatusDatePicker displays a date picker based on a combobox with a calendar popup.
-   The property \p selectedDate reflects the currently chosen date (defaults to today).
-
-   For a list of components available see StatusQ.
-*/
-StatusComboBox {
-    id: root
-
-    /*!
-       \qmlproperty string StatusDatePicker::dateFormat
-
-       This property specifies how the selected date will be displayed to the user.
-       By default it is current locale's short date format. For a list of available types
-       and formatting characters, see https://doc.qt.io/qt-5/qdate.html#toString-2
-    */
-    property string dateFormat: Qt.locale().dateFormat(Locale.ShortFormat)
-
-    /*!
-       \qmlproperty date StatusDatePicker::selectedDate
-
-       This property holds the currently selected date.
-       \sa QtQml.Date
-    */
-    property alias selectedDate: d.selectedDate
-
-    QtObject {
-        id: d
-        property date selectedDate: new Date()
-    }
-
-    control.delegate: null
-    control.displayText: root.selectedDate.toLocaleDateString(Qt.locale(), root.dateFormat)
-    control.popup.horizontalPadding: 8
-
-    control.popup.onAboutToShow: {
-        // always open the popup showing the last (currently) selected date
-        grid.year = d.selectedDate.getFullYear()
-        grid.month = d.selectedDate.getMonth()
-    }
-
-    control.popup.contentItem: Item {
-        property alias grid: grid
-        GridLayout {
-            anchors.fill: parent
-            columns: 2
-
-            RowLayout {
-                Layout.fillWidth: true
-                Layout.columnSpan: 2
-                spacing: 0
-                StatusFlatButton {
-                    leftPadding: 8
-                    rightPadding: 8
-                    text: "<<"
-                    onClicked: grid.year = grid.year - 1
-                    StatusToolTip {
-                        text: qsTr("Previous year")
-                        visible: parent.hovered
-                    }
-                }
-                StatusFlatButton {
-                    leftPadding: 8
-                    rightPadding: 8
-                    text: "<"
-                    onClicked: {
-                        // switch to previous month (and optionally prev year in January)
-                        const date = new Date(grid.year, grid.month)
-                        date.setMonth(date.getMonth() - 1)
-                        grid.month = date.getMonth()
-                        grid.year = date.getFullYear()
-                    }
-                    StatusToolTip {
-                        text: qsTr("Previous month")
-                        visible: parent.hovered
-                    }
-                }
-                StatusFlatButton {
-                    Layout.fillWidth: true
-                    text: grid.title
-                    font.pixelSize: 18
-                    font.weight: Font.Medium
-                    onClicked: {
-                        const date = new Date()
-                        grid.month = date.getMonth()
-                        grid.year = date.getFullYear()
-                    }
-                    StatusToolTip {
-                        text: qsTr("Show current month")
-                        visible: parent.hovered
-                    }
-                }
-                StatusFlatButton {
-                    leftPadding: 8
-                    rightPadding: 8
-                    text: ">"
-                    onClicked: {
-                        // switch to next month (and optionally next year in December)
-                        const date = new Date(grid.year, grid.month)
-                        date.setMonth(date.getMonth() + 1)
-                        grid.month = date.getMonth()
-                        grid.year = date.getFullYear()
-                    }
-                    StatusToolTip {
-                        text: qsTr("Next month")
-                        visible: parent.hovered
-                    }
-                }
-                StatusFlatButton {
-                    leftPadding: 8
-                    rightPadding: 8
-                    text: ">>"
-                    onClicked: grid.year = grid.year + 1
-                    StatusToolTip {
-                        text: qsTr("Next year")
-                        visible: parent.hovered
-                    }
-                }
-            }
-
-            DayOfWeekRow {
-                Layout.row: 1
-                Layout.column: 1
-                Layout.fillWidth: true
-                delegate: StatusBaseText {
-                    text: model.shortName
-                    color: Theme.palette.directColor3
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
-            WeekNumberColumn {
-                id: weekColumn
-                month: grid.month
-                year: grid.year
-                Layout.fillHeight: true
-                delegate: StatusBaseText {
-                    text: model.weekNumber
-                    color: Theme.palette.directColor3
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
-            MonthGrid {
-                id: grid
-                month: d.selectedDate.getMonth()
-                year: d.selectedDate.getFullYear()
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                delegate: StatusFlatButton {
-                    readonly property bool selected: d.selectedDate.getFullYear() === model.year &&
-                                                     d.selectedDate.getMonth() === model.month &&
-                                                     d.selectedDate.getDate() === model.day
-                    opacity: model.month === grid.month ? 1 : 0.5
-                    text: model.day
-                    textColor: selected ? Theme.palette.primaryColor1 : Theme.palette.directColor1
-                    font.bold: selected || model.today
-                    onClicked: {
-                        d.selectedDate = model.date
-                        root.control.popup.close()
-                    }
-                }
-            }
-        }
-    }
-}
@@ -10,7 +10,7 @@ Rectangle {
    property string subTitle: ""
    property alias subTitleComponent: statusDescriptionListItemSubTitle
    property string value: ""
-    property StatusAssetSettings asset: StatusAssetSettings {
+    property StatusIconSettings icon: StatusIconSettings {
        width: 23
        height: 23
    }
@@ -59,7 +59,7 @@ Rectangle {

        StatusFlatRoundButton {
            id: statusFlatRoundButton
-            visible: !!statusDescriptionListItem.asset.name
+            visible: !!statusDescriptionListItem.icon.name
            anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
            anchors.left: statusDescriptionListItemSubTitle.right
            anchors.leftMargin: 4
@@ -67,9 +67,9 @@ Rectangle {
            width: 32
            height: 32

-            icon.name: statusDescriptionListItem.asset.name
-            icon.width: statusDescriptionListItem.asset.width
-            icon.height: statusDescriptionListItem.asset.height
+            icon.name: statusDescriptionListItem.icon.name
+            icon.width: statusDescriptionListItem.icon.width
+            icon.height: statusDescriptionListItem.icon.height

            StatusToolTip {
                id: statusToolTip
@@ -6,7 +6,7 @@ Image {
    id: root

    property string emojiId: ""
-
+    
    width: 14
    height: 14
    sourceSize.width: width
@@ -13,19 +13,24 @@ Rectangle {
    property alias button: button
    property alias expandableComponent: expandableRegion.sourceComponent
    property alias expandableItem: expandableRegion.item
-    property bool separatorVisible: true

    property int type: StatusExpandableItem.Type.Primary
    property bool expandable: true
    property bool expanded: false

-    property StatusAssetSettings asset: StatusAssetSettings {
-        width: !statusExpandableItem.asset.isImage ? 24 : 40
-        height: !statusExpandableItem.asset.isImage ? 24 : 40
+    property StatusIconSettings icon: StatusIconSettings {
+        width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
+        height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
        color: Theme.palette.directColor1
-        bgWidth: 32
-        bgHeight: 32
-        bgColor: Theme.palette.primaryColor2
+        background: StatusIconBackgroundSettings {
+            width: 32
+            height: 32
+            color: Theme.palette.primaryColor2
+        }
+    }
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
    }

    enum Type {
@@ -50,7 +55,7 @@ Rectangle {
        height: 1

        color: Theme.palette.baseColor2
-        visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) && separatorVisible
+        visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
    }


@@ -58,7 +63,7 @@ Rectangle {
        id: header
        anchors.top: parent.top
        width: parent.width
-        height: statusExpandableItem.type === StatusExpandableItem.Type.Tertiary ? 40 : 64
+        height: 64
        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
        color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"

@@ -68,7 +73,8 @@ Rectangle {
            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
            anchors.left: parent.left
            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
-            asset: statusExpandableItem.asset
+            image: statusExpandableItem.image
+            icon: statusExpandableItem.icon
            name: primaryText.text
            active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
        }
@@ -79,14 +85,14 @@ Rectangle {
                        (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
            anchors.left: identicon.active ? identicon.right : parent.left
-            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : !identicon.active ? 0 : 16
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16

            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined

-            width: !!additionalText.text ? (button.visible ? parent.width - asset.bgWidth - button.width - additionalText.contentWidth - 110 :
-                                                          parent.width - asset.bgWidth - additionalText.contentWidth - 110) :
-                                        (button.visible ? parent.width - asset.bgWidth - button.width - 70 :
-                                                          parent.width - asset.bgWidth - 70)
+            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
+                                                          parent.width - icon.background.width - additionalText.contentWidth - 110) :
+                                        (button.visible ? parent.width - icon.background.width - button.width - 70 :
+                                                          parent.width - icon.background.width - 70)

            font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
            font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
@@ -175,7 +181,7 @@ Rectangle {
    Loader {
        id: expandableRegion
        anchors.top: header.bottom
-        anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 24 : 16
+        anchors.topMargin: 16
        anchors.left: parent.left
        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
        anchors.right: parent.right
@@ -196,7 +202,7 @@ Rectangle {
        State {
            name: "EXPANDED"
            PropertyChanges {target: expandImage; icon: "chevron-up"}
-            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height}
+            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
            PropertyChanges {target: expandableRegion; visible: true}
        },
        State {
@@ -211,12 +217,12 @@ Rectangle {
        Transition {
            from: "COLLAPSED"
            to: "EXPANDED"
-            NumberAnimation { properties: "height"; duration: 200;}
+            NumberAnimation { properties: "height"; duration: 200 }
        },
        Transition {
            from: "EXPANDED"
            to: "COLLAPSED"
-            NumberAnimation { properties: "height"; duration: 200;}
+            NumberAnimation { properties: "height"; duration: 200 }
        }
    ]
 }
@@ -3,7 +3,6 @@ import QtQuick.Layouts 1.14

 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1

 /*!
    \qmltype StatusImageCropPanel
@@ -128,15 +127,12 @@ Item {
        id: mainLayout

        anchors.fill: parent
-        spacing: 1

        Item {
            id: cropSpaceItem

            Layout.fillWidth: true
            Layout.fillHeight: true
-            Layout.leftMargin: 10
-            Layout.rightMargin: 10

            clip: true

@@ -146,7 +142,6 @@ Item {
                anchors.top: parent.top
                anchors.right: cropEditor.left
                anchors.bottom: parent.bottom
-                anchors.bottomMargin: -1
                color: wallColor
                opacity: wallTransparency
                z: cropEditor.z + 1
@@ -165,9 +160,8 @@ Item {
            StatusImageCrop {
                id: cropEditor
                anchors.centerIn: parent
-                readonly property bool cropARSmall: aspectRatio < cropSpaceItem.width/cropSpaceItem.height
-                width: cropARSmall ? cropSpaceItem.height * aspectRatio : cropSpaceItem.width - root.margins * 2
-                height: cropARSmall ? cropSpaceItem.height - root.margins * 2 : cropSpaceItem.width / aspectRatio
+                width: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height * aspectRatio : cropSpaceItem.width - root.margins * 2
+                height: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height - root.margins * 2 : cropSpaceItem.width / aspectRatio
            }

            Rectangle {
@@ -176,7 +170,6 @@ Item {
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
-                anchors.bottomMargin: -1
                color: wallColor
                opacity: wallTransparency
                z: cropEditor.z + 1
@@ -188,7 +181,6 @@ Item {
                anchors.top: cropEditor.bottom
                anchors.right: rightOverlay.left
                anchors.bottom: parent.bottom
-                anchors.bottomMargin: -1
                color: wallColor
                opacity: wallTransparency
                z: cropEditor.z + 1
@@ -198,7 +190,6 @@ Item {
            Canvas {
                visible: root.enableCheckers
                anchors.fill: parent
-                anchors.bottomMargin: -1
                onPaint: {
                    var ctx = getContext("2d")
                    for(let xI = 0; xI < Math.ceil(width/10); xI++) {
@@ -216,7 +207,6 @@ Item {
                anchors.fill: parent

                enabled: root.interactive
-                cursorShape: Qt.SizeAllCursor

                property var lastDragPoint: null
                onReleased: lastDragPoint = null
@@ -248,20 +238,17 @@ Item {

        RowLayout {
            visible: root.interactive
-            spacing: 10

            StatusIcon {
                icon: "remove-circle"
-                color: Theme.palette.baseColor1

-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: 24
-                Layout.preferredHeight: 24
+                Layout.preferredWidth: 20
+                Layout.preferredHeight: 20
            }
            StatusSlider {
                Layout.fillWidth: true
-                Layout.topMargin: 10
-                Layout.bottomMargin: 10
+                Layout.topMargin: 20
+                Layout.bottomMargin: 25
                Layout.alignment: Qt.AlignVCenter

                enabled: root.interactive
@@ -274,11 +261,9 @@ Item {
            }
            StatusIcon {
                icon: "add-circle"
-                color: Theme.palette.baseColor1

-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: 24
-                Layout.preferredHeight: 24
+                Layout.preferredWidth: 20
+                Layout.preferredHeight: 20
            }
        }
    }
@@ -1,239 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import QtQuick.Controls 2.14 as QC
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Utils 0.1
-
-/*!
-   \qmltype StatusItemSelector
-   \inherits Rectangle
-   \inqmlmodule StatusQ.Components
-   \since StatusQ.Components 0.1
-   \brief It allows to add items and display them as a tag item with an image and text. It also allows to store and display logical `and` / `or` operators into the list. Inherits \l{https://doc.qt.io/qt-6/qml-qtquick-rectangle.html}{Item}.
-
-   The \c StatusItemSelector is populated with a data model. The data model is commonly a JavaScript array or a ListModel object with specific expected roles.
-
-   Example of how the component looks like:
-   \image status_item_selector.png
-
-   Example of how to use it:
-   \qml
-        StatusItemSelector {
-            icon: Style.svg("contact_verified")
-            title: qsTr("Who holds")
-            defaultItemText: qsTr("Example: 10 SNT")
-            andOperatorText: qsTr("and")
-            orOperatorText: qsTr("or")
-
-            CustomPopup {
-                id: popup
-            }
-
-            addButton.onClicked: {
-                popup.x = mouse.x
-                popup.y = mouse.y
-                popup.open()
-            }
-        }
-   \endqml
-   For a list of components available see StatusQ.
-*/
-Rectangle {
-    id: root
-    /*!
-       \qmlproperty string StatusItemSelector::icon
-       This property holds the icon name for the icon represented on top of the component as a title icon.
-    */
-    property string icon
-    /*!
-       \qmlproperty int StatusItemSelector::iconSize
-       This property holds the icon size for the icon represented on top of the component as a title icon.
-    */
-    property int iconSize: 18
-    /*!
-       \qmlproperty string StatusItemSelector::title
-       This property holds the titel shown on top of the component.
-    */
-    property string title
-    /*!
-       \qmlproperty string StatusItemSelector::defaultItemText
-       This property holds the default item text shown when the list of items is empty.
-    */
-    property string defaultItemText
-    /*!
-       \qmlproperty url StatusItemSelector::defaultItemImageSource
-       This property holds the default item icon shown when the list of items is empty.
-    */
-    property url defaultItemImageSource: ""
-    /*!
-       \qmlproperty StatusRoundButton StatusItemSelector::addButton
-       This property holds an alias to the `add` button.
-    */
-    readonly property alias addButton: addItemButton
-    /*!
-       \qmlproperty ListModel StatusItemSelector::itemsModel
-       This property holds the data that will be populated in the items selector.
-
-       Here an example of the model roles expected:
-       \qml
-            itemsModel: ListModel {
-            ListElement {
-                text: "Socks"
-                imageSource: "qrc:imports/assets/png/tokens/SOCKS.png"
-                operator: Utils.Operator.None
-            }
-            ListElement {
-                text: "ZRX"
-                imageSource: "qrc:imports/assets/png/tokens/ZRX.png"
-                operator: Utils.Operator.Or
-            }
-        }
-       \endqml
-    */
-    property var itemsModel: ListModel { }
-    /*!
-       \qmlproperty bool StatusItemSelector::useIcons
-       This property determines if the imageSource role from the model will be handled as
-       an image or an icon.
-    */
-    property bool useIcons: false
-    /*!
-       \qmlproperty string StatusItemSelector::andOperatorText
-       This property holds the string text representation for an `AND` logical operator.
-    */
-    property string andOperatorText: qsTr("and")
-    /*!
-       \qmlproperty string StatusItemSelector::orOperatorText
-       This property holds the string text representation for an `OR` logical operator.
-    */
-    property string orOperatorText: qsTr("or")
-    /*!
-       \qmlsignal StatusItemSelector::itemClicked
-       This signal is emitted when the item is clicked.
-    */
-    signal itemClicked(var item, int index, var mouse)
-
-
-    QtObject {
-        id: d
-
-        function operatorTextFormat(operator) {
-            switch(operator) {
-                case Utils.Operators.And:
-                    return root.andOperatorText
-                case Utils.Operators.Or:
-                    return root.orOperatorText
-                case Utils.Operators.None:
-                    return ""
-            }
-        }
-    }
-
-    color: Theme.palette.baseColor4
-    implicitHeight: columnLayout.implicitHeight + columnLayout.anchors.topMargin + columnLayout.anchors.bottomMargin
-    implicitWidth: 560
-    radius: 16
-    clip: true
-
-    ColumnLayout {
-        id: columnLayout
-        anchors.top: parent.top
-        anchors.topMargin: 12
-        anchors.bottomMargin: anchors.topMargin
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        spacing: 12
-        clip: true
-        RowLayout {
-            id: headerRow
-            spacing: 8
-            Image {
-                sourceSize.width: width || undefined
-                sourceSize.height: height || undefined
-                fillMode: Image.PreserveAspectFit
-                mipmap: true
-                antialiasing: true
-                width: root.iconSize
-                height: width
-                source: root.icon
-            }
-            StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
-                text: root.title
-                color: Theme.palette.directColor1
-                font.pixelSize: 17
-            }
-        }        
-        Flow {
-            id: flow
-            Layout.fillWidth: true
-            spacing: 6
-            StatusListItemTag {
-                visible: !itemsModel || itemsModel.count === 0
-                title: root.defaultItemText
-                asset.name: root.defaultItemImageSource
-                asset.isImage: true
-                color: Theme.palette.baseColor2
-                closeButtonVisible: false
-                titleText.color: Theme.palette.baseColor1
-                titleText.font.pixelSize: 15
-            }
-            Repeater {
-                model: itemsModel
-
-                RowLayout {
-                    spacing: flow.spacing
-
-                    StatusBaseText {                        
-                        visible: model.operator !== Utils.Operators.None
-                        Layout.alignment: Qt.AlignVCenter
-                        text: d.operatorTextFormat(model.operator)
-                        color: Theme.palette.primaryColor1
-                        font.pixelSize: 17
-                        MouseArea {
-                            anchors.fill: parent
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                // Switch operator
-                                if(model.operator === Utils.Operators.And)
-                                    model.operator = Utils.Operators.Or
-                                else
-                                    model.operator = Utils.Operators.And
-                            }
-                        }
-                    }
-                    StatusListItemTag {
-                        title: model.text
-                        asset.name: model.imageSource
-                        asset.isImage: !root.useIcons
-                        asset.bgColor: "transparent"
-                        color: Theme.palette.primaryColor3
-                        closeButtonVisible: false
-                        titleText.color: Theme.palette.primaryColor1
-                        titleText.font.pixelSize: 15
-
-                        MouseArea {
-                            anchors.fill: parent
-                            cursorShape: Qt.PointingHandCursor
-                            acceptedButtons: Qt.LeftButton | Qt.RightButton
-                            onClicked: root.itemClicked(parent, model.index, mouse)
-                        }
-                    }
-                }
-            }
-            StatusRoundButton {
-                id: addItemButton
-                implicitHeight: 32
-                implicitWidth: implicitHeight
-                height: width
-                type: StatusRoundButton.Type.Secondary
-                icon.name: "add"
-            }
-        }
-    }
-}
@@ -5,10 +5,6 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Animations 0.1
-import QtGraphicalEffects 1.14
-
-import "private"

 Rectangle {
    id: statusListItem
@@ -20,45 +16,46 @@ Rectangle {
    property string subTitle: ""
    property string tertiaryTitle: ""
    property string label: ""
-    property string titleTextIcon: ""
    property real leftPadding: 16
    property real rightPadding: 16
+    property bool enabled: true
    property bool highlighted: false
    property bool propagateTitleClicks: true
    property int type: StatusListItem.Type.Primary
    property list<Item> components
    property var bottomModel: []
    property Component bottomDelegate
-    property alias tagsModel: tagsRepeater.model
+    property var tagsModel: []
    property Component tagsDelegate
-    property var inlineTagModel: []
-    property Component inlineTagDelegate
-    property bool loading: false
-    property bool loadingFailed: false

-    property StatusAssetSettings asset: StatusAssetSettings {
-        height: isImage ? 40 : 20
-        width: isImage ? 40 : 20
+    property StatusIconSettings icon: StatusIconSettings {
+        height: isLetterIdenticon ? 40 : 20
+        width: isLetterIdenticon ? 40 : 20
        rotation: 0
        isLetterIdenticon: false
        letterSize: 21
        charactersLen: 1
-        color: isLetterIdenticon ? bgColor : type === StatusListItem.Type.Danger ?
+        color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
            Theme.palette.dangerColor1 : Theme.palette.primaryColor1
-        bgWidth: 40
-        bgHeight: 40
-        bgColor: {
-            if (sensor.containsMouse) {
-                return type === StatusListItem.Type.Secondary ||
-                        type === StatusListItem.Type.Danger ? "transparent" :
-                                                              Theme.palette.primaryColor3
+        background: StatusIconBackgroundSettings {
+            width: 40
+            height: 40
+            color: {
+                if (sensor.containsMouse) {
+                    return type === StatusListItem.Type.Secondary ||
+                           type === StatusListItem.Type.Danger ? "transparent" :
+                           Theme.palette.primaryColor3
+                }
+                return type === StatusListItem.Type.Danger ?
+                    Theme.palette.dangerColor3 : Theme.palette.primaryColor3
            }
-            return type === StatusListItem.Type.Danger ?
-                        Theme.palette.dangerColor3 : Theme.palette.primaryColor3
        }
-        imgIsIdenticon: false
    }
-
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+        isIdenticon: false
+    }
    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
        initalAngleRad: 0
        ringPxSize: 1.5
@@ -118,50 +115,36 @@ Rectangle {
    }

    MouseArea {
+        id: sensor
+
+        enabled: statusListItem.enabled
        anchors.fill: parent
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        hoverEnabled: true
+        preventStealing: true
+
        onClicked: {
            statusListItem.clicked(statusListItem.itemId, mouse)
        }
-    }
-
-    MouseArea {
-        id: sensor
-
-        anchors.fill: parent
-        cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
-        acceptedButtons: Qt.NoButton
-        hoverEnabled: true

        StatusSmartIdenticon {
            id: iconOrImage
            anchors.left: parent.left
            anchors.leftMargin: statusListItem.leftPadding
-            anchors.verticalCenter: parent.verticalCenter
-            visible: !iconOrImageLoadingOverlay.visible
-            asset: statusListItem.asset
+            anchors.top: parent.top
+            anchors.topMargin: 12
+            image: statusListItem.image
+            icon: statusListItem.icon
            name: statusListItem.title
-            active: statusListItem.asset.isLetterIdenticon ||
-                    !!statusListItem.asset.name ||
-                    !!statusListItem.asset.emoji
+            active: statusListItem.icon.isLetterIdenticon ||
+                    !!statusListItem.icon.name ||
+                    !!statusListItem.image.source.toString() ||
+                    !!statusListItem.icon.emoji
            badge.border.color: statusListItem.color
            ringSettings: statusListItem.ringSettings
        }

-        Rectangle {
-            id: iconOrImageLoadingOverlay
-            visible: statusListItem.loading || statusListItem.loadingFailed
-            anchors.fill: iconOrImage
-            radius: width / 2
-            color: statusListItem.loadingFailed ? Theme.palette.dangerColor2 : Theme.palette.baseColor1
-
-            SkeletonAnimation {
-                anchors.fill: parent
-                mask: parent
-                visible: statusListItem.loading && !statusListItem.loadingFailed
-            }
-        }
-
        Item {
            id: statusListItemTitleArea

@@ -176,34 +159,13 @@ Rectangle {
            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
            anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
            anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
-            anchors.rightMargin: Math.max(statusListItem.rightPadding, titleIconsRow.requiredWidth)
+            anchors.rightMargin: statusListItem.rightPadding
            anchors.verticalCenter:  bottomModel.length === 0 ? parent.verticalCenter : undefined

            height: childrenRect.height

-            Rectangle {
-                id: titleLoadingOverlay
-                visible: statusListItem.loading || statusListItem.loadingFailed
-                anchors {
-                    left: statusListItemTitle.left
-                    top: statusListItemTitle.top
-                    bottom: statusListItemTitle.bottom
-                }
-
-                width: Math.max(95, statusListItemTitle.width)
-                radius: 4
-                color: statusListItem.loadingFailed ? Theme.palette.dangerColor2 : Theme.palette.baseColor1
-
-                SkeletonAnimation {
-                    anchors.fill: parent
-                    mask: parent
-                    visible: statusListItem.loading && !statusListItem.loadingFailed
-                }
-            }
-
            StatusBaseText {
                id: statusListItemTitle
-                opacity: titleLoadingOverlay.visible ? 0 : 1
                text: statusListItem.title
                font.pixelSize: 15
                height: visible ? contentHeight : 0
@@ -226,16 +188,6 @@ Rectangle {
                    }
                }

-                StatusIcon {
-                    width: visible ? 12 : 0
-                    height: visible ? 12 : 0
-                    visible: !!statusListItem.titleTextIcon
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: parent.left
-                    anchors.leftMargin: statusListItemTitle.contentWidth + 6
-                    icon: statusListItem.titleTextIcon
-                }
-
                StatusToolTip {
                    id: statusListItemTitleTooltip
                    text: statusListItemTitle.text
@@ -272,76 +224,26 @@ Rectangle {

            Loader {
                id: titleIconsRow
-
-                readonly property int requiredWidth: active ? width + anchors.leftMargin * 2 : 0
-
                anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
                anchors.verticalCenter: statusListItemTitle.verticalCenter
                anchors.leftMargin: 4
            }

-            RowLayout {
-                id: statusListItemSubtitleTagsRow
+            StatusBaseText {
+                id: statusListItemSubTitle
                anchors.top: statusListItemTitle.bottom
                width: parent.width
-                spacing: 4
-
-                StatusBaseText {
-                    id: statusListItemSubTitle
-                    objectName: "statusListItemSubTitle"
-
-                    Layout.alignment: Qt.AlignVCenter
-                    Layout.preferredWidth: inlineTagModelRepeater.count > 0 ? contentWidth : parent.width
-
-                    text: statusListItem.subTitle
-                    font.pixelSize: 15
-                    color: statusListItem.loadingFailed ? Theme.palette.dangerColor1
-                                                        : !statusListItem.enabled || !statusListItem.tertiaryTitle
-                                                          ? Theme.palette.baseColor1
-                                                          : Theme.palette.directColor1
-                    visible: !!statusListItem.subTitle
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                }
-
-                StatusBaseText {
-                    id: dot
-                    Layout.alignment: Qt.AlignVCenter
-                    Layout.topMargin: -48
-
-                    text: "."
-                    font.pixelSize: 40
-                    color: Theme.palette.baseColor1
-                    lineHeightMode: Text.FixedHeight
-                    lineHeight: 24
-
-                    visible: inlineTagModelRepeater.count > 0
-                }
-
-                StatusScrollView {
-                    id: inlineTagModelRepeaterRow
-                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignVCenter
-                    Layout.preferredHeight: row.height
-                    contentHeight: row.height
-                    contentWidth: row.width
-                    padding: 0
-                    clip: true
-                    interactive: false
-                    Row {
-                        id: row
-                        spacing: 4
-                        Repeater {
-                            id: inlineTagModelRepeater
-                            model: inlineTagModel
-                            delegate: inlineTagDelegate
-                        }
-                    }
-                }
+                text: statusListItem.subTitle
+                font.pixelSize: 15
+                color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                height: visible ? contentHeight : 0
+                visible: !!statusListItem.subTitle
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            }

            StatusBaseText {
                id: statusListItemTertiaryTitle
-                anchors.top: statusListItemSubtitleTagsRow.bottom
+                anchors.top: statusListItemSubTitle.bottom
                width: parent.width
                height: visible ? contentHeight : 0
                text: statusListItem.tertiaryTitle
@@ -358,24 +260,16 @@ Rectangle {
                implicitHeight: visible ? 22 : 0
            }

-            ScrollView {
-                visible: tagsRepeater.count > 0
+            Row {
+                id: statusListItemTagsSlotInline
                anchors.top: statusListItemTertiaryTitle.bottom
-                anchors.topMargin: visible? 8 : 0
                width: parent.width
-                height: visible? contentHeight + 12 : contentHeight
+                spacing: 10
                clip: true

-                ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-
-                Row {
-                    id: statusListItemTagsSlotInline
-                    spacing: 10
-
-                    Repeater {
-                        id: tagsRepeater
-                        delegate: tagsDelegate
-                    }
+                Repeater {
+                    model: tagsModel
+                    delegate: tagsDelegate
                }
            }
        }
@@ -400,7 +294,7 @@ Rectangle {
            id: statusListItemLabel
            anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
            anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? 0 : 16
+            anchors.topMargin: bottomModel.length === 0 ? undefined : 16
            anchors.right: statusListItemComponentsSlot.left
            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0

@@ -13,12 +13,17 @@ Control {
    property string primaryText: ""
    property string secondaryText: ""

-    property StatusAssetSettings asset: StatusAssetSettings {
+    property StatusImageSettings image: StatusImageSettings {
+        height: 16
+        width: 16
+        isIdenticon: false
+    }
+    property StatusIconSettings icon: StatusIconSettings {
        height: 16
        width: 16
        isLetterIdenticon: false
+        background: StatusIconBackgroundSettings {}
        color: "transparent"
-        imgIsIdenticon: false
    }

    background: Rectangle {
@@ -38,22 +43,22 @@ Control {
            anchors.horizontalCenterOffset: -spacing
            spacing: 2
            StatusRoundedImage {
-                implicitWidth: root.asset.width
-                implicitHeight: root.asset.height
-                visible: !root.asset.isLetterIdenticon
-                image.source: root.asset.name
+                implicitWidth: root.image.width
+                implicitHeight: root.image.height
+                visible: !root.icon.isLetterIdenticon
+                image.source: root.image.source
                border.color: Theme.palette.baseColor1
-                border.width: root.asset.imgIsIdenticon ? 1 : 0
+                border.width: root.image.isIdenticon ? 1 : 0
            }
            StatusLetterIdenticon {
-                implicitWidth: root.asset.width
-                implicitHeight: root.asset.width
+                implicitWidth: root.icon.width
+                implicitHeight: root.icon.width
                letterSize: 11
-                visible: root.asset.isLetterIdenticon
-                color: root.asset.color
+                visible: root.icon.isLetterIdenticon
+                color: root.icon.color
                name: root.primaryText
-                emoji: root.asset.emoji
-                emojiSize: root.asset.emojiSize
+                emoji: root.icon.emoji
+                emojiSize: root.icon.emojiSize
            }
            StatusBaseText {
                font.weight: Font.Medium
@@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1

 Rectangle {
    id: root
-    implicitWidth: layout.width + layout.anchors.margins
-    implicitHeight: 30
+    width: layout.width + layout.anchors.margins
+    height: 30
    color: Theme.palette.primaryColor3
    radius: 15

@@ -15,19 +15,26 @@ Rectangle {

    property string title: ""
    property bool closeButtonVisible: true
-    signal clicked(var mouse)
+    signal clicked()

-    property StatusAssetSettings asset: StatusAssetSettings {
+    property StatusImageSettings image: StatusImageSettings {
+        width: 20
+        height: 20
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
        height: 20
        width: 20
        rotation: 0
        isLetterIdenticon: false
        letterSize: 10
        color: Theme.palette.primaryColor1
-        bgWidth: 15
-        bgHeight: 15
-        bgColor: Theme.palette.primaryColor3
-        imgIsIdenticon: false
+        background: StatusIconBackgroundSettings {
+            width: 15
+            height: 15
+            color: Theme.palette.primaryColor3
+        }
    }

    RowLayout {
@@ -38,10 +45,12 @@ Rectangle {
        StatusSmartIdenticon {
            id: iconOrImage
            Layout.leftMargin: 4
-            asset: root.asset
+            image: root.image
+            icon: root.icon
            name: root.title
-            active: root.asset.isLetterIdenticon ||
-                    !!root.asset.name
+            active: root.icon.isLetterIdenticon ||
+                    !!root.icon.name ||
+                    !!root.image.source.toString()
        }

        StatusBaseText {
@@ -61,7 +70,9 @@ Rectangle {
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
-                onClicked: root.clicked(mouse)
+                onClicked: {
+                    root.clicked()
+                }
            }
        }
    }
@@ -6,8 +6,6 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1

-import SortFilterProxyModel 0.2
-
 /*!
   \qmltype StatusListPicker
   \inherits Item
@@ -17,7 +15,7 @@ import SortFilterProxyModel 0.2

   The \c StatusListPicker is populated with a data model. The data model is commonly a JavaScript array or a ListModel object.

-   StatusListPicker can be made as a single or multiple options picker by setting its StatusListPicker::multiSelection property properly.
+   StatusListPicker can be made as a single or multiple options picker by setting its StatusListPicker::multiSelection property properly or will be auto-set if the model contains / provides more than one selected items.
   The StatusPickerButton text holds the text of the current item selected in the list picker. If there is more than one item selected, a string composed will be displayed.
   The drop-down list incorporates a searcher by the following model roles: `name` or / and `shortName`.

@@ -46,7 +44,6 @@ Item {
       This property holds the data that will be populated in the list picker.

       NOTE: This model property should not change so it is an in / out property where the selected role will be dynamically changed according to user actions.
-       NOTE: Be sure provided model is compatible with StatusListPicker::multiSelection property.

       Here an example of the model roles expected:
       \qml
@@ -72,9 +69,7 @@ Item {
        }
       \endqml
    */
-    property var inputList: ListModel { }
-
-    readonly property StatusListPickerProxies proxy: StatusListPickerProxies {}
+    property ListModel inputList: ListModel { }

    /*!
       \qmlproperty string StatusListPicker::searchText
@@ -156,66 +151,94 @@ Item {

    QtObject {
        id: d
+        property var filteredModel: ListModel { }

-        readonly property SortFilterProxyModel selectedItems: SortFilterProxyModel {
-            sourceModel: root.inputList
-            // NOTE: ValueFilter would crash if source model does not contain given role
-            // FIXME: use ValueFilter when its fixed
-            filters: ExpressionFilter {
-                expression: root.proxy.selected(model)
+        // Used to set up component and the needed private properties
+        function initialize() {
+            if(filteredModel.count === 0) {
+                // It is necessary to load the model, not loaded yet!
+                var selected = 0
+                var selectionText = ""
+                for(var i = 0; i < root.inputList.count; i++) {
+                    var item = root.inputList.get(i)
+                    d.filteredModel.append(item)
+                    if(item.selected) selected++;
+                }
+
+                // If the given model has more than one selected elements, the behaviour of the list picker will be as a multiple selector with checkboxes although it is
+                // set in the radiobutton mode. Radiobutton mode is only for mutial-exclusion.
+                if(selected > 1)
+                    multiSelection = true
+
+                // Update selected items text:
+                d.getSelectedItemsText()
            }
        }

-        readonly property string selectedItemsText: {
-            function formatSymbolShortNameText(symbol, shortName) {
-                var formattedText = ""
-                if(root.printSymbol && symbol)
-                    formattedText = symbol + shortName
-                else
-                    formattedText = shortName
-                return formattedText
+        // Used to update model elements given a specific text by filtering them for its `name` and / or `shortName`.
+        function applyFilter(text) {
+            const input = text.toLowerCase()
+            filteredModel.clear()
+            for(var i = 0; i < root.inputList.count; i++) {
+                let item = root.inputList.get(i)
+                if(item.name.toLowerCase().includes(input) || item.shortName.toLowerCase().includes(input))
+                    filteredModel.append(item)
            }
+        }        

+        function formatSymbolShortNameText(symbol, shortName) {
+            var formattedText = ""
+            if(root.printSymbol && symbol)
+                formattedText = symbol + shortName
+            else
+                formattedText = shortName
+            return formattedText
+        }
+
+        function getSelectedItemsText() {
            var res = ""
-            for(var i = 0; i < selectedItems.count; i++) {
-                var item = selectedItems.get(i)
-                if(res != "")
-                    res += ", "
-                res += formatSymbolShortNameText(root.proxy.symbol(item), root.proxy.shortName(item))
+            for(var i = 0; i < root.inputList.count; i++) {
+                var item = root.inputList.get(i)
+                if(item.selected) {
+                    if(res != "")
+                        res += ", "
+                    res += d.formatSymbolShortNameText(item.symbol, item.shortName)
+                }
            }
            return res
        }
+
+        // Used to update the base input list model with the new selected property
+        function updateInputListModel(key, selected, isSingleSelection) {
+            // If it is a single selection we must ensure that when a new key is selected  others are cleared.
+            // It must be done manually because as there is the option of filterning, the model visualized changes
+            // and it could be possible to have a filtered list without an element selected (but in the base model
+            // it is) so, the binding to not selected will not be executed, as in the current filtered model
+            // there are no changes to update, just only the selected one.
+            for(var i = 0; i < root.inputList.count; i++) {
+                if(root.inputList.get(i).key === key) {
+                    root.inputList.get(i).selected = selected
+                }
+                else if(isSingleSelection && selected) {
+                     // Clear all the list
+                    root.inputList.get(i).selected = false
+                }
+            }
+        }
    }

    width: 110
    height: 38

-    Repeater {
-        // Used to update the base input list model with the new selected property
-        // If it is a single selection we must ensure that when a new key is selected others are cleared.
-        id: itemsSelectorHelper
-
-        signal selectItem(var key, bool checked)
-
-        model: root.inputList
-        delegate: Item {
-            Connections {
-                target: itemsSelectorHelper
-                function onSelectItem(key, checked) {
-                    if (root.proxy.key(model) === key) root.proxy.setSelected(model, checked)
-                    else if (!root.multiSelection && checked) root.proxy.setSelected(model, false)
-                }
-            }
-        }
-    }
+    Component.onCompleted: d.initialize()

    StatusPickerButton {
        id: btn
        anchors.fill: parent
        bgColor: Theme.palette.primaryColor3
        contentColor: Theme.palette.primaryColor1
-        text: d.selectedItemsText
-        font.pixelSize: 13
+        text: picker.selectedItemsText
+        textPixelSize: 13
        type: StatusPickerButton.Type.Down

        onClicked: {
@@ -230,6 +253,8 @@ Item {
    Rectangle {
        id: picker

+        property string selectedItemsText: ""
+
        width: content.itemWidth
        height: Math.min(content.contentHeight + content.anchors.topMargin + content.anchors.bottomMargin, root.maxPickerHeight)
        anchors.left: root.menuAlignment === StatusListPicker.MenuAlignment.Left ? btn.left : undefined
@@ -252,23 +277,12 @@ Item {
        }

        ListView {
-            id: content
+            id: content            

            property int itemHeight: 40
            property int itemWidth: 360

-            model: SortFilterProxyModel {
-                sourceModel: root.inputList
-                delayed: true
-                filters: ExpressionFilter {
-                    expression: {
-                        root.searchText // ensure expression is reevaluated when searchText changes
-                        return root.proxy.name(model).toLowerCase().includes(root.searchText.toLowerCase()) ||
-                               root.proxy.shortName(model).toLowerCase().includes(root.searchText.toLowerCase())
-                    }
-                }
-            }
-
+            model: d.filteredModel
            width: itemWidth
            anchors.top: parent.top
            anchors.topMargin: 8
@@ -284,9 +298,9 @@ Item {
                color: Theme.palette.statusPopupMenu.backgroundColor
                z: 3 // Above delegate (z=1) and above section.delegate (z = 2)

-                StatusInput {
+                StatusBaseInput {
                    id: searchInput
-                    maximumHeight: 36
+                    implicitHeight: 36
                    width: content.itemWidth - 2 * 18
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
@@ -294,34 +308,43 @@ Item {
                    bottomPadding: 0
                    placeholderText: root.placeholderSearchText
                    text: root.searchText
-                    input.asset.name: "search"
+                    icon.name: "search"

-                    onTextChanged: root.searchText = text
+                    onTextChanged: {
+                        d.applyFilter(text)
+                        root.searchText = text
+                    }
                }
            }// End of search input item
            delegate: StatusItemPicker {
                width: content.itemWidth
                height: content.itemHeight
                color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent"
-                asset: StatusAssetSettings {
-                    name: root.proxy.imageSource(model) ? root.proxy.imageSource(model) : ""
+                image: StatusImageSettings {
+                    source: model.imageSource ? model.imageSource : ""
                    width: 15
                    height: 15
-                    imgIsIdenticon: false
+                    isIdenticon: false
                }
-                name: root.proxy.name(model)
-                shortName: root.proxy.shortName(model)
+                name: model.name
+                shortName: model.shortName
                selectorType: root.multiSelection ? StatusItemPicker.SelectorType.CheckBox : StatusItemPicker.SelectorType.RadioButton
-                selected: root.proxy.selected(model)
+                selected: model.selected
                radioGroup: radioBtnGroup

                onCheckedChanged: {
-                    if (checked !== root.proxy.selected(model)) {
-                        itemsSelectorHelper.selectItem(root.proxy.key(model), checked)
+                    d.updateInputListModel(model.key, checked, selectorType === StatusItemPicker.SelectorType.RadioButton)
+                    if(selectorType === StatusItemPicker.SelectorType.RadioButton && checked) {
+                        // Update selected item text
+                        picker.selectedItemsText = d.formatSymbolShortNameText(model.symbol, model.shortName)
+                    }
+                    else {
+                        // Update selected items text (multiple selection, text chain).
+                        picker.selectedItemsText = d.getSelectedItemsText()
                    }

                    // Used to notify selected property changes in the specific item picker.
-                    itemPickerChanged(root.proxy.key(model), checked)
+                    itemPickerChanged(model.key, checked)
                }

                MouseArea {
@@ -363,7 +386,7 @@ Item {
            // Not visual element to control mutual-exclusion of radiobuttons that are not sharing the same parent (inside list view)
            ButtonGroup {
                id: radioBtnGroup
-            }
-        }// End of Content
+            }           
+        }// End of Content        
    }// End of Rectangle picker
 }
@@ -1,30 +0,0 @@
-import QtQuick 2.14
-
-/*!
-  Enables StatusListPicker to work with incompatible models.
-   \qml
-        StatusListPicker {
-            id: currencyPicker
-            inputList: ListModel {
-                ListElement { incompatibleA: 0 ... incomatibleZ: false }
-                ListElement { incompatibleA: 1 ... incomatibleZ: false }
-                ListElement { incompatibleA: 2 ... incomatibleZ: false }
-            }
-            proxy { // StatusListPickerProxies
-                key: (model) => model.incompatibleA
-                ...
-                selected: (model) => model.incompatibleZ
-            }
-        }
-   \endqml
-*/
-QtObject {
-    property var key: (model) => model.key
-    property var name: (model) => model.name
-    property var shortName: (model) => model.shortName
-    property var symbol: (model) => model.symbol
-    property var imageSource: (model) => model.imageSource
-    property var category: (model) => model.category
-    property var selected: (model) => model.selected
-    property var setSelected: (model, val) => model.selected = val
-}
@@ -11,7 +11,7 @@ StatusIcon {
        from: 0;
        to: 360;
        duration: 1200
-        running: visible
+        running: true
        loops: Animation.Infinite
    }
 }
@@ -111,7 +111,7 @@ StatusListItem {
    // root object settings:
    title: (root.nickName === "") ? root.userName : root.nickName
    statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
-        isContact: root.isContact
+        isMutualContact: root.isContact
        trustIndicator: {
            if (root.isVerified) return StatusContactVerificationIcons.TrustedType.Verified
            else if (root.isUntrustworthy) return StatusContactVerificationIcons.TrustedType.Untrustworthy
@@ -120,6 +120,7 @@ StatusListItem {
    }
    subTitle: d.composeSubtitile()
    statusListItemSubTitle.font.pixelSize: 10
+    icon.isLetterIdenticon: !root.image.source.toString()
    statusListItemIcon.badge.visible: true
    statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME
    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
@@ -128,8 +129,10 @@ StatusListItem {
    implicitWidth: 256
    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
    leftPadding: 8
-    asset.width: 32
-    asset.height: 32
+    image.width: 32
+    image.height: 32
+    icon.width: 32
+    icon.height: 32
    statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
    statusListItemIcon.anchors.top: undefined
    statusListItemIcon.badge.border.width: 2
@@ -1,16 +1,14 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
-import QtQuick.Controls 2.14

 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
-import StatusQ.Core.Utils 0.1
 import StatusQ.Controls 0.1

 import "./private/statusMessage"

 Rectangle {
-    id: root
+    id: statusMessage

    enum ContentType {
        Unknown = 0,
@@ -23,12 +21,12 @@ Rectangle {
        Invitation = 7
    }

-    property alias quickActions: quickActionsPanel.items
+    property alias messageHeader: messageHeader
+    property alias quickActions:quickActionsPanel.quickActions
    property alias statusChatInput: editComponent.inputComponent
    property alias linksComponent: linksLoader.sourceComponent
-    property alias transcationComponent: transactionBubbleLoader.sourceComponent
-    property alias invitationComponent: invitationBubbleLoader.sourceComponent
-    property alias mouseArea: mouseArea
+    property alias footerComponent: footer.sourceComponent
+    property alias timestamp: messageHeader.timestamp

    property string resendText: ""
    property string cancelButtonText: ""
@@ -37,397 +35,155 @@ Rectangle {
    property string errorLoadingImageText: ""
    property string audioMessageInfoText: ""
    property string pinnedMsgInfoText: ""
-    property string messageAttachments: ""
-    property var reactionIcons: [
-        Emoji.iconSource("❤"),
-        Emoji.iconSource("👍"),
-        Emoji.iconSource("👎"),
-        Emoji.iconSource("🤣"),
-        Emoji.iconSource("😥"),
-        Emoji.iconSource("😠")
-    ]

-    property string messageId: ""
    property bool isAppWindowActive: false
    property bool editMode: false
    property bool isAReply: false
-    property bool isEdited: false
-    property bool isChatBlocked: false
-
-    property bool hasMention: false
-    property bool isPinned: false
-    property string pinnedBy: ""
-    property bool hasExpired: false
-    property double timestamp: 0
-    property var reactionsModel: []
-
-    readonly property bool dateGroupVisible: dateGroupLabel.visible
-    property bool showHeader: true
-    property bool isActiveMessage: false
-    property bool disableHover: false
-    property bool hideQuickActions: false
-    property color overrideBackgroundColor: "transparent"
-    property bool overrideBackground: false
-    property bool profileClickable: true
-    property bool hideMessage: false
-
-    property alias previousMessageIndex: dateGroupLabel.previousMessageIndex
-    property alias previousMessageTimestamp: dateGroupLabel.previousMessageTimestamp
-
    property StatusMessageDetails messageDetails: StatusMessageDetails {}
    property StatusMessageDetails replyDetails: StatusMessageDetails {}

-    property string timestampString: Qt.formatTime(new Date(timestamp), "hh:mm");
-    property string timestampTooltipString: Qt.formatTime(new Date(timestamp), "dddd, MMMM d, yyyy hh:mm:ss t");
-
-    signal clicked(var sender, var mouse)
-    signal profilePictureClicked(var sender, var mouse)
-    signal senderNameClicked(var sender, var mouse)
-    signal replyProfileClicked(var sender, var mouse)
-
-    signal addReactionClicked(var sender, var mouse)
-    signal toggleReactionClicked(int emojiId)
-    signal imageClicked(var image, var mouse, var imageSource)
-    signal stickerClicked()
+    signal profilePictureClicked()
+    signal senderNameClicked()
+    signal editCompleted(var newMsgText)
+    signal replyProfileClicked()
+    signal stickerLoaded()
+    signal imageClicked(var imageSource)
    signal resendClicked()

-    signal editCompleted(var newMsgText)
-    signal editCancelled()
-    signal stickerLoaded()
-    signal linkActivated(string link)
-
-    signal hoverChanged(string messageId, bool hovered)
-    signal activeChanged(string messageId, bool active)
-
-    function startMessageFoundAnimation() {
-        messageFoundAnimation.start();
-    }
-
-    onMessageAttachmentsChanged: {
-        root.prepareAttachmentsModel()
-    }
-
-    function prepareAttachmentsModel() {
-        attachmentsModel.clear()
-        if (!root.messageAttachments) {
-            return
-        }
-        root.messageAttachments.split(" ").forEach(source => {
-            attachmentsModel.append({source})
-        })
-    }
-
-    implicitWidth: messageLayout.implicitWidth
-                   + messageLayout.anchors.leftMargin
-                   + messageLayout.anchors.rightMargin
-
-    implicitHeight: messageLayout.implicitHeight
-                    + messageLayout.anchors.topMargin
-                    + messageLayout.anchors.bottomMargin
-
-    color: {
-        if (root.overrideBackground)
-            return root.overrideBackgroundColor;
-
-        if (root.editMode)
-            return Theme.palette.baseColor2;
-
-        if (hoverHandler.hovered || root.isActiveMessage) {
-           if (root.hasMention)
-              return Theme.palette.mentionColor3;
-           if (root.isPinned)
-              return Theme.palette.pinColor2;
-           return Theme.palette.baseColor2;
-        }
-
-        if (root.hasMention)
-           return Theme.palette.mentionColor4;
-        if (root.isPinned)
-           return Theme.palette.pinColor3;
-        return "transparent";
-    }
-
-    Rectangle {
-        anchors {
-            top: parent.top
-            bottom: parent.bottom
-            left: parent.left
-        }
-        width: 2
-        visible: root.isPinned
-        color: Theme.palette.pinColor1
-    }
-
-    Rectangle {
-        anchors {
-            top: parent.top
-            bottom: parent.bottom
-            left: parent.left
-        }
-        width: 2
-        visible: root.hasMention
-        color: Theme.palette.mentionColor1
-    }
-
-    SequentialAnimation {
-        id: messageFoundAnimation
-
-        PauseAnimation {
-            duration: 600
-        }
-        NumberAnimation {
-            target: highlightRect
-            property: "opacity"
-            to: 1.0
-            duration: 1500
-        }
-        PauseAnimation {
-            duration: 1000
-        }
-        NumberAnimation {
-            target: highlightRect
-            property: "opacity"
-            to: 0.0
-            duration: 1500
-        }
-    }
-
-    Rectangle {
-        id: highlightRect
-        anchors.fill: parent
-        opacity: 0
-        visible: opacity > 0.001
-        color: Theme.palette.baseColor2
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-    }
+    height: childrenRect.height
+    color: hoverHandler.hovered ? (messageDetails.hasMention ? Theme.palette.mentionColor3 : messageDetails.isPinned ? Theme.palette.pinColor2 :  Theme.palette.baseColor2) : messageDetails.hasMention  ? Theme.palette.mentionColor4 : messageDetails.isPinned ? Theme.palette.pinColor3 : "transparent"

    HoverHandler {
        id: hoverHandler
-        enabled: !root.isActiveMessage && !root.disableHover
    }

    ColumnLayout {
        id: messageLayout
-        anchors.fill: parent
-        anchors.topMargin: 8
-        anchors.bottomMargin: 8
-
-        StatusDateGroupLabel {
-            id: dateGroupLabel
+        width: parent.width
+        StatusMessageReply {
            Layout.fillWidth: true
-            Layout.topMargin: 20
-            messageTimestamp: root.timestamp
-            visible: text !== ""
+            visible: isAReply
+            replyDetails: statusMessage.replyDetails
+            onReplyProfileClicked: statusMessage.replyProfileClicked()
+            audioMessageInfoText: statusMessage.audioMessageInfoText
        }
-
-        Loader {
-            Layout.fillWidth: true
-            active: isAReply
-            visible: active
-            sourceComponent: StatusMessageReply {
-                replyDetails: root.replyDetails
-                profileClickable: root.profileClickable
-                onReplyProfileClicked: root.replyProfileClicked(sender, mouse)
-                audioMessageInfoText: root.audioMessageInfoText
-            }
-        }
-
        RowLayout {
-            Layout.fillWidth: true
-            Layout.leftMargin: 16
-            Layout.rightMargin: 16
            spacing: 8
-
-            Item {
-                implicitWidth: root.messageDetails.sender.profileImage.assetSettings.width
-                implicitHeight: profileImage.visible ? profileImage.height : 0
+            Layout.fillWidth: true
+            StatusSmartIdenticon {
+                id: profileImage
                Layout.alignment: Qt.AlignTop
-                StatusSmartIdenticon {
-                    id: profileImage
-                    active: root.showHeader
-                    visible: active
-                    name: root.messageDetails.sender.displayName
-                    asset: root.messageDetails.sender.profileImage.assetSettings
-                    ringSettings: root.messageDetails.sender.profileImage.ringSettings
-
-                    MouseArea {
-                        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-                        acceptedButtons: Qt.LeftButton | Qt.RightButton
-                        anchors.fill: parent
-                        enabled: root.profileClickable
-                        onClicked: root.profilePictureClicked(this, mouse)
-                    }
+                Layout.topMargin: 10
+                Layout.leftMargin: 16
+                image: messageDetails.profileImage
+                name: messageHeader.displayName
+                MouseArea {
+                    cursorShape: Qt.PointingHandCursor
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    anchors.fill: parent
+                    onClicked: statusMessage.profilePictureClicked()
                }
            }
-
-            ColumnLayout {
-
+            Column {
                spacing: 4
                Layout.alignment: Qt.AlignTop
+                Layout.topMargin: 10
                Layout.fillWidth: true
-
-                Loader {
-                    active: root.isPinned && !editMode
-                    visible: active
-                    sourceComponent: StatusPinMessageDetails {
-                        pinnedMsgInfoText: root.pinnedMsgInfoText
-                        pinnedBy: root.pinnedBy
-                    }
+                StatusPinMessageDetails {
+                    visible: messageDetails.isPinned && !editMode
+                    pinnedMsgInfoText: statusMessage.pinnedMsgInfoText
+                    pinnedBy: messageDetails.pinnedBy
                }
                StatusMessageHeader {
-                    Layout.fillWidth: true
-                    sender: root.messageDetails.sender
-                    amISender: root.messageDetails.amISender
-                    messageOriginInfo: root.messageDetails.messageOriginInfo
-                    resendText: root.resendText
-                    showResendButton: root.hasExpired && root.messageDetails.amISender
-                    onClicked: root.senderNameClicked(sender, mouse)
-                    onResendClicked: root.resendClicked()
-                    visible: root.showHeader && !editMode
-                    timestamp.text: root.timestampString
-                    timestamp.tooltip.text: root.timestampTooltipString
-                    displayNameClickable: root.profileClickable
+                    id: messageHeader
+                    width: parent.width
+                    displayName: messageDetails.displayName
+                    secondaryName: messageDetails.secondaryName
+                    tertiaryDetail: messageDetails.chatID
+                    isMutualContact: messageDetails.isMutualContact
+                    trustIndicator: messageDetails.trustIndicator
+                    resendText: statusMessage.resendText
+                    showResendButton: messageDetails.hasExpired && messageDetails.amISender
+                    onClicked: statusMessage.senderNameClicked()
+                    onResendClicked: statusMessage.resendClicked()
+                    visible: !editMode
                }
                Loader {
-                    Layout.fillWidth: true
-                    active: !root.editMode && !!root.messageDetails.messageText && !root.hideMessage
+                    active: !editMode && !!messageDetails.messageText
+                    width: parent.width
                    visible: active
                    sourceComponent: StatusTextMessage {
-                        objectName: "StatusMessage_textMessage"
-                        textField.text: {
-                            if (root.messageDetails.contentType === StatusMessage.ContentType.Sticker)
-                                return "";
-
-                            const formattedMessage = Utils.linkifyAndXSS(root.messageDetails.messageText);
-
-                            if (root.messageDetails.contentType === StatusMessage.ContentType.Emoji)
-                                return Emoji.parse(formattedMessage, Emoji.size.middle, Emoji.format.png);
-
-                            if (root.isEdited) {
-                                const index = formattedMessage.endsWith("code>") ? formattedMessage.length : formattedMessage.length - 4;
-                                const editedMessage = formattedMessage.slice(0, index)
-                                                    + ` <span class="isEdited">` + qsTr("(edited)") + `</span>`
-                                                    + formattedMessage.slice(index);
-                                return Utils.getMessageWithStyle(Emoji.parse(editedMessage), textField.hoveredLink)
-                            }
-
-                            return Utils.getMessageWithStyle(Emoji.parse(formattedMessage), textField.hoveredLink)
-                        }
-                        onLinkActivated: {
-                            root.linkActivated(link);
-                        }
+                        width: parent.width
+                        textField.text: messageDetails.messageText
                    }
-
                }
-
                Loader {
-                    active: root.messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
+                    active: messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
                    visible: active
                    sourceComponent: StatusImageMessage {
-                        source: root.messageDetails.contentType === StatusMessage.ContentType.Image ? root.messageDetails.messageContent : ""
-                        onClicked: root.imageClicked(image, mouse, imageSource)
-                        shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
+                        source: messageDetails.contentType === StatusMessage.ContentType.Image ? messageDetails.messageContent : ""
+                        onClicked: statusMessage.imageClicked()
+                        shapeType: messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
                    }
                }
-
-                Loader {
-                    active: !!root.messageAttachments && !editMode
-                    visible: active
-                    sourceComponent: Column {
-                        spacing: 4
-                        Layout.fillWidth: true
-                        Repeater {
-                            model: attachmentsModel
-                            delegate: StatusImageMessage {
-                                source: model.source
-                                onClicked: root.imageClicked(image, mouse, imageSource)
-                                shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
-                            }
-                        }
-                    }
-                }
-
-                Loader {
-                    active: root.messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
-                    visible: active
-                    sourceComponent: StatusSticker {
-                        asset.isImage: true
-                        asset.name: root.messageDetails.messageContent
-                        onLoaded: root.stickerLoaded()
-                        onClicked: {
-                            root.stickerClicked()
-                        }
-                    }
+                StatusSticker {
+                    visible: messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
+                    image.source: messageDetails.messageContent
+                    onLoaded: statusMessage.stickerLoaded()
                }
                Loader {
-                    active: root.messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
+                    active: messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
                    visible: active
                    sourceComponent: StatusAudioMessage {
-                        audioSource: root.messageDetails.messageContent
+                        audioSource: messageDetails.messageContent
                        hovered: hoverHandler.hovered
-                        audioMessageInfoText: root.audioMessageInfoText
+                        audioMessageInfoText: statusMessage.audioMessageInfoText
                    }
                }
                Loader {
                    id: linksLoader
-                    active: !root.editMode
+                    active: !!linksLoader.sourceComponent
                    visible: active
                }
                Loader {
                    id: transactionBubbleLoader
-                    active: root.messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
+                    active: messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
                    visible: active
                }
                Loader {
                    id: invitationBubbleLoader
-                    active: root.messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
+                    active: messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
                    visible: active
                }
                StatusEditMessage {
                    id: editComponent
-                    Layout.fillWidth: true
-                    Layout.rightMargin: 16
-                    active: root.editMode
-                    visible: active
-                    msgText: root.messageDetails.messageText
-                    saveButtonText: root.saveButtonText
-                    cancelButtonText: root.cancelButtonText
-                    onEditCancelled: root.editCancelled()
-                    onEditCompleted: root.editCompleted(newMsgText)
+                    width: parent.width
+                    msgText: messageDetails.messageText
+                    visible: editMode
+                    saveButtonText: statusMessage.saveButtonText
+                    cancelButtonText: statusMessage.cancelButtonText
+                    onCancelEditClicked: editMode = false
+                    onEditCompleted: {
+                        editMode = false
+                        statusMessage.editCompleted(newMsgText)
+                    }
                }
                StatusBaseText {
+                    id: retryLbl
                    color: Theme.palette.dangerColor1
-                    text: root.resendText
+                    text: statusMessage.resendText
                    font.pixelSize: 12
-                    visible: root.hasExpired && root.messageDetails.amISender && !root.timestamp && !editMode
+                    visible: messageDetails.hasExpired && messageDetails.amISender && !messageDetails.timestamp && !editMode
                    MouseArea {
                        cursorShape: Qt.PointingHandCursor
                        anchors.fill: parent
-                        onClicked: root.resendClicked()
+                        onClicked: statusMessage.resendClicked()
                    }
                }
                Loader {
-                    active: root.reactionsModel.count > 0
+                    id: footer
+                    active: sourceComponent && !editMode
                    visible: active
-                    sourceComponent: StatusMessageEmojiReactions {
-                        id: emojiReactionsPanel
-
-                        emojiReactionsModel: root.reactionsModel
-                        store: root.messageStore
-                        icons: root.reactionIcons
-
-                        onHoverChanged: {
-                            root.hoverChanged(messageId, hovered)
-                        }
-
-                        isCurrentUser: root.messageDetails.amISender
-                        onAddEmojiClicked: root.addReactionClicked(sender, mouse)
-                        onToggleReaction: root.toggleReactionClicked(emojiID)
-                    }
                }
            }
        }
@@ -439,13 +195,6 @@ Rectangle {
        anchors.rightMargin: 20
        anchors.top: parent.top
        anchors.topMargin: -8
-        visible: hoverHandler.hovered && !root.hideQuickActions
-    }
-
-    ListModel {
-        id: attachmentsModel
-        Component.onCompleted: {
-            root.prepareAttachmentsModel()
-        }
+        visible: hoverHandler.hovered && !editMode
    }
 }
@@ -6,10 +6,24 @@ QtObject {
    id: msgDetails

    property bool amISender: false
-    property StatusMessageSenderDetails sender: StatusMessageSenderDetails { }
+    property string displayName: ""
+    property string secondaryName: ""
+    property string chatID: ""
+    property StatusImageSettings profileImage: StatusImageSettings {
+        width: 40
+        height: 40
+    }
    property bool isEdited: false
-    property int contentType: 0
    property string messageText: ""
+    property int contentType: 0
    property string messageContent: ""
-    property string messageOriginInfo: ""
+    property bool isMutualContact: false
+    property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
+    property bool hasMention: false
+    property bool isPinned: false
+    property string pinnedBy: ""
+    property bool hasExpired: false
+    property string timestamp: ""    
 }
+
+
@@ -1,21 +0,0 @@
-import QtQuick 2.0
-import StatusQ.Core 0.1
-
-QtObject {
-    id: root
-
-    property string id: ""
-    property string displayName: ""
-    property string secondaryName: ""
-
-    property bool isEnsVerified: false
-    property bool isContact: false
-    property int trustIndicator: StatusContactVerificationIcons.TrustedType.None
-
-    property StatusProfileImageSettings profileImage: StatusProfileImageSettings {
-        pubkey: root.id
-        showRing: !root.isEnsVerified
-        width: 40
-        height: 40
-    }
-}
@@ -12,9 +12,9 @@ StatusListItem {
    implicitWidth: 286
    implicitHeight: 48

-    asset.bgWidth: 20
-    asset.bgHeight: 20
-    asset.bgColor: "transparent"
+    icon.background.width: 20
+    icon.background.height: 20
+    icon.background.color: "transparent"

    statusListItemIcon.anchors.topMargin: 14

@@ -5,31 +5,33 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
    id: statusRoundedIcon

-    property StatusAssetSettings asset: StatusAssetSettings {
+    property StatusIconSettings icon: StatusIconSettings {
        width: 24
        height: 24
        rotation: 0
        color: Theme.palette.primaryColor1
-        bgWidth: 40
-        bgHeight: 40
-        bgColor: Theme.palette.primaryColor3
+        background: StatusIconBackgroundSettings {
+            width: 40
+            height: 40
+            color: Theme.palette.primaryColor3
+        }
    }

-    color: asset.bgColor
-    implicitWidth: asset.bgWidth
-    implicitHeight: asset.bgHeight
-    radius: asset.bgWidth / 2
+    color: icon.background.color
+    implicitWidth: icon.background.width
+    implicitHeight: icon.background.height
+    radius: icon.background.width / 2


    StatusIcon {
        id: statusIcon
        anchors.centerIn: parent

-        width: statusRoundedIcon.asset.width
-        height: statusRoundedIcon.asset.height
+        width: statusRoundedIcon.icon.width
+        height: statusRoundedIcon.icon.height

-        color: statusRoundedIcon.asset.color
-        icon: statusRoundedIcon.asset.name
-        rotation: statusRoundedIcon.asset.rotation
+        color: statusRoundedIcon.icon.color
+        icon: statusRoundedIcon.icon.name
+        rotation: statusRoundedIcon.icon.rotation
    }
 }
--- a/Show More
+++ b/Show More