hotfix(StatusSectionLayout): fix notificationCount availability

fix(StatusMessageSenderDetails): Simplify StatusMessageSenderDetails
StatusMessageSenderDetails contains only displayName and secondaryName. Correct values are delivered by a model. Issue #7241
2022-09-19 17:59:27 +03:00 · 2022-09-19 11:22:52 +02:00 · 2022-09-16 11:40:08 +02:00 · 2022-09-16 09:44:53 +02:00 · 2022-09-16 09:40:58 +02:00 · 2022-09-15 14:54:57 +02:00
10441 changed files with 73461 additions and 4655 deletions
@@ -0,0 +1,17 @@
+### Checklist
+
+- [ ] follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
+  - the scope should be the component's name e.g: `feat(StatusListItem): ... `
+  - when adding new components, the scope is the module e.g: `feat(StatusQ.Controls): ...`
+- [ ] add documentation if necessary (new component, new feature)
+- [ ] update sandbox app
+  - in case of new component, add new component page
+  - in case of new features, add variation to existing component page
+  - nice to have: add it to the demo application as well
+- [ ] test changes in both light and dark theme?
+- [ ] is this a breaking change?
+    - [ ] use the dedicated `BREAKING CHANGE` commit message section
+    - [ ] resolve breaking changes in [status-desktop](https://github.com/status-im/status-desktop)
+        - [ ] (pre-merge) adapt code to breaking changes
+        - [ ] (post-merge) update StatusQ submodule pointer
+- [ ] test changes in [status-desktop](https://github.com/status-im/status-desktop)
@@ -13,3 +13,7 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
+doc/html
+CMakeLists.txt.user
+.vscode
+build/
@@ -0,0 +1,3 @@
+[submodule "vendor/SortFilterProxyModel"]
+	path = vendor/SortFilterProxyModel
+	url = https://github.com/status-im/SortFilterProxyModel.git
@@ -1,3 +1,60 @@
+<a name=""></a>
+##  0.25.0 (2022-03-07)
+
+
+#### Bug Fixes
+
+* **@StatusListItem:**  fix left padding ([f574e390](f574e390))
+* **StatusListItem:**  add propagateTitleClicks property to StatusListItem ([8495fae8](8495fae8))
+* **StatusQ.Popups:**  removed overlay setting (#557) ([665141f8](665141f8))
+* **StatusTagSelector:**  Updates and fixes in the component ([07a5dc09](07a5dc09))
+* **build:**  fix linux build ([9d06aae1](9d06aae1), closes [#413](413))
+* **sandbox:**  Fix results popup component position ([cdf51fef](cdf51fef))
+
+#### Features
+
+* **@StatusListItem:**  add option for tags ([381150a7](381150a7))
+* **StatusChatList:**  Highlight chat item at creation time ([9e6fbe95](9e6fbe95))
+* **StatusChatListItem:**  enable assigning emoji to chat item ([5fac8774](5fac8774))
+* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
+* **StatusQ:**  Moving docs outside sandbox ([825999b1](825999b1))
+* **StatusQ.Core:**  add new arrow-left icon ([e9f20be1](e9f20be1))
+* **StatusSmartIdenticon:**  Add support for color rings in StatusSmartIdenticon (#553) ([3b86d13a](3b86d13a), closes [#517](517))
+
+#### Breaking Changes
+
+* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
+
+
+
+<a name=""></a>
+##  0.24.0 (2022-02-14)
+
+
+#### Features
+
+* **StatusListItem:**  add highlighted property ([5780f183](5780f183))
+* **StatusQ.Components:**  Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
+
+
+
+<a name=""></a>
+##  Version 0.23.0 (2022-02-08)
+
+
+#### 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)

@@ -0,0 +1,23 @@
+cmake_minimum_required(VERSION 3.19)
+
+project(StatusQ)
+
+if (APPLE)
+    set(MACOS_VERSION_MIN_FLAGS -mmacosx-version-min=10.14)
+    set(CMAKE_OSX_ARCHITECTURES "x86_64")
+endif()
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+# https://doc.qt.io/qtcreator/creator-qml-modules-with-plugins.html#importing-qml-modules
+set(QML_IMPORT_PATH
+    ${CMAKE_SOURCE_DIR}/src;${QML_IMPORT_PATH}
+    CACHE STRING "")
+
+add_subdirectory(vendor/SortFilterProxyModel)
+add_subdirectory(sandbox)
+add_subdirectory(tests)
@@ -36,7 +36,7 @@ To make viewing and testing components easy, we've added a sandbox application t

 ### Using Qt Creator

-The easiest way to run the sandbox application is to simply open the provided `sandbox.pro` file using Qt Creator.
+The easiest way to run the sandbox application is to simply open the provided `CMakeLists.txt` file using Qt Creator.

 ### Using command line interface

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

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

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

 ```
-$ ./bin/sandbox
+$ ./build/sandbox/Sandbox
 ```
-
-More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)
@@ -0,0 +1,19 @@
+/*!
+   \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
+*/
+
@@ -0,0 +1,44 @@
+/*!
+    \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{StatusItemSelector}
+       \li \l{StatusLetterIdenticon}
+       \li \l{StatusListItem}
+       \li \l{StatusListPicker}
+       \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}
+       \li \l{StatusWizardStepper}
+   \endlist
+*/
@@ -0,0 +1,51 @@
+/*!
+    \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{StatusDropdown}
+       \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{StatusIconTextButton}
+       \li \l{StatusIdenticonRing}
+       \li \l{StatusInput}
+       \li \l{StatusItemPicker}
+       \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}
+       \li \l{StatusSeedPhraseInput}
+   \endlist
+*/
@@ -0,0 +1,24 @@
+/*!
+    \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{StatusFontSettings}
+       \li \l{StatusIcon}
+       \li \l{StatusIconBackgroundSettings}
+       \li \l{StatusIconSettings}
+       \li \l{StatusIdenticonRingSettings}
+       \li \l{StatusImageSettings}
+       \li \l{StatusModalHeaderSettings}
+       \li \l{StatusTooltipSettings}
+   \endlist
+*/
@@ -0,0 +1,16 @@
+/*!
+    \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
+*/
@@ -0,0 +1,15 @@
+/*!
+    \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
+*/
@@ -0,0 +1,22 @@
+/*!
+    \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
+*/
@@ -0,0 +1,36 @@
+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>"
@@ -0,0 +1,41 @@
+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;
+}
@@ -0,0 +1,38 @@
+project(Sandbox)
+
+find_package(
+  Qt5
+  COMPONENTS Core Quick QuickControls2
+  REQUIRED)
+
+file(GLOB_RECURSE QML_FILES "../*.qml")
+file(GLOB_RECURSE JS_FILES "../*.js")
+file(GLOB_RECURSE HEADERS *.h)
+if(APPLE)
+  file(GLOB_RECURSE SOURCES *.cpp *.mm)
+else()
+  file(GLOB_RECURSE SOURCES *.cpp)
+endif()
+
+qt5_add_big_resources(QRC_FILES qml.qrc ../src/statusq.qrc ../src/assets.qrc)
+
+add_executable(
+  ${PROJECT_NAME}
+  ${HEADERS}
+  ${SOURCES}
+  ${QRC_FILES}
+  ${QML_FILES}
+  ${JS_FILES})
+
+target_compile_definitions(${PROJECT_NAME}
+                           PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}")
+target_link_libraries(
+  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
+                          SortFilterProxyModel)
+
+if (APPLE)
+  find_library(AppKit AppKit)
+  find_library(Foundation Foundation)
+
+  target_link_libraries(${PROJECT_NAME} PRIVATE ${AppKit} ${Foundation})
+endif()
@@ -1,12 +1,16 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.14

+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
 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
@@ -17,6 +21,32 @@ Rectangle {

    property string titleStyle: "osx"

+    QtObject {
+        id: appSectionType
+        readonly property int chat: 0
+        readonly property int community: 1
+        readonly property int communitiesPortal: 2
+        readonly property int wallet: 3
+        readonly property int browser: 3
+        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)
+            if (item.sectionId !== sectionId)
+            {
+                Models.demoAppSectionsModel.setProperty(i, "active", false)
+                continue
+            }
+
+            Models.demoAppSectionsModel.setProperty(i, "active", true);
+        }
+    }
+
    StatusMacTrafficLights {
        anchors.left: parent.left
        anchors.top: parent.top
@@ -33,7 +63,7 @@ Rectangle {
        visible: titleStyle === "windows"
    }

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

-        appNavBar: StatusAppNavBar {
+        leftPanel: StatusAppNavBar {

            id: navBar

-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                tooltip.text: "Chat"
-                checked: appView.sourceComponent == statusAppChatView
-                onClicked: {
-                    appView.sourceComponent = statusAppChatView
-                }
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: Models.demoAppSectionsModel
+
+            property bool communityAdded: false
+
+            onAboutToUpdateFilteredRegularModel: {
+                communityAdded = false
            }

-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Status Community"
-                    tooltipText: "Status Community"
-                }
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
            }

-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                id: communityBtn
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
                anchors.horizontalCenter: parent.horizontalCenter
-                name: model.name
-                tooltip.text: model.tooltipText
-                icon.color: Theme.palette.miscColor6
-                icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                checked: appView.sourceComponent == statusAppCommunityView
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
                onClicked: {
-                    appView.sourceComponent = statusAppCommunityView
+                    if(model.sectionType === appSectionType.chat)
+                    {
+                        appView.sourceComponent = statusAppChatView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.communitiesPortal)
+                    {
+                        appView.sourceComponent = statusCommunityPortalView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.profileSettings)
+                    {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                }
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                onClicked: {
+                    if(model.sectionType === appSectionType.community)
+                    {
+                        appView.sourceComponent = statusAppCommunityView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
                }

                popupMenu: StatusPopupMenu {
@@ -97,49 +174,14 @@ Rectangle {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.name: "arrow-left"
                        type: StatusMenuItem.Type.Danger
                    }
                }
-
            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "bigger/browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "bigger/status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    id: profileNavButton
-                    icon.name: "bigger/settings"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-
-                    checked: appView.sourceComponent == statusAppProfileSettingsView
-                    onClicked: {
-                        appView.sourceComponent = statusAppProfileSettingsView
-                    }
-                }
-            ]
-
        }

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

+    Component {
+        id: statusCommunityPortalView
+        StatusAppCommunitiesPortalView { }
+    }
+
    DemoContactRequestsModal {
        id: demoContactRequestsModal
        anchors.centerIn: parent
@@ -7,6 +7,8 @@ Item {
    id: themeSwitchWrapper
    signal checkedChanged()

+    property alias lightThemeEnabled: switchControl.checked
+
    width: themeSwitch.width
    height: themeSwitch.height

@@ -26,6 +28,7 @@ Item {
            }

            StatusSwitch {
+                id: switchControl
                onCheckedChanged: themeSwitchWrapper.checkedChanged()

                StatusToolTip {
@@ -3,9 +3,10 @@ import QtQuick.Layouts 1.14
 import QtQuick.Dialogs 1.3

 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1

-
 Column {
    spacing: 10
    Grid {
@@ -16,6 +17,43 @@ Column {

        horizontalItemAlignment: Grid.AlignHCenter

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

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

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

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

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

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

+        // Flat + small
        StatusFlatButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
@@ -173,6 +233,25 @@ Column {
            loading: true
        }

+        // transparent
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            loading: true
+        }
+
        // Rounded blue

        StatusFlatRoundButton {
@@ -307,12 +386,47 @@ Column {
        onClicked: {
            colorDialog.open();
        }
-        ColorDialog {
-            id: colorDialog
-            property bool colorSelected: false
-            onAccepted: {
-                colorSelected = true;
-            }
+    }
+
+    StatusColorDialog {
+        id: colorDialog
+        anchors.centerIn: parent
+        property bool colorSelected: false
+        onAccepted: {
+            colorSelected = true;
+        }
+    }
+
+    // Button with emoji
+    StatusButton {
+        text: "Button with Emoji"
+        asset.emoji: "🖼️️"
+    }
+
+    StatusButton {
+        width: parent.width
+        text: "wide"
+    }
+
+    RowLayout {
+        spacing: 20
+
+        StatusIconTextButton {
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+            statusIcon: "next"
+            icon.width: 24
+            icon.height: 24
+            iconRotation: 180
+            text: "Previous page"
+            font.pixelSize: 15
+            onClicked: testText.visible = !testText.visible
+        }
+        StatusBaseText {
+            id: testText
+            Layout.alignment: Qt.AlignVCenter
+            text: "Click and hide!"
+            font.pixelSize: 15
        }
    }
 }
@@ -32,14 +32,14 @@ GridLayout {
    }

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

    StatusIconTabButton {
        icon.color: Theme.palette.miscColor9
        // This icon source is flawed and demonstrates the fallback case
        // when the image source can't be loaded
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
+        icon.source: "https://httpstat.us/404"
        name: "Pascal"
    }

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

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

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

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

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

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

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

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

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

+    StatusChatInfoButton {
+        title: "community-channel"
+        subTitle: "Some very long description text to see how the whole item wraps or elides"
+        asset.color: Theme.palette.miscColor7
+        type: StatusChatInfoButton.Type.CommunityChat
+        pinnedMessagesCount: 3
+    }
+
    StatusSlider {
        width: 360
        from: 0
@@ -189,6 +214,16 @@ GridLayout {
        value: 40
    }

+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
+    }
+
+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
+    }
+
    StatusBanner {
        id: banner
        width: 360
@@ -198,7 +233,7 @@ GridLayout {
    }

    StatusProgressBar {
-        id: progressBar        
+        id: progressBar
        text: "Weak"
        value: 0.5
        fillColor : Theme.palette.pinColor1
@@ -7,33 +7,100 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Popups 0.1

 Column {
-    spacing: 5
+    spacing: 10

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

-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
-        chatInfoButton.pinnedMessagesCount: 1
-        chatInfoButton.muted: true
+    StatusToolBar {
+        width: 518
+
+        headerContent: StatusChatInfoButton {
+            width: Math.min(implicitWidth, parent.width)
+            title: "Muted public chat"
+            subTitle: "Some subtitle"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.PublicChat
+            pinnedMessagesCount: 1
+            muted: true
+        }
    }

-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-        chatInfoButton.pinnedMessagesCount: 1
+
+    StatusToolBar {
        notificationCount: 1
+        width: 518
+
+        headerContent: StatusChatInfoButton {
+            width: Math.min(implicitWidth, parent.width)
+            title: "Group chat"
+            subTitle: "Group chat subtitle"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.GroupChat
+            pinnedMessagesCount: 1
+        }
+    }
+
+    StatusToolBar {
+        width: 518
+
+        headerContent: StatusChatInfoButton {
+            title: "Community chat"
+            subTitle: "Some very long description text to see how the whole item wraps or ellides"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.CommunityChat
+            pinnedMessagesCount: 3
+        }
+    }
+
+    StatusToolBar {
+        headerContent: StatusChatInfoButton {
+            title: "Very long chat name"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.CommunityChat
+            pinnedMessagesCount: 1234567891
+        }
+    }
+
+    StatusToolBar {
+        notificationCount: 1
+        width: 518
+
+        StatusTagSelector {
+            namesModel: ListModel {
+                ListElement {
+                    publicId: "0x0"
+                    name: "Maria"
+                    icon: ""
+                    isIdenticon: false
+                    onlineStatus: 3
+                    isReadonly: true
+                    tagIcon: "crown"
+                }
+                ListElement {
+                    publicId: "0x1"
+                    name: "James"
+                    icon: ""
+                    isIdenticon: false
+                    onlineStatus: 1
+                    isReadonly: false
+                    tagIcon: ""
+                }
+            }
+            toLabelText: qsTr("To: ")
+            warningText: qsTr("USER LIMIT REACHED")
+        }
    }

    Row {
@@ -49,247 +116,383 @@ Column {
            }
        }

+        QtObject {
+            id: appSectionType
+            readonly property int chat: 0
+            readonly property int community: 1
+            readonly property int wallet: 2
+            readonly property int browser: 3
+            readonly property int nodeManagement: 4
+            readonly property int profileSettings: 5
+        }
+
        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2
-                tooltip.text: "Chat"
            }
        }

        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2
-                tooltip.text: "Chat"
            }

-            navBarCommunityTabButtons.model: ListModel {
-                id: buttons
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                anchors.horizontalCenter: parent.horizontalCenter
-            }
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2

-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
+                popupMenu: StatusPopupMenu {

-                    tooltip.text: "Profile"
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-left"
+                        type: StatusMenuItem.Type.Danger
+                    }
                }
-            ]
+            }
        }

        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2
-                tooltip.text: "Chat"
            }

-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-left"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+
+
+        StatusAppNavBar {
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
            }

-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-left"
+                        type: StatusMenuItem.Type.Danger
+                    }
                }
-            ]
+            }
        }

        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
+                ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
+                ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
+                ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2
-                tooltip.text: "Chat"
            }

-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-                }
-            ]
-        }
-
-        StatusAppNavBar {
-            id: test
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2
-                tooltip.text: "Chat"
-            }

-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
+                popupMenu: StatusPopupMenu {

-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-left"
+                        type: StatusMenuItem.Type.Danger
+                    }
                }
            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-                }
-            ]
        }
    }
 }
-
@@ -1,14 +1,15 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQml.Models 2.14
 import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1

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

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

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

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

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

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

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

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

@@ -85,7 +147,8 @@ GridLayout {
    StatusChatListItem {
        name: "has-mentions"
        type: StatusChatListItem.Type.PublicChat
-        badge.value: 1
+        hasUnreadMessages: true
+        notificationsCount: 1
    }

    StatusChatListItem {
@@ -100,7 +163,7 @@ GridLayout {
        type: StatusChatListItem.Type.PublicChat
        muted: true
        hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
    }

    StatusChatListItem {
@@ -130,7 +193,7 @@ GridLayout {
        selected: true
        muted: true
        hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
    }


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

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

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

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

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

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

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

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

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        icon.name: "info"
+        asset.name: "info"
        label: "Text"
        components: [
            StatusButton {
@@ -236,7 +301,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        icon.name: "info"
+        asset.name: "info"
        label: "Text"
        components: [StatusSwitch {}]
    }
@@ -244,7 +309,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        icon.name: "info"
+        asset.name: "info"
        label: "Text"
        components: [
          StatusRadioButton {}
@@ -254,7 +319,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        icon.name: "info"
+        asset.name: "info"
        label: "Text"
        components: [StatusCheckBox {}]
    }
@@ -262,7 +327,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        icon.name: "info"
+        asset.name: "info"
        label: "Text"
        components: [
            StatusBadge {
@@ -279,14 +344,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

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

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

    StatusListItem {
@@ -296,17 +361,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

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

    StatusListItem {
        title: "List Item with Badge"
        subTitle: "Subtitle"
-        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        image.isIdenticon: true
-        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        asset.isImage: true
+        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        asset.imgIsIdenticon: true
+        badge.asset.isImage: true
+        badge.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
        badge.primaryText: "CryptoKitties"
        badge.secondaryText: "#test"
    }
@@ -314,11 +381,69 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusListItem {
        title: "List Item with Badge 2"
        subTitle: "Subtitle"
-        icon.isLetterIdenticon: true
+        asset.isLetterIdenticon: true
        badge.primaryText: "CryptoKitties"
        badge.secondaryText: "#test"
-        badge.icon.color: "orange"
-        badge.icon.isLetterIdenticon: true
+        badge.asset.color: "orange"
+        badge.asset.isLetterIdenticon: true
+    }
+
+    StatusListItem {
+        title: "List Item with Tags"
+        asset.isLetterIdenticon: true
+        bottomModel: 3
+        bottomDelegate: StatusListItemTag {
+            title: "tag"
+            asset.isLetterIdenticon: true
+        }
+    }
+
+    StatusListItem {
+        title: "List Item with Inline Tags"
+        asset.isLetterIdenticon: true
+        tagsModel: ListModel{
+            ListElement {
+                name: "helloworld.eth"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account1"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account2"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account3"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account4"
+                emoji: "😁"
+            }
+        }
+        tagsDelegate: StatusListItemTag {
+            color: "blue"
+            height: 24
+            radius: 6
+            closeButtonVisible: false
+            asset.emoji: model.emoji
+            asset.emojiSize: Emoji.size.verySmall
+            asset.isLetterIdenticon: true
+            title: model.name
+            titleText.font.pixelSize: 12
+            titleText.color: Theme.palette.indirectColor1
+        }
+    }
+
+    StatusListItem {
+        title: "List Item with Emoji"
+        subTitle: "Emoji"
+        asset.emoji: "😁"
+        asset.color: "yellow"
+        asset.letterSize: 14
+        asset.isLetterIdenticon: true
    }

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

@@ -349,34 +474,144 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusMemberListItem {
        nickName: "This is an example"
        userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        trustIndicator: StatusMemberListItem.TrustedType.Verified
-        isMutualContact: true
-        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isVerified: true
+        isContact: true
+        asset.isImage: true
+        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        image.isIdenticon: true
-        isOnline: true
+        asset.imgIsIdenticon: true
+        status: 1 // FIXME: use enum
+        ringSettings.ringSpecModel:
+            ListModel {
+                ListElement {colorId: 13; segmentLength: 5}
+                ListElement {colorId: 31; segmentLength: 5}
+                ListElement {colorId: 10; segmentLength: 1}
+                ListElement {colorId: 2; segmentLength: 5}
+                ListElement {colorId: 26; segmentLength: 2}
+                ListElement {colorId: 19; segmentLength: 4}
+                ListElement {colorId: 28; segmentLength: 3}
+            }
+        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
    }

    StatusMemberListItem {
        nickName: "carmen.eth"
-        isOnline: false
-        trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+        isUntrustworthy: true
+        asset.isLetterIdenticon: true
+    }
+
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isUntrustworthy: true
+        asset.isLetterIdenticon: true
+    }
+
+    StatusMemberListItem {
+        nickName: "untrusted-admin.eth"
+        asset.isLetterIdenticon: true
+        isUntrustworthy: true
+        isAdmin: true
+        isContact: true
    }

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

    StatusMemberListItem {
        nickName: "Mark Cuban"
        userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isMutualContact: true
-        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isContact: true
+        asset.isImage: true
+        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        image.isIdenticon: true
+        asset.imgIsIdenticon: true
+    }
+
+    StatusMemberListItem {
+        nickName: "admin.guy"
+        userName: "adguy"
+        isAdmin: true
+        asset.isLetterIdenticon: true
+        isUntrustworthy: true
+        Component.onCompleted: {
+            print(asset.name, asset.isImage, asset.isLetterIdenticon)
+        }
+    }
+
+    StatusBaseText {
+        Layout.fillWidth: true
+        Layout.topMargin: 16
+        text: "Loading features:"
+        font.pixelSize: 17
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Incoming device"
+        label: "loading: true"
+        asset.width: 40
+        asset.height: 40
+        asset.emoji: "😁"
+        asset.color: "hotpink"
+        asset.letterSize: 14
+        asset.isLetterIdenticon: true
+        loading: true
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Device"
+        label: "loadingFailed: true"
+        asset.width: 40
+        asset.height: 40
+        asset.emoji: "😁"
+        asset.color: "hotpink"
+        asset.letterSize: 14
+        asset.isLetterIdenticon: true
+        loadingFailed: true
+    }
+
+    StatusListItem {
+        implicitWidth: 600
+        title: "List Item with Tags"
+        subTitle: "03:32"
+        asset.isLetterIdenticon: true
+        inlineTagModel: 6
+        inlineTagDelegate: StatusListItemTag {
+            height: 24
+            title: "tag"
+            asset.isLetterIdenticon: true
+        }
+        components: [
+            ColumnLayout {
+                Row {
+                    Layout.alignment: Qt.AlignRight
+                    spacing: 4
+                    StatusIcon {
+                        color:  Theme.palette.successColor1
+                        icon: "arrow-up"
+                        rotation: 135
+                        height: 18
+                    }
+                    StatusBaseText {
+                        text: "0.0000015 ETH"
+                        font.pixelSize: 15
+                        color: Theme.palette.directColor1
+                    }
+                }
+                StatusBaseText {
+                    Layout.alignment: Qt.AlignRight
+                    text: "1201.10 USD"
+                    font.pixelSize: 15
+                    color: Theme.palette.baseColor1
+                }
+            }
+        ]
    }
 }
@@ -4,38 +4,61 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1

-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+ColumnLayout {
+    GridLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: true

-    StatusLoadingIndicator {
-        color: Theme.palette.directColor4
+        columns: 6
+        columnSpacing: 5
+        rowSpacing: 5
+
+        StatusLoadingIndicator {
+            color: Theme.palette.directColor4
+        }
+
+        StatusLetterIdenticon {
+            name: "#status"
+        }
+
+        StatusRoundedImage {
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+        }
+
+        StatusBadge {}
+
+        StatusBadge {
+            value: 1
+        }
+
+        StatusBadge {
+            value: 10
+        }
+
+        StatusBadge {
+            value: 100
+        }
+
+        StatusRoundIcon {
+            asset.name: "info"
+        }
    }

-    StatusLetterIdenticon {
-        name: "#status"
+    Flow {
+        Layout.fillWidth: true
+        spacing: 4
+
+        Repeater {
+            model: 12
+            StatusLetterIdenticon {
+                name: "A"
+                color: Theme.palette.userCustomizationColors[index]
+                letterSize: 16
+            }
+        }
    }

-    StatusRoundedImage {
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-    }
-
-    StatusBadge {}
-
-    StatusBadge {
-        value: 1
-    }
-
-    StatusBadge {
-        value: 10
-    }
-
-    StatusBadge {
-        value: 100
-    }
-
-    StatusRoundIcon {
-        icon.name: "info"
+    StatusDatePicker {
+        label: "Select date"
    }
 }
@@ -4,6 +4,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1

 Column {
    spacing: 20
@@ -78,6 +80,17 @@ Column {
        onClicked: editTitleModal.open()
    }

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

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

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

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

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

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

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

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

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

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -336,7 +344,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    sourceComponent: popupMenu.delegate
                    onLoaded: {
                        item.action.text = model.name
-                        item.action.iconSettings.name = model.iconName
+                        item.action.assetSettings.name = model.iconName
                    }
                }
            }
@@ -353,10 +361,94 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        header.editable: true
    }

+    StatusModal {
+        id: advancedHeaderFooterModal
+        anchors.centerIn: parent
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        showAdvancedFooter: true
+        height: 200
+        advancedHeaderComponent: Rectangle {
+            width: parent.width
+            height: 50
+            color: Theme.palette.baseColor1
+            border.width: 1
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: "Add any header here"
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+        }
+        advancedFooterComponent: Rectangle {
+            width: parent.width
+            height: 50
+            color: Theme.palette.baseColor1
+            border.width: 1
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: "Add any footer here"
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+        }
+    }
+
+    StatusModal {
+        id: floatingHeaderModal
+        anchors.centerIn: parent
+        height: 200
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        hasFloatingButtons: true
+        advancedHeaderComponent: StatusFloatingButtonsSelector {
+            id: floatingHeader
+            model: dummyAccountsModel
+            delegate: Rectangle {
+                width: button.width
+                height: button.height
+                radius: 8
+                visible: visibleIndices.includes(index)
+                color: Theme.palette.statusAppLayout.backgroundColor
+                StatusButton {
+                    id: button
+                    topPadding: 8
+                    bottomPadding: 0
+                    implicitHeight: 32
+                    leftPadding: 4
+                    text: name
+                    asset.emoji: !!emoji ? emoji: ""
+                    asset.emojiSize: Emoji.size.middle
+                    asset.name: !emoji ? "filled-account": ""
+                    normalColor: "transparent"
+                    highlighted: index === floatingHeader.currentIndex
+                    onClicked: {
+                        floatingHeader.currentIndex = index
+                    }
+                }
+            }
+            popupMenuDelegate: StatusListItem {
+                implicitWidth: 272
+                title: name
+                onClicked: floatingHeader.itemSelected(index)
+                visible: !visibleIndices.includes(index)
+            }
+        }
+    }
+
    ListModel {
        id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
        ListElement{name: "Account 2"; iconName: "filled-account"}
+        ListElement{name: "Account 3"; iconName: "filled-account"}
+        ListElement{name: "Account 4"; iconName: "filled-account"}
+        ListElement{name: "Account 5"; iconName: "filled-account"}
+        ListElement{name: "Account 6"; iconName: "filled-account"}
+        ListElement{name: "Account 7"; iconName: "filled-account"}
    }

    StatusSpellcheckingMenuItems {
@@ -0,0 +1,130 @@
+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: ListView.view.width
+
+        audioMessageInfoText: "Audio Message"
+        cancelButtonText: "Cancel"
+        saveButtonText: "Save"
+        loadingImageText: "Loading image..."
+        errorLoadingImageText: "Error loading the image"
+        resendText: "Resend"
+        pinnedMsgInfoText: "Pinned by"
+
+        timestamp: model.timestamp
+        isAReply: model.isReply
+        hasMention: model.hasMention
+        isPinned: model.isPinned
+        pinnedBy: model.pinnedBy
+        hasExpired: model.hasExpired
+        reactionsModel: model.reactions || []
+
+        messageDetails: StatusMessageDetails {
+            contentType: model.contentType
+            messageContent: model.messageContent
+            amISender: model.amIsender
+            sender.id: model.senderId
+            sender.displayName: model.senderDisplayName
+            sender.secondaryName: model.senderOptionalName
+            sender.isContact: model.isContact
+            sender.trustIndicator: model.trustIndicator
+            sender.profileImage: StatusProfileImageSettings {
+                width: 40
+                height: 40
+                pubkey: model.senderId
+                name: model.profileImage || ""
+                colorId: 1
+                colorHash: ListModel {
+                    ListElement { colorId: 13; segmentLength: 5 }
+                    ListElement { colorId: 31; segmentLength: 5 }
+                    ListElement { colorId: 10; segmentLength: 1 }
+                    ListElement { colorId: 2; segmentLength: 5 }
+                    ListElement { colorId: 26; segmentLength: 2 }
+                    ListElement { colorId: 19; segmentLength: 4 }
+                    ListElement { colorId: 28; segmentLength: 3 }
+                }
+            }
+
+            messageText: model.message
+        }
+
+        replyDetails: StatusMessageDetails {
+            amISender:  model.isReply && model.replyAmISender
+            sender.id: model.replySenderId || ""
+            sender.displayName:  model.isReply ? model.replySenderName: ""
+            sender.secondaryName: model.isReply ? model.replySenderEnsName : ""
+            sender.profileImage: StatusProfileImageSettings {
+                width: 20
+                height: 20
+                name: model.isReply ? model.replyProfileImage: ""
+                pubkey: model.replySenderId
+                colorId: 1
+                colorHash: ListModel {
+                    ListElement { colorId: 13; segmentLength: 5 }
+                    ListElement { colorId: 31; segmentLength: 5 }
+                    ListElement { colorId: 10; segmentLength: 1 }
+                    ListElement { colorId: 2; segmentLength: 5 }
+                    ListElement { colorId: 26; segmentLength: 2 }
+                    ListElement { colorId: 19; segmentLength: 4 }
+                    ListElement { colorId: 28; segmentLength: 3 }
+                }
+            }
+            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"
+            }
+        ]
+    }
+}
@@ -0,0 +1,120 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+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
+        spacing: 16
+
+        StatusTagSelector {
+            id: tagSelector
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            Layout.leftMargin: 17
+            maxHeight: root.height
+            toLabelText: qsTr("To: ")
+            warningText: qsTr("USER LIMIT REACHED")
+            listLabel: qsTr("Contacts")
+            ringSpecModelGetter: function(pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.getColorHashAsJson(pubKey)
+                var index = -1;
+                if (!!contactsModel) {
+                    for (var i = 0; i < contactsModel.count; i++) {
+                        if (contactsModel.get(i).pubKey === pubKey) {
+                            index = i;
+                        }
+                    }
+                    return contactsModel.get(index).ringSpecModel;
+                } else {
+                    return null;
+                }
+            }
+            compressedKeyGetter: function(pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.getCompressedPk(pubKey);
+                var possibleCharacters = pubKey.split('');
+                var randomStringLength = 12; // assuming you want random strings of 12 characters
+                var randomString = [];
+                for (var i=0; i<randomStringLength; ++i) {
+                    var index = (Math.random() * possibleCharacters.length).toFixed(0);
+                    var nextChar = possibleCharacters[index];
+                    randomString.push(nextChar);
+                }
+                return randomString.join().toString().replace(/,/g, '');
+            }
+            colorIdForPubkeyGetter: function (pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.colorIdForPubkey(pubKey);
+                return Math.floor(Math.random() * 10);
+            }
+            onTextChanged: {
+                sortModel(root.contactsModel);
+            }
+            Component.onCompleted: {
+                textEdit.forceActiveFocus();
+                sortModel(root.contactsModel);
+            }
+        }
+
+        StatusButton {
+            implicitWidth: 106
+            implicitHeight: 44
+            Layout.alignment: Qt.AlignTop
+            enabled: (tagSelector.namesModel.count > 0)
+            text: "Confirm"
+        }
+
+        Item {
+            implicitHeight: 32
+            implicitWidth: 32
+            Layout.alignment: Qt.AlignTop
+
+            StatusActivityCenterButton {
+                id: notificationButton
+                anchors.right: parent.right
+                unreadNotificationsCount: 3
+            }
+        }
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+
+        StatusBaseText {
+            width: Math.min(553, parent.width - 32)
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -(headerRow.height/2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            visible: contactsModel.count === 0
+            wrapMode: Text.WordWrap
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+            text: qsTr("You can only send direct messages to your Contacts.\n
+Send a contact request to the person you would like to chat with, you will be able to chat with them once they have accepted your contact request.")
+            Component.onCompleted: {
+                if (visible) {
+                    tagSelector.enabled = false;
+                }
+            }
+        }
+    }
+}
@@ -13,7 +13,8 @@ StatusModal {

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

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

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

@@ -103,8 +104,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Leave community"
-            icon.name: "arrow-right"
-            icon.rotation: 180
+            asset.name: "arrow-left"
            type: StatusListItem.Type.Secondary
        }
    }
@@ -1,4 +1,5 @@
 import QtQuick 2.12
+import QtQuick.Layouts 1.12

 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
@@ -9,150 +10,197 @@ import StatusQ.Core.Theme 0.1

 import "data" 1.0

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

    leftPanel: Item {
        anchors.fill: parent
-
-        StatusNavigationPanelHeadline {
-            id: headline
-            anchors.top: parent.top
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Chat"
-        }
-
-        Item {
+        anchors.margins: 16
+        RowLayout {
            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"
+            StatusNavigationPanelHeadline {
+                id: headline
+                Layout.alignment: Qt.AlignVCenter
+                text: "Chat"
            }

+            Item {
+                Layout.fillWidth: true
+            }
+
+
            StatusRoundButton {
-                id: actionButton
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: 8
-                width: 32
-                height: 32
+                Layout.alignment: Qt.AlignVCenter
+                icon.name: "public-chat"
+                icon.color: Theme.palette.directColor1
+                icon.height: editBtn.icon.height
+                icon.width: editBtn.icon.width
+                implicitWidth: editBtn.implicitWidth
+                implicitHeight: editBtn.implicitHeight
+                type: StatusRoundButton.Type.Tertiary
+                StatusToolTip {
+                    text: qsTr("Join public chats")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
+            }

-                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"
-                    }
+            StatusIconTabButton {
+                id: editBtn
+                icon.name: "edit"
+                icon.color: Theme.palette.directColor1
+                checked: root.createChat
+                highlighted: checked
+                onClicked: {
+                    root.createChat = !root.createChat;
+                }
+                StatusToolTip {
+                    text: qsTr("Start chat")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
                }
            }
        }

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

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

            StatusChatList {
-                anchors.horizontalCenter: parent.horizontalCenter
-
-                chatListItems.model: Models.demoChatListItems
-                selectedChatId: "0"
-                onChatItemSelected: selectedChatId = id
+                width: parent.width
+                model: Models.demoChatListItems
+                highlightItem: !root.createChat
                onChatItemUnmuted: {
                    for (var i = 0; i < Models.demoChatListItems.count; i++) {
                        let item = Models.demoChatListItems.get(i);
@@ -204,145 +252,21 @@ StatusAppThreePanelLayout {
        }
    }

-    rightPanel: Item {
+    centerPanel: Loader {
        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
-                }
+        sourceComponent: root.createChat ? createChatView : chatChannelView
+        Component {
+            id: createChatView
+            CreateChatView {
+                contactsModel: Models.membersListModel
            }
        }
-    }

-    centerPanel: ListView {
-        id: messageList
-        anchors.fill: parent
-        anchors.margins: 15
-        clip: true
-        model: Models.chatMessagesModel
-        delegate: StatusMessage {
-            id: delegate
-            width: parent.width
-
-            audioMessageInfoText: "Audio Message"
-            cancelButtonText: "Cancel"
-            saveButtonText: "Save"
-            loadingImageText: "Loading image..."
-            errorLoadingImageText: "Error loading the image"
-            resendText: "Resend"
-            pinnedMsgInfoText: "Pinned by"
-
-            messageDetails: StatusMessageDetails {
-                contentType: model.contentType
-                messageContent: model.messageContent
-                amISender: model.amIsender
-                displayName: model.userName
-                secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
-                chatID: model.chatKey
-                profileImage: StatusImageSettings {
-                    width: 40
-                    height: 40
-                    source: model.profileImage
-                    isIdenticon: model.isIdenticon
-                }
-                messageText: model.message
-                hasMention: model.hasMention
-                contactType: model.contactType
-                isPinned: model.isPinned
-                pinnedBy: model.pinnedBy
-                hasExpired: model.hasExpired
+        Component {
+            id: chatChannelView
+            ChatChannelView {
+                model: Models.chatMessagesModel
            }
-            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"
-                }
-            ]
        }
    }
 }
@@ -0,0 +1,161 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Components 0.1
+
+import "../demoapp/data" 1.0
+
+StatusSectionLayout {
+    id: root
+
+    QtObject {
+        id: d
+
+        property ListModel featuredCommunitiesModel: Models.featuredCommunitiesModel
+        property ListModel popularCommunitiesModel: Models.curatedCommunitiesModel
+        property ListModel tagsModel: Models.tagsModel
+
+        property string searchText: ""
+        property int layoutVMargin: 70
+        property int layoutHMargin: 64
+        property int titlePixelSize: 28
+        property int subtitlePixelSize: 17
+        property int stylePadding: 16
+
+        function navigateToCommunity(communityId) {
+            console.info("Clicked community ID: " + communityId)
+        }
+    }
+    centerPanel: Item {
+        anchors.fill: parent
+        clip: true
+        StatusScrollView {
+            anchors.fill: parent
+            contentHeight: column.height + d.layoutVMargin
+            contentWidth: column.width + d.layoutHMargin
+
+            ColumnLayout {
+                id: column
+                spacing: 18
+
+                StatusBaseText {
+                    Layout.topMargin: d.layoutVMargin
+                    Layout.leftMargin: d.layoutHMargin
+                    text: qsTr("Find community")
+                    font.weight: Font.Bold
+                    font.pixelSize: d.titlePixelSize
+                    color: Theme.palette.directColor1
+                }
+
+                // Tags definition - Now hidden - Out of scope
+                // TODO: Replace by `StatusListItemTagRow`
+                Row {
+                    visible: d.tagsModel.count > 0
+                    Layout.leftMargin: d.layoutHMargin
+                    Layout.rightMargin: d.layoutHMargin
+                    width: 1234 // by design
+                    spacing: d.stylePadding/2
+
+                    Repeater {
+                        model: d.tagsModel
+                        delegate: StatusListItemTag {
+                            border.color: Theme.palette.baseColor2
+                            color: "transparent"
+                            height: 32
+                            radius: 36
+                            closeButtonVisible: false
+                            asset.emoji: model.emoji
+                            asset.height: 32
+                            asset.width: asset.height
+                            asset.color: "transparent"
+                            asset.isLetterIdenticon: true
+                            title: model.name
+                            titleText.font.pixelSize: 15
+                            titleText.color: Theme.palette.primaryColor1
+                        }
+                    }
+                }
+
+                StatusBaseText {
+                    Layout.leftMargin: d.layoutHMargin
+                    Layout.topMargin: 20
+                    text: qsTr("Featured")
+                    font.weight: Font.Bold
+                    font.pixelSize: d.subtitlePixelSize
+                    color: Theme.palette.directColor1
+                }
+
+                GridLayout {
+                    id: featuredGrid
+                    Layout.leftMargin: d.layoutHMargin
+                    columns: 3
+                    columnSpacing: d.stylePadding
+                    rowSpacing: d.stylePadding
+
+                    Repeater {
+                        model: d.featuredCommunitiesModel
+                        delegate: StatusCommunityCard {
+                            locale: "es"
+                            communityId: model.communityId
+                            loaded: model.available
+                            logo: model.logo
+                            name: model.name
+                            description: model.description
+                            members: model.members
+                            popularity: model.popularity
+                            communityColor: model.communityColor
+                            categories: ListModel {
+                                ListElement { name: "sport"; emoji: "🎾"}
+                                ListElement { name: "food"; emoji: "🥑"}
+                                ListElement { name: "privacy"; emoji: "👻"}
+                            }
+
+                            onClicked: { d.navigateToCommunity(communityId) }
+                        }
+                    }
+                }
+
+                StatusBaseText {
+                    Layout.leftMargin: d.layoutHMargin
+                    Layout.topMargin: 20
+                    text: qsTr("Popular")
+                    font.weight: Font.Bold
+                    font.pixelSize: d.subtitlePixelSize
+                    color: Theme.palette.directColor1
+                }
+
+                GridLayout {
+                    Layout.leftMargin: d.layoutHMargin
+                    columns: 3
+                    columnSpacing: d.stylePadding
+                    rowSpacing: d.stylePadding
+
+                    Repeater {
+                        model: d.popularCommunitiesModel
+                        delegate: StatusCommunityCard {
+                            locale: "es"
+                            communityId: model.communityId
+                            loaded: model.available
+                            logo: model.logo
+                            name: model.name
+                            description: model.description
+                            members: model.members
+                            activeUsers: model.activeUsers
+                            popularity: model.popularity
+                            tokenLogo: model.tokenLogo
+                            isPrivate: model.isPrivate
+                            banner: model.banner
+
+                            onClicked: { d.navigateToCommunity(communityId) }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12

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

 import "data" 1.0

-StatusAppThreePanelLayout {
+StatusSectionLayout {
    id: root

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

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

            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.asset.isImage: true
+            chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+            chatInfoButton.asset.color: Theme.palette.miscColor6
            chatInfoButton.onClicked:  { chatInfoButtonClicked(); }

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

-        ScrollView {
+        StatusScrollView {
            id: scrollView

            anchors.top: statusChatInfoToolBar.bottom
@@ -77,11 +174,9 @@ StatusAppThreePanelLayout {

                draggableItems: true
                draggableCategories: false
-                chatList.model: Models.demoCommunityChatListItems
-                categoryList.model: Models.demoCommunityCategoryItems
+                model: Models.demoCommunityChatListItems

                showCategoryActionButtons: true
-                onChatItemSelected: selectedChatId = id

                categoryPopupMenu: StatusPopupMenu {

@@ -166,70 +261,11 @@ StatusAppThreePanelLayout {
    }

    centerPanel: Item {
-        StatusChatToolBar {
-            id: statusChatToolBar
-            anchors.top: parent.top
-            width: parent.width
-
-            chatInfoButton.title: "general"
-            chatInfoButton.subTitle: "Community Chat"
-            chatInfoButton.icon.color: Theme.palette.miscColor6
-            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-            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
+        anchors.fill: parent
+        StatusBaseText {
+            anchors.centerIn: parent
+            font.pixelSize: 15
+            text: qsTr("Community content here")
        }
    }

@@ -260,14 +296,17 @@ StatusAppThreePanelLayout {
            model: Models.membersListModel
            delegate: StatusMemberListItem {
                implicitWidth: parent.width
-                nickName: model.nickName
-                userName: model.userName
-                chatKey: model.chatKey
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
-                image.source: model.source
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.isOnline
+                nickName: model.localNickname
+                userName: model.displayName
+                pubKey: model.pubKey
+                isVerified: model.isVerified
+                isUntrustworthy: model.isUntrustworthy
+                isContact: model.isContact
+                asset.name: model.icon
+                asset.isImage: (asset.name !== "")
+                asset.isLetterIdenticon: (asset.name === "")
+                asset.imgIsIdenticon: false
+                status: model.onlineStatus
            }
        }
    }
@@ -3,11 +3,12 @@ import QtQuick.Controls 2.14

 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1

 import "data" 1.0

-StatusAppTwoPanelLayout {
+StatusSectionLayout {
    id: root

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

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

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

@@ -64,7 +65,7 @@ StatusAppTwoPanelLayout {
                    model: Models.demoProfileOtherMenuItems
                    delegate: StatusNavigationListItem {
                        title: model.title
-                        icon.name: model.icon
+                        asset.name: model.icon
                    }
                }
            }
@@ -0,0 +1,155 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
+
+import SortFilterProxyModel 0.2
+
+ColumnLayout {
+    id: root
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        StatusIconTextButton {
+            id: sortBtn
+
+            property int sortOrder: -1
+            statusIcon: {
+                if (sortOrder == Qt.AscendingOrder) return "chevron-down"
+                if (sortOrder == Qt.DescendingOrder) return "chevron-up"
+                return "remove"
+            }
+
+            onClicked: {
+                var st = sortOrder + 1
+                sortOrder = st > 1 ? -1 : st
+            }
+        }
+
+        StatusInput {
+            id: searchInput
+
+            Layout.fillWidth: true
+            input.asset.name: "search"
+            placeholderText: "nickname.."
+        }
+
+        StatusIconTabButton {
+            id: contactBtn
+
+            icon.name: "tiny/tiny-contact"
+            identicon.asset.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusIconTabButton {
+            id: verifiedBtn
+
+            icon.name: "tiny/tiny-checkmark"
+            identicon.asset.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+    }
+
+    ListView {
+        Layout.fillWidth: true
+        implicitHeight: contentItem.childrenRect.height
+        spacing: 4
+
+        model: SortFilterProxyModel {
+            sourceModel: d.users
+            sorters: StringSorter {
+                enabled: sortBtn.sortOrder !== -1
+                roleName: "nick"
+                sortOrder: sortBtn.sortOrder
+            }
+            filters: [
+                ExpressionFilter {
+                    expression: model.nick.startsWith(searchInput.text)
+                },
+                AllOf {
+                    enabled: contactBtn.highlighted || verifiedBtn.highlighted
+                    ValueFilter {
+                        enabled: contactBtn.highlighted
+                        roleName: "isContact"
+                        value: true
+                    }
+                    ValueFilter {
+                        enabled: verifiedBtn.highlighted
+                        roleName: "isVerified"
+                        value: true
+                    }
+                }
+            ]
+        }
+
+        delegate: StatusMemberListItem {
+            width: parent.width
+            userName: model.name
+            nickName: model.nick
+            isVerified: model.isVerified
+            isContact: model.isContact
+            asset.isLetterIdenticon: true
+        }
+    }
+
+    QtObject {
+        id: d
+
+        readonly property ListModel users: ListModel {
+            ListElement {
+                name: "Richard"
+                nick: "Ricky"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Susan"
+                nick: "Sue"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Edward"
+                nick: "Ed"
+                isVerified: true
+                isContact: false
+            }
+            ListElement {
+                name: "Toomas"
+                nick: "Tommy"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Elizabeth"
+                nick: "Bess"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Thomas"
+                nick: "Tom"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Fernando"
+                nick: "Alonso"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Alexander"
+                nick: "Alex"
+                isVerified: true
+                isContact: false
+            }
+        }
+    }
+}
@@ -1,6 +0,0 @@
-#include "handler.h"
-
-Handler::Handler(QObject *parent) : QObject(parent)
-{
-
-}
@@ -1,16 +0,0 @@
-#ifndef HANDLER_H
-#define HANDLER_H
-
-#include <QObject>
-
-class Handler : public QObject
-{
-    Q_OBJECT
-public:
-    explicit Handler(QObject *parent = nullptr);
-
-signals:
-    void restartQml();
-};
-
-#endif // HANDLER_H
@@ -4,6 +4,8 @@

 #include "sandboxapp.h"

+#include <qqmlsortfilterproxymodeltypes.h>
+
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
@@ -11,6 +13,15 @@ int main(int argc, char *argv[])
 #endif

    SandboxApp app(argc, argv);
+
+    qqsfpm::registerTypes();
+
+    qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
+
+    app.setOrganizationName("Status");
+    app.setOrganizationDomain("status.im");
+    app.setApplicationName("Sandbox");
+
    app.startEngine();

    return app.exec();
@@ -2,6 +2,9 @@ import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
 import QtGraphicalEffects 1.13
+import QtQuick.Layouts 1.14
+import Qt.labs.settings 1.0
+import QtQml.Models 2.14

 import Sandbox 0.1

@@ -12,6 +15,10 @@ import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1

+import SortFilterProxyModel 0.2
+
+import "demoapp/data" 1.0
+
 StatusWindow {
    id: rootWindow
    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
@@ -29,252 +36,353 @@ StatusWindow {

    property real factor: 1.0

-    Component.onCompleted: {
-        Theme.palette = lightTheme
-        apiDocsButton.checked = true
+    Component.onCompleted: rootWindow.updatePosition()

-        rootWindow.updatePosition();
+    QtObject {
+        id: appSectionType
+        readonly property int chat: 0
+        readonly property int community: 1
+        readonly property int wallet: 2
+        readonly property int browser: 3
+        readonly property int nodeManagement: 4
+        readonly property int profileSettings: 5
+        readonly property int apiDocumentation: 100
+        readonly property int examples: 101
+        readonly property int demoApp: 102
    }

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

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

-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "refresh"
-                tooltip.text: "Reload App"
-                onClicked: app.restartQml()
-            }
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: Models.mainAppSectionsModel

-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    id: apiDocsButton
-                    icon.name: "edit"
-                    tooltip.text: "API Documentation"
-                    onClicked: {
-                        stackView.clear()
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                onClicked: {
+                    stackView.clear()
+                    if(model.sectionType === appSectionType.apiDocumentation)
+                    {
                        stackView.push(libraryDocumentationCmp)
-                        checked = !checked
-                        demoAppButton.checked = false
                    }
-                },
-                StatusNavBarTabButton {
-                    id: demoAppButton
-                    icon.name: "status"
-                    tooltip.text: "Demo Application"
-                    checked: stackView.currentItem == demoAppCmp
-                    onClicked: {
-                        stackView.clear()
+                    else if(model.sectionType === appSectionType.examples)
+                    {
+                        stackView.push(examplesCmp)
+                    }
+                    else if(model.sectionType === appSectionType.demoApp)
+                    {
                        stackView.push(demoAppCmp)
-                        checked = !checked
-                        apiDocsButton.checked = false
                    }
-                }
-            ]
-        }
-
-        appView: StackView {
-            id: stackView
-            anchors.fill: parent
-            initialItem: libraryDocumentationCmp
-        }
-
-        ThemeSwitch {
-            anchors.top: parent.top
-            anchors.topMargin: 32
-            anchors.right: parent.right
-            anchors.rightMargin: 32
-            onCheckedChanged: {
-                if (Theme.palette === rootWindow.lightTheme) {
-                    Theme.palette = rootWindow.darkTheme
-                } else {
-                    Theme.palette = rootWindow.lightTheme
+                    rootWindow.setActiveItem(model.sectionId)
                }
            }
        }
+
+        rightPanel: Item {
+            anchors.fill: parent
+            StackView {
+                id: stackView
+                anchors.fill: parent
+                initialItem: libraryDocumentationCmp
+            }
+            ThemeSwitch {
+                anchors.top: parent.top
+                anchors.topMargin: 32
+                anchors.right: parent.right
+                anchors.rightMargin: 32
+                lightThemeEnabled: storeSettings.lightTheme
+                onLightThemeEnabledChanged: {
+                    Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
+                    storeSettings.lightTheme = lightThemeEnabled
+                }
+            }
+        }
+
    }

    Component {
        id: libraryDocumentationCmp

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

-            function page(name) {
+            function page(name, fillPage) {
+                storeSettings.fillPage = fillPage ? true : false
                viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
            }
            function control(name) {
                viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
+                storeSettings.fillPage = false
            }

-            leftPanel: Item {
+            leftPanel: StatusScrollView {
                anchors.fill: parent
-                ScrollView {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + 56
-                    contentWidth: navigation.width
-                    clip: true
-                    Column {
-                        id: navigation
-                        anchors.top: parent.top
-                        anchors.topMargin: 48
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        spacing: 0
+                anchors.topMargin: 48

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

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

-                        StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem { 
-                            title: "Buttons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusSwitchTab"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusTabSwitch");
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusChatCommandButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "Controls"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusTabBarIconButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusAccountSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusAssetSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusColorSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusWalletColorButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusWalletColorSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusPasswordStrengthIndicator"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Components" }
-                        StatusNavigationListItem { 
-                            title: "StatusAddress"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "List Items"
-                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
-                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusChatInfoToolBar"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "Others"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusExpandableItem"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusExpandableSettingsItem");
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem { 
-                            title: "StatusPopupMenu"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Layout" }
+                    StatusNavigationListItem {
+                        title: "Layouts"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title.substring(0, title.length - 1));
+                    }

-                        StatusNavigationListItem {
-                            title: "StatusModal"
-                            selected: viewLoader.source.toString().includes("Popups")
-                            onClicked: mainPageView.control("Popups");
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Platform" }
-                        StatusNavigationListItem {
-                            title: "StatusMacNotification"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Controls" }
+                    StatusNavigationListItem {
+                        title: "Buttons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSwitchTab"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusTabSwitch");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatCommandButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Controls"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarIconButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTextArea"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusComboBox"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusAccountSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPasswordStrengthIndicator"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPinInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Components" }
+                    StatusNavigationListItem {
+                        title: "StatusAddress"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "List Items"
+                        selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                        onClicked: mainPageView.control(title.replace(/\s+/g, ''));
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatInfoToolBar"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Others"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusExpandableItem"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusExpandableSettingsItem");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTagSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusToastMessage"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWizardStepper"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusListPicker"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityTags"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusItemSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChartPanel"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Popup" }
+                    StatusNavigationListItem {
+                        title: "StatusPopupMenu"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusModal"
+                        selected: viewLoader.source.toString().includes("Popups")
+                        onClicked: mainPageView.control("Popups");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusDialog"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Platform" }
+                    StatusNavigationListItem {
+                        title: "StatusMacNotification"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelectorGrid"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusImageCropPanel"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSpace"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
                    }
                }
            }

-            rightPanel: Item {
-                id: rightPanel
+            centerPanel: Item {
+                id: centerPanel
                anchors.fill: parent
-                ScrollView {
+
+                StatusScrollView {
+                    visible: !storeSettings.fillPage
                    anchors.fill: parent
+                    anchors.topMargin: 64
                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                    contentWidth: (pageWrapper.width * rootWindow.factor)
                    clip: true

                    Item {
                        id: pageWrapper
-                        width: rightPanel.width
+                        width: centerPanel.width
                        anchors.top: parent.top
-                        anchors.topMargin: 64
                        height: Math.max(rootWindow.height, viewLoader.height + 128)
                        scale: rootWindow.factor
+
                        Loader {
                            id: viewLoader
+                            active: !storeSettings.fillPage
                            anchors.centerIn: parent
-                            source: mainPageView.control("Icons")
+                            source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
                            onSourceChanged: {
+                                storeSettings.selected = viewLoader.source
                                if (source.toString().includes("Icons")) {
                                    item.iconColor = Theme.palette.primaryColor1;
                                }
@@ -282,6 +390,15 @@ StatusWindow {
                        }
                    }
                }
+                Loader {
+                    active: storeSettings.fillPage
+                    anchors.fill: parent
+                    anchors.topMargin: 64
+                    visible: storeSettings.fillPage
+                    clip: true
+
+                    source: viewLoader.source
+                }
            }
        }
    }
@@ -309,6 +426,57 @@ StatusWindow {
        }
    }

+    Component {
+        id: examplesCmp
+
+        StatusSectionLayout {
+            id: examplesView
+            showHeader: false
+
+            function example(name) {
+                examplesLoader.source = Qt.resolvedUrl("./examples/" + name + ".qml")
+                storeSettings.selectedExample = examplesLoader.source
+            }
+
+            readonly property string defaultExampleSource: example("FilteringSorting")
+
+            leftPanel: StatusScrollView {
+                id: examplesLeftPanel
+
+                anchors.fill: parent
+                anchors.topMargin: 48
+
+                ColumnLayout {
+                    width: examplesLeftPanel.availableWidth
+                    spacing: 0
+
+                    StatusNavigationListItem {
+                        Layout.fillWidth: true
+                        title: "FilteringSorting"
+                        selected: examplesLoader.source.toString().includes(title)
+                        onClicked: examplesView.example(title)
+                    }
+                }
+            }
+
+            centerPanel: Item {
+                anchors.fill: parent
+                StatusScrollView {
+                    id: examplesCenterPanel
+                    anchors.fill: parent
+                    anchors.margins: 64
+                    anchors.topMargin: anchors.margins + 32
+
+                    Loader {
+                        id: examplesLoader
+                        width: examplesCenterPanel.availableWidth
+                        source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
+                    }
+                }
+            }
+        }
+    }
+
    Component {
        id: demoAppCmp

@@ -347,8 +515,7 @@ StatusWindow {
            }
            DemoApp {
                id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
            }
            DropShadow {
                anchors.fill: demoApp
@@ -400,4 +567,12 @@ StatusWindow {
            rootWindow.toggleFullScreen()
        }
    }
+
+    Settings {
+        id: storeSettings
+        property string selected: ""
+        property string selectedExample: ""
+        property bool lightTheme: true
+        property bool fillPage: false
+    }
 }
@@ -8,57 +8,61 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1

-
 Column {
    spacing: 8

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

+import StatusQ.Core 0.1
 import StatusQ.Components 0.1

 import Sandbox 0.1

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

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

-    Item {
-        width: 200
-        height: childrenRect.height
+    GridLayout {
+        id: mainLayout
+
+        columns: 2
+
+        anchors.fill: parent
+
+        columnSpacing: 15
+        rowSpacing: 8
+
+        StatusBaseText { text: "StatusAddress\nsimple" }
        StatusAddress {
            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+        }
+
+        StatusBaseText { text: "StatusAddress\nclick-expandable" }
+        StatusAddress {
+            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+
+            Layout.preferredWidth: 200
+
            expandable: true
-            width: parent.width
+        }
+
+        StatusBaseText { text: `StatusAddressPanel\nfont.pixelSize: 13, copyable, no frame`}
+        StatusAddressPanel {
+            address: "0xDC2c4826f6C56F61C1b9cC6Bb531d0Fe45402fC9"
+
+            font.pixelSize: 13
+            font.weight: Font.Normal
+
+            showFrame: false
+
+            onDoCopy: copyAction.text = address
+        }
+
+        StatusBaseText { text: `StatusAddressPanel\ncompact; width ${simpleAddressPanel.width}px ${simpleAddressPanel.height}px`}
+        StatusAddressPanel {
+            id: simpleAddressPanel
+            address: "0xd8593DEACe2f44dF35dd23fD2BAFC2daeC2ae033"
+            showCopy: false
+            expanded: false
+            onDoCopy: copyAction.text = address
+            expandable: true
+        }
+
+        StatusBaseText { text: "StatusAddressPanel\ncopy-icon, non-expandable" }
+        StatusAddressPanel {
+            address: "0xDd5A0755e99D66a583253372B569231968A6CF7b"
+            onDoCopy: copyAction.text = address
+        }
+
+        StatusBaseText { text: "StatusAddressPanel\ncopy hiden" }
+        StatusAddressPanel {
+            address: "0xd2D44C2A1E78975506e474Ecdc7E4F272D7e9A6c"
+            autHideCopyIcon: true
+            onDoCopy: copyAction.text = address
+            expandable: true
+        }
+        StatusBaseText { text: "StatusAddressPanel\ncopy hiden, non-expandable" }
+        StatusAddressPanel {
+            address: "0xd2a44BA31E78975506e474Ecdc7E4F272D7F3BC5"
+            autHideCopyIcon: true
+            expanded: false
+            onDoCopy: copyAction.text = address
+        }
+
+        Rectangle {
+            color: "lightblue"
+
+            Layout.fillWidth: true
+            Layout.columnSpan: mainLayout.columns
+            Layout.preferredHeight: 2
+        }
+
+        StatusBaseText {
+            text: qsTr("Copy Action: ")
+        }
+        StatusBaseText {
+            id: copyAction
        }
    }
 }
@@ -1,40 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusAssetSelector {
-        getCurrencyBalanceString: function (currencyBalance) {
-            return currencyBalance.toFixed(2) + " USD"
-        }
-        tokenAssetSourceFn: function (symbol) {
-            return "../../assets/img/icons/snt.svg"
-        }
-        assets: ListModel {
-            ListElement {
-                address: "0x1234"
-                name: "Status Network Token"
-                balance: "20"
-                symbol: "SNT"
-                currencyBalance: 9992.01
-            }
-            ListElement {
-                address: "0x1234"
-                name: "DAI Token"
-                balance: "15"
-                symbol: "DAI"
-                currencyBalance: 20.00001
-            }
-        }
-    }
-}
-
@@ -0,0 +1,239 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Sandbox 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+
+Item {
+
+    ColumnLayout {
+        id: layout
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        spacing: 20
+
+        RowLayout {
+            Layout.fillWidth: true
+
+            StatusCard {
+                id: card
+                Layout.alignment: Qt.AlignVCenter
+                primaryText: "Mainnet"
+                secondaryText: state === "unavailable" ? "No Gas" : "75"
+                tertiaryText: state === "unpreferred"  ? "UNPREFERRED" : "BALANCE: " + 250
+                cardIconName: "status"
+                advancedInputText: "75"
+                disabledText: "Disabled"
+            }
+
+            StatusComboBox {
+                Layout.alignment: Qt.AlignVCenter
+                Layout.maximumWidth: 200
+                label: "Card State"
+                onCurrentValueChanged: card.state = currentValue
+                model: ListModel {
+                    ListElement {
+                        name: "default"
+                    }
+                    ListElement {
+                        name: "unavailable"
+                    }
+                    ListElement {
+                        name: "error"
+                    }
+                    ListElement {
+                        name: "unpreferred"
+                    }
+                }
+            }
+
+            StatusCheckBox {
+                Layout.alignment: Qt.AlignVCenter
+                text: "advancedMode"
+                font.family: Theme.palette.monoFont.name
+                onClicked: {
+                    card.advancedMode = checked
+                }
+            }
+        }
+
+        Rectangle {
+            height: 1
+            width: 700
+            color: "black"
+        }
+
+        // Below is an example on how to implement the network routing using StatusCard and Canvas, also the function in Utils to draw an arrow
+        Row {
+            id: cards
+            spacing: 200
+            Column {
+                id: leftColumn
+                spacing: 20
+                Repeater {
+                    model: fromNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: balance === 0 ? "No Balance" : !hasGas ? "No Gas" : tokensToSend
+                        tertiaryText: "BALANCE: " + balance
+                        state: balance === 0 || !hasGas ? "unavailable" :  "default"
+                        cardIconName: iconName
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToSend
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+
+            Column {
+                id: rightColumn
+                spacing: 20
+                Repeater {
+                    model: toNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: tokensToReceive
+                        tertiaryText: ""
+                        state: preferred ? "default" : "unprefeered"
+                        cardIconName: iconName
+                        opacity: preferred ? 1 : 0
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToReceive
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+        }
+    }
+
+    Canvas {
+        id: canvas
+        x: layout.x + leftColumn.x
+        y: cards.y
+        width: cards.width
+        height: cards.height
+
+        function clear() {
+            var ctx = getContext("2d");
+            ctx.reset()
+        }
+
+        onPaint: {
+            // Get the canvas context
+            var ctx = getContext("2d");
+
+            for(var i = 0; i< fromNetworksList.count; i++) {
+                if(fromNetworksList.get(i).routedTo !== "") {
+                    for(var j = 0; j< toNetworksList.count; j++) {
+                        if(fromNetworksList.get(i).routedTo === toNetworksList.get(j).name) {
+                            Utils.drawArrow(ctx, leftColumn.children[i].x + leftColumn.children[i].width,
+                                            leftColumn.children[i].y + leftColumn.children[i].height/2,
+                                            rightColumn.x + rightColumn.children[j].x,
+                                            rightColumn.children[j].y + rightColumn.children[j].height/2,
+                                            '#627EEA')
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    ListModel {
+        id: toNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: true
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToReceive: 100
+            preferred: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+    }
+
+    ListModel {
+        id: fromNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Mainnet"
+            hasGas: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 75
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Hermez"
+            hasGas: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 0
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Optimism"
+            hasGas: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToSend: 25
+            balance: 25
+            routedTo: "Optimism"
+            hasGas: true
+        }
+    }
+}
@@ -0,0 +1,193 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Item {
+
+    QtObject {
+        id: d
+        //dummy data
+        property real stepSize: 1000
+        property real minStep: 12000
+        property real maxStep: 22000
+
+        property var graphTabsModel: [{text: "Price", enabled: true}, {text: "Balance", enabled: false}]
+        property var timeRangeTabsModel: [{text: "1H", enabled: true},
+                {text: "1D", enabled: true},{text: "7D", enabled: true},
+                {text: "1M", enabled: true}, {text: "6M", enabled: true},
+                {text: "1Y", enabled: true}, {text: "ALL", enabled: true}]
+
+        property var simTimer: Timer {
+            running: true
+            interval: 3000
+            repeat: true
+            onTriggered: {
+                d.generateData();
+            }
+        }
+
+        function minutes(minutes = 0) {
+            var newMinute = new Date(new Date().getTime() - (minutes * 60 * 1000)).toString();
+            if (newMinute.slice(10,12) === "00") {
+                var dateToday = new Date(Date.now()).toString();
+                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
+            }
+            return newMinute.slice(10,16);
+        }
+
+        function hour(hours = 0) {
+            var newHour = new Date(new Date().getTime() - (hours * 60 * 60 * 1000)).toString();
+            if (newHour.slice(10,12) === "00") {
+                var dateToday = new Date(Date.now()).toString();
+                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
+            }
+            return newHour.slice(10,16);
+        }
+
+        function day(before = 0) {
+            var newDay = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
+            return newDay.slice(4,7) + " " + newDay.slice(8,10);
+        }
+
+        function month(before = 0) {
+            var newMonth = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
+            return newMonth.slice(4,7) + " '" + newMonth.slice(newMonth.indexOf("G")-3, newMonth.indexOf("G")-1);
+        }
+
+        property var timeRange: [
+            {'1H': [minutes(60), minutes(55), minutes(50), minutes(45), minutes(40), minutes(35), minutes(30), minutes(25), minutes(20), minutes(15), minutes(10), minutes(5), minutes()]},
+            {'1D': [hour(24), hour(23), hour(22), hour(21), hour(20), hour(19), hour(18), hour(17), hour(16), hour(15), hour(14), hour(13),
+                    hour(12), hour(11), hour(10), hour(9), hour(8), hour(7), hour(6), hour(5), hour(4), hour(3), hour(2), hour(1), hour()]},
+            {'7D': [day(6), day(5), day(4), day(3), day(2), day(1), day()]},
+            {'1M': [day(30), day(28), day(26), day(24), day(22), day(20), day(18), day(16), day(14), day(12), day(10), day(8), day(6), day(4), day()]},
+            {'6M': [month(150), month(120), month(90), month(60), month(30), month()]},
+            {'1Y': [month(330), month(300), month(270), month(240), month(210), month(180), month(150), month(120), month(90), month(60), month(30), month()]},
+            {'ALL': ['2016', '2017', '2018', '2019', '2020', '2021', '2022']}
+        ]
+
+        function generateData() {
+            var result = [];
+            for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
+                result[i] = Math.random() * (maxStep - minStep) + minStep;
+            }
+            graphDetail.chart.chartData.datasets[0].data = result;
+            graphDetail.chart.animateToNewData();
+        }
+    }
+
+    StatusChartPanel {
+        id: graphDetail
+        height: 290
+        anchors.left: parent.left
+        anchors.leftMargin: 24
+        anchors.right: parent.right
+        anchors.rightMargin: 24
+        anchors.verticalCenter: parent.verticalCenter
+        graphsModel: d.graphTabsModel
+        timeRangeModel: d.timeRangeTabsModel
+        onHeaderTabClicked: {
+            //TODO
+            //if time range tab
+            d.generateData();
+            //if graph bar
+            //switch graph
+        }
+        chart.chartType: 'line'
+        chart.chartData: {
+            return {
+                labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
+                datasets: [{
+                    label: 'Price',
+                    xAxisId: 'x-axis-1',
+                    yAxisId: 'y-axis-1',
+                    backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
+                    borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
+                    borderWidth: 3,
+                    pointRadius: 0,
+                    //data: d.generateData()
+                }]
+            }
+        }
+
+        chart.chartOptions: {
+            return {
+                maintainAspectRatio: false,
+                responsive: true,
+                legend: {
+                    display: false
+                },
+                //TODO enable zoom
+//                zoom: {
+//                    enabled: true,
+//                    drag: true,
+//                    speed: 0.1,
+//                    threshold: 2
+//                },
+//                pan:{enabled:true,mode:'x'},
+                tooltips: {
+                    intersect: false,
+                    displayColors: false,
+                    callbacks: {
+                        footer: function(tooltipItem, data) { return 'Vol: $43,042,678,876'; },
+                        label: function(tooltipItem, data) {
+                          let label = data.datasets[tooltipItem.datasetIndex].label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            label += tooltipItem.yLabel.toFixed(2);
+                            return label.slice(0,label.indexOf(":")+1)+ " $"+label.slice(label.indexOf(":")+2, label.length);
+                       }
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                       id: 'x-axis-1',
+                       position: 'bottom',
+                       gridLines: {
+                           drawOnChartArea: false,
+                           drawBorder: false,
+                           drawTicks: false,
+                       },
+                       ticks: {
+                           fontSize: 10,
+                           fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
+                           padding: 16
+                       }
+                    }],
+                    yAxes: [{
+                       position: 'left',
+                       id: 'y-axis-1',
+                       gridLines: {
+                          borderDash: [8, 4],
+                          drawBorder: false,
+                          drawTicks: false,
+                          color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
+                       },
+                       beforeDataLimits: (axis) => {
+                          axis.paddingTop = 25;
+                          axis.paddingBottom = 0;
+                        },
+                       ticks: {
+                          fontSize: 10,
+                          fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
+                          padding: 8,
+                          min: d.minStep,
+                          max: d.maxStep,
+                          stepSize: d.stepSize,
+                          callback: function(value, index, ticks) {
+                                return '$' + value;
+                          },
+                       }
+                    }]
+                }
+            }
+        }
+    }
+}
@@ -14,8 +14,9 @@ GridLayout {
    StatusChatInfoToolBar {
        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.asset.isImage: true
+        chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        chatInfoButton.asset.color: Theme.palette.miscColor6

        popupMenu: StatusPopupMenu {

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

 import Sandbox 0.1

-Column {
+Row {
    spacing: 8

    StatusColorSelector {
@@ -0,0 +1,110 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Item {
+
+    ColumnLayout {
+        anchors.centerIn: parent
+
+        StatusBaseText {
+            text: qsTr("Thickness")
+        }
+
+        StatusSlider {
+            id: thicknessSlider
+            from: colorSpace.width / 8
+            to: colorSpace.width / 16
+            value: colorSpace.width / 10
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min saturate: ") + colorSpace.minSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minSatSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max saturate: ") + colorSpace.maxSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxSatSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min value: ") + colorSpace.minValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minValSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max value: ") + colorSpace.maxValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxValSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusColorSpace {
+            id: colorSpace
+            color: "#ed77eb"
+            thickness: thicknessSlider.value
+            minSaturate: minSatSlider.value
+            maxSaturate: maxSatSlider.value
+            minValue: minValSlider.value
+            maxValue: maxValSlider.value
+        }
+
+        StatusBaseText {
+            text: qsTr("Color") + ": " + colorSpace.color
+        }
+
+        Rectangle {
+            color: colorSpace.color
+            implicitHeight: 48
+            radius: 10
+            Layout.fillWidth: true
+
+            StatusBaseText {
+                anchors.centerIn: parent
+                color: Theme.palette.white
+                font.pixelSize: 15
+                text: "Quick brown fox jumps over the lazy dog"
+            }
+        }
+
+        StatusButton {
+            text: "Randomize"
+            onPressed: colorSpace.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
+        }
+    }
+}
@@ -0,0 +1,72 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 20
+
+    ListModel {
+        id: commmonModel
+        ListElement {
+            name: "Pascal"
+        }
+        ListElement {
+            name: "Khushboo"
+        }
+        ListElement {
+            name: "Alexandra"
+        }
+        ListElement {
+            name: "Eric"
+        }
+    }
+
+    StatusComboBox {
+        id: combobox
+        label: "ComboBox"
+        model: commmonModel
+    }
+
+    StatusComboBox {
+        id: comboBox1
+        label: "ComboBox with custom delegate"
+        model: commmonModel
+        delegate: StatusItemDelegate {
+            width: comboBox1.control.width
+            highlighted: comboBox1.control.highlightedIndex === index
+            text: modelData
+            font: comboBox1.control.font
+            icon {
+                name: "filled-account"
+                color: Theme.palette.primaryColor1
+            }
+            enabled: index != 2
+        }
+    }
+
+    StatusComboBox {
+        model: commmonModel
+        label: "Disabled ComboBox"
+        enabled: false
+    }
+
+    StatusComboBox {
+        model: commmonModel
+        label: "ComboBox with validation error"
+        validationError: "Validation failed example"
+    }
+
+    StatusComboBox {
+        model: commmonModel
+        label: "Mirrored ComboBox"
+        LayoutMirroring.enabled: true
+    }
+}
+
@@ -0,0 +1,47 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.13
+
+import StatusQ.Components 0.1
+
+import "../demoapp/data" 1.0
+
+GridLayout {
+
+    QtObject {
+        id: d
+
+        function navigateToCommunity(communityID) {
+            console.log("Clicked community: " + communityID)
+        }
+    }
+
+    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    columns: 2
+    columnSpacing: 28
+    rowSpacing: 28
+
+    Repeater {
+        model: Models.curatedCommunitiesModel
+        delegate: StatusCommunityCard {
+            locale: "en"
+            communityId: model.communityId
+            loaded: model.available
+            logo: model.logo
+            banner: model.banner
+            name: model.name
+            description: model.description
+            members: model.members
+            activeUsers: model.activeUsers
+            popularity: model.popularity
+            isPrivate: model.isPrivate
+            tokenLogo: model.tokenLogo
+            categories: ListModel {
+                ListElement { name: "Crypto"; emoji: "🔗"}
+                ListElement { name: "Privacy"; emoji: "👻"}
+                ListElement { name: "Social"; emoji: "☕"}
+            }
+
+            onClicked: { d.navigateToCommunity(communityId) }
+        }
+    }
+}
@@ -0,0 +1,83 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+import "../demoapp/data" 1.0
+
+Item {
+
+    property int cntSelectedTags: 0
+    property int maxSelectedTags: 4
+    property ListModel tagsModel: ListModel {}
+
+    Component.onCompleted: {
+        tagsModel.clear();
+        for (const key of Object.keys(Models.communityTags)) {
+            tagsModel.append({ name: key, emoji: Models.communityTags[key], selected: false });
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        anchors.centerIn: parent
+        width: 600
+        height: 500
+        spacing: 20
+
+        StatusInput {
+            id: tagsFilter
+            leftPadding: 0
+            rightPadding: 0
+            label: qsTr("Select tags that will fit your Community")
+            input.asset.name: "search"
+            placeholderText: qsTr("Search tags")
+            Layout.fillWidth: true
+        }
+
+        StatusCommunityTags {
+            filterString: tagsFilter.text
+            model: tagsModel
+            enabled: cntSelectedTags < maxSelectedTags
+            onClicked: {
+                cntSelectedTags++;
+                item.selected = true;
+            }
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            StatusBaseText {
+                text: qsTr("Selected tags")
+                font.pixelSize: 15
+                Layout.fillWidth: true
+            }
+
+            StatusBaseText {
+                text: cntSelectedTags + "/" + maxSelectedTags
+                color: Theme.palette.baseColor1
+                font.pixelSize: 13
+            }
+        }
+
+        StatusCommunityTags {
+            model: tagsModel
+            showOnlySelected: true
+            onClicked: {
+                cntSelectedTags--;
+                item.selected = false;
+            }
+            Layout.fillWidth: true
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}
@@ -0,0 +1,282 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtQml.Models 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups.Dialog 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+ColumnLayout {
+    id: root
+
+    StatusButton {
+        text: "Content"
+        onClicked: contentDialog.open()
+
+        StatusDialog {
+            id: contentDialog
+
+            standardButtons: Dialog.ApplyRole
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Title and content"
+        onClicked: titleContentDialog.open()
+
+        StatusDialog {
+            id: titleContentDialog
+            title: "Title"
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "No buttons"
+        onClicked: noButtonsDialog.open()
+
+        StatusDialog {
+            id: noButtonsDialog
+            title: "No buttons"
+
+            standardButtons: Dialog.NoButton
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Long title"
+        onClicked: longTitleDialog.open()
+
+        StatusDialog {
+            id: longTitleDialog
+            title: "Long title long title Long title long title Long title long title"
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Long title elided"
+        onClicked: longTitleElidedDialog.open()
+
+        StatusDialog {
+            id: longTitleElidedDialog
+            title: "Long title long title Long title long title Long title long title"
+
+            width: 400
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Title subtitle"
+        onClicked: titleSubtitleDialog.open()
+
+        StatusDialog {
+            id: titleSubtitleDialog
+            title: "This title will be ignored"
+
+            header: StatusDialogHeader {
+                headline.title: "Title"
+                headline.subtitle: "Subtitle"
+
+                actions.closeButton.onClicked: titleSubtitleDialog.close()
+            }
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Auto adjustable"
+        onClicked: autoAdjustableDialog.open()
+
+        StatusDialog {
+            id: autoAdjustableDialog
+
+            header: StatusDialogHeader {
+                headline.title: "Dialog size will auto adapt"
+                headline.subtitle: "To conent size"
+
+                actions.closeButton.onClicked: autoAdjustableDialog.close()
+            }
+
+            footer: StatusDialogFooter {
+                leftButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-left"
+                        onClicked: autoAdjustableDialogContent.implicitWidth -= 100
+                    }
+                    StatusRoundButton {
+                        icon.name: "arrow-right"
+                        onClicked: autoAdjustableDialogContent.implicitWidth += 100
+                    }
+                }
+                rightButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-down"
+                        onClicked: autoAdjustableDialogContent.implicitHeight -= 100
+                    }
+                    StatusRoundButton {
+                        icon.name: "arrow-up"
+                        onClicked: autoAdjustableDialogContent.implicitHeight += 100
+                    }
+                }
+            }
+
+            Rectangle {
+                id: autoAdjustableDialogContent
+
+                anchors.fill: parent
+
+                implicitWidth: 200
+                implicitHeight: 200
+
+                color: Theme.palette.primaryColor3
+
+                StatusBaseText {
+                    anchors.centerIn: parent
+                    text: "W: %1 H: %2\nIW: %3 IH: %4".arg(parent.width).arg(parent.height).arg(parent.implicitWidth).arg(parent.implicitHeight)
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Complex dialog"
+        onClicked: complexDialog.open()
+
+        StatusDialog {
+            id: complexDialog
+
+            header: StatusDialogHeader {
+                id: dialogHeader
+
+                headline.title: "Complex dialog"
+                headline.subtitle: "identicon, title subtitle, custom actions"
+
+                leftComponent: StatusLetterIdenticon {
+                    name: dialogHeader.headline.title
+                }
+
+                actions {
+                    infoButton.visible: true
+
+                    customButtons: ObjectModel {
+                        StatusFlatRoundButton {
+                            icon.name: "warning"
+                            icon.width: 20
+                            icon.height: 20
+                        }
+                    }
+
+                    closeButton.onClicked: complexDialog.close()
+                }
+            }
+
+            footer: StatusDialogFooter {
+                leftButtons: ObjectModel {
+                    StatusRoundButton {
+                        icon.name: "arrow-left"
+                    }
+                }
+                rightButtons: ObjectModel {
+                    StatusButton {
+                        text: "Custom cancel action"
+                        type: StatusButton.Danger
+                    }
+                    StatusButton {
+                        text: "Custom approve action"
+                    }
+                }
+            }
+
+            ColumnLayout {
+                anchors.fill: parent
+
+                StatusBaseText {
+                    text: "Content A"
+                }
+
+                StatusBaseText {
+                    text: "Content B"
+                }
+
+                StatusBaseText {
+                    text: "Content C"
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        text: "Custom header/footer"
+        onClicked: customHeaderAndFooter.open()
+
+        StatusDialog {
+            id: customHeaderAndFooter
+            title: "No buttons"
+
+            header: Rectangle {
+                implicitHeight: customHeaderText.height * 2
+                implicitWidth: customHeaderText.width * 2
+
+                border.width: 2
+                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
+
+                StatusBaseText {
+                    id: customHeaderText
+                    anchors.centerIn: parent
+                    text: "Custom header"
+                }
+            }
+
+            footer: Rectangle {
+                implicitHeight: customHeaderText.height * 2
+                implicitWidth: customHeaderText.width * 2
+
+                border.width: 2
+                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
+
+                StatusBaseText {
+                    id: customFooter
+                    anchors.centerIn: parent
+                    text: "Custom footer"
+                }
+            }
+
+
+            StatusBaseText {
+                anchors.fill: parent
+                text: "Content"
+            }
+        }
+    }
+}
@@ -26,7 +26,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter

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

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

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

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

        type: StatusExpandableItem.Type.Secondary
        expandable: true
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        asset.isImage: true
+        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
        primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
        additionalText: "564.90 USD"
        expandableComponent: notImplemented
@@ -0,0 +1,259 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Dialogs 1.3
+import QtQml 2.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import QtGraphicalEffects 1.14
+
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: root
+
+    implicitWidth: mainLayout.implicitWidth
+    implicitHeight: mainLayout.implicitHeight
+
+    property var testControls: [ctrl1, ctrl2, ctrl3]
+
+    property bool globalStylePreferRound: true
+    property var testImageList: ["qrc:/demoapp/data/logo-test-image.png",
+                                 "qrc:/demoapp/data/profile-image-2.jpeg",
+                                 "qrc:/demoapp/data/profile-image-1.jpeg"]
+    property int testImageIndex: 0
+    property int testSpacing: 0
+    property int testFrameMargins: 10
+
+    ColumnLayout {
+        id: mainLayout
+
+        anchors.fill: parent
+
+        RowLayout {
+            spacing: root.testSpacing
+
+            ColumnLayout {
+                spacing: root.testSpacing
+                Layout.margins: root.testSpacing
+
+                Text {
+                    text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
+                }
+
+                StatusImageCropPanel {
+                    id: ctrl1
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    source: root.testImageList[root.testImageIndex]
+                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
+                    margins: root.testFrameMargins
+                }
+                Text {
+                    text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
+                }
+                StatusImageCropPanel {
+                    id: ctrl2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    source: root.testImageList[root.testImageIndex]
+                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
+                    aspectRatio: 16/9
+                    enableCheckers: true
+                    margins: root.testFrameMargins + 2
+                }
+            }
+            ColumnLayout {
+                Layout.margins: root.testSpacing
+                Text {
+                    text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
+                }
+                StatusImageCropPanel {
+                    id: ctrl3
+
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    source: root.testImageList[root.testImageIndex]
+                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
+                    aspectRatio: 0.8
+
+                    margins: root.testFrameMargins + 5.3
+                }
+            }
+        }
+        RowLayout {
+            StatusButton {
+                text: qsTr("Cycle image")
+                onClicked: {
+                    let newIndex = root.testImageIndex
+                    newIndex++
+                    if(newIndex >= root.testImageList.length)
+                        newIndex = 0
+                    root.testImageIndex = newIndex
+                }
+            }
+            StatusButton {
+                text: qsTr("Cycle spacing")
+                onClicked: {
+                    root.testSpacing += (root.testSpacing/2) + 1
+                    if(root.testSpacing > 35)
+                        root.testSpacing = 0
+                }
+            }
+            StatusButton {
+                text: qsTr("Cycle frame margins")
+                onClicked: {
+                    root.testFrameMargins += (root.testFrameMargins/2) + 1
+                    if(root.testFrameMargins > 50)
+                        root.testFrameMargins = 0
+                }
+            }
+            StatusButton {
+                text: qsTr("Load external image")
+                onClicked: workflowLoader.active = true
+            }
+        }
+    }
+
+    Loader {
+        id: workflowLoader
+
+        sourceComponent: workflowComponent
+        active: false
+        onStatusChanged: {
+            if(status === Loader.Ready) {
+                item.imageFileDialogTitle = qsTr("Test Title")
+                item.title = "Test popup"
+                item.acceptButtonText = "Load Custom Image"
+                item.chooseImageToCrop()
+            }
+        }
+
+        Connections {
+            target: workflowLoader.item
+            function onImageCropped(image, cropRect) {
+                ctrl1.source = image
+                ctrl2.source = image
+                ctrl3.source = image
+            }
+            function onCanceled() {
+                workflowLoader.active = false
+            }
+        }
+    }
+
+    Component {
+        id: workflowComponent
+
+        Item {
+            id: workflowItem
+
+            property alias aspectRatio: imageCropper.aspectRatio
+            property alias windowStyle: imageCropper.windowStyle
+            /*required*/ property string imageFileDialogTitle: ""
+            /*required*/ property string title: ""
+            /*required*/ property string acceptButtonText: ""
+            property bool roundedImage: true
+
+            signal imageCropped(var image, var cropRect)
+            signal canceled()
+
+            function chooseImageToCrop() {
+                fileDialog.open()
+            }
+
+            FileDialog {
+                id: fileDialog
+
+                title: workflowItem.imageFileDialogTitle
+                folder: workflowItem.userSelectedImage ? imageCropper.source.substr(0, imageCropper.source.lastIndexOf("/")) : shortcuts.pictures
+                nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg *.jpeg *.jfif *.webp *.png *.heif")]
+                onAccepted: {
+                    if (fileDialog.fileUrls.length > 0) {
+                        imageCropper.source = fileDialog.fileUrls[0]
+                        imageCropperModal.open()
+                    }
+                }
+                onRejected: workflowItem.canceled()
+            } // FileDialog
+
+            StatusModal {
+                id: imageCropperModal
+
+                header.title: workflowItem.title
+
+                anchors.centerIn: Overlay.overlay
+
+                width: workflowItem.roundedImage ? 480 : 580
+
+                onClosed: workflowItem.canceled()
+
+                StatusImageCropPanel {
+                    id: imageCropper
+
+                    implicitHeight: workflowItem.roundedImage ? 350 : 370
+
+                    anchors {
+                         fill: parent
+                         leftMargin: 10 * 2
+                         rightMargin: 10 * 2
+                         topMargin: 15
+                         bottomMargin: 15
+                    }
+
+                    margins: workflowItem.roundedImage ? 10 : 20
+                    windowStyle: workflowItem.roundedImage ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
+                    enableCheckers: true
+                }
+
+                rightButtons: [
+                    StatusButton {
+                        text: workflowItem.acceptButtonText
+
+                        enabled: imageCropper.sourceSize.width > 0 && imageCropper.sourceSize.height > 0
+
+                        onClicked: {
+                            workflowItem.imageCropped(imageCropper.source, imageCropper.cropRect)
+                            imageCropperModal.close()
+                        }
+                    }
+                ]
+            } // StatusModal
+        } // Item
+    }
+
+
+    Shortcut {
+        sequence: StandardKey.ZoomIn
+        onActivated: {
+            for(let i in testControls) {
+                const c = testControls[i]
+                c.setCropRect(ctrl1.inflateRectBy(c.cropRect, -0.05))
+            }
+        }
+    }
+
+    Shortcut {
+        sequence: StandardKey.ZoomOut
+        onActivated: {
+            for(let i in testControls) {
+                const c = testControls[i]
+                c.setCropRect(ctrl1.inflateRectBy(c.cropRect, 0.05))
+            }
+        }
+    }
+
+    Shortcut {
+        sequences: ["Ctrl+W"]
+        onActivated: globalStylePreferRound = !globalStylePreferRound
+    }
+}
@@ -12,82 +12,133 @@ Column {
    spacing: 8

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

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

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

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

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

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

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

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

+    StatusPasswordInput {
+        placeholderText: "Password"
+    }
+
+    StatusPasswordInput {
+        signingPhrase: "orange hello cygnet"
+        placeholderText: "Password"
+    }
+
+    Item {
+        implicitWidth: 480
+        implicitHeight: 82
+        z: 100000
+        StatusSeedPhraseInput {
+            id: statusSeedInput
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height
+            textEdit.input.anchors.leftMargin: 16
+            textEdit.input.anchors.rightMargin: 16
+            textEdit.input.anchors.topMargin: 11
+            textEdit.label: "Input with drop down selection list" + (insertedWord ? ` (${insertedWord})` : "")
+            leftComponentText: "1"
+            inputList: ListModel {
+                ListElement {
+                    seedWord: "add"
+                }
+                ListElement {
+                    seedWord: "address"
+                }
+                ListElement {
+                    seedWord: "panda"
+                }
+                ListElement {
+                    seedWord: "posible"
+                }
+                ListElement {
+                    seedWord: "win"
+                }
+                ListElement {
+                    seedWord: "wine"
+                }
+                ListElement {
+                    seedWord: "wing"
+                }
+            }
+
+            property string insertedWord: ""
+            onDoneInsertingWord: insertedWord = word
+        }
+    }
+
    StatusInput {
        label: "Label"
        charLimit: 30
        errorMessage: "Error message"
-
        input.clearable: true
        input.valid: false
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
    }

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

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

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

        validators: [
            StatusMinLengthValidator {
@@ -102,10 +153,24 @@ Column {
        ]
    }

+    StatusInput {
+        label: "Input with <i>StatusRegularExpressionValidator</i>"
+        charLimit: 30
+        placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+        validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
+
+        validators: [
+            StatusRegularExpressionValidator {
+                regularExpression: /^[0-9A-Za-z_\$-\s]*$/
+                errorMessage: "Bad input!"
+            }
+        ]
+    }
+
    StatusInput {
        label: "Label"
-        input.placeholderText: "Input width component (right side)"
-        input.component: StatusIcon {
+        placeholderText: "Input width component (right side)"
+        input.rightComponent: StatusIcon {
            icon: "cancel"
            height: 16
            color: Theme.palette.dangerColor1
@@ -115,19 +180,61 @@ Column {

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

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

    StatusInput {
        input.multiline: true
-        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
+        placeholderText: "Multiline with max/min"
+        minimumHeight: 80
+        maximumHeight: 200
+    }
+
+    StatusInput {
+        property bool toggled: true
+        label: "Input with emoji icon"
+        input.placeholderText: "Enter Name"
+        input.asset.emoji: toggled ? "😁" : "🧸"
+        input.asset.color: "blue"
+        input.isIconSelectable: true
+        onIconClicked: {
+            toggled = !toggled
+        }
+    }
+
+    StatusInput {
+        property bool toggled: true
+        label: "Input with selectable icon which is not an emoji"
+        input.placeholderText: "Enter Name"
+        input.asset.emoji: ""
+        input.asset.name: toggled ? "filled-account" : "image"
+        input.asset.color: "blue"
+        input.isIconSelectable: true
+        onIconClicked: {
+            toggled = !toggled
+        }
+    }
+
+    StatusInput {
+        label: "Input with inline token selector"
+        input.leftComponent: StatusTokenInlineSelector {
+            tokens: [{amount: 0.1, token: "ETH"},
+                     {amount: 10, token: "SNT"},
+                     {amount: 15, token: "MANA"}]
+
+            StatusToolTip {
+                id: toolTip
+                text: "posted"
+            }
+            onTriggered: toolTip.visible = true
+        }
+        input.edit.readOnly: true
    }
 }
--- a/Show More
+++ b/Show More