feat(StatusModal): introduce hasCloseButton property

This property can be used to hide the close button, as there are some modals that shouldn't allow users to "x" modals away.
refactor(StatusChatList): updates due to chat & communities models refactored
2021-11-30 16:36:58 +01:00 · 2021-11-30 08:04:17 +01:00 · 2021-11-22 16:26:51 +01:00 · 2021-11-22 16:26:51 +01:00
111 changed files with 1540 additions and 5650 deletions
@@ -13,4 +13,3 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
-doc/html
@@ -1,103 +1,5 @@
 <a name=""></a>
-##  0.24.0 (2022-02-14)
-
-
-#### Features
-
-* **StatusListItem:**  add highlighted property ([5780f183](5780f183))
-* **StatusQ.Components:**  Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
-
-
-
-<a name=""></a>
-##  Version 0.23.0 (2022-02-08)
-
-
-#### Bug Fixes
-
-*   Icon components had wrong color in sandbox app ([b632c712](b632c712), closes [#538](538))
-* **StatusChatList:**  unexisting property name for chat item fixed ([c2e07517](c2e07517))
-
-#### Features
-
-* **StatusQ.Components:**
-  *  Adding StatusToastMessage ([7b290ddd](7b290ddd), closes [#521](521))
-  *  Adding StatusTagSelector component ([094dee49](094dee49), closes [#526](526))
-
-
-
-<a name=""></a>
-##  Version 0.22.0 (2022-01-31)
-
-
-#### Features
-
-* **StatusMemberListItem:**  Implement `StatusMemberListItem` (#539) ([c5a605bf](c5a605bf), closes [#515](515))
-
-
-
-<a name=""></a>
-##  Version 0.21.0 (2022-01-24)
-
-
-#### Bug Fixes
-
-* **build:**  broken MacOS build (#533) ([55901cf0](55901cf0))
-
-#### Features
-
-* **StatusMessage:**  Introducing a new StatusQ Component for Chat Messages ([ea955694](ea955694))
-* **StatusQ.Controls:**  Introduce `StatusPasswordStrengthIndicator` ([626695da](626695da), closes [#528](528))
-
-
-
-<a name=""></a>
-##  Version 0.20.0 (2022-01-17)
-
-
-#### Features
-
-* **StatusBanner:**  introduce type variants for different banner styles ([35d12f44](35d12f44))
-
-#### Bug Fixes
-
-* **StatusBaseInput:**  Corrects allignment of the placeholder text in the StatusBaseInput. ([5a416aa1](5a416aa1))
-* **build:**  Windows build ([14ab4ce5](14ab4ce5))
-
-
-
-<a name=""></a>
-##  Version 0.19.0 (2021-12-03)
-
-
-#### Bug Fixes
-
-* **StatusChatListItem:**  This change fixes the issue of the chat list items getting a highlight even when they are not really hovered ([ab6bdf54](ab6bdf54))
-
-#### Features
-
-* **StatusModal:**  introduce `hasCloseButton` property ([2336b6aa](2336b6aa))
-
-
-
-<a name=""></a>
-##  Version 0.18.0 (2021-11-30)
-
-
-#### Bug Fixes
-
-* **StatusAppNavBar:**  Fixed position of profile button on the NavBar ([419b7384](419b7384))
-* **StatusImageWithTitle:**  Fix position of the edit title button ([8d2121ad](8d2121ad))
-* **StatusListItem:**  ensure title is elided ([b7883e82](b7883e82))
-
-#### Features
-
-* **StatusListItem:**  Expose the Aside text so that it can be modified from the outside ([f82ce8b7](f82ce8b7))
-
-
-
-<a name=""></a>
-##  Version 0.17.1 (2021-11-19)
+##  (2021-11-19)


 #### Bug Fixes
@@ -1,19 +0,0 @@
-/*!
-   \page statusq-index.html
-   \title StatusQ
-   \brief A components library for Status desktop client.
-
-
-   StatusQ provides a collection of components....
-
-   StatusQ - Components and Interfaces
-   \list
-      \li \l{StatusQ Components}{Components}
-      \li \l{StatusQ Controls}{Controls}
-      \li \l{StatusQ Core}{Core}
-      \li \l{StatusQ Layout}{Layout}
-      \li \l{StatusQ Platform}{Platform}
-      \li \l{StatusQ Popups}{Popups}
-   \endlist
-*/
-
@@ -1,41 +0,0 @@
-/*!
-    \qmlmodule StatusQ.Components 0.1
-    \title StatusQ Components
-    \brief Basic set of Components StatusQ components
-
-    This is a listing of all Components components.
-
-    This module is part of the \l{StatusQ}{StatusQ} project.
-
-   \list
-       \li \l{StatusAddress}
-       \li \l{StatusBadge}
-       \li \l{StatusChatInfoToolBar}
-       \li \l{StatusChatList}
-       \li \l{StatusChatListItem}
-       \li \l{StatusImageSettings}
-       \li \l{StatusChatListCategory}
-       \li \l{StatusChatListCategoryItem}
-       \li \l{StatusChatListAndCategories}
-       \li \l{StatusChatToolBar}
-       \li \l{StatusContactRequestsIndicatorListItem}
-       \li \l{StatusDescriptionListItem}
-       \li \l{StatusLetterIdenticon}
-       \li \l{StatusListItem}
-       \li \l{StatusListSectionHeadline}
-       \li \l{StatusLoadingIndicator}
-       \li \l{StatusMemberListItem}
-       \li \l{StatusNavigationListItem}
-       \li \l{StatusNavigationPanelHeadline}
-       \li \l{StatusRoundIcon}
-       \li \l{StatusRoundedImage}
-       \li \l{StatusMacWindowButtons}
-       \li \l{StatusListItemBadge}
-       \li \l{StatusExpandableItem}
-       \li \l{StatusSmartIdenticon}
-       \li \l{StatusMessage}
-       \li \l{StatusMessageDetails}
-       \li \l{StatusTagSelector}
-       \li \l{StatusToastMessage}
-   \endlist
-*/
@@ -1,47 +0,0 @@
-/*!
-    \qmlmodule StatusQ.Controls 0.1
-    \title StatusQ Controls
-    \brief Basic set of Controls StatusQ components
-
-    This is a listing of all Controls components.
-
-    This module is part of the \l{StatusQ}{StatusQ} project.
-
-   \list
-       \li \l{StatusAccountSelector}
-       \li \l{StatusAssetSelector}
-       \li \l{StatusBanner}
-       \li \l{StatusChatCommandButton}
-       \li \l{StatusChatInfoButton}
-       \li \l{StatusChatListCategoryItemButton}
-       \li \l{StatusColorSelector}
-       \li \l{StatusIconTabButton}
-       \li \l{StatusNavBarTabButton}
-       \li \l{StatusTabBarIconButton}
-       \li \l{StatusToolTip}
-       \li \l{StatusBaseButton}
-       \li \l{StatusButton}
-       \li \l{StatusFlatButton}
-       \li \l{StatusRoundButton}
-       \li \l{StatusFlatRoundButton}
-       \li \l{StatusSwitch}
-       \li \l{StatusRadioButton}
-       \li \l{StatusCheckBox}
-       \li \l{StatusSlider}
-       \li \l{StatusSelect}
-       \li \l{StatusBaseInput}
-       \li \l{StatusIdenticonRing}
-       \li \l{StatusInput}
-       \li \l{StatusPickerButton}
-       \li \l{StatusPinInput}
-       \li \l{StatusProgressBar}
-       \li \l{StatusPasswordStrengthIndicator}
-       \li \l{StatusSwitchTabButton}
-       \li \l{StatusSwitchTabBar}
-       \li \l{StatusSelectableText}
-       \li \l{StatusWalletColorButton}
-       \li \l{StatusWalletColorSelect}
-       \li \l{StatusRegularExpressionValidator}
-       \li \l{StatusIntValidator}
-   \endlist
-*/
@@ -1,23 +0,0 @@
-/*!
-    \qmlmodule StatusQ.Core 0.1
-    \title StatusQ Core
-    \brief Basic set of Core StatusQ components
-
-    This is a listing of all Core components. These
-    files are available for general import and they are based off the \l{https://doc.qt.io/qt-5/qtquick-qmlmodule.html}{Qt
-    Quick Primitives} and \l{https://doc.qt.io/archives/qt-5.11/qtquick-controls2-qmlmodule.html}{Qt Quick Controls 2}.
-
-    This module is part of the \l{StatusQ}{StatusQ} project.
-
-   \list
-       \li \l{StatusAppNavBarFilterModel}
-       \li \l{StatusBaseText}
-       \li \l{StatusIcon}
-       \li \l{StatusIconBackgroundSettings}
-       \li \l{StatusIconSettings}
-       \li \l{StatusIdenticonRingSettings}
-       \li \l{StatusImageSettings}
-       \li \l{StatusModalHeaderSettings}
-       \li \l{StatusTooltipSettings}
-   \endlist
-*/
@@ -1,16 +0,0 @@
-/*!
-    \qmlmodule StatusQ.Layout 0.1
-    \title StatusQ Layout
-    \brief Basic set of Layout StatusQ components
-
-    This is a listing of all Layout components.
-
-    This module is part of the \l{StatusQ}{StatusQ} project.
-
-   \list
-       \li \l{StatusAppLayout}
-       \li \l{StatusAppNavBar}
-       \li \l{StatusAppTwoPanelLayout}
-       \li \l{StatusAppThreePanelLayout}
-   \endlist
-*/
@@ -1,15 +0,0 @@
-/*!
-    \qmlmodule StatusQ.Platform 0.1
-    \title StatusQ Platform
-    \brief Basic set of Platform StatusQ components
-
-    This is a listing of all Platform components.
-
-    This module is part of the \l{StatusQ}{StatusQ} project.
-
-   \list
-       \li \l{StatusMacTrafficLights}
-       \li \l{StatusMacNotification}
-       \li \l{StatusWindowsTitleBar}
-   \endlist
-*/
@@ -1,22 +0,0 @@
-/*!
-    \qmlmodule StatusQ.Popups 0.1
-    \title StatusQ Popups
-    \brief Basic set of Popups StatusQ components
-
-    This is a listing of all Popups components.
-
-    This module is part of the \l{StatusQ}{StatusQ} project.
-
-   \list
-       \li \l{StatusMenuSeparator}
-       \li \l{StatusPopupMenu}
-       \li \l{StatusMenuItem}
-       \li \l{StatusMenuItemDelegate}
-       \li \l{StatusModal}
-       \li \l{StatusSearchPopup}
-       \li \l{StatusModalDivider}
-       \li \l{StatusSearchPopupMenuItem}
-       \li \l{StatusSearchLocationMenu}
-       \li \l{StatusSpellcheckingMenuItems}
-   \endlist
-*/
@@ -1,36 +0,0 @@
-project = StatusQ
-version = 0.1
-description = StatusQ Project
-url     = https://github.com/status-im/StatusQ
-
-#These are set implictly by qdoc as well, but only with these the module header can be found
-includepaths = -I . \
-               -I $PWD/../src/StatusQ
-
-imagedirs = src/images
-sourcedirs += src \
-              $PWD/../src/StatusQ/Components \
-              $PWD/../src/StatusQ/Controls \
-              $PWD/../src/StatusQ/Core \
-              $PWD/../src/StatusQ/Layout \
-              $PWD/../src/StatusQ/Platform \
-              $PWD/../src/StatusQ/Popups \
-
-sources.fileextensions = "*.cpp *.qdoc *.qml"
-
-depends += qtcore \
-           qtquick \
-           qtqml \
-           qtgui \
-           qtdoc \
-           qtquickcontrols2
-
-navigation.homepage    = "StatusQ"
-
-outputdir  =    $PWD/html
-outputformats = HTML
-
-HTML.stylesheets = style.css
-HTML.headerstyles = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/style.css\"/>\n"
-HTML.postheader = "<p class=\"header\"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/>"
-HTML.footer = "<hr/><div class=\"footer\"><p><acronym title=\"Copyright\">&copy;</acronym> 2022 Status. All rights reserved. <a href=\"https://status.im\" target=\"_blank\"><small>status.im</a></small></p></div>"
@@ -1,41 +0,0 @@
-body {
-   font-family: "Verdana";
-   font-size: 14px;
-   max-width: 80%;
-   margin: auto;
-}
-
-h1, h2, h3 {
-   color: #4360DF;
-}
-
-div.sidebar {
-    float: right;
-}
-
-pre {
-    padding: 15px;
-}
-div.qmlproto {
-    padding-left: 15px;
-    padding-right: 15px;
-}
-pre, div.qmlproto {
-    font-family: "Courier New";
-    font-size: 20px;
-    margin-left: 2em;
-    background-color: #F0F2F5;
-}
-
-hr {
-    margin-top: 2em;
-    margin-bottom: 2em;
-}
-
-p.header {
-    margin-bottom: -1em;
-}
-p.footer {
-    text-align: right;
-    margin-top: -1em;
-}
@@ -188,19 +188,4 @@ GridLayout {
        to: 100
        value: 40
    }
-
-    StatusBanner {
-        id: banner
-        width: 360
-        topPadding: 20
-        type: StatusBanner.Type.Danger
-        statusText: "Banner"
-    }
-
-    StatusProgressBar {
-        id: progressBar        
-        text: "Weak"
-        value: 0.5
-        fillColor : Theme.palette.pinColor1
-    }
 }
@@ -9,9 +9,6 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Platform 0.1

-import "demoapp"
-import "demoapp/data" 1.0
-
 Rectangle {
    id: demoApp
    height: 602
@@ -27,22 +24,23 @@ Rectangle {
        readonly property int community: 1
        readonly property int wallet: 2
        readonly property int browser: 3
-        readonly property int nodeManagement: 4
-        readonly property int profileSettings: 5
+        readonly property int timeline: 4
+        readonly property int nodeManagement: 5
+        readonly property int profileSettings: 6
        readonly property int apiDocumentation: 100
        readonly property int demoApp: 101
    }

    function setActiveItem(sectionId) {
-        for (var i = 0; i < Models.demoAppSectionsModel.count; i++) {
-            let item = Models.demoAppSectionsModel.get(i)
+        for (var i = 0; i < models.demoAppSectionsModel.count; i++) {
+            let item = models.demoAppSectionsModel.get(i)
            if (item.sectionId !== sectionId)
            {
-                Models.demoAppSectionsModel.setProperty(i, "active", false)
+                models.demoAppSectionsModel.setProperty(i, "active", false)
                continue
            }

-            Models.demoAppSectionsModel.setProperty(i, "active", true);
+            models.demoAppSectionsModel.setProperty(i, "active", true);
        }
    }

@@ -78,7 +76,7 @@ Rectangle {

            communityTypeRole: "sectionType"
            communityTypeValue: appSectionType.community
-            sectionModel: Models.demoAppSectionsModel
+            sectionModel: models.demoAppSectionsModel

            property bool communityAdded: false

@@ -186,31 +184,730 @@ Rectangle {

    Component {
        id: statusAppChatView
-        StatusAppChatView { }
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                StatusNavigationPanelHeadline {
+                    id: headline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Chat"
+                }
+
+                Item {
+                    id: searchInputWrapper
+                    anchors.top: headline.bottom
+                    anchors.topMargin: 16
+                    width: parent.width
+                    height: searchInput.height
+
+                    StatusBaseInput {
+                        id: searchInput
+
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.right: actionButton.left
+                        anchors.leftMargin: 16
+                        anchors.rightMargin: 16
+
+                        height: 36
+                        topPadding: 8
+                        bottomPadding: 0
+                        placeholderText: "Search"
+                        icon.name: "search"
+                    }
+
+                    StatusRoundButton {
+                        id: actionButton
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.right: parent.right
+                        anchors.rightMargin: 8
+                        width: 32
+                        height: 32
+
+                        type: StatusRoundButton.Type.Secondary
+                        icon.name: "add"
+                        state: "default"
+
+                        onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
+                        states: [
+                            State {
+                                name: "default"
+                                PropertyChanges {
+                                    target: actionButton
+                                    icon.rotation: 0
+                                    highlighted: false
+                                }
+                            },
+                            State {
+                                name: "pressed"
+                                PropertyChanges {
+                                    target: actionButton
+                                    icon.rotation: 45
+                                    highlighted: true
+                                }
+                            }
+                        ]
+
+                        transitions: [
+                            Transition {
+                                from: "default"
+                                to: "pressed"
+
+                                RotationAnimation {
+                                    duration: 150
+                                    direction: RotationAnimation.Clockwise
+                                    easing.type: Easing.InCubic
+                                }
+                            },
+                            Transition {
+                                from: "pressed"
+                                to: "default"
+                                RotationAnimation {
+                                    duration: 150
+                                    direction: RotationAnimation.Counterclockwise
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        ]
+
+                        StatusPopupMenu {
+                            id: chatContextMenu
+
+                            onOpened: {
+                                actionButton.state = "pressed"
+                            }
+
+                            onClosed: {
+                                actionButton.state = "default"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start new chat"
+                                icon.name: "private-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start group chat"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Join public chat"
+                                icon.name: "public-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Communities"
+                                icon.name: "communities"
+                            }
+                        }
+                    }
+                }
+
+                Column {
+                    anchors.top: searchInputWrapper.bottom
+                    anchors.topMargin: 16
+                    width: parent.width
+                    spacing: 8
+
+                    StatusContactRequestsIndicatorListItem {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        title: "Contact requests"
+                        requestsCount: 3
+                        sensor.onClicked: demoContactRequestsModal.open()
+                    }
+
+                    StatusChatList {
+                        anchors.horizontalCenter: parent.horizontalCenter
+
+                        model: models.demoChatListItems
+                        onChatItemUnmuted: {
+                            for (var i = 0; i < models.demoChatListItems.count; i++) {
+                                let item = models.demoChatListItems.get(i);
+                                if (item.chatId === id) {
+                                    models.demoChatListItems.setProperty(i, "muted", false)
+                                }
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            openHandler: function (id) {
+                                chatId = id
+                            }
+
+                            StatusMenuItem {
+                                text: "View Profile"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+
+                StatusChatToolBar {
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "Amazing Funny Squirrel"
+                    chatInfoButton.subTitle: "Contact"
+                    chatInfoButton.icon.color: Theme.palette.miscColor7
+                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+                    chatInfoButton.pinnedMessagesCount: 1
+
+                    searchButton.visible: false
+                    membersButton.visible: false
+                    notificationCount: 1
+
+                    onNotificationButtonClicked: notificationCount = 0
+
+                    popupMenu: StatusPopupMenu {
+                        id: contextMenu
+
+                        StatusMenuItem {
+                            text: "Mute Chat"
+                            icon.name: "notification"
+                        }
+                        StatusMenuItem {
+                            text: "Mark as Read"
+                            icon.name: "checkmark-circle"
+                        }
+                        StatusMenuItem {
+                            text: "Clear History"
+                            icon.name: "close-circle"
+                        }
+
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Leave Chat"
+                            icon.name: "arrow-right"
+                            icon.width: 14
+                            iconRotation: 180
+                            type: StatusMenuItem.Type.Danger
+                        }
+                    }
+                }
+            }
+        }
    }

    Component {
        id: statusAppCommunityView
-        StatusAppCommunityView {
-            communityDetailModalTitle: demoCommunityDetailModal.header.title
-            communityDetailModalImage: demoCommunityDetailModal.header.image.source
-            onChatInfoButtonClicked: {
-                demoCommunityDetailModal.open();
+
+        StatusAppThreePanelLayout {
+            id: root
+
+            handle: Rectangle {
+                implicitWidth: 5
+                color: SplitHandle.pressed ? Theme.palette.baseColor2
+                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+            }
+            leftPanel: Item {
+                id: leftPanel
+
+                StatusChatInfoToolBar {
+                    id: statusChatInfoToolBar
+
+                    anchors.top: parent.top
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    chatInfoButton.title: "CryptoKitties"
+                    chatInfoButton.subTitle: "128 Members"
+                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
+                    chatInfoButton.onClicked: demoCommunityDetailModal.open()
+
+                    popupMenu: StatusPopupMenu {
+
+                        StatusMenuItem {
+                            text: "Create channel"
+                            icon.name: "channel"
+                        }
+
+                        StatusMenuItem {
+                            text: "Create category"
+                            icon.name: "channel-category"
+                        }
+
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Invite people"
+                            icon.name: "share-ios"
+                        }
+
+                    }
+                }
+
+                ScrollView {
+                    id: scrollView
+
+                    anchors.top: statusChatInfoToolBar.bottom
+                    anchors.topMargin: 8
+                    anchors.bottom: parent.bottom
+                    width: leftPanel.width
+
+                    contentHeight: communityCategories.height
+                    clip: true
+
+                    StatusChatListAndCategories {
+                        id: communityCategories
+                        width: leftPanel.width
+                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+
+                        draggableItems: true
+                        draggableCategories: false
+                        model: models.demoCommunityChatListItems
+                        showCategoryActionButtons: true
+
+                        categoryPopupMenu: StatusPopupMenu {
+
+                            property string categoryId
+
+                            openHandler: function (id) {
+                                categoryId = id
+                            }
+
+                            StatusMenuItem {
+                                text: "Mute Category"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Edit Category"
+                                icon.name: "edit"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete Category"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+
+                        chatListPopupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+                            StatusMenuItem {
+                                text: "Create channel"
+                                icon.name: "channel"
+                            }
+
+                            StatusMenuItem {
+                                text: "Create category"
+                                icon.name: "channel-category"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Invite people"
+                                icon.name: "share-ios"
+                            }
+                        }
+                    }
+                }
+            }
+
+            centerPanel: Item {
+                StatusChatToolBar {
+                    id: statusChatToolBar
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "general"
+                    chatInfoButton.subTitle: "Community Chat"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
+                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+                    onSearchButtonClicked: {
+                        searchButton.highlighted = !searchButton.highlighted;
+                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
+                                                       "",
+                                                       demoCommunityDetailModal.header.image.source);
+                        searchPopup.open();
+                    }
+                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+                    onMembersButtonClicked: {
+                        root.showRightPanel = !root.showRightPanel;
+                    }
+                }
+
+                StatusSearchPopup {
+                    id: searchPopup
+                    searchOptionsPopupMenu: searchPopupMenu
+                    onAboutToHide: {
+                        if (searchPopupMenu.visible) {
+                            searchPopupMenu.close();
+                        }
+                        //clear menu
+                        for (var i = 2; i < searchPopupMenu.count; i++) {
+                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                        }
+                    }
+                    onClosed: {
+                        statusChatToolBar.searchButton.highlighted = false
+                        searchPopupMenu.dismiss();
+                    }
+                    onSearchTextChanged: {
+                        if (searchPopup.searchText !== "") {
+                            searchPopup.loading = true;
+                            searchModelSimTimer.start();
+                        } else {
+                            searchPopup.searchResults = [];
+                            searchModelSimTimer.stop();
+                        }
+                    }
+                    Timer {
+                        id: searchModelSimTimer
+                        interval: 500
+                        onTriggered: {
+                            if (searchPopup.searchText.startsWith("c")) {
+                                searchPopup.searchResults = models.searchResultsA;
+                            } else {
+                                searchPopup.searchResults = models.searchResultsB;
+                            }
+                            searchPopup.loading = false;
+                        }
+                    }
+                }
+                StatusSearchLocationMenu {
+                    id: searchPopupMenu
+                    searchPopup: searchPopup
+                    locationModel: models.optionsModel
+                }
+            }
+
+            rightPanel: Item {
+                id: rightPanel
+                StatusBaseText {
+                    id: titleText
+                    anchors.top: parent.top
+                    anchors.topMargin:16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                    visible: (opacity > 0.1)
+                    font.pixelSize: 15
+                    text: qsTr("Members")
+                }
+
+                ListView {
+                    anchors.top: titleText.bottom
+                    anchors.topMargin: 16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 8
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 16
+                    boundsBehavior: Flickable.StopAtBounds
+                    model: ["John", "Nick", "Maria", "Mike"]
+                    delegate: Row {
+                        width: parent.width
+                        height: 30
+                        spacing: 8
+                        Rectangle {
+                            width: 24
+                            height: 24
+                            radius: width/2
+                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
+                        }
+                        StatusBaseText {
+                            height: parent.height
+                            horizontalAlignment: Text.AlignHCenter
+                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                            visible: (opacity > 0.1)
+                            font.pixelSize: 15
+                            color: Theme.palette.directColor1
+                            text: modelData
+                        }
+                    }
+                }
            }
        }
    }

    Component {
        id: statusAppProfileSettingsView
-        StatusAppProfileSettingsView { }
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                StatusNavigationPanelHeadline {
+                    id: profileHeadline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Profile"
+                }
+
+                ScrollView {
+                    anchors.top: profileHeadline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    contentHeight: profileMenuItems.height + 8
+                    contentWidth: parent.width
+                    clip: true
+
+                    Column {
+                        id: profileMenuItems
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        spacing: 4
+
+                        Repeater {
+                            model: models.demoProfileGeneralMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        StatusListSectionHeadline { text: "Settings" }
+
+                        Repeater {
+                            model: models.demoProfileSettingsMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        Item {
+                            id: invisibleSeparator
+                            height: 16
+                            width: parent.width
+                        }
+
+                        Repeater {
+                            model: models.demoProfileOtherMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+            }
+        }
    }

-    DemoContactRequestsModal {
+    StatusModal {
        id: demoContactRequestsModal
        anchors.centerIn: parent
+
+        header.title: "Contact Requests"
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "notification"
+        }
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Contact request will be shown here"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Decline all"
+                type: StatusBaseButton.Type.Danger
+                onClicked: demoContactRequestsModal.close()
+            },
+            StatusButton {
+                text: "Accept all"
+                onClicked: demoContactRequestsModal.close()
+            }
+        ]
    }

-    DemoCommunityDetailModal {
+    StatusModal {
        id: demoCommunityDetailModal
+
+        anchors.centerIn: parent
+
+        header.title: "Cryptokitties"
+        header.subTitle: "Public Community"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+        contentItem: Column {
+            width: demoCommunityDetailModal.width
+
+            StatusModalDivider {
+                bottomPadding: 8
+            }
+
+            StatusBaseText {
+                text: "A community of cat lovers, meow!"
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: 15
+                height: 46
+                color: Theme.palette.directColor1
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                anchors.rightMargin: 16
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusDescriptionListItem {
+                title: "Share community"
+                subTitle: "https://join.status.im/u/0x04...45f19"
+                tooltip.text: "Copy to clipboard"
+                icon.name: "copy"
+                iconButton.onClicked: tooltip.visible = !tooltip.visible
+                width: parent.width
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Members"
+                icon.name: "group-chat"
+                label: "184"
+                components: [
+                    StatusIcon {
+                        icon: "chevron-down"
+                        rotation: 270
+                        color: Theme.palette.baseColor1
+                    }
+                ]
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Notifications"
+                icon.name: "notification"
+                components: [
+                    StatusSwitch {}
+                ]
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Edit community"
+                icon.name: "edit"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Transfer ownership"
+                icon.name: "exchange"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Leave community"
+                icon.name: "arrow-right"
+                icon.rotation: 180
+                type: StatusListItem.Type.Secondary
+            }
+        }
+    }
+
+    Models {
+        id: models
    }
 }
@@ -56,8 +56,9 @@ Column {
            readonly property int community: 1
            readonly property int wallet: 2
            readonly property int browser: 3
-            readonly property int nodeManagement: 4
-            readonly property int profileSettings: 5
+            readonly property int timeline: 4
+            readonly property int nodeManagement: 5
+            readonly property int profileSettings: 6
        }

        StatusAppNavBar {
@@ -90,7 +91,8 @@ Column {
                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
            }

            property bool communityAdded: false
@@ -265,7 +267,8 @@ Column {
                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
            }

            property bool communityAdded: false
@@ -360,7 +363,8 @@ Column {
                ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
-                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
            }

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

-    StatusButton {
-        text: "Modal with Editable Title"
-        onClicked: editTitleModal.open()
-    }
-
    StatusModal {
        id: simpleModal
        anchors.centerIn: parent
@@ -346,13 +341,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        }
    }

-    StatusModal {
-        id: editTitleModal
-        anchors.centerIn: parent
-        header.title: "This title can be edited"
-        header.editable: true
-    }
-
    ListModel {
        id: dummyAccountsModel
        ListElement{name: "Account 1"; iconName: "filled-account"}
@@ -2,62 +2,53 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14

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

+import Sandbox 0.1

 Column {
    spacing: 8

    StatusAccountSelector {
-        id: accountSelector
        accounts: ListModel {
            ListElement {
                name: "Pascal"
                address: "0x1234567891011"
-                path: ""
-                color: "red"
-                publicKey: ""
+                iconColor: "red"
+                balance: "0"
                walletType: "generated"
-                isChat: ""
-                currencyBalance:  "1199.02"
                assets: []
+                fiatBalance: "1199.02"
            }
            ListElement {
                name: "Boris"
                address: "0x123"
-                path: ""
-                color: "red"
-                publicKey: ""
+                iconColor: "red"
+                balance: "0"
                walletType: "generated"
-                isChat: ""
-                currencyBalance:  "0"
                assets: []
+                fiatBalance: "0"
            }
            ListElement {
                name: "Alexandra"
                address: "0x123"
-                path: ""
-                color: "yellow"
-                publicKey: ""
+                iconColor: "yellow"
+                balance: "0"
                walletType: "generated"
-                isChat: ""
-                currencyBalance:  "0"
                assets: []
+                fiatBalance: "0"
            }
            ListElement {
                name: "Khushboo"
                address: "0x123"
-                path: ""
-                color: "blue"
-                publicKey: ""
+                iconColor: "blue"
+                balance: "0"
                walletType: "generated"
-                isChat: ""
-                currencyBalance:  "0"
                assets: []
+                fiatBalance: "0"
            }
        }
    }
@@ -1,104 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-import QtQml.Models 2.2
-
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-ListView {
-    id: messageList
-    anchors.fill: parent
-    anchors.margins: 15
-    clip: true
-    delegate: StatusMessage {
-        id: delegate
-        width: parent.width
-
-        audioMessageInfoText: "Audio Message"
-        cancelButtonText: "Cancel"
-        saveButtonText: "Save"
-        loadingImageText: "Loading image..."
-        errorLoadingImageText: "Error loading the image"
-        resendText: "Resend"
-        pinnedMsgInfoText: "Pinned by"
-
-        messageDetails: StatusMessageDetails {
-            contentType: model.contentType
-            messageContent: model.messageContent
-            amISender: model.amIsender
-            displayName: model.userName
-            secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
-            chatID: model.chatKey
-            profileImage: StatusImageSettings {
-                width: 40
-                height: 40
-                source: model.profileImage
-                isIdenticon: model.isIdenticon
-            }
-            messageText: model.message
-            hasMention: model.hasMention
-            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 : ""
-            displayName:  model.isReply ? model.replySenderName: ""
-            profileImage: StatusImageSettings {
-                width: 20
-                height: 20
-                source:  model.isReply ? model.replyProfileImage: ""
-                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
-            }
-            messageText:  model.isReply ? model.replyMessageText: ""
-            contentType: model.replyContentType
-            messageContent: model.replyMessageContent
-        }
-        quickActions: [
-            StatusFlatRoundButton {
-                id: emojiBtn
-                width: 32
-                height: 32
-                icon.name: "reaction-b"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "Add reaction"
-            },
-            StatusFlatRoundButton {
-                id: replyBtn
-                width: 32
-                height: 32
-                icon.name: "reply"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "Reply"
-            },
-            StatusFlatRoundButton {
-                width: 32
-                height: 32
-                icon.name: "tiny/edit"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "Edit"
-                onClicked: {
-                    delegate.editMode = !delegate.editMode
-                }
-            },
-            StatusFlatRoundButton {
-                id: otherBtn
-                width: 32
-                height: 32
-                icon.name: "more"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "More"
-            }
-        ]
-    }
-}
@@ -1,215 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-import QtQml.Models 2.2
-import QtGraphicalEffects 1.0
-
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Page {
-    id: root
-    anchors.fill: parent
-    anchors.margins: 16
-    property ListModel contactsModel: null
-    background: null
-
-    header: RowLayout {
-        id: headerRow
-        width: parent.width
-        height: tagSelector.height
-        anchors.right: parent.right
-        anchors.rightMargin: 8
-
-        StatusTagSelector {
-            id: tagSelector
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: 17
-            implicitHeight: 44
-            toLabelText: qsTr("To: ")
-            warningText: qsTr("5 USER LIMIT REACHED")
-            //simulate model filtering, TODO this
-            //makes more sense to be provided by the backend
-            //figure how real implementation should look like
-            property ListModel sortedList: ListModel { }
-            onTextChanged: {
-                sortedList.clear();
-                if (text !== "") {
-                    for (var i = 0; i < contactsModel.count; i++ ) {
-                        var entry = contactsModel.get(i);
-                        if (entry.name.toLowerCase().includes(text.toLowerCase())) {
-                            sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name,
-                                                  "icon": entry.icon, "isIdenticon": entry.isIdenticon,
-                                                  "onlineStatus": entry.onlineStatus});
-                            userListView.model = sortedList;
-                        }
-                    }
-                } else {
-                    userListView.model = contactsModel;
-                }
-            }
-        }
-
-        StatusButton {
-            implicitHeight: 44
-            enabled: (tagSelector.namesModel.count > 0)
-            text: "Confirm"
-        }
-    }
-
-    contentItem: Item {
-        anchors.fill: parent
-        anchors.topMargin: headerRow.height + 16
-
-        Item {
-            anchors.fill: parent
-            visible: (contactsModel.count > 0)
-
-            StatusBaseText {
-                id: contactsLabel
-                font.pixelSize: 15
-                anchors.left: parent.left
-                anchors.leftMargin: 8
-                color: Theme.palette.baseColor1
-                text: qsTr("Contacts")
-            }
-            Control {
-                width: 360
-                anchors {
-                    top: contactsLabel.bottom
-                    topMargin: 8//Style.current.padding
-                    bottom: !statusPopupMenuBackgroundContent.visible ?  parent.bottom : undefined
-                    bottomMargin: 20//Style.current.bigPadding
-                }
-                height: 16 + (!statusPopupMenuBackgroundContent.visible ? parent.height :
-                        (((userListView.count * 64) > parent.height) ? parent.height : (userListView.count * 64)))
-                x: (statusPopupMenuBackgroundContent.visible && (tagSelector.namesModel.count > 0) &&
-                   ((tagSelector.textEdit.x + 24 + statusPopupMenuBackgroundContent.width) < parent.width))
-                   ? (tagSelector.textEdit.x + 24) : 0
-                background: Rectangle {
-                    id: statusPopupMenuBackgroundContent
-                    anchors.fill: parent
-                    visible: (tagSelector.sortedList.count > 0)
-                    color: Theme.palette.statusPopupMenu.backgroundColor
-                    radius: 8
-                    layer.enabled: true
-                    layer.effect: DropShadow {
-                        width: statusPopupMenuBackgroundContent.width
-                        height: statusPopupMenuBackgroundContent.height
-                        x: statusPopupMenuBackgroundContent.x
-                        visible: statusPopupMenuBackgroundContent.visible
-                        source: statusPopupMenuBackgroundContent
-                        horizontalOffset: 0
-                        verticalOffset: 4
-                        radius: 12
-                        samples: 25
-                        spread: 0.2
-                        color: Theme.palette.dropShadow
-                    }
-                }
-                contentItem: ListView {
-                    id: userListView
-                    anchors.fill: parent
-                    anchors.topMargin: 8
-                    anchors.bottomMargin: 8
-                    clip: true
-                    model: contactsModel
-                    ScrollBar.vertical: ScrollBar {
-                        policy: ScrollBar.AsNeeded
-                    }
-                    boundsBehavior: Flickable.StopAtBounds
-                    delegate: Item {
-                        id: wrapper
-                        anchors.right: parent.right
-                        anchors.left: parent.left
-                        height: 64
-                        property bool hovered: false
-                        Rectangle {
-                            id: rectangle
-                            anchors.fill: parent
-                            anchors.rightMargin: 8
-                            anchors.leftMargin: 8
-                            radius: 8
-                            visible: (tagSelector.sortedList.count > 0)
-                            color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent"
-                        }
-
-                        StatusSmartIdenticon {
-                            id: contactImage
-                            anchors.left: parent.left
-                            anchors.leftMargin: 16//Style.current.padding
-                            anchors.verticalCenter: parent.verticalCenter
-                            name: model.name
-                            icon: StatusIconSettings {
-                                width: 28
-                                height: 28
-                                letterSize: 15
-                            }
-                            image: StatusImageSettings {
-                                width: 28
-                                height: 28
-                                source: model.icon
-                                isIdenticon: model.isIdenticon
-                            }
-                        }
-
-                        StatusBaseText {
-                            id: contactInfo
-                            text: model.name
-                            anchors.right: parent.right
-                            anchors.rightMargin: 8
-                            anchors.left: contactImage.right
-                            anchors.leftMargin: 16
-                            anchors.verticalCenter: parent.verticalCenter
-                            elide: Text.ElideRight
-                            color: Theme.palette.directColor1
-                            font.weight: Font.Medium
-                            font.pixelSize: 15
-                        }
-
-                        MouseArea {
-                            cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-                            acceptedButtons: Qt.LeftButton | Qt.RightButton
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            onEntered: {
-                                wrapper.hovered = true;
-                            }
-                            onExited: {
-                                wrapper.hovered = false;
-                            }
-                            onClicked: {
-                                tagSelector.insertTag(model.name, model.publicId);
-                            }
-                        }
-                    }
-                }
-            }
-            Component.onCompleted: {
-                if (visible) {
-                    tagSelector.textEdit.forceActiveFocus();
-                }
-            }
-        }
-
-        StatusBaseText {
-            visible: (contactsModel.count === 0)
-            anchors.centerIn: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
-            color: Theme.palette.baseColor1
-            text: qsTr("You can only send direct messages to your Contacts. \n\n
-Send a contact request to the person you would like to chat with, you will be\n able to
-chat with them once they have accepted your contact request.")
-            Component.onCompleted: {
-                if (visible) {
-                    tagSelector.enabled = false;
-                }
-            }
-        }
-    }
-}
@@ -1,111 +0,0 @@
-import QtQuick 2.12
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Popups 0.1
-
-StatusModal {
-    id: root
-
-    anchors.centerIn: parent
-
-    header.title: "Cryptokitties"
-    header.subTitle: "Public Community"
-    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-
-    contentItem: Column {
-        width: root.width
-
-        StatusModalDivider {
-            bottomPadding: 8
-        }
-
-        StatusBaseText {
-            text: "A community of cat lovers, meow!"
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
-            height: 46
-            color: Theme.palette.directColor1
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.leftMargin: 16
-            anchors.rightMargin: 16
-        }
-
-        StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
-        }
-
-        StatusDescriptionListItem {
-            title: "Share community"
-            subTitle: "https://join.status.im/u/0x04...45f19"
-            tooltip.text: "Copy to clipboard"
-            icon.name: "copy"
-            iconButton.onClicked: tooltip.visible = !tooltip.visible
-            width: parent.width
-        }
-
-        StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
-        }
-
-        StatusListItem {
-            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
-            title: "Members"
-            icon.name: "group-chat"
-            label: "184"
-            components: [
-                StatusIcon {
-                    icon: "chevron-down"
-                    rotation: 270
-                    color: Theme.palette.baseColor1
-                }
-            ]
-        }
-
-        StatusListItem {
-            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
-            title: "Notifications"
-            icon.name: "notification"
-            components: [
-                StatusSwitch {}
-            ]
-        }
-
-        StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
-        }
-
-        StatusListItem {
-            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
-            title: "Edit community"
-            icon.name: "edit"
-            type: StatusListItem.Type.Secondary
-        }
-
-        StatusListItem {
-            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
-            title: "Transfer ownership"
-            icon.name: "exchange"
-            type: StatusListItem.Type.Secondary
-        }
-
-        StatusListItem {
-            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
-            title: "Leave community"
-            icon.name: "arrow-right"
-            icon.rotation: 180
-            type: StatusListItem.Type.Secondary
-        }
-    }
-}
@@ -1,40 +0,0 @@
-import QtQuick 2.12
-
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Popups 0.1
-import StatusQ.Core.Theme 0.1
-
-StatusModal {
-    id: root
-
-    header.title: "Contact Requests"
-    headerActionButton: StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 32
-        height: 32
-
-        icon.width: 20
-        icon.height: 20
-        icon.name: "notification"
-    }
-
-    contentItem: StatusBaseText {
-        anchors.centerIn: parent
-        text: "Contact request will be shown here"
-        font.pixelSize: 15
-        color: Theme.palette.directColor1
-    }
-
-    rightButtons: [
-        StatusButton {
-            text: "Decline all"
-            type: StatusBaseButton.Type.Danger
-            onClicked: root.close()
-        },
-        StatusButton {
-            text: "Accept all"
-            onClicked: root.close()
-        }
-    ]
-}
@@ -1,194 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Layouts 1.12
-
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-import "data" 1.0
-
-StatusAppThreePanelLayout {
-    id: root
-    property bool createChat: false
-
-    leftPanel: Item {
-        anchors.fill: parent
-
-        StatusNavigationPanelHeadline {
-            id: headline
-            anchors.top: parent.top
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Chat"
-        }
-
-        RowLayout {
-            id: searchInputWrapper
-            width: parent.width
-            height: searchInput.height
-            anchors.top: headline.bottom
-            anchors.topMargin: 16
-            anchors.right: parent.right
-            anchors.rightMargin: 8
-
-            StatusBaseInput {
-                id: searchInput
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                Layout.leftMargin: 17
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 0
-                placeholderText: "Search"
-                icon.name: "search"
-            }
-
-            StatusIconTabButton {
-                icon.name: "public-chat"
-            }
-
-            StatusIconTabButton {
-                icon.name: "edit"
-                onClicked: {
-                    root.createChat = !root.createChat;
-                }
-            }
-        }
-
-        Column {
-            anchors.top: searchInputWrapper.bottom
-            anchors.topMargin: 16
-            width: parent.width
-            spacing: 8
-
-            StatusContactRequestsIndicatorListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                title: "Contact requests"
-                requestsCount: 3
-                sensor.onClicked: demoContactRequestsModal.open()
-            }
-
-            StatusChatList {
-                anchors.horizontalCenter: parent.horizontalCenter
-                model: Models.demoChatListItems
-                onChatItemUnmuted: {
-                    for (var i = 0; i < Models.demoChatListItems.count; i++) {
-                        let item = Models.demoChatListItems.get(i);
-                        if (item.chatId === id) {
-                            Models.demoChatListItems.setProperty(i, "muted", false)
-                        }
-                    }
-                }
-
-                popupMenu: StatusPopupMenu {
-
-                    property string chatId
-
-                    openHandler: function (id) {
-                        chatId = id
-                    }
-
-                    StatusMenuItem {
-                        text: "View Profile"
-                        icon.name: "group-chat"
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: "Mute chat"
-                        icon.name: "notification"
-                    }
-
-                    StatusMenuItem {
-                        text: "Mark as Read"
-                        icon.name: "checkmark-circle"
-                    }
-
-                    StatusMenuItem {
-                        text: "Clear history"
-                        icon.name: "close-circle"
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: "Delete chat"
-                        icon.name: "delete"
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-            }
-        }
-    }
-
-    centerPanel: Loader {
-        anchors.fill: parent
-        sourceComponent: root.createChat ? createChatView : chatChannelView
-    }
-
-    Component {
-        id: createChatView
-        CreateChatView {
-            contactsModel: Models.dummyContactsModel
-        }
-    }
-
-    Component {
-        id: chatChannelView
-        ChatChannelView {
-            model: Models.chatMessagesModel
-        }
-    }
-
-    rightPanel: Item {
-        anchors.fill: parent
-
-        StatusChatToolBar {
-            anchors.top: parent.top
-            width: parent.width
-
-            chatInfoButton.title: "Amazing Funny Squirrel"
-            chatInfoButton.subTitle: "Contact"
-            chatInfoButton.icon.color: Theme.palette.miscColor7
-            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-            chatInfoButton.pinnedMessagesCount: 1
-
-            searchButton.visible: false
-            membersButton.visible: false
-            notificationCount: 1
-
-            onNotificationButtonClicked: notificationCount = 0
-
-            popupMenu: StatusPopupMenu {
-                id: contextMenu
-
-                StatusMenuItem {
-                    text: "Mute Chat"
-                    icon.name: "notification"
-                }
-                StatusMenuItem {
-                    text: "Mark as Read"
-                    icon.name: "checkmark-circle"
-                }
-                StatusMenuItem {
-                    text: "Clear History"
-                    icon.name: "close-circle"
-                }
-
-                StatusMenuSeparator {}
-
-                StatusMenuItem {
-                    text: "Leave Chat"
-                    icon.name: "arrow-right"
-                    icon.width: 14
-                    iconRotation: 180
-                    type: StatusMenuItem.Type.Danger
-                }
-            }
-        }
-    }
-}
@@ -1,275 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Popups 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
-import StatusQ.Core.Theme 0.1
-
-import "data" 1.0
-
-StatusAppThreePanelLayout {
-    id: root
-
-    property string communityDetailModalTitle: ""
-    property string communityDetailModalImage: ""
-    signal chatInfoButtonClicked()
-
-    handle: Rectangle {
-        implicitWidth: 5
-        color: SplitHandle.pressed ? Theme.palette.baseColor2
-                                   : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
-    }
-    leftPanel: Item {
-        id: leftPanel
-
-        StatusChatInfoToolBar {
-            id: statusChatInfoToolBar
-
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            chatInfoButton.title: "CryptoKitties"
-            chatInfoButton.subTitle: "128 Members"
-            chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-            chatInfoButton.icon.color: Theme.palette.miscColor6
-            chatInfoButton.onClicked:  { chatInfoButtonClicked(); }
-
-            popupMenu: StatusPopupMenu {
-
-                StatusMenuItem {
-                    text: "Create channel"
-                    icon.name: "channel"
-                }
-
-                StatusMenuItem {
-                    text: "Create category"
-                    icon.name: "channel-category"
-                }
-
-                StatusMenuSeparator {}
-
-                StatusMenuItem {
-                    text: "Invite people"
-                    icon.name: "share-ios"
-                }
-
-            }
-        }
-
-        ScrollView {
-            id: scrollView
-
-            anchors.top: statusChatInfoToolBar.bottom
-            anchors.topMargin: 8
-            anchors.bottom: parent.bottom
-            width: leftPanel.width
-
-            contentHeight: communityCategories.height
-            clip: true
-
-            StatusChatListAndCategories {
-                id: communityCategories
-                width: leftPanel.width
-                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
-
-                draggableItems: true
-                draggableCategories: false
-                model: Models.demoCommunityChatListItems
-
-                showCategoryActionButtons: true
-
-                categoryPopupMenu: StatusPopupMenu {
-
-                    property string categoryId
-
-                    openHandler: function (id) {
-                        categoryId = id
-                    }
-
-                    StatusMenuItem {
-                        text: "Mute Category"
-                        icon.name: "notification"
-                    }
-
-                    StatusMenuItem {
-                        text: "Mark as Read"
-                        icon.name: "checkmark-circle"
-                    }
-
-                    StatusMenuItem {
-                        text: "Edit Category"
-                        icon.name: "edit"
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: "Delete Category"
-                        icon.name: "delete"
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-
-                chatListPopupMenu: StatusPopupMenu {
-
-                    property string chatId
-
-                    StatusMenuItem {
-                        text: "Mute chat"
-                        icon.name: "notification"
-                    }
-
-                    StatusMenuItem {
-                        text: "Mark as Read"
-                        icon.name: "checkmark-circle"
-                    }
-
-                    StatusMenuItem {
-                        text: "Clear history"
-                        icon.name: "close-circle"
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: "Delete chat"
-                        icon.name: "delete"
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-
-                popupMenu: StatusPopupMenu {
-                    StatusMenuItem {
-                        text: "Create channel"
-                        icon.name: "channel"
-                    }
-
-                    StatusMenuItem {
-                        text: "Create category"
-                        icon.name: "channel-category"
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: "Invite people"
-                        icon.name: "share-ios"
-                    }
-                }
-            }
-        }
-    }
-
-    centerPanel: Item {
-        StatusChatToolBar {
-            id: statusChatToolBar
-            anchors.top: parent.top
-            width: parent.width
-
-            chatInfoButton.title: "general"
-            chatInfoButton.subTitle: "Community Chat"
-            chatInfoButton.icon.color: Theme.palette.miscColor6
-            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-            onSearchButtonClicked: {
-                searchButton.highlighted = !searchButton.highlighted;
-                searchPopup.setSearchSelection(communityDetailModalTitle,
-                                               "",
-                                               communityDetailModalImage);
-                searchPopup.open();
-            }
-            membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
-            onMembersButtonClicked: {
-                root.showRightPanel = !root.showRightPanel;
-            }
-        }
-
-        StatusSearchPopup {
-            id: searchPopup
-            searchOptionsPopupMenu: searchPopupMenu
-            onAboutToHide: {
-                if (searchPopupMenu.visible) {
-                    searchPopupMenu.close();
-                }
-                //clear menu
-                for (var i = 2; i < searchPopupMenu.count; i++) {
-                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
-                }
-            }
-            onClosed: {
-                statusChatToolBar.searchButton.highlighted = false
-                searchPopupMenu.dismiss();
-            }
-            onSearchTextChanged: {
-                if (searchPopup.searchText !== "") {
-                    searchPopup.loading = true;
-                    searchModelSimTimer.start();
-                } else {
-                    searchPopup.searchResults = [];
-                    searchModelSimTimer.stop();
-                }
-            }
-            Timer {
-                id: searchModelSimTimer
-                interval: 500
-                onTriggered: {
-                    if (searchPopup.searchText.startsWith("c")) {
-                        searchPopup.searchResults = Models.searchResultsA;
-                    } else {
-                        searchPopup.searchResults = Models.searchResultsB;
-                    }
-                    searchPopup.loading = false;
-                }
-            }
-        }
-        StatusSearchLocationMenu {
-            id: searchPopupMenu
-            searchPopup: searchPopup
-            locationModel: Models.optionsModel
-        }
-    }
-
-    rightPanel: Item {
-        id: rightPanel
-        StatusBaseText {
-            id: titleText
-            anchors.top: parent.top
-            anchors.topMargin:16
-            anchors.left: parent.left
-            anchors.leftMargin: 16
-            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
-            visible: (opacity > 0.1)
-            font.pixelSize: 15
-            text: qsTr("Members")
-        }
-
-        ListView {
-            anchors.top: titleText.bottom
-            anchors.topMargin: 16
-            anchors.left: parent.left
-            anchors.leftMargin: 8
-            anchors.right: parent.right
-            anchors.rightMargin: 8
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 16
-            boundsBehavior: Flickable.StopAtBounds
-            model: Models.membersListModel
-            delegate: StatusMemberListItem {
-                implicitWidth: parent.width
-                nickName: model.nickName
-                userName: model.userName
-                chatKey: model.chatKey
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
-                image.source: model.source
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.isOnline
-                ringSettings.ringSpecModel: model.ringSpecModel
-                ringSettings.distinctiveColors: Theme.palette.identiconRingColors
-                ringSettings.totalRingUnits: model.totalRingUnits
-            }
-        }
-    }
-}
@@ -1,77 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.14
-
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
-import StatusQ.Core.Theme 0.1
-
-import "data" 1.0
-
-StatusAppTwoPanelLayout {
-    id: root
-
-    leftPanel: Item {
-        anchors.fill: parent
-
-        StatusNavigationPanelHeadline {
-            id: profileHeadline
-            anchors.top: parent.top
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Profile"
-        }
-
-        ScrollView {
-            anchors.top: profileHeadline.bottom
-            anchors.topMargin: 16
-            anchors.bottom: parent.bottom
-            width: parent.width
-
-            contentHeight: profileMenuItems.height + 8
-            contentWidth: parent.width
-            clip: true
-
-            Column {
-                id: profileMenuItems
-                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 4
-
-                Repeater {
-                    model: Models.demoProfileGeneralMenuItems
-                    delegate: StatusNavigationListItem {
-                        title: model.title
-                        icon.name: model.icon
-                    }
-                }
-
-                StatusListSectionHeadline { text: "Settings" }
-
-                Repeater {
-                    model: Models.demoProfileSettingsMenuItems
-                    delegate: StatusNavigationListItem {
-                        title: model.title
-                        icon.name: model.icon
-                    }
-                }
-
-                Item {
-                    id: invisibleSeparator
-                    height: 16
-                    width: parent.width
-                }
-
-                Repeater {
-                    model: Models.demoProfileOtherMenuItems
-                    delegate: StatusNavigationListItem {
-                        title: model.title
-                        icon.name: model.icon
-                    }
-                }
-            }
-        }
-    }
-
-    rightPanel: Item {
-        anchors.fill: parent
-    }
-}
@@ -1 +0,0 @@
-singleton Models 1.0 Models.qml
@@ -12,8 +12,6 @@ import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1

-import "demoapp/data" 1.0
-
 StatusWindow {
    id: rootWindow
    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
@@ -42,21 +40,27 @@ StatusWindow {
        readonly property int community: 1
        readonly property int wallet: 2
        readonly property int browser: 3
-        readonly property int nodeManagement: 4
-        readonly property int profileSettings: 5
+        readonly property int timeline: 4
+        readonly property int nodeManagement: 5
+        readonly property int profileSettings: 6
        readonly property int apiDocumentation: 100
        readonly property int demoApp: 101
    }

+    Models {
+        id: models
+    }
+
    function setActiveItem(sectionId) {
-        for (var i = 0; i < Models.mainAppSectionsModel.count; i++) {
-            let item = Models.mainAppSectionsModel.get(i)
-            if (item.sectionId !== sectionId) {
-                Models.mainAppSectionsModel.setProperty(i, "active", false);
+        for (var i = 0; i < models.mainAppSectionsModel.count; i++) {
+            let item = models.mainAppSectionsModel.get(i)
+            if (item.sectionId !== sectionId)
+            {
+                models.mainAppSectionsModel.setProperty(i, "active", false)
                continue
            }

-            Models.mainAppSectionsModel.setProperty(i, "active", true);
+            models.mainAppSectionsModel.setProperty(i, "active", true);
        }
    }

@@ -69,7 +73,7 @@ StatusWindow {

            communityTypeRole: "sectionType"
            communityTypeValue: appSectionType.community
-            sectionModel: Models.mainAppSectionsModel
+            sectionModel: models.mainAppSectionsModel

            regularNavBarButton: StatusNavBarTabButton {
                anchors.horizontalCenter: parent.horizontalCenter
@@ -124,14 +128,6 @@ StatusWindow {
        id: libraryDocumentationCmp

        StatusAppTwoPanelLayout {
-            id: mainPageView
-
-            function page(name) {
-                viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
-            }
-            function control(name) {
-                viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
-            }

            leftPanel: Item {
                anchors.fill: parent
@@ -151,147 +147,122 @@ StatusWindow {

                        StatusListSectionHeadline { text: "StatusQ.Core" }
                        StatusNavigationListItem { 
-                            title: "Icons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
+                            title: "Icons" 
+                            selected: page.sourceComponent == iconsComponent
+                            onClicked: page.sourceComponent = iconsComponent
                        }

                        StatusListSectionHeadline { text: "StatusQ.Layout" }
                        StatusNavigationListItem { 
-                            title: "Layouts"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
+                            title: "Layouts" 
+                            selected: page.sourceComponent == layoutComponent
+                            onClicked: page.sourceComponent = layoutComponent
                        }

                        StatusListSectionHeadline { text: "StatusQ.Controls" }
                        StatusNavigationListItem { 
-                            title: "Buttons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
+                            title: "Buttons" 
+                            selected: page.sourceComponent == buttonsComponent
+                            onClicked: page.sourceComponent = buttonsComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusSwitchTab"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusTabSwitch");
+                            title: "StatusSwitchTab" 
+                            selected: page.sourceComponent == statusTabSwitchesComponent
+                            onClicked: page.sourceComponent = statusTabSwitchesComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusChatCommandButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusChatCommandButton" 
+                            selected: page.sourceComponent == statusChatCommandButtonPageComponent
+                            onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
                        }
                        StatusNavigationListItem { 
-                            title: "Controls"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
+                            title: "Controls" 
+                            selected: page.sourceComponent == controlsComponent
+                            onClicked: page.sourceComponent = controlsComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusTabBarIconButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusTabBarIconButton" 
+                            selected: page.sourceComponent == statusTabBarIconButtonPageComponent
+                            onClicked: page.sourceComponent = statusTabBarIconButtonPageComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusInput" 
+                            selected: page.sourceComponent == statusInputPageComponent
+                            onClicked: page.sourceComponent = statusInputPageComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusSelect" 
+                            selected: page.sourceComponent == statusSelectPageComponent
+                            onClicked: page.sourceComponent = statusSelectPageComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusAccountSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusAccountSelector" 
+                            selected: page.sourceComponent == statusAccountSelectorPageComponent
+                            onClicked: page.sourceComponent = statusAccountSelectorPageComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusAssetSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusAssetSelector" 
+                            selected: page.sourceComponent == statusAssetSelectorPageComponent
+                            onClicked: page.sourceComponent = statusAssetSelectorPageComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusColorSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusColorSelector" 
+                            selected: page.sourceComponent == statusColorSelectorPageComponent
+                            onClicked: page.sourceComponent = statusColorSelectorPageComponent
                        }
                        StatusNavigationListItem { 
-                            title: "StatusWalletColorButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            title: "StatusWalletColorButton" 
+                            selected: page.sourceComponent == statusWalletColorButtonPageComponent
+                            onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
                        }
                        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);
+                            title: "StatusWalletColorSelect" 
+                            selected: page.sourceComponent == statusWalletColorSelectPageComponent
+                            onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
                        }
                        StatusListSectionHeadline { text: "StatusQ.Components" }
                        StatusNavigationListItem { 
                            title: "StatusAddress"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            selected: page.sourceComponent == statusAddressPageComponent
+                            onClicked: page.sourceComponent = statusAddressPageComponent
                        }
                        StatusNavigationListItem { 
                            title: "List Items"
-                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
-                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
+                            selected: page.sourceComponent == listItemsComponent
+                            onClicked: page.sourceComponent = listItemsComponent
                        }
                        StatusNavigationListItem { 
                            title: "StatusChatInfoToolBar"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            selected: page.sourceComponent == chatInfoToolBarComponent
+                            onClicked: page.sourceComponent = chatInfoToolBarComponent
                        }
                        StatusNavigationListItem { 
                            title: "Others"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
+                            selected: page.sourceComponent == othersComponent
+                            onClicked: page.sourceComponent = othersComponent
                        }
                        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);
+                            selected: page.sourceComponent == settingsComponent
+                            onClicked: page.sourceComponent = settingsComponent
                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                        StatusNavigationListItem { 
                            title: "StatusPopupMenu"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            selected: page.sourceComponent == popupMenuComponent
+                            onClicked: page.sourceComponent = popupMenuComponent
                        }

                        StatusNavigationListItem {
                            title: "StatusModal"
-                            selected: viewLoader.source.toString().includes("Popups")
-                            onClicked: mainPageView.control("Popups");
+                            selected: page.sourceComponent == statusModalComponent
+                            onClicked: page.sourceComponent = statusModalComponent
                        }
                        StatusListSectionHeadline { text: "StatusQ.Platform" }
                        StatusNavigationListItem {
                            title: "StatusMacNotification"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            selected: page.sourceComponent == notificationComponent
+                            onClicked: page.sourceComponent = notificationComponent
                        }
                    }
                }
@@ -311,17 +282,13 @@ StatusWindow {
                        width: rightPanel.width
                        anchors.top: parent.top
                        anchors.topMargin: 64
-                        height: Math.max(rootWindow.height, viewLoader.height + 128)
+                        height: Math.max(rootWindow.height, page.height + 128)
                        scale: rootWindow.factor
                        Loader {
-                            id: viewLoader
+                            id: page
+                            active: true
                            anchors.centerIn: parent
-                            source: mainPageView.control("Icons")
-                            onSourceChanged: {
-                                if (source.toString().includes("Icons")) {
-                                    item.iconColor = Theme.palette.primaryColor1;
-                                }
-                            }
+                            sourceComponent: iconsComponent
                        }
                    }
                }
@@ -352,6 +319,116 @@ StatusWindow {
        }
    }

+    Component {
+        id: iconsComponent
+        Icons { iconColor: Theme.palette.primaryColor1 }
+    }
+
+    Component {
+        id: controlsComponent
+        Controls {}
+    }
+
+    Component {
+        id: statusInputPageComponent
+        StatusInputPage {}
+    }
+
+    Component {
+        id: statusSelectPageComponent
+        StatusSelectPage {}
+    }
+
+    Component {
+        id: statusAccountSelectorPageComponent
+        StatusAccountSelectorPage {}
+    }
+
+    Component {
+        id: statusAssetSelectorPageComponent
+        StatusAssetSelectorPage {}
+    }
+
+    Component {
+        id: statusColorSelectorPageComponent
+        StatusColorSelectorPage {}
+    }
+
+    Component {
+        id: statusTabBarIconButtonPageComponent
+        StatusTabBarIconButtonPage {}
+    }
+
+    Component {
+        id: statusWalletColorButtonPageComponent
+        StatusWalletColorButtonPage {}
+    }
+
+    Component {
+        id: statusWalletColorSelectPageComponent
+        StatusWalletColorSelectPage {}
+    }
+
+    Component {
+        id: listItemsComponent
+        ListItems {}
+    }
+
+    Component {
+        id: statusAddressPageComponent
+        StatusAddressPage {}
+    }
+
+    Component {
+        id: layoutComponent
+        Layout {}
+    }
+
+    Component {
+        id: othersComponent
+        Others {}
+    }
+
+    Component {
+        id: buttonsComponent
+        Buttons {}
+    }
+
+    Component {
+        id: statusChatCommandButtonPageComponent
+        StatusChatCommandButtonPage {}
+    }
+
+    Component {
+        id: popupMenuComponent
+        StatusPopupMenuPage {}
+    }
+
+    Component {
+        id: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
+    Component {
+        id: statusModalComponent
+        Popups {}
+    }
+
+    Component {
+        id: statusTabSwitchesComponent
+        StatusTabSwitchPage {}
+    }
+
+    Component {
+        id: settingsComponent
+        StatusExpandableSettingsItemPage{}
+    }
+
+    Component {
+        id: notificationComponent
+        StatusMacNotificationPage  {}
+    }
+
    Component {
        id: demoAppCmp

@@ -390,7 +467,8 @@ StatusWindow {
            }
            DemoApp {
                id: demoApp
-                anchors.centerIn: parent
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
            }
            DropShadow {
                anchors.fill: demoApp
@@ -1,38 +0,0 @@
-import QtQuick.Layouts 1.14
-import StatusQ.Controls 0.1
-
-GridLayout {
-    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
-
-    StatusPasswordStrengthIndicator {
-        id: veryweakPw
-        strength: StatusPasswordStrengthIndicator.Strength.VeryWeak
-        value: 0.75
-    }
-
-    StatusPasswordStrengthIndicator {
-        id: weakPw
-        strength: StatusPasswordStrengthIndicator.Strength.Weak
-        value: 0.5
-    }
-
-    StatusPasswordStrengthIndicator {
-        id: sosoPw
-        strength: StatusPasswordStrengthIndicator.Strength.SoSo
-        value: 0.25
-    }
-
-    StatusPasswordStrengthIndicator {
-        id: goodPw
-        strength: StatusPasswordStrengthIndicator.Strength.Good
-        value: 1
-    }
-
-    StatusPasswordStrengthIndicator {
-        id: greatPw
-        strength: StatusPasswordStrengthIndicator.Strength.Great
-        value: 0.3
-    }
-}
@@ -1,75 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Controls.Validators 0.1
-
-Column {
-    id: root
-    spacing: 25
-    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-    // PIN input that accepts only numbers
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter Keycard PIN"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: numbersPinInput
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusIntValidator{bottom: 0; top: 999999;}
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only numbers allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PIN: " + numbersPinInput.pinInput
-        font.pixelSize: 12
-    }
-
-    // PIN input that accepts input depending on the regular expression definition
-    StatusBaseText {
-        topPadding: 100
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter another Keycard PIN"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: regexPinInput
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
-        circleDiameter: 22
-        circleSpacing: 22
-        pinLen: 7
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only alphanumeric characters and '@' allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PIN: " + regexPinInput.pinInput
-        font.pixelSize: 12
-    }
-}
@@ -1,56 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Components 0.1
-
-Item {
-    id: root
-    anchors.fill: parent
-
-    property ListModel asortedContacts: ListModel {
-        ListElement {
-            publicId: "0x0"
-            name: "Maria"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 3
-        }
-        ListElement {
-            publicId: "0x1"
-            name: "James"
-            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-            isIdenticon: false
-            onlineStatus: 1
-        }
-        ListElement {
-            publicId: "0x2"
-            name: "Paul"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 2
-        }
-        ListElement {
-            publicId: "0x3"
-            name: "Tracy"
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
-            onlineStatus: 3
-        }
-        ListElement {
-            publicId: "0x4"
-            name: "Nick"
-            icon: ""
-            isIdenticon: false
-            onlineStatus: 3
-        }
-    }
-
-    StatusTagSelector {
-        id: tagSelector
-        width: 650
-        height: 44
-        anchors.centerIn: parent
-        namesModel: root.asortedContacts
-        toLabelText: qsTr("To: ")
-        warningText: qsTr("5 USER LIMIT REACHED")
-    }
-}
@@ -1,40 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Components 0.1
-
-Item {
-    id: root
-    anchors.fill: parent
-
-    Column {
-        id: toastArea
-        anchors.centerIn: parent
-        spacing: 8
-        Repeater {
-            id: toastRepeater
-            width: parent.width
-            height: childrenRect.height
-            model: [
-                {"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":""},
-                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""},
-                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com"},
-                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""}
-            ]
-            delegate: StatusToastMessage {
-                primaryText: modelData.title
-                secondaryText: modelData.subTitle
-                icon.name: modelData.icon
-                loading: modelData.loading
-                type: modelData.type
-                linkUrl: modelData.url
-                onLinkActivated: {
-                    Qt.openUrlExternally(link);
-                }
-                //simulate open
-                Component.onCompleted: {
-                    open = true;
-                }
-            }
-        }
-    }
-}
@@ -1,100 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: root
-    width: 800
-    height: 100
-
-    //Simulate animation between steps
-    property bool stepsCompleted: false
-    function reset() {
-        for (var i = 0; i < stepsListModel.count; i++) {
-            stepsListModel.setProperty(i, "loading", false);
-            stepsListModel.setProperty(i, "stepCompleted", false);
-            step1.loadingTime = 0;
-            step2.loadingTime = 0;
-            root.stepsCompleted = false;
-        }
-    }
-
-    ListModel {
-        id: stepsListModel
-        ListElement {description:"Send Request"; loadingTime: 0; stepCompleted: false}
-        ListElement {description:"Receive Response"; loadingTime: 0; stepCompleted: false}
-        ListElement {description:"Confirm Identity"; loadingTime: 0; stepCompleted: false}
-    }
-
-    Shortcut {
-        sequence: "Ctrl+R"
-        onActivated: {
-            if (!root.stepsCompleted) {
-                animate.running = true;
-            } else {
-                root.reset();
-            }
-        }
-    }
-
-    StatusBaseText {
-        id: indicLabel
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Press Ctrl+R to run the animation"
-        font.pixelSize: 17
-    }
-
-    SequentialAnimation {
-        id: animate
-        ScriptAction {
-            id: step1
-            property int loadingTime: 0
-            Behavior on loadingTime { NumberAnimation { duration: 2000 }}
-            onLoadingTimeChanged: {
-                stepsListModel.setProperty(1, "loadingTime", step1.loadingTime);
-            }
-            script: {
-                step1.loadingTime = 2000;
-                stepsListModel.setProperty(0, "loadingTime", step1.loadingTime);
-                stepsListModel.setProperty(0, "stepCompleted", true);
-            }
-        }
-        PauseAnimation {
-            duration: 2100
-        }
-        ScriptAction {
-            id: step2
-            property int loadingTime: 0
-            Behavior on loadingTime { NumberAnimation { duration: 2000 } }
-            onLoadingTimeChanged: {
-                stepsListModel.setProperty(2, "loadingTime", step2.loadingTime);
-            }
-            script: {
-                step2.loadingTime = 2000;
-                stepsListModel.setProperty(1, "stepCompleted", true);
-            }
-        }
-        PauseAnimation {
-            duration: 2100
-        }
-        ScriptAction {
-            script: {
-                stepsListModel.setProperty(2, "stepCompleted", true);
-                root.stepsCompleted = true;
-            }
-        }
-    }
-    //simulation code
-
-    StatusWizardStepper {
-        id: wizardStepper
-        width: (parent.width - 50)
-        anchors.top: indicLabel.bottom
-        anchors.topMargin: 16
-        anchors.horizontalCenter: parent.horizontalCenter
-        stepsModel: stepsListModel
-    }
-}
@@ -1,35 +1,18 @@
 <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>
-        <file>controls/Layout.qml</file>
-        <file>controls/ListItems.qml</file>
-        <file>controls/Others.qml</file>
-        <file>controls/Popups.qml</file>
-        <file>demoapp/DemoCommunityDetailModal.qml</file>
-        <file>demoapp/DemoContactRequestsModal.qml</file>
-        <file>demoapp/StatusAppChatView.qml</file>
-        <file>demoapp/StatusAppCommunityView.qml</file>
-        <file>demoapp/StatusAppProfileSettingsView.qml</file>
-        <file>demoapp/data/Models.qml</file>
-        <file>demoapp/data/qmldir</file>
+        <file>Controls.qml</file>
+        <file>Icons.qml</file>
+        <file>Others.qml</file>
+        <file>Buttons.qml</file>
+        <file>DemoApp.qml</file>
+        <file>ListItems.qml</file>
+        <file>StatusChatInfoToolBarPage.qml</file>
+        <file>StatusPopupMenuPage.qml</file>
+        <file>StatusInputPage.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>Layout.qml</file>
+        <file>Popups.qml</file>
+        <file>StatusExpandableSettingsItemPage.qml</file>
    </qresource>
-</RCC>
+</RCC>
@@ -15,16 +15,13 @@ SOURCES += \
        handler.cpp \
        main.cpp \
        sandboxapp.cpp \
-        spellchecker.cpp \
+        spellchecker.cpp

 !macx {
    SOURCES += statuswindow.cpp
 }

 TARGET = sandboxapp
-DESTDIR = $$PWD/bin
-
-DESTDIR = $$PWD/bin

 macx {
    CONFIG -= app_bundle
@@ -41,12 +38,6 @@ macx {
        DEFINES += USE_HUNSPELL
        message("hunspell exists in /usr/local/lib")
    }
-
-    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
-    first.depends = $(first) copydata
-    export(first.depends)
-    export(copydata.commands)
-    QMAKE_EXTRA_TARGETS += first copydata
 }

 ios {
@@ -63,6 +54,14 @@ ios {
 RESOURCES += qml.qrc \
            $$PWD/../statusq.qrc

+DESTDIR = $$PWD/bin
+
+copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
+first.depends = $(first) copydata
+export(first.depends)
+export(copydata.commands)
+QMAKE_EXTRA_TARGETS += first copydata
+
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
@@ -20,7 +20,7 @@ void SandboxApp::startEngine()
    qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");

 #ifdef QT_DEBUG
-    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
+    const QUrl url(applicationDirPath() + "/../main.qml");
 #else
    const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif
@@ -1,10 +1,4 @@
-#!/bin/bash
-
 make clean
-if [[ $OSTYPE == 'darwin'* ]]
-then
-  qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-else
-  qmake sandbox.pro CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-fi
-make
+qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+make
+
@@ -24,7 +24,7 @@ Column {

    property var filterFn

-    signal chatItemSelected(string categoryId, string id)
+    signal chatItemSelected(string id)
    signal chatItemUnmuted(string id)
    signal chatItemReordered(string id, int from, int to)

@@ -95,13 +95,12 @@ Column {
                    opacity: dragSensor.active ? 0.0 : 1.0
                    originalOrder: model.position
                    chatId: model.itemId
-                    categoryId: model.parentItemId? model.parentItemId : ""
+                    categoryId: model.itemId
                    name: model.name
                    type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
                    muted: model.muted
                    hasUnreadMessages: model.hasUnreadMessages
                    notificationsCount: model.notificationsCount
-                    highlightWhenCreated: model.highlight
                    selected: model.active
                    icon.color: model.color
                    image.isIdenticon: model.isIdenticon
@@ -109,8 +108,6 @@ Column {

                    sensor.cursorShape: dragSensor.cursorShape
                    onClicked: {
-                        highlightWhenCreated = false
-
                        if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
                            statusChatListItem.highlighted = true

@@ -139,7 +136,7 @@ Column {
                            return
                        }
                        if (!statusChatListItem.selected) {
-                            statusChatList.chatItemSelected(model.parentItemId, model.itemId)
+                            statusChatList.chatItemSelected(model.itemId)
                        }
                    }
                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
@@ -34,7 +34,7 @@ Item {
    property Component chatListPopupMenu
    property Component popupMenu

-    signal chatItemSelected(string categoryId, string id)
+    signal chatItemSelected(string id)
    signal chatItemUnmuted(string id)
    signal chatItemReordered(string categoryId, string chatId, int from, int to)
    signal chatListCategoryReordered(string categoryId, int from, int to)
@@ -70,13 +70,13 @@ Item {
                id: statusChatList
                anchors.horizontalCenter: parent.horizontalCenter
                visible: statusChatList.model.count > 0
-                onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
                onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
                draggableItems: statusChatListAndCategories.draggableItems
                model: statusChatListAndCategories.model
                filterFn: function (model) {
-                    return !model.isCategory
+                    return (model.subItems.count === 0)
                }
                popupMenu: statusChatListAndCategories.chatListPopupMenu
            }
@@ -139,7 +139,7 @@ Item {
                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)

                        chatList.model: model.subItems
-                        chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
+                        chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                        chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
                        chatList.draggableItems: statusChatListAndCategories.draggableItems
@@ -35,7 +35,7 @@ Column {
    StatusChatListCategoryItem {
        id: statusChatListCategoryItem
        title: statusChatListCategory.name
-        visible: model.isCategory
+        visible: (model.subItems.count > 0)
        opened: statusChatListCategory.opened
        sensor.pressAndHoldInterval: 150

@@ -32,7 +32,6 @@ Rectangle {
    }
    property int type: StatusChatListItem.Type.PublicChat
    property bool highlighted: false
-    property bool highlightWhenCreated: false
    property bool selected: false
    property bool dragged: false
    property alias sensor: sensor
@@ -59,7 +58,7 @@ Rectangle {
        if (selected) {
            return Theme.palette.statusChatListItem.selectedBackgroundColor
        }
-        return hoverHander.hovered || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
    }

    opacity: dragged ? 0.7 : 1
@@ -67,13 +66,10 @@ Rectangle {
    MouseArea {
        id: sensor

-        HoverHandler {
-            id: hoverHander
-        }
-
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        hoverEnabled: true

        onClicked: statusChatListItem.clicked(mouse)

@@ -96,7 +92,7 @@ Rectangle {
            width: 14
            visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
            opacity: {
-                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                    return 0.4
                }
                return statusChatListItem.hasUnreadMessages ||
@@ -104,7 +100,7 @@ Rectangle {
                        statusChatListItem.selected ||
                        statusChatListItem.highlighted ||
                        statusBadge.visible ||
-                        hoverHander.hovered ? 1.0 : 0.7
+                        sensor.containsMouse ? 1.0 : 0.7
            }

            icon: {
@@ -139,21 +135,19 @@ Rectangle {
                      statusChatListItem.name)
            elide: Text.ElideRight
            color: {
-                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                    return Theme.palette.directColor5
                }
                return statusChatListItem.hasUnreadMessages ||
                        statusChatListItem.notificationsCount > 0 ||
                        statusChatListItem.selected ||
                        statusChatListItem.highlighted ||
-                        statusChatListItem.highlightWhenCreated ||
-                        hoverHander.hovered ||
+                        sensor.containsMouse ||
                        statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
            }
            font.weight: !statusChatListItem.muted &&
                         (statusChatListItem.hasUnreadMessages ||
                          statusChatListItem.notificationsCount > 0 ||
-                          statusChatListItem.highlightWhenCreated ||
                          statusBadge.visible) ? Font.Bold : Font.Medium
            font.pixelSize: 15
        }
@@ -93,25 +93,6 @@ Rectangle {

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

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

+    implicitWidth: 448
+    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
+
+    enum Type {
+        Primary,
+        Secondary,
+        Danger
+    }
+
+    color: {
+        if (sensor.containsMouse) {
+            switch(type) {
+                case StatusListItem.Type.Primary:
+                    return Theme.palette.baseColor2
+                case StatusListItem.Type.Secondary:
+                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
+                case StatusListItem.Type.Danger:
+                    return Theme.palette.dangerColor3
+            }
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
+
+    radius: 8
+
    property string itemId: ""
    property string titleId: ""
+
    property string title: ""
    property string titleAsideText: ""
    property string subTitle: ""
-    property string tertiaryTitle: ""    
-    property string label: ""
+    property string tertiaryTitle: ""
+    property alias badge: statusListItemBadge
+
    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 StatusIconSettings icon: StatusIconSettings {
        height: isLetterIdenticon ? 40 : 20
        width: isLetterIdenticon ? 40 : 20
@@ -51,49 +73,23 @@ Rectangle {
        height: 40
        isIdenticon: false
    }
-    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
-        totalRingUnits: 1
-        initalAngleRad: 0
-        ringPxSize: 1.5
-    }
+    property string label: ""
+
+    property int type: StatusListItem.Type.Primary

    property alias sensor: sensor
-    property alias badge: statusListItemBadge
+
    property alias statusListItemIcon: iconOrImage
    property alias statusListItemTitle: statusListItemTitle
-    property alias statusListItemTitleAside: statusListItemTitleAsideText
-    property alias statusListItemTitleIcons: titleIconsRow
-    property alias statusListItemTitleArea: statusListItemTitleArea
    property alias statusListItemSubTitle: statusListItemSubTitle
    property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
    property alias statusListItemComponentsSlot: statusListItemComponentsSlot

+    property list<Item> components
+
    signal clicked(string itemId)
    signal titleClicked(string titleId)

-    enum Type {
-        Primary,
-        Secondary,
-        Danger
-    }
-
-    implicitWidth: 448
-    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
-    color: {
-        if (sensor.containsMouse || statusListItem.highlighted) {
-            switch(type) {
-                case StatusListItem.Type.Primary:
-                    return Theme.palette.baseColor2
-                case StatusListItem.Type.Secondary:
-                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
-                case StatusListItem.Type.Danger:
-                    return Theme.palette.dangerColor3
-            }
-        }
-        return Theme.palette.statusListItem.backgroundColor
-    }
-    radius: 8
-
    onComponentsChanged: {
        if (components.length) {
            for (let idx in components) {
@@ -128,24 +124,14 @@ Rectangle {
            active: statusListItem.icon.isLetterIdenticon ||
                    !!statusListItem.icon.name ||
                    !!statusListItem.image.source.toString()
-            badge.border.color: statusListItem.color
-            ringSettings: statusListItem.ringSettings
        }

        Item {
            id: statusListItemTitleArea
-
-            function getStatusListItemTitleAnchorsRight() {
-                let isIconsRowVisible = false
-                if(titleIconsRow.item) {
-                    isIconsRowVisible = true//titleIconsRow.item.visible
-                }
-                return !statusListItem.titleAsideText && !isIconsRowVisible ? statusListItemTitleArea.right : undefined
-            }
-
            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
-            anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
-            anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
+            anchors.right: statusListItemLabel.visible ?
+                statusListItemLabel.left : statusListItemComponentsSlot.left
+            anchors.leftMargin: statusListItem.leftPadding
            anchors.rightMargin: statusListItem.rightPadding
            anchors.verticalCenter: parent.verticalCenter
            height: childrenRect.height
@@ -156,8 +142,6 @@ Rectangle {
                font.pixelSize: 15
                height: visible ? contentHeight : 0
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                anchors.left: parent.left
-                anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined
                color: {
                  if (!statusListItem.enabled) {
                    return Theme.palette.baseColor1
@@ -176,7 +160,7 @@ Rectangle {
                    anchors.fill: parent
                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
                    hoverEnabled: true
-                    propagateComposedEvents: statusListItem.propagateTitleClicks
+                    propagateComposedEvents: true
                    onClicked: {
                        statusListItem.titleClicked(statusListItem.titleId)
                        mouse.accepted = false
@@ -195,13 +179,6 @@ Rectangle {
                visible: !!statusListItem.titleAsideText
            }

-            Loader {
-                id: titleIconsRow
-                anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
-                anchors.verticalCenter: statusListItemTitle.verticalCenter
-                anchors.leftMargin: 4
-            }
-
            StatusBaseText {
                id: statusListItemSubTitle
                anchors.top: statusListItemTitle.bottom
@@ -246,6 +223,7 @@ Rectangle {
            visible: !!statusListItem.label
        }

+
        Row {
            id: statusListItemComponentsSlot
            anchors.right: parent.right
@@ -1,63 +0,0 @@
-import QtQuick 2.0
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-
-StatusListItem {
-    id: root
-
-    property string nickName: ""
-    property string userName: ""
-    property string chatKey: ""
-    property bool isMutualContact: false
-    property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
-    property bool isOnline: false
-
-    // Subtitle composition:
-    function composeSubtitile() {
-        var compose = ""
-        if(root.userName !== "")
-            compose = "(" + root.userName + ")"
-
-        if(compose !== "" && root.chatKey !== "")
-            // Composition
-            compose += " • " + composeShortKeyChat(root.chatKey)
-
-        else if(root.chatKey !== "")
-            compose = composeShortKeyChat(root.chatKey)
-
-        return compose
-    }
-
-    // Short keychat composition:
-    function composeShortKeyChat(chatKey) {
-        return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
-    }
-
-    // root object settings:
-    title: root.nickName
-    statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
-        isMutualContact: root.isMutualContact
-        trustIndicator: root.trustIndicator
-    }
-    subTitle: composeSubtitile()
-    statusListItemSubTitle.font.pixelSize: 10
-    icon.isLetterIdenticon: !root.image.source.toString()
-    statusListItemIcon.badge.visible: true
-    statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
-
-    // Default sizes / positions by design
-    implicitWidth: 256
-    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
-    leftPadding: 8
-    image.width: 32
-    image.height: 32
-    icon.width: 32
-    icon.height: 32
-    statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
-    statusListItemIcon.anchors.top: undefined
-    statusListItemIcon.badge.border.width: 2
-    statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
-    statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
-}
@@ -1,200 +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 "./private/statusMessage"
-
-Rectangle {
-    id: statusMessage
-
-    enum ContentType {
-        Unknown = 0,
-        Text = 1,
-        Emoji = 2,
-        Image = 3,
-        Sticker = 4,
-        Audio = 5,
-        Transaction = 6,
-        Invitation = 7
-    }
-
-    property alias messageHeader: messageHeader
-    property alias quickActions:quickActionsPanel.quickActions
-    property alias statusChatInput: editComponent.inputComponent
-    property alias linksComponent: linksLoader.sourceComponent
-    property alias footerComponent: footer.sourceComponent
-    property alias timestamp: messageHeader.timestamp
-
-    property string resendText: ""
-    property string cancelButtonText: ""
-    property string saveButtonText: ""
-    property string loadingImageText: ""
-    property string errorLoadingImageText: ""
-    property string audioMessageInfoText: ""
-    property string pinnedMsgInfoText: ""
-
-    property bool isAppWindowActive: false
-    property bool editMode: false
-    property bool isAReply: false
-    property StatusMessageDetails messageDetails: StatusMessageDetails {}
-    property StatusMessageDetails replyDetails: StatusMessageDetails {}
-
-    signal profilePictureClicked()
-    signal senderNameClicked()
-    signal editCompleted(var newMsgText)
-    signal replyProfileClicked()
-    signal stickerLoaded()
-    signal imageClicked(var imageSource)
-    signal resendClicked()
-
-    height: childrenRect.height
-    color: hoverHandler.hovered ? (messageDetails.hasMention ? Theme.palette.mentionColor3 : messageDetails.isPinned ? Theme.palette.pinColor2 :  Theme.palette.baseColor2) : messageDetails.hasMention  ? Theme.palette.mentionColor4 : messageDetails.isPinned ? Theme.palette.pinColor3 : "transparent"
-
-    HoverHandler {
-        id: hoverHandler
-    }
-
-    ColumnLayout {
-        id: messageLayout
-        width: parent.width
-        StatusMessageReply {
-            Layout.fillWidth: true
-            visible: isAReply
-            replyDetails: statusMessage.replyDetails
-            onReplyProfileClicked: statusMessage.replyProfileClicked()
-            audioMessageInfoText: statusMessage.audioMessageInfoText
-        }
-        RowLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            StatusSmartIdenticon {
-                id: profileImage
-                Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
-                Layout.leftMargin: 16
-                image: messageDetails.profileImage
-                name: messageHeader.displayName
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    acceptedButtons: Qt.LeftButton | Qt.RightButton
-                    anchors.fill: parent
-                    onClicked: statusMessage.profilePictureClicked()
-                }
-            }
-            Column {
-                spacing: 4
-                Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
-                Layout.fillWidth: true
-                StatusPinMessageDetails {
-                    visible: messageDetails.isPinned && !editMode
-                    pinnedMsgInfoText: statusMessage.pinnedMsgInfoText
-                    pinnedBy: messageDetails.pinnedBy
-                }
-                StatusMessageHeader {
-                    id: messageHeader
-                    width: parent.width
-                    displayName: messageDetails.displayName
-                    secondaryName: messageDetails.secondaryName
-                    tertiaryDetail: messageDetails.chatID
-                    isMutualContact: messageDetails.isMutualContact
-                    trustIndicator: messageDetails.trustIndicator
-                    resendText: statusMessage.resendText
-                    showResendButton: messageDetails.hasExpired && messageDetails.amISender
-                    onClicked: statusMessage.senderNameClicked()
-                    onResendClicked: statusMessage.resendClicked()
-                    visible: !editMode
-                }
-                Loader {
-                    active: !editMode && !!messageDetails.messageText
-                    width: parent.width
-                    visible: active
-                    sourceComponent: StatusTextMessage {
-                        width: parent.width
-                        textField.text: messageDetails.messageText
-                    }
-                }
-                Loader {
-                    active: messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
-                    visible: active
-                    sourceComponent: StatusImageMessage {
-                        source: messageDetails.contentType === StatusMessage.ContentType.Image ? messageDetails.messageContent : ""
-                        onClicked: statusMessage.imageClicked()
-                        shapeType: messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
-                    }
-                }
-                StatusSticker {
-                    visible: messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
-                    image.source: messageDetails.messageContent
-                    onLoaded: statusMessage.stickerLoaded()
-                }
-                Loader {
-                    active: messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
-                    visible: active
-                    sourceComponent: StatusAudioMessage {
-                        audioSource: messageDetails.messageContent
-                        hovered: hoverHandler.hovered
-                        audioMessageInfoText: statusMessage.audioMessageInfoText
-                    }
-                }
-                Loader {
-                    id: linksLoader
-                    active: !!linksLoader.sourceComponent
-                    visible: active
-                }
-                Loader {
-                    id: transactionBubbleLoader
-                    active: messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
-                    visible: active
-                }
-                Loader {
-                    id: invitationBubbleLoader
-                    active: messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
-                    visible: active
-                }
-                StatusEditMessage {
-                    id: editComponent
-                    width: parent.width
-                    msgText: messageDetails.messageText
-                    visible: editMode
-                    saveButtonText: statusMessage.saveButtonText
-                    cancelButtonText: statusMessage.cancelButtonText
-                    onCancelEditClicked: editMode = false
-                    onEditCompleted: {
-                        editMode = false
-                        statusMessage.editCompleted(newMsgText)
-                    }
-                }
-                StatusBaseText {
-                    id: retryLbl
-                    color: Theme.palette.dangerColor1
-                    text: statusMessage.resendText
-                    font.pixelSize: 12
-                    visible: messageDetails.hasExpired && messageDetails.amISender && !messageDetails.timestamp && !editMode
-                    MouseArea {
-                        cursorShape: Qt.PointingHandCursor
-                        anchors.fill: parent
-                        onClicked: statusMessage.resendClicked()
-                    }
-                }
-                Loader {
-                    id: footer
-                    active: sourceComponent && !editMode
-                    visible: active
-                }
-            }
-        }
-    }
-
-    StatusMessageQuickActions {
-        id: quickActionsPanel
-        anchors.right: parent.right
-        anchors.rightMargin: 20
-        anchors.top: parent.top
-        anchors.topMargin: -8
-        visible: hoverHandler.hovered && !editMode
-    }
-}
@@ -1,29 +0,0 @@
-import QtQuick 2.13
-
-import StatusQ.Core 0.1
-
-QtObject {
-    id: msgDetails
-
-    property bool amISender: false
-    property string displayName: ""
-    property string secondaryName: ""
-    property string chatID: ""
-    property StatusImageSettings profileImage: StatusImageSettings {
-        width: 40
-        height: 40
-    }
-    property bool isEdited: false
-    property string messageText: ""
-    property int contentType: 0
-    property string messageContent: ""
-    property 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,16 +1,11 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1

 Loader {
    id: statusSmartIdenticon

    property string name: ""
-    property int dZ: 100
-
-    // Badge color properties must be set if badgeItem.visible = true
-    property alias badge: statusBadge

    property StatusIconSettings icon: StatusIconSettings {
        width: 40
@@ -22,12 +17,6 @@ Loader {
        height: 40
    }

-    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
-        totalRingUnits: 1
-        initalAngleRad: 0
-        ringPxSize: 1.5
-    }
-
    sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
                     !!statusSmartIdenticon.image.source.toString() ? roundedImage :
                     !!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
@@ -86,23 +75,4 @@ Loader {
            letterSize: statusSmartIdenticon.icon.letterSize
        }
    }
-
-    // Next components are painted above main sourceComponent
-    StatusIdenticonRing {
-        settings: statusSmartIdenticon.ringSettings
-        anchors.fill: parent
-        z: statusSmartIdenticon.dZ/2
-    }
-
-    // State component
-    StatusBadge {
-        id: statusBadge
-        visible: false
-        anchors.bottom: statusSmartIdenticon.bottom
-        anchors.right: statusSmartIdenticon.right
-        border.width: 3
-        implicitHeight: 15
-        implicitWidth: 15
-        z: statusSmartIdenticon.dZ
-    }
 }
@@ -1,137 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: root
-
-    implicitWidth: 448
-    implicitHeight: 44
-
-    property alias textEdit: edit
-    property alias text: edit.text
-    property string warningText: ""
-    property string toLabelText: ""
-    property int nameCountLimit: 5
-    property ListModel namesModel: ListModel { }
-
-    function find(model, criteria) {
-        for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i);
-        return null;
-    }
-
-    function insertTag(name, id) {
-        if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
-            namesModel.insert(namesModel.count, {"name": name, "publicId": id});
-            addMember(id);
-            edit.clear();
-        }
-    }
-
-    signal addMember(string memberId)
-    signal removeMember(string memberId)
-
-    Rectangle {
-        anchors.fill: parent
-        radius: 8
-        color: Theme.palette.baseColor2
-
-        RowLayout {
-            anchors.fill: parent
-            anchors.leftMargin: 16
-            anchors.rightMargin: 16
-            spacing: 8
-            StatusBaseText {
-                Layout.preferredWidth: 22
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                color: Theme.palette.baseColor1
-                text: root.toLabelText
-            }
-
-            ScrollView {
-                Layout.fillWidth: true
-                implicitHeight: 30
-                Layout.alignment: Qt.AlignVCenter
-                visible: (namesList.count > 0)
-                contentWidth: namesList.contentWidth
-                ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-                clip: true
-                ListView {
-                    id: namesList
-                    anchors.fill: parent
-                    model: namesModel
-                    orientation: ListView.Horizontal
-                    spacing: 8
-                    onContentWidthChanged: {
-                        positionViewAtEnd();
-                    }
-                    delegate: Rectangle {
-                        id: nameDelegate
-                        width: (nameText.contentWidth + 34)
-                        height: 30
-                        color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
-                        radius: 8
-                        StatusBaseText {
-                            id: nameText
-                            anchors.left: parent.left
-                            anchors.leftMargin: 8
-                            anchors.verticalCenter: parent.verticalCenter
-                            color: Theme.palette.indirectColor1
-                            text: name
-                        }
-                        StatusIcon {
-                            anchors.left: nameText.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            color: Theme.palette.indirectColor1
-                            icon: "close"
-                        }
-                        MouseArea {
-                            id: mouseArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                removeMember(publicId);
-                                namesModel.remove(index, 1);
-                            }
-                        }
-                    }
-                }
-            }
-
-            TextEdit {
-                id: edit
-                Layout.fillWidth: true
-                Layout.preferredHeight: 44
-                verticalAlignment: Text.AlignVCenter
-                visible: (namesModel.count < 5)
-                enabled: visible
-                focus: true
-                font.pixelSize: 15
-                font.family: Theme.palette.baseFont.name
-                color: Theme.palette.directColor1
-                Keys.onPressed: {
-                    if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
-                            && getText(cursorPosition, (cursorPosition-1)) === "") {
-                        removeMember(namesModel.get(namesList.count-1).publicId);
-                        namesModel.remove((namesList.count-1), 1);
-                    }
-                }
-            }
-
-            StatusBaseText {
-                id: warningTextLabel
-                visible: (namesModel.count === root.nameCountLimit)
-                Layout.preferredWidth: 120
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                font.pixelSize: 10
-                color: Theme.palette.dangerColor1
-                text: root.nameCountLimit + " " + root.warningText
-            }
-        }
-    }
-}
@@ -1,182 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-
-import QtGraphicalEffects 1.13
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Control {
-    id: root
-    width: 343
-    height: !!secondaryText ? 68 : 48
-    anchors.right: parent.right
-
-    property bool open: false
-    property string primaryText: ""
-    property string secondaryText: ""
-    property bool loading: false
-    property string iconName: ""
-    property string linkUrl: ""
-
-    property StatusIconSettings icon: StatusIconSettings {
-        width: 23
-        height: 23
-    }
-
-    property int type: StatusToastMessage.Type.Default
-    enum Type {
-        Default,
-        Success
-    }
-
-    function open(title, subTitle, iconName, type, loading, url) {
-        root.primaryText = title;
-        root.secondaryText = subTitle;
-        root.icon.name = iconName;
-        root.type = type;
-        root.loading = loading;
-        root.linkUrl = url;
-        root.open = true;
-    }
-
-    signal close()
-    signal linkActivated(var link)
-
-    states: [
-        State {
-            name: "opened"
-            when: root.open
-            PropertyChanges {
-                target: root
-                anchors.rightMargin: 0
-                opacity: 1.0
-            }
-        },
-        State {
-            name: "closed"
-            when: !root.open
-            PropertyChanges {
-                target: root
-                anchors.rightMargin: -width
-                opacity: 0.0
-            }
-            StateChangeScript {
-                script: { root.close(); }
-            }
-        }
-    ]
-
-    transitions: [
-        Transition {
-            to: "*"
-            NumberAnimation { properties: "anchors.rightMargin,opacity"; duration: 400 }
-        }
-    ]
-
-    background: Rectangle {
-        id: background
-        anchors.fill: parent
-        color: Theme.palette.statusToastMessage.backgroundColor
-        radius: 8
-        border.color: Theme.palette.baseColor2
-        layer.enabled: true
-        layer.effect: DropShadow {
-            verticalOffset: 3
-            radius: 8
-            samples: 15
-            fast: true
-            cached: true
-            color: Theme.palette.dropShadow
-        }
-    }
-
-    contentItem: Item {
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.right: parent.right
-        anchors.rightMargin: 4
-        height: parent.height
-        MouseArea {
-            anchors.fill: parent
-            onMouseXChanged: {
-                root.open = (mouseX < (root.width/3));
-            }
-        }
-        RowLayout {
-            anchors.fill: parent
-            spacing: 16
-            Rectangle {
-                implicitWidth: 32
-                implicitHeight: 32
-                Layout.alignment: Qt.AlignVCenter
-                radius: (root.width/2)
-                color: (root.type === StatusToastMessage.Type.Success) ?
-                        Theme.palette.successColor2 : Theme.palette.primaryColor3
-                Loader {
-                    anchors.centerIn: parent
-                    sourceComponent: root.loading ? loadingInd : statusIcon
-                    Component {
-                        id: loadingInd
-                        StatusLoadingIndicator {
-                            color: (root.type === StatusToastMessage.Type.Success) ?
-                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
-                        }
-                    }
-                    Component {
-                        id: statusIcon
-                        StatusIcon {
-                            anchors.centerIn: parent
-                            width: root.icon.width
-                            height: root.icon.height
-                            color: (root.type === StatusToastMessage.Type.Success) ?
-                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
-                            icon: root.icon.name
-                        }
-                    }
-                }
-            }
-            Column {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                StatusBaseText {
-                    width: parent.width
-                    font.pixelSize: 13
-                    color: Theme.palette.directColor1
-                    elide: Text.ElideRight
-                    text: root.primaryText
-                }
-                StatusBaseText {
-                    width: parent.width
-                    visible: (!root.linkUrl && !!root.secondaryText)
-                    height: visible ? contentHeight : 0
-                    font.pixelSize: 13
-                    color: Theme.palette.baseColor1
-                    text: root.secondaryText
-                    elide: Text.ElideRight
-                }
-                StatusSelectableText {
-                    visible: (!!root.linkUrl)
-                    height: visible ? implicitHeight : 0
-                    font.pixelSize: 13
-                    hoveredLinkColor: Theme.palette.primaryColor1
-                    text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
-                    onLinkActivated: {
-                        root.linkActivated(root.linkUrl);
-                    }
-                }
-            }
-            StatusFlatRoundButton {
-                type: StatusFlatRoundButton.Type.Secondary
-                icon.name: "close"
-                icon.color: Theme.palette.directColor1
-                implicitWidth: 30
-                implicitHeight: 30
-                onClicked: {
-                    root.open = false;
-                }
-            }
-        }
-    }
-}
@@ -1,78 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: wizardWrapper
-    width: parent.width
-    height: 56
-    property ListModel stepsModel: ListModel { }
-
-    ListView {
-        id: repeat
-        width: childrenRect.width
-        height: parent.height
-        anchors.horizontalCenter: parent.horizontalCenter
-        orientation: ListView.Horizontal
-        model: stepsModel
-        delegate: Item {
-            id: wrapperItem
-            width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count)
-            height: 56
-            onXChanged: {
-                //as x changes while delegates are created, direct assignment doesn't work
-                x = (index === (repeat.count-1)) ? (width+32) : (label.width/2) + 8
-            }
-            StatusProgressBar {
-                id: barBorder
-                width: visible ? (parent.width - (label.width/2 + 24)) : 0
-                height: visible ? 8 : 0
-                visible: (index > 0)
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.verticalCenterOffset: -12
-                from: 0
-                //TODO what is to: here?
-                to: 2000
-                value: loadingTime
-                backgroundColor: "transparent"
-                backgroundBorderColor: Theme.palette.primaryColor1
-                fillColor: Theme.palette.primaryColor1
-            }
-            Item {
-                id: label
-                width: descriptionLabel.contentWidth
-                height: 56
-                anchors.left: (index > 0) ? barBorder.right : parent.left
-                anchors.leftMargin: (index > 0) ? -((width/2) - 24) : 0
-                Rectangle {
-                    width: 32
-                    height: 32
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    radius: width/2
-                    color: stepCompleted ? Theme.palette.primaryColor1 : "transparent"
-                    border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
-                                  ? "transparent" : Theme.palette.primaryColor1
-                    border.width: 2
-                    StatusBaseText {
-                        anchors.centerIn: parent
-                        text: index+1
-                        font.pixelSize: 17
-                        color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
-                               ? Theme.palette.indirectColor1 : Theme.palette.primaryColor1
-                    }
-                }
-                StatusBaseText {
-                    id: descriptionLabel
-                    anchors.bottom: parent.bottom
-                    text: description
-                    color: Theme.palette.directColor1
-                    font.pixelSize: 13
-                }
-            }
-        }
-    }
-}
@@ -1,143 +0,0 @@
-import QtQuick 2.3
-import QtMultimedia 5.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-// To-do update as per latest design -> Audio graphs. Also the player should ideally be in the BE?
-Rectangle {
-    id: audioChatMessage
-
-    property string audioMessageInfoText: ""
-    property bool isPreview: false
-    property bool hovered: false
-    property string audioSource: ""
-
-    width: 320
-    height: 32
-    radius: 20
-
-    color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
-
-    Audio {
-        id: audioMessage
-        source: audioSource
-        notifyInterval: 150
-    }
-
-    RowLayout {
-        id: preview
-        visible: isPreview
-        spacing: 5
-        anchors.centerIn: parent
-        StatusIcon {
-            id: icon
-            Layout.alignment: Qt.AlignVCenter
-            Layout.preferredWidth: 14
-            Layout.preferredHeight: 14
-            icon: "audio"
-            color: Theme.palette.baseColor1
-        }
-        StatusBaseText {
-            Layout.alignment: Qt.AlignVCenter
-            color: Theme.palette.baseColor1
-            text: audioMessageInfoText
-            font.pixelSize: 13
-        }
-    }
-
-    StatusFlatRoundButton {
-        id: playButton
-        width: 15
-        height: 15
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.verticalCenter: parent.verticalCenter
-        visible: !isPreview
-
-        type: StatusFlatRoundButton.Type.Tertiary
-        color: "transparent"
-        icon.name: audioMessage.playbackState == Audio.PlayingState ? "pause-filled" : "play-filled"
-        icon.color: Theme.palette.directColor1
-
-        onClicked: {
-            if(audioMessage.playbackState === Audio.PlayingState){
-                audioMessage.pause();
-            } else {
-                audioMessage.play();
-            }
-
-        }
-    }
-    
-    Rectangle {
-        height: 2
-        width: 240
-        color: Theme.palette.directColor5
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: playButton.right
-        anchors.leftMargin: 10
-        visible: !isPreview
-        Rectangle {
-            id: progress
-            height: 2
-            width: {
-                if(audioMessage.duration === 0) return 0;
-                if(audioMessage.playbackState === Audio.StoppedState) return 0;
-                return parent.width * audioMessage.position / audioMessage.duration;
-            }
-            color: Theme.palette.directColor5
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Rectangle {
-            id: handle
-            width: 10
-            height: 10
-            color: Theme.palette.directColor1
-            radius: 10
-            anchors.verticalCenter: parent.verticalCenter
-            x: progress.width
-            state: "default"
-
-            states: State {
-                name: "pressed"
-                when: handleMouseArea.pressed
-                PropertyChanges {
-                    target: handle;
-                    scale: 1.2
-                }
-            }
-            transitions: Transition {
-                NumberAnimation {
-                    properties: "scale";
-                    duration: 100;
-                    easing.type: Easing.InOutQuad
-                }
-            }
-
-            MouseArea {
-                id: handleMouseArea
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                drag.target: parent
-                drag.axis: Drag.XAxis
-                drag.minimumX: 0
-                drag.maximumX: parent.parent.width
-                onPressed: {
-                    handle.state = "pressed"
-                    if(audioMessage.playbackState === Audio.PlayingState) {
-                        audioMessage.pause();
-                    }
-                }
-                onReleased: {
-                    handle.state = "default"
-                    audioMessage.seek(audioMessage.duration * handle.x / parent.parent.width)
-                    audioMessage.play()
-                }
-            }
-        }
-    }
-}
@@ -1,51 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
-Item {
-    id: editText
-
-    property alias inputComponent: chatInputLoader.sourceComponent
-
-    property string cancelButtonText: ""
-    property string saveButtonText: ""
-    property string msgText: ""
-
-    signal cancelEditClicked()
-    signal editCompleted(var newMsgText)
-
-    height: childrenRect.height
-
-    ColumnLayout {
-        spacing: 4
-        Loader {
-            id: chatInputLoader
-            // To-Do: Move to StatusChatInput once its moved to StatusQ
-            sourceComponent: StatusInput {
-                width: editText.width
-                input.placeholderText: ""
-                input.text: msgText
-                input.implicitHeight: 40
-            }
-        }
-        RowLayout {
-            spacing: 4
-            StatusFlatButton {
-                id: cancelBtn
-                text: cancelButtonText
-                size: StatusBaseButton.Size.Small
-                onClicked: cancelEditClicked()
-            }
-            StatusButton {
-                id: saveBtn
-                text: saveButtonText
-                size: StatusBaseButton.Size.Small
-                enabled: chatInputLoader.item.input.text.trim().length > 0
-                onClicked: editCompleted(chatInputLoader.item.input.text)
-            }
-        }
-    }
-}
@@ -1,114 +0,0 @@
-import QtQuick 2.3
-import QtGraphicalEffects 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: imageContainer
-
-    enum ShapeType {
-        ROUNDED = 0,
-        LEFT_ROUNDED = 1,
-        RIGHT_ROUNDED = 2
-    }
-
-    property alias imageAlias: imageMessage
-
-    property bool isAppWindowActive: false
-    property url source: ""
-    property bool allCornersRounded: false
-    property bool isLeftCorner: true
-    property int imageWidth: 350
-    property int shapeType: -1
-
-    property string loadingImageText: ""
-    property string errorLoadingImageText: ""
-
-    signal clicked(var image, var mouse)
-
-    width: loadingImage.visible ? loadingImage.width : imageMessage.width
-    height: loadingImage.visible ? loadingImage.height : imageMessage.paintedHeight
-
-    QtObject {
-        id: _internal
-        property bool isAnimated: !!source && source.toString().endsWith('.gif')
-        property bool pausePlaying: false
-    }
-
-    AnimatedImage {
-        id: imageMessage
-
-        width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
-        fillMode: Image.PreserveAspectFit
-        source: imageContainer.source
-        playing: _internal.isAnimated && isAppWindowActive && !_internal.pausePlaying
-
-        layer.enabled: true
-        layer.effect: OpacityMask {
-            maskSource: Item {
-                width: imageMessage.width
-                height: imageMessage.height
-
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    width: imageMessage.width
-                    height: imageMessage.height
-                    radius: 16
-                }
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    width: 32
-                    height: 32
-                    radius: 4
-                    visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
-                }
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.right: parent.right
-                    width: 32
-                    height: 32
-                    radius: 4
-                    visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED  //isLeftCorner && !allCornersRounded
-                }
-            }
-        }
-
-        MouseArea {
-            cursorShape: Qt.PointingHandCursor
-            acceptedButtons: Qt.LeftButton | Qt.RightButton
-            anchors.fill: parent
-            onClicked: {
-                if (imageContainer.isAnimated) {
-                    // FIXME the ListView completely removes Items that scroll out of view
-                    // so when we scroll backto the image, it gets reloaded and playing is reset
-                    _internal.pausePlaying = ! _internal.pausePlaying
-                    return
-                }
-                imageContainer.clicked(imageMessage, mouse)
-            }
-        }
-    }
-
-    Rectangle {
-        id: loadingImage
-        visible: imageMessage.status === Image.Loading
-                 || imageMessage.status === Image.Error
-        width: parent.width
-        height: width
-        border.width: 1
-        border.color: Theme.palette.baseColor2
-        radius: 8
-
-        StatusBaseText {
-            anchors.centerIn: parent
-            text: imageMessage.status === Image.Error ? errorLoadingImageText: loadingImageText
-            color: imageMessage.status === Image.Error?
-                       Theme.palette.dangerColor1 :
-                       Theme.palette.directColor1
-            font.pixelSize: 15
-        }
-    }
-}
@@ -1,110 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-import StatusQ.Controls 0.1
-
-Item {
-    id: statusMessageHeader
-
-    property alias displayNameLabel: primaryDisplayName
-    property alias secondaryNameLabel: secondaryDisplayName
-    property alias tertiaryDetailsLabel: tertiaryDetailText
-    property alias timestamp: timestampText
-
-    property string displayName: ""
-    property string secondaryName: ""
-    property string tertiaryDetail: ""
-    property string resendText: ""
-    property bool showResendButton: false
-    property bool isMutualContact: false
-    property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
-
-    signal clicked()
-    signal resendClicked()
-
-    height: childrenRect.height
-    width: primaryDisplayName.width + (secondaryDisplayName.visible ? secondaryDisplayName.width + header.spacing : 0)
-
-    RowLayout {
-        id: header
-        spacing: 4
-        TextEdit {
-            id: primaryDisplayName
-            font.family: Theme.palette.baseFont.name
-            font.weight: Font.Medium
-            font.pixelSize: 15
-            font.underline: mouseArea.containsMouse
-            readOnly: true
-            wrapMode: Text.WordWrap
-            selectByMouse: true
-            color: Theme.palette.primaryColor1
-            text: displayName
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
-                hoverEnabled: true
-                onClicked: {
-                    statusMessageHeader.clicked()
-                }
-            }
-            Layout.alignment: Qt.AlignBottom
-        }       
-        StatusContactVerificationIcons {
-            isMutualContact: statusMessageHeader.isMutualContact
-            trustIndicator: statusMessageHeader.trustIndicator
-        }
-        StatusBaseText {
-            id: secondaryDisplayName
-            Layout.alignment: Qt.AlignVCenter
-            color: Theme.palette.baseColor1
-            font.pixelSize: 10
-            text: secondaryName
-            visible: !!text
-        }
-        StatusBaseText {
-            id: dotSeparator1
-            Layout.fillHeight: true
-            font.pixelSize: 10
-            color: Theme.palette.baseColor1
-            text: "."
-            visible: secondaryDisplayName.visible
-        }
-        StatusBaseText {
-            id: tertiaryDetailText
-            Layout.alignment: Qt.AlignVCenter
-            Layout.maximumWidth: 58
-            font.pixelSize: 10
-            elide: Text.ElideMiddle
-            color: Theme.palette.baseColor1
-            text: tertiaryDetail
-        }
-        StatusBaseText {
-            id: dotSeparator2
-            Layout.fillHeight: true
-            font.pixelSize: 10
-            color: Theme.palette.baseColor1
-            text: "."
-            visible: tertiaryDetailText.visible
-        }
-        StatusTimeStampLabel {
-            id: timestampText
-        }
-        StatusBaseText {
-            Layout.alignment: Qt.AlignVCenter
-            color: Theme.palette.dangerColor1
-            font.pixelSize: 12
-            text: statusMessageHeader.resendText
-            visible: showResendButton && !!timestampText.text
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked: statusMessageHeader.resendClicked()
-            }
-        }
-    }
-}
@@ -1,51 +0,0 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.13
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Rectangle {
-    id: buttonsContainer
-
-    property list<Item> quickActions
-
-    QtObject {
-        id: _internal
-        readonly property int containerMargin: 2
-    }
-
-    width: buttonRow.width + _internal.containerMargin * 2
-    height: 36
-    radius: 8
-    color: Theme.palette.statusSelect.menuItemBackgroundColor
-
-    layer.enabled: true
-    layer.effect: DropShadow {
-        width: buttonsContainer.width
-        height: buttonsContainer.height
-        x: buttonsContainer.x
-        y: buttonsContainer.y + 10
-        horizontalOffset: 0
-        verticalOffset: 2
-        source: buttonsContainer
-        radius: 10
-        samples: 15
-        color: Theme.palette.dropShadow
-    }
-
-    Row {
-        id: buttonRow
-        spacing: _internal.containerMargin
-        anchors.left: parent.left
-        anchors.leftMargin: _internal.containerMargin
-        anchors.verticalCenter: buttonsContainer.verticalCenter
-        height: parent.height - 2 * _internal.containerMargin
-    }
-
-    onQuickActionsChanged: {
-        for (let idx in quickActions) {
-            quickActions[idx].parent = buttonRow
-        }
-    }
-}
@@ -1,125 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Shapes 1.13
-import QtGraphicalEffects 1.13
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-Loader {
-    id: chatReply
-
-    property StatusMessageDetails replyDetails
-    property string audioMessageInfoText: ""
-
-    signal replyProfileClicked()
-
-    active: visible
-
-    sourceComponent: RowLayout {
-        id: replyLayout
-        spacing: 8
-        Shape {
-            id: replyCorner
-            Layout.alignment: Qt.AlignTop
-            Layout.leftMargin: 35
-            Layout.topMargin: profileImage.height/2
-            Layout.preferredWidth: 20
-            Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
-            asynchronous: true
-            antialiasing: true
-            ShapePath {
-                strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4)
-                strokeWidth: 3
-                fillColor: "transparent"
-                capStyle: ShapePath.RoundCap
-                joinStyle: ShapePath.RoundJoin
-                startX: 20
-                startY: 0
-                PathLine { x: 10; y: 0 }
-                PathArc {
-                    x: 0; y: 10
-                    radiusX: 13
-                    radiusY: 13
-                    direction: PathArc.Counterclockwise
-                }
-                PathLine { x: 0; y: messageLayout.height}
-            }
-        }
-        ColumnLayout {
-            id: messageLayout
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignTop
-            Layout.topMargin: 4
-            RowLayout {
-                StatusSmartIdenticon {
-                    id: profileImage
-                    Layout.alignment: Qt.AlignTop
-                    image: replyDetails.profileImage
-                    name: replyDetails.displayName
-                    MouseArea {
-                        cursorShape: Qt.PointingHandCursor
-                        acceptedButtons: Qt.LeftButton | Qt.RightButton
-                        anchors.fill: parent
-                        onClicked: replyProfileClicked()
-                    }
-                }
-                TextEdit {
-                    Layout.alignment: Qt.AlignVCenter
-                    color: Theme.palette.baseColor1
-                    selectionColor: Theme.palette.primaryColor3
-                    selectedTextColor: Theme.palette.directColor1
-                    font.pixelSize: 13
-                    font.weight: Font.Medium
-                    selectByMouse: true
-                    readOnly: true
-                    text: replyDetails.displayName
-                }
-            }
-            StatusTextMessage {
-                Layout.fillWidth: true
-                textField.text: replyDetails.messageText
-                textField.font.pixelSize: 13
-                textField.color: Theme.palette.baseColor1
-                textField.height: 18
-                clip: true
-                visible: !!replyDetails.messageText
-            }
-            StatusImageMessage {
-                Layout.fillWidth: true
-                Layout.preferredHeight: imageAlias.paintedHeight
-                imageWidth: 56
-                source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
-                visible: replyDetails.contentType === StatusMessage.ContentType.Image
-                shapeType: StatusImageMessage.ShapeType.ROUNDED
-            }
-            Item {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 48
-                Layout.alignment: Qt.AlignLeft
-                visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
-                StatusSticker {
-                    image.width: 48
-                    image.height: 48
-                    image.source: replyDetails.messageContent
-                }
-            }
-            Item {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 22
-                visible: replyDetails.contentType === StatusMessage.ContentType.Audio
-                StatusAudioMessage {
-                    id: audioMessage
-                    anchors.left: parent.left
-                    width: 125
-                    height: 22
-                    isPreview: true
-                    audioSource: replyDetails.messageContent
-                    audioMessageInfoText: chatReply.audioMessageInfoText
-                }
-            }
-        }
-    }
-}
-
@@ -1,46 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.14
-import QtGraphicalEffects 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Loader {
-    property string pinnedMsgInfoText: ""
-    property string pinnedBy: ""
-
-    active: visible
-
-    sourceComponent: Rectangle {
-        height: 24
-        width: layout.width + 16
-        color: Theme.palette.pinColor2
-        radius: 12
-        RowLayout {
-            id: layout
-            anchors.centerIn: parent
-            StatusIcon {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: 16
-                Layout.preferredHeight: 16
-                color: Theme.palette.pinColor1
-                icon: "tiny/pin"
-            }
-            StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: -4
-                color: Theme.palette.directColor1
-                font.pixelSize: 13
-                text: pinnedMsgInfoText
-            }
-            StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: -4
-                color: Theme.palette.directColor1
-                font.pixelSize: 13
-                font.weight: Font.Medium
-                text: pinnedBy
-            }
-        }
-    }
-}
@@ -1,125 +0,0 @@
-import QtQuick 2.3
-import QtGraphicalEffects 1.13
-
-import StatusQ.Components 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Loader {
-    id: statusSticker
-
-    property bool noHover: false
-    property bool noMouseArea: false
-    property StatusImageSettings image: StatusImageSettings {
-        width: 140
-        height: 140
-    }
-
-    signal loaded()
-    signal clicked()
-
-    active: visible
-
-    sourceComponent: Rectangle {
-        id: root
-
-        color: Theme.palette.baseColor2
-        radius: 16
-
-        width: image.width
-        height: image.height
-
-        function reload() {
-            // From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop)
-            // Note: Changing this property dynamically causes the image source to
-            // be reloaded, potentially even from the network, if it is not in the
-            // disk cache.
-            const oldSource = sticker.source
-            sticker.cache = false
-            sticker.sourceSize.width += 1
-            sticker.sourceSize.width -= 1
-            sticker.cache = true
-        }
-
-        Loader {
-            id: loader
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        Image {
-            id: sticker
-            anchors.fill: parent
-            horizontalAlignment: Image.AlignHCenter
-            verticalAlignment: Image.AlignVCenter
-            cache: true
-            source: image.source
-
-            onStatusChanged: {
-                if (status === Image.Ready) {
-                    statusSticker.loaded()
-                }
-            }
-            MouseArea {
-                enabled: !noMouseArea && (sticker.status === Image.Ready)
-                cursorShape: noHover ? Qt.ArrowCursor : Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked: statusSticker.clicked()
-            }
-        }
-
-        Component {
-            id: loadingIndicator
-            StatusLoadingIndicator {
-                width: 24
-                height: 24
-                color: Theme.palette.baseColor1
-            }
-        }
-
-        Component {
-            id: reload
-            StatusIcon {
-                icon: "refresh"
-                color: Theme.palette.directColor1
-                mipmap: false
-                MouseArea {
-                    anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: root.reload()
-                }
-            }
-        }
-
-        states: [
-            State {
-                name: "loading"
-                when: sticker.status === Image.Loading
-                PropertyChanges {
-                    target: loader
-                    sourceComponent: loadingIndicator
-                }
-            },
-            State {
-                name: "error"
-                when: sticker.status === Image.Error
-                PropertyChanges {
-                    target: loader
-                    sourceComponent: reload
-                }
-            },
-            State {
-                name: "ready"
-                when: sticker.status === Image.Ready
-                PropertyChanges {
-                    target: root
-                    color: "transparent"
-                }
-                PropertyChanges {
-                    target: loader
-                    sourceComponent: undefined
-                }
-            }
-        ]
-    }
-}
@@ -1,87 +0,0 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.0
-
-import StatusQ.Components 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: textMessage
-
-    property int contentType: 0
-    property alias textField: chatText
-
-    signal linkActivated(url link)
-
-    implicitHeight: showMoreLoader.active ? childrenRect.height : chatText.height
-
-    QtObject {
-        id: _internal
-        property bool readMore: false
-        property bool veryLongChatText: chatText.length > 1000
-    }
-
-    TextEdit {
-        id: chatText
-        visible: !showMoreLoader.active || _internal.readMore
-        selectedTextColor: Theme.palette.directColor1
-        selectionColor: Theme.palette.primaryColor3
-        color: Theme.palette.directColor1
-        font.family: Theme.palette.baseFont.name
-        font.pixelSize: 15
-        textFormat: Text.RichText
-        wrapMode: Text.Wrap
-        readOnly: true
-        selectByMouse: true
-        height: _internal.veryLongChatText && !_internal.readMore ? Math.min(implicitHeight, 200) : implicitHeight
-        width: parent.width
-        clip: height < implicitHeight
-        onLinkActivated: textMessage.linkActivated(link)
-        onLinkHovered: {
-            cursorShape: Qt.PointingHandCursor
-        }
-    }
-
-    Loader {
-        id: mask
-        anchors.fill: chatText
-        active: showMoreLoader.active
-        visible: false
-        sourceComponent: LinearGradient {
-            start: Qt.point(0, 0)
-            end: Qt.point(0, chatText.height)
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "white" }
-                GradientStop { position: 0.85; color: "white" }
-                GradientStop { position: 1; color: "transparent" }
-            }
-        }
-    }
-
-    Loader {
-        id: opMask
-        active: showMoreLoader.active && !_internal.readMore
-        anchors.fill: chatText
-        sourceComponent: OpacityMask {
-            source: chatText
-            maskSource: mask
-        }
-    }
-
-    Loader {
-        id: showMoreLoader
-        active: _internal.veryLongChatText
-        anchors.top: chatText.bottom
-        anchors.topMargin: -10
-        anchors.horizontalCenter: parent.horizontalCenter
-        sourceComponent: StatusRoundButton {
-            implicitWidth: 24
-            implicitHeight: 24
-            type: StatusRoundButton.Type.Secondary
-            icon.name: _internal.readMore ? "chevron-up":  "chevron-down"
-            onClicked: {
-                _internal.readMore = !_internal.readMore
-            }
-        }
-    }
-}
@@ -1,24 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-StatusBaseText {
-    id: timestampLabe;
-    property alias tooltip: tooltip
-
-    Layout.alignment: Qt.AlignVCenter
-    color: Theme.palette.baseColor1
-    font.pixelSize: 10
-    visible: !!text
-    StatusToolTip {
-        id: tooltip
-        visible: hhandler.hovered && !!text
-        maxWidth: 350
-    }
-    HoverHandler {
-        id: hhandler
-    }
-}
@@ -10,13 +10,11 @@ StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
 StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
 StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
-StatusContactVerificationIcons 0.1 StatusContactVerificationIcons.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
 StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
-StatusMemberListItem 0.1 StatusMemberListItem.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
 StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
@@ -25,8 +23,3 @@ StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
 StatusListItemBadge 0.1 StatusListItemBadge.qml
 StatusExpandableItem 0.1 StatusExpandableItem.qml
 StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
-StatusMessage 0.1 StatusMessage.qml
-StatusMessageDetails 0.1 StatusMessageDetails.qml
-StatusTagSelector 0.1 StatusTagSelector.qml
-StatusToastMessage 0.1 StatusToastMessage.qml
-StatusWizardStepper 0.1 StatusWizardStepper.qml
@@ -221,7 +221,7 @@ Item {

                StatusBaseText {
                    id: accountName
-                    text: model.name
+                    text: name
                    elide: Text.ElideRight
                    font.pixelSize: 15
                    anchors.left: parent.left
@@ -1,89 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Column {
-    id: statusBanner
-    width: parent.width
-
-    property string statusText
-    property int type: StatusBanner.Type.Info
-    property int textPixels: 15
-    property int statusBannerHeight: 38
-
-    // "private" properties
-    QtObject {
-           id: d
-           property color backgroundColor
-           property color bordersColor
-           property color fontColor
-    }
-
-    enum Type {
-        Info, // 0
-        Danger, // 1
-        Success, // 2
-        Warning // 3
-    }    
-
-    // Component definition
-    Rectangle {
-        id: topDiv
-        color: d.bordersColor
-        height: 1
-        width: parent.width
-    }
-
-    Rectangle {
-        id: box
-        width: parent.width
-        height: statusBanner.statusBannerHeight
-        color: d.backgroundColor
-
-        StatusBaseText {
-            id: statusTxt
-            anchors.fill: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: statusBanner.textPixels
-            text: statusBanner.statusText
-            color: d.fontColor
-        }
-    }
-
-    Rectangle {
-        id: bottomDiv
-        color: d.bordersColor
-        height: 1
-        width: parent.width
-    }
-
-    // Behavior
-    states: [
-        State {
-            when: statusBanner.type === StatusBanner.Type.Info
-            PropertyChanges { target: d; backgroundColor: Theme.palette.primaryColor3}
-            PropertyChanges { target: d; bordersColor: Theme.palette.primaryColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.primaryColor1}
-        },
-        State {
-            when: statusBanner.type === StatusBanner.Type.Danger
-            PropertyChanges { target: d; backgroundColor: Theme.palette.dangerColor3}
-            PropertyChanges { target: d; bordersColor: Theme.palette.dangerColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.dangerColor1}
-        },
-        State {
-            when: statusBanner.type === StatusBanner.Type.Success
-            PropertyChanges { target: d; backgroundColor: Theme.palette.successColor2}
-            PropertyChanges { target: d; bordersColor: Theme.palette.successColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.successColor1}
-        },
-        State {
-            when: statusBanner.type === StatusBanner.Type.Warning
-            PropertyChanges { target: d; backgroundColor: Theme.palette.pinColor3}
-            PropertyChanges { target: d; bordersColor: Theme.palette.pinColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.pinColor1}
-        }
-    ]
-}
@@ -142,11 +142,12 @@ Item {
                    return clearable ? clearButtonLoader.width + 12 : 
                        (statusIcon.visible && !leftIcon) || !!statusBaseInput.component ? 8 : 0
                }
+                anchors.topMargin: statusBaseInput.topPadding
+                anchors.bottomMargin: statusBaseInput.bottomPadding
                contentWidth: edit.paintedWidth
                contentHeight: edit.paintedHeight
                boundsBehavior: Flickable.StopAtBounds
                QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
-                clip: true
                function ensureVisible(r) {
                    if (contentX >= r.x)
                        contentX = r.x;
@@ -1,108 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.0
-
-import StatusQ.Core 0.1
-/*!
-   \qmltype StatusIdenticonRing
-   \inherits Item
-   \inqmlmodule StatusQ.Controls
-   \since StatusQ.Controls 0.1
-   \brief It provides lines wrapped into a ring around another component like avatars.
-
-   The \c StatusIdenticonRing item displays lines wrapped into a ring. The line is rendered clockwise.
-
-   N segments and M distinctive colors compose identicon lines.
-
-   Example of how the component looks like:
-   \image status_identicon_ring.png
-
-   Example of how to use it:
-
-   \qml
-        StatusIdenticonRing {
-            anchors.fill: parent
-            settings: StatusIdenticonRingSettings {
-                totalRingUnits: 25
-                initalAngleRad: 0
-                ringPxSize: 1.5
-                ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
-                                 ListElement {colorId: 28; segmentLength: 1},
-                                 ListElement {colorId: 31; segmentLength: 1},
-                                 ListElement {colorId: 22; segmentLength: 4},
-                                 ListElement {colorId: 28; segmentLength: 3},
-                                 ListElement {colorId: 27; segmentLength: 5},
-                                 ListElement {colorId: 7; segmentLength: 5},
-                                 ListElement {colorId: 13; segmentLength: 1},
-                                 ListElement {colorId: 25; segmentLength: 4}]
-                distinctiveColors: ["#000000", "#726F6F", "#C4C4C4",
-                                    "#E7E7E7", "#FFFFFF", "#00FF00",
-                                    "#009800", "#B8FFBB", "#FFC413",
-                                    "#9F5947", "#FFFF00", "#A8AC00",
-                                    "#FFFFB0", "#FF5733", "#FF0000",
-                                    "#9A0000", "#FF9D9D", "#FF0099",
-                                    "#C80078", "#FF00FF", "#900090",
-                                    "#FFB0FF", "#9E00FF", "#0000FF",
-                                    "#000086", "#9B81FF", "#3FAEF9",
-                                    "#9A6600", "#00FFFF", "#008694",
-                                    "#C2FFFF", "#00F0B6"]
-            }
-        }
-   \endqml
-
-   For a list of components available see StatusQ.
-*/
-Item {
-    id: identiconRing
-
-    /*!
-       \qmlproperty StatusIdenticonRingSettings StatusIdenticonRing::settings
-       This property holds a set of settings for building the ring.
-    */
-    property StatusIdenticonRingSettings settings: StatusIdenticonRingSettings {
-        totalRingUnits: 1
-        initalAngleRad: 0
-        ringPxSize: 1.5
-    }
-
-    /*!
-       \qmlproperty real StatusIdenticonRing::segmentRadLen
-       This property holds the total ring line length in radians. It depends on totalRingUnits value of settings object.
-    */
-    readonly property real segmentRadLen: 2 * Math.PI / settings.totalRingUnits
-
-    visible: settings.ringSpecModel !== undefined
-
-    Canvas {
-        function printArcSegment(context, xPos, yPos, radius, color, startAngle, arcAngleLen, lineWidth) {
-            context.beginPath()
-            context.arc(xPos, yPos, radius, startAngle, startAngle + arcAngleLen, false/*anticlockwise*/)
-            context.strokeStyle = color
-            context.lineWidth = lineWidth
-            context.stroke()
-        }
-
-        anchors.fill: parent
-        onPaint: {
-            const context = getContext("2d")
-            const radius = (height  - settings.ringPxSize) / 2
-            const xPos = width / 2
-            const yPos = height / 2
-            let arcPos = settings.initalAngleRad
-            context.reset()
-            if(settings.ringSpecModel) {
-                for (let i=0; i<settings.ringSpecModel.count; i++) {
-                    const segment = settings.ringSpecModel.get(i)
-                    printArcSegment(context,
-                                    xPos,
-                                    yPos,
-                                    radius,
-                                    settings.distinctiveColors[segment.colorId],
-                                    arcPos,
-                                    segment.segmentLength * identiconRing.segmentRadLen,
-                                    settings.ringPxSize)
-                    arcPos += segment.segmentLength * identiconRing.segmentRadLen
-                }
-            }
-        }
-    }
-}
@@ -1,54 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-StatusProgressBar {
-    id: control
-
-    property var strength
-    property string labelVeryWeak: "Very weak"
-    property string labelWeak: "Weak"
-    property string labelSoso: "So-so"
-    property string labelGood: "Good"
-    property string labelGreat: "Great"
-
-    enum Strength {
-        VeryWeak, // 0
-        Weak, // 1
-        SoSo, // 2
-        Good, // 3
-        Great // 4
-    }
-
-    // Behavior:
-    states: [
-        // Strength states definition:
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.VeryWeak
-            PropertyChanges { target: control; fillColor : Theme.palette.dangerColor1}
-            PropertyChanges { target: control; text: labelVeryWeak}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.Weak
-            PropertyChanges { target: control; fillColor : Theme.palette.pinColor1}
-            PropertyChanges { target: control; text: labelWeak}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.SoSo
-            PropertyChanges { target: control; fillColor : Theme.palette.miscColor7}
-            PropertyChanges { target: control; text: labelSoso}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.Good
-            PropertyChanges { target: control; fillColor : Theme.palette.miscColor12}
-            PropertyChanges { target: control; text: labelGood}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.Great
-            PropertyChanges { target: control; fillColor : Theme.palette.successColor1}
-            PropertyChanges { target: control; text: labelGreat}
-        }
-    ]
-}
@@ -1,234 +0,0 @@
-import QtQuick 2.0
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls.Validators 0.1
-
-/*!
-   \qmltype StatusPinInput
-   \inherits Item
-   \inqmlmodule StatusQ.Controls
-   \since StatusQ.Controls 0.1
-   \brief It allows entering an N pin length.
-
-   The \c StatusPinInput displays N visual circles corresponging with the pin length to introduce.
-
-   It runs a blinking animation when the control is focused and ready to introduce the pin, as well as, an hovering feedback when user is in the MouseArea where is able to click into the control.
-
-   This pin input control allows introducing validators.
-
-   Example of how the control looks like:
-   \image status_pin_input.png
-
-   Example of how to use it:
-
-   \qml
-        StatusPinInput {
-            id: regexPinInput
-            validator:  StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
-            circleDiameter: 22
-            circleSpacing: 22
-            pinLen: 7
-        }
-   \endqml
-
-   For a list of components available see StatusQ.
-*/
-Item {
-    id: root
-
-    /*!
-       \qmlproperty string StatusPinInput::pinInput
-       This property holds the introduced user pin.
-    */
-    property alias pinInput: inputText.text
-
-    /*!
-       \qmlproperty Validator StatusPinInput::validator
-        This property allows you to set a validator on the StatusPinInput. When a validator is set the StatusPinInput will only accept
-        input which leaves the pinInput property in an acceptable state.
-
-        Currently supported validators are qml StatusIntValidator and StatusRegularExpressionValidator.
-
-        An example of using validators is shown below, which allows input of integers between 0 and 999999 into the pin input
-
-        \qml
-            StatusPinInput {
-                id: numbersPinInput
-                validator: StatusIntValidator{bottom: 0; top: 999999;}
-            }
-        \endqml
-    */
-    property alias validator: d.statusValidator
-
-    /*!
-       \qmlproperty int StatusPinInput::pinLen
-       This property allows you to set a specific pin input length. The default value is 6.
-    */
-    property int pinLen: 6
-
-    /*!
-       \qmlproperty int StatusPinInput::circleSpacing
-       This property allows you to customize spacing between pin circles. The default value is 16 pixels.
-    */
-    property int circleSpacing: 16
-
-    /*!
-       \qmlproperty int StatusPinInput::circleDiameter
-       This property allows you to customize pin circle diameter. The default value is 16 pixels.
-    */
-    property int circleDiameter: 16
-
-    QtObject {
-        id: d
-        property int currentPinIndex: 0
-
-        property StatusValidator statusValidator
-
-        function activateBlink () {
-            const currItem = repeater.itemAt(d.currentPinIndex)
-            if(currItem) {
-                if((currItem.innerState === "NEXT") && (!currItem.blinkingAnimation.running)) {
-                    currItem.blinkingAnimation.start()
-                }
-            }
-        }
-
-        function deactivateBlink () {
-            const currItem = repeater.itemAt(d.currentPinIndex)
-            if(currItem) {
-                if((currItem.innerState === "NEXT") && (currItem.blinkingAnimation.running)) {
-                    currItem.blinkingAnimation.stop()
-
-                    // To ensure that the opacity does not remain in an intermediate state when forcing the animation to stop
-                    currItem.innerOpacity = 1
-                }
-            }
-        }
-    }
-
-    /*
-        \qmlmethod StatusPinInput::statesInitialization()
-
-        Initializes pin input bringing it to its initial state.
-
-        It is directly called in Component.onCompleted slot and can be called whenever you need resetting it.
-    */
-    function statesInitialization() {
-        d.currentPinIndex = 0
-        repeater.itemAt(d.currentPinIndex).innerState = "NEXT"
-        for (var i = 1; i < root.pinLen; i++) {
-            repeater.itemAt(i).innerState = "EMPTY"
-        }
-    }
-
-    width: (root.circleDiameter + root.circleSpacing) * root.pinLen
-    height: root.circleDiameter
-
-    Component.onCompleted: { statesInitialization() }
-
-    // Pin input data management object:
-    TextInput {
-        id: inputText
-        visible: false
-        focus: true
-        maximumLength: root.pinLen
-        validator: d.statusValidator.validatorObj
-        onTextChanged: {
-            // Modify state of current introduced character position:
-            if(text.length >= (d.currentPinIndex + 1)) {
-                repeater.itemAt(d.currentPinIndex).innerState = "FILLED"
-
-                // Update next:
-                d.currentPinIndex++
-                if(d.currentPinIndex < root.pinLen)
-                    repeater.itemAt(d.currentPinIndex).innerState = "NEXT"
-
-            }
-            // Modify state of current removed character position:
-            else if (text.length <= (d.currentPinIndex + 1)) {
-                if(d.currentPinIndex < root.pinLen)
-                    repeater.itemAt(d.currentPinIndex).innerState = "EMPTY"
-                d.currentPinIndex--
-                repeater.itemAt(d.currentPinIndex).innerState = "NEXT"
-            }
-
-            // Some component validations:
-            if(text.length !== d.currentPinIndex)
-                console.error("StatusPinInput input management error. Current pin length must be "+ text.length + "and is " + d.currentPinIndex)
-        }
-        onFocusChanged: { if(!focus) { d.deactivateBlink () } }
-    }
-
-    // Pin input visual objects:
-    Row {
-        spacing: root.circleSpacing
-
-        Repeater {
-            id: repeater
-            model: root.pinLen
-
-            Rectangle {
-                id: background
-                property string innerState: "EMPTY"
-                property alias blinkingAnimation: blinkingAnimation
-                property alias innerOpacity: inner.opacity
-
-                 width: root.circleDiameter
-                 height: width
-                 color: Theme.palette.primaryColor2
-                 radius: 0.5 * width
-
-                 Rectangle {
-                     id: inner
-                     state: background.innerState
-                     anchors.centerIn: parent
-                     height: width
-                     color: Theme.palette.primaryColor1
-                     radius: 0.5 * width
-                     states: [
-                         State {
-                             name: "NEXT"
-                             StateChangeScript { script: { if(inputText.focus) blinkingAnimation.start() } }
-                             PropertyChanges {target: inner; width: root.circleDiameter / 2}                             
-                         },
-                         State {
-                             name: "FILLED"                             
-                             StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
-                             PropertyChanges {target: inner; width: root.circleDiameter}
-                             PropertyChanges {target: inner; opacity: 1}
-                         },
-                         State {
-                             name: "EMPTY"
-                             StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
-                             PropertyChanges {target: inner; width: 0}
-                             PropertyChanges {target: inner; opacity: 1}
-                         }
-                     ]
-
-                     // Animation on transitions
-                     Behavior on width { NumberAnimation { duration: 200 } }
-
-                     // Animation on "cursor" blinking
-                     SequentialAnimation {
-                         id: blinkingAnimation
-                         loops: Animation.Infinite
-                         NumberAnimation { target: inner; property: "opacity"; to: 0; duration: 800 }
-                         NumberAnimation { target: inner; property: "opacity"; to: 1; duration: 800 }
-                     }
-                 }
-            }
-        }
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-
-        // MouseArea behavior:
-        onClicked:  {
-            inputText.forceActiveFocus()
-            d.activateBlink ()
-        }
-        onContainsMouseChanged: { if(containsMouse) { cursorShape = Qt.PointingHandCursor } }
-    }
-}
@@ -1,44 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-ProgressBar {
-    id: control
-
-    property string text
-    property color fillColor
-    property color backgroundColor: Theme.palette.directColor8
-    property color backgroundBorderColor: "transparent"
-
-    width: 416
-    height: 16
-    clip: true
-
-    background: Rectangle {
-        implicitWidth: parent.width
-        implicitHeight: parent.height
-        color: control.backgroundColor
-        border.color: control.backgroundBorderColor
-        radius: 5
-    }
-    contentItem: Item {
-        implicitHeight: parent.height
-
-        Rectangle {
-            id: bar
-            width: control.visualPosition * parent.width
-            height: parent.height
-            color: control.fillColor
-            radius: 5
-
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: control.text
-                font.pixelSize: 12
-                color: Theme.palette.indirectColor1
-            }
-        }
-    }
-}
@@ -1,57 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Controls 0.1
-
-/*!
-   \qmltype StatusIntValidator
-   \inherits StatusValidator
-   \inqmlmodule StatusQ.Controls.Validators
-   \since StatusQ.Controls.Validators 0.1
-   \brief The StatusIntValidator type provides a validator for integer values.
-
-   The \c StatusIntValidator type provides a validator for integer values.
-
-   It is a wrapper of QML type \l{https://doc.qt.io/qt-5/qml-qtquick-intvalidator.html}{IntValidator}.
-
-   Example of how to use it:
-
-   \qml
-        StatusIntValidator {
-            bottom: 0
-            top: 125
-            errorMessage: qsTr("This is an invalid numeric value")
-        }
-   \endqml
-
-   For a list of components available see StatusQ.
-*/
-StatusValidator {
-    id: root
-
-    /*!
-       \qmlproperty string StatusIntValidator::bottom
-       This property holds the validator's lowest acceptable value. By default, this property's value is derived from the lowest signed integer available (typically -2147483647).
-    */
-    property int bottom
-
-    /*!
-       \qmlproperty string StatusIntValidator::locale
-       This property holds the name of the locale used to interpret the number.
-    */
-    property string locale
-
-    /*!
-       \qmlproperty string StatusIntValidator::top
-       This property holds the validator's highest acceptable value. By default, this property's value is derived from the highest signed integer available (typically 2147483647).
-    */
-    property int top
-
-    name: "intValidator"
-    errorMessage: "Please enter a valid numeric value."
-    validatorObj: IntValidator { bottom: root.bottom; locale: root.locale; top: root.top }
-
-    validate: function (t) {
-        // Basic validation management
-        return root.validatorObj.validate() === IntValidator.Acceptable
-    }
-}
@@ -1,60 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Controls 0.1
-
-/*!
-   \qmltype StatusRegularExpressionValidator
-   \inherits StatusValidator
-   \inqmlmodule StatusQ.Controls.Validators
-   \since StatusQ.Controls.Validators 0.1
-   \brief The StatusRegularExpressionValidator type provides a validator for regular expressions.
-
-   The \c StatusRegularExpressionValidator type provides a validator, that counts as valid any string which matches a specified regular expression.
-
-   It is a wrapper of QML type \l{https://doc.qt.io/qt-5/qml-qtquick-regularexpressionvalidator.html}{RegularExpressionValidator}.
-
-   Example of how to use it:
-
-   \qml
-        StatusRegularExpressionValidator {
-            regularExpression: /[0-9A-Za-z@]+/
-            errorMessage: qsTr("Please enter a valid regular expression.")
-        }
-   \endqml
-
-   For a list of components available see StatusQ.
-*/
-StatusValidator {
-    id: root
-
-    /*!
-       \qmlproperty string StatusRegularExpressionValidator::regularExpression
-        This property holds the regular expression used for validation.
-
-        Note that this property should be a regular expression in JS syntax, e.g /a/ for the regular expression matching "a".
-
-        By default, this property contains a regular expression with the pattern .* that matches any string.
-
-        Some more examples of regular expressions:
-
-        > A list of numbers with one to three positions separated by a comma:
-        \qml
-        /\d{1,3}(?:,\d{1,3})+$/
-        \endqml
-
-        > An amount consisting of up to 3 numbers before the decimal point, and 1 to 2 after the decimal point:
-        \qml
-        /(\d{1,3})([.,]\d{1,2})?$/
-       \endqml
-    */
-    property var regularExpression
-
-    name: "regex"
-    errorMessage: "Please enter a valid regular expression."
-    validatorObj: RegularExpressionValidator { regularExpression: root.regularExpression }
-
-    validate: function (t) {
-        // Basic validation management
-        return root.validatorObj.validate() === RegularExpressionValidator.Acceptable
-    }
-}
@@ -6,7 +6,6 @@ QtObject {

    property string name: ""
    property string errorMessage: "invalid input"
-    property var validatorObj

    property var validate: function (value) {
        return true
@@ -4,9 +4,7 @@ StatusAddressValidator 0.1 StatusAddressValidator.qml
 StatusAddressOrEnsValidator 0.1 StatusAddressOrEnsValidator.qml
 StatusAsyncValidator 0.1 StatusAsyncValidator.qml
 StatusAsyncEnsValidator 0.1 StatusAsyncEnsValidator.qml
-StatusIntValidator 0.1 StatusIntValidator.qml
 StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml
 StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml
-StatusRegularExpressionValidator 0.1 StatusRegularExpressionValidator.qml
 StatusUrlValidator 0.1 StatusUrlValidator.qml
 StatusValidator 0.1 StatusValidator.qml
@@ -2,13 +2,11 @@ module StatusQ.Controls

 StatusAccountSelector 0.1 StatusAccountSelector.qml
 StatusAssetSelector 0.1 StatusAssetSelector.qml
-StatusBanner 0.1 StatusBanner.qml
 StatusChatCommandButton 0.1 StatusChatCommandButton.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
 StatusColorSelector 0.1 StatusColorSelector.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
-StatusIdenticonRing 0.1 StatusIdenticonRing.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusTabBarIconButton 0.1 StatusTabBarIconButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
@@ -25,9 +23,6 @@ StatusSelect 0.1 StatusSelect.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
 StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml
-StatusPinInput 0.1 StatusPinInput.qml
-StatusProgressBar 0.1 StatusProgressBar.qml
-StatusPasswordStrengthIndicator 0.1 StatusPasswordStrengthIndicator.qml
 StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml
@@ -1,30 +1,6 @@
 import QtQuick 2.13
 import StatusQ.Core.Theme 0.1

-/*!
-   \qmltype StatusBaseText
-   \inherits Text
-   \inqmlmodule StatusQ.Core
-   \since StatusQ.Core 0.1
-   \brief Displays multiple lines of text. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-text.html}{Text}.
-
-   The \c StatusBaseText item displays text.
-   For example:
-
-   \qml
-       StatusBaseText {
-           width: 240
-           text: "Hello World!"
-           font.pixelSize: 24
-           color: Theme.pallete.directColor1
-       }
-   \endqml
-
-   \image status_base_text.png
-
-   For a list of components available see StatusQ.
-*/
-
 Text {
    font.family: Theme.palette.baseFont.name
 }
@@ -1,78 +0,0 @@
-import QtQuick 2.13
-import StatusQ.Core 0.1
-
-/*!
-   \qmltype StatusIdenticonRingSettings
-   \inherits QtObject
-   \inqmlmodule StatusQ.Core
-   \since StatusQ.Core 0.1
-   \brief It describes identicon ring settings.
-
-   The \c StatusIdenticonRingSettings object is not a graphical component just an object to encapsulate identicon ring settings.
-
-   Example of how to use it:
-
-   \qml
-        StatusIdenticonRingSettings {
-            totalRingUnits: 25
-            initalAngleRad: 0
-            ringPxSize: 1.5
-            ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
-                             ListElement {colorId: 28; segmentLength: 1},
-                             ListElement {colorId: 31; segmentLength: 1},
-                             ListElement {colorId: 22; segmentLength: 4},
-                             ListElement {colorId: 28; segmentLength: 3},
-                             ListElement {colorId: 27; segmentLength: 5},
-                             ListElement {colorId: 7; segmentLength: 5},
-                             ListElement {colorId: 13; segmentLength: 1},
-                             ListElement {colorId: 25; segmentLength: 4}]
-            distinctiveColors: ["#000000", "#726F6F", "#C4C4C4",
-                                "#E7E7E7", "#FFFFFF", "#00FF00",
-                                "#009800", "#B8FFBB", "#FFC413",
-                                "#9F5947", "#FFFF00", "#A8AC00",
-                                "#FFFFB0", "#FF5733", "#FF0000",
-                                "#9A0000", "#FF9D9D", "#FF0099",
-                                "#C80078", "#FF00FF", "#900090",
-                                "#FFB0FF", "#9E00FF", "#0000FF",
-                                "#000086", "#9B81FF", "#3FAEF9",
-                                "#9A6600", "#00FFFF", "#008694",
-                                "#C2FFFF", "#00F0B6"]
-        }
-   \endqml
-
-   For a list of components available see StatusQ.
-*/
-QtObject {
-    id: statusIdenticonRingSettings
-
-    /*!
-       \qmlproperty ListModel StatusIdenticonRingSettings::ringSpecModel
-       This is a REQUIRED property that contains a ListModel object that describes each ring segment color and length.
-       Example of use: [ListElement {colorId: 0; segmentLength: 1}, ...]
-    */
-    property ListModel ringSpecModel
-
-    /*!
-       \qmlproperty var StatusIdenticonRingSettings::distinctiveColors
-       This is a REQUIRED property that holds an string array of disctinctive segment colors.
-    */
-    property var distinctiveColors
-
-    /*!
-       \qmlproperty real StatusIdenticonRingSettings::totalRingUnits
-       This property provides the total number of units the identicon ring is composed by.
-    */
-    property real totalRingUnits
-
-    /*!
-       \qmlproperty real StatusIdenticonRingSettings::initalAngleRad
-       This property provides the initial angle, in radians, the identicon ring will start rendering the line.
-    */
-    property real initalAngleRad
-
-    /*!
-       \qmlproperty real StatusIdenticonRingSettings::ringPxSize
-       This property provides the pixels size of the ring line.
-    */
-    property real ringPxSize
-}
@@ -31,8 +31,6 @@ QtObject {
        'green2': '#7CDA00',
        'green3': '#60C370',
        'green4': '#93DB33',
-        'green5': '#9EA85D',
-        'green6': '#AFB551',

        'grey': '#F0F2F5',
        'grey2': '#F6F8FA',
@@ -145,7 +145,6 @@ ThemePalette {
    miscColor9: getColor('moss2')
    miscColor10: getColor('brown3')
    miscColor11: getColor('yellow2')
-    miscColor12: getColor('green6')

    accountColors: [
        getColor('blue5'),
@@ -158,13 +157,6 @@ ThemePalette {
        getColor('brown3')
    ]

-    identiconRingColors: ["#000000", "#726F6F", "#C4C4C4", "#E7E7E7", "#FFFFFF", "#00FF00",
-                          "#009800", "#B8FFBB", "#FFC413", "#9F5947", "#FFFF00", "#A8AC00",
-                          "#FFFFB0", "#FF5733", "#FF0000", "#9A0000", "#FF9D9D", "#FF0099",
-                          "#C80078", "#FF00FF", "#900090", "#FFB0FF", "#9E00FF", "#0000FF",
-                          "#000086", "#9B81FF", "#3FAEF9", "#9A6600", "#00FFFF", "#008694",
-                          "#C2FFFF", "#00F0B6"]
-
    property QtObject statusAppLayout: QtObject {
        property color backgroundColor: baseColor3
        property color rightPanelBackgroundColor: baseColor3
@@ -174,10 +166,6 @@ ThemePalette {
        property color backgroundColor: baseColor5
    }

-    property QtObject statusToastMessage: QtObject {
-        property color backgroundColor: baseColor3
-    }
-
    property QtObject statusListItem: QtObject {
        property color backgroundColor: baseColor3
        property color secondaryHoverBackgroundColor: primaryColor3
@@ -143,7 +143,6 @@ ThemePalette {
    miscColor9: getColor('moss')
    miscColor10: getColor('brown')
    miscColor11: getColor('brown2')
-    miscColor12: getColor('green5')

    accountColors: [
        getColor('blue'),
@@ -156,13 +155,6 @@ ThemePalette {
        getColor('brown')
    ]

-    identiconRingColors: ["#000000", "#726F6F", "#C4C4C4", "#E7E7E7", "#FFFFFF", "#00FF00",
-                          "#009800", "#B8FFBB", "#FFC413", "#9F5947", "#FFFF00", "#A8AC00",
-                          "#FFFFB0", "#FF5733", "#FF0000", "#9A0000", "#FF9D9D", "#FF0099",
-                          "#C80078", "#FF00FF", "#900090", "#FFB0FF", "#9E00FF", "#0000FF",
-                          "#000086", "#9B81FF", "#3FAEF9", "#9A6600", "#00FFFF", "#008694",
-                          "#C2FFFF", "#00F0B6"]
-
    property QtObject statusAppLayout: QtObject {
        property color backgroundColor: white
        property color rightPanelBackgroundColor: white
@@ -172,10 +164,6 @@ ThemePalette {
        property color backgroundColor: baseColor2
    }

-    property QtObject statusToastMessage: QtObject {
-        property color backgroundColor: white
-    }
-
    property QtObject statusListItem: QtObject {
        property color backgroundColor: white
        property color secondaryHoverBackgroundColor: getColor('blue6')
@@ -88,12 +88,9 @@ QtObject {
    property color miscColor9
    property color miscColor10
    property color miscColor11
-    property color miscColor12

    property var accountColors: []

-    property var identiconRingColors: []
-
    property QtObject statusAppLayout: QtObject {
        property color backgroundColor
        property color rightPanelBackgroundColor
@@ -103,10 +100,6 @@ QtObject {
        property color backgroundColor
    }

-    property QtObject statusToastMessage: QtObject {
-        property color backgroundColor
-    }
-
    property QtObject statusListItem: QtObject {
        property color backgroundColor
        property color secondaryHoverBackgroundColor
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Pascal Precht	b946c5e01f	feat(StatusModal): introduce `hasCloseButton` property This property can be used to hide the close button, as there are some modals that shouldn't allow users to "x" modals away.	2021-11-30 16:36:58 +01:00
Alexandra Betouni	8a617a44ac	refactor(StatusChatList): updates due to chat & communities models refactored Updated Models.qml for chats and communities models to reflect changes due to refactor in the actual backend.`StatusChatList` and `StatusChatListAndCategories` components updated accordingly.	2021-11-30 08:04:17 +01:00
Sale Djenic	7eadd201d7	refactor(StatusAppNavBar): profile nav bar button added Profile button of type `StatusNavBarTabButton` added to `StatusAppNavBar` and exposed so it can be optionally set from outside of the component.	2021-11-22 16:26:51 +01:00
Sale Djenic	f2c9696659	refactor(StatusAppNavBar): navigation bar displays buttons based on set model `StatusAppNavBar` component is refactored in order to meet new changes we have on the backend in the desktop app.	2021-11-22 16:26:51 +01:00