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

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

BREAKING CHANGE:

.github/pull_request_template.md

@@ -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)

.gitignore

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

.gitmodules

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

CHANGELOG.md

@@ -1,3 +1,161 @@
+<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)
+
+
+#### Features
+
+* **StatusMemberListItem:**  Implement `StatusMemberListItem` (#539) ([c5a605bf](c5a605bf), closes [#515](515))
+
+
+
+<a name=""></a>
+##  Version 0.21.0 (2022-01-24)
+
+
+#### Bug Fixes
+
+* **build:**  broken MacOS build (#533) ([55901cf0](55901cf0))
+
+#### Features
+
+* **StatusMessage:**  Introducing a new StatusQ Component for Chat Messages ([ea955694](ea955694))
+* **StatusQ.Controls:**  Introduce `StatusPasswordStrengthIndicator` ([626695da](626695da), closes [#528](528))
+
+
+
+<a name=""></a>
+##  Version 0.20.0 (2022-01-17)
+
+
+#### Features
+
+* **StatusBanner:**  introduce type variants for different banner styles ([35d12f44](35d12f44))
+
+#### Bug Fixes
+
+* **StatusBaseInput:**  Corrects allignment of the placeholder text in the StatusBaseInput. ([5a416aa1](5a416aa1))
+* **build:**  Windows build ([14ab4ce5](14ab4ce5))
+
+
+
+<a name=""></a>
+##  Version 0.19.0 (2021-12-03)
+
+
+#### Bug Fixes
+
+* **StatusChatListItem:**  This change fixes the issue of the chat list items getting a highlight even when they are not really hovered ([ab6bdf54](ab6bdf54))
+
+#### Features
+
+* **StatusModal:**  introduce `hasCloseButton` property ([2336b6aa](2336b6aa))
+
+
+
+<a name=""></a>
+##  Version 0.18.0 (2021-11-30)
+
+
+#### Bug Fixes
+
+* **StatusAppNavBar:**  Fixed position of profile button on the NavBar ([419b7384](419b7384))
+* **StatusImageWithTitle:**  Fix position of the edit title button ([8d2121ad](8d2121ad))
+* **StatusListItem:**  ensure title is elided ([b7883e82](b7883e82))
+
+#### Features
+
+* **StatusListItem:**  Expose the Aside text so that it can be modified from the outside ([f82ce8b7](f82ce8b7))
+
+
+
+<a name=""></a>
+##  Version 0.17.1 (2021-11-19)
+
+
+#### Bug Fixes
+
+* **StatusAccountSelector:**  Adapt ui to data model changed ([db024436](db024436))
+* **StatusAssetSelector:**  Fixed error of crypto balance not updated correctly ([2040d0f8](2040d0f8))
+
+
+
+<a name=""></a>
+##  Version 0.17.0 (2021-11-10)
+
+
+#### Features
+
+* **StatusBaseButton:**  introduce `Tiny` size ([dee9f437](dee9f437))
+* **StatusQ.Controls.Validators:**  introduce `StatusUrlValidator` ([a9155865](a9155865))
+
+#### Bug Fixes
+
+* **StatusAccountSelector:**  adapt AccountSelector to new model (#482) ([ce8d3231](ce8d3231))
+* **StatusExpandibleItem:**  add missing hover indicator in `Secondary` type ([e23dc533](e23dc533), closes [#478](478))
+* **StatusInput:**  ensure validator messages are rendered when validators return boolean values ([f82cd7f5](f82cd7f5))
+* **StatusListItem:**  This solves the issue of channel list overlpaing when a category is collapsed. ([0c715b17](0c715b17))
+* **StatusSearchPopup:**  disable enter and return keys to avoid UI breakage ([fecfb2a7](fecfb2a7))
+* **StatusSlider:**  slider background and handle should not depend on root's height ([31cfc883](31cfc883))
+
+
+
 <a name=""></a>
 ##  Version 0.16.0 (2021-11-01)
 

CMakeLists.txt

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

README.md

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

doc/src/statusq-overview.qdoc

@@ -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
+*/
+

doc/src/statusqcomponents.qdoc

@@ -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
+*/

doc/src/statusqcontrols.qdoc

@@ -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
+*/

doc/src/statusqcore.qdoc

@@ -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
+*/

doc/src/statusqlayout.qdoc

@@ -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
+*/

doc/src/statusqplatform.qdoc

@@ -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
+*/

doc/src/statusqpopups.qdoc

@@ -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
+*/

doc/statusq.qdocconf

@@ -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>"

doc/style.css

@@ -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;
+}

sandbox/CMakeLists.txt

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

sandbox/DemoApp.qml

@@ -9,6 +9,9 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Platform 0.1
 
+import "demoapp"
+import "demoapp/data" 1.0
+
 Rectangle {
     id: demoApp
     height: 602
@@ -18,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
@@ -48,32 +77,79 @@ Rectangle {
 
             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 {
@@ -104,39 +180,7 @@ Rectangle {
                         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 {
@@ -148,735 +192,36 @@ Rectangle {
 
     Component {
         id: statusAppChatView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                anchors.fill: parent
-
-                StatusNavigationPanelHeadline {
-                    id: headline
-                    anchors.top: parent.top
-                    anchors.topMargin: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    text: "Chat"
-                }
-
-                Item {
-                    id: searchInputWrapper
-                    anchors.top: headline.bottom
-                    anchors.topMargin: 16
-                    width: parent.width
-                    height: searchInput.height
-
-                    StatusBaseInput {
-                        id: searchInput
-
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.left
-                        anchors.right: actionButton.left
-                        anchors.leftMargin: 16
-                        anchors.rightMargin: 16
-
-                        height: 36
-                        topPadding: 8
-                        bottomPadding: 0
-                        placeholderText: "Search"
-                        icon.name: "search"
-                    }
-
-                    StatusRoundButton {
-                        id: actionButton
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.right: parent.right
-                        anchors.rightMargin: 8
-                        width: 32
-                        height: 32
-
-                        type: StatusRoundButton.Type.Secondary
-                        icon.name: "add"
-                        state: "default"
-
-                        onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
-                        states: [
-                            State {
-                                name: "default"
-                                PropertyChanges {
-                                    target: actionButton
-                                    icon.rotation: 0
-                                    highlighted: false
-                                }
-                            },
-                            State {
-                                name: "pressed"
-                                PropertyChanges {
-                                    target: actionButton
-                                    icon.rotation: 45
-                                    highlighted: true
-                                }
-                            }
-                        ]
-
-                        transitions: [
-                            Transition {
-                                from: "default"
-                                to: "pressed"
-
-                                RotationAnimation {
-                                    duration: 150
-                                    direction: RotationAnimation.Clockwise
-                                    easing.type: Easing.InCubic
-                                }
-                            },
-                            Transition {
-                                from: "pressed"
-                                to: "default"
-                                RotationAnimation {
-                                    duration: 150
-                                    direction: RotationAnimation.Counterclockwise
-                                    easing.type: Easing.OutCubic
-                                }
-                            }
-                        ]
-
-                        StatusPopupMenu {
-                            id: chatContextMenu
-
-                            onOpened: {
-                                actionButton.state = "pressed"
-                            }
-
-                            onClosed: {
-                                actionButton.state = "default"
-                            }
-
-                            StatusMenuItem {
-                                text: "Start new chat"
-                                icon.name: "private-chat"
-                            }
-
-                            StatusMenuItem {
-                                text: "Start group chat"
-                                icon.name: "group-chat"
-                            }
-
-                            StatusMenuItem {
-                                text: "Join public chat"
-                                icon.name: "public-chat"
-                            }
-
-                            StatusMenuItem {
-                                text: "Communities"
-                                icon.name: "communities"
-                            }
-                        }
-                    }
-                }
-
-                Column {
-                    anchors.top: searchInputWrapper.bottom
-                    anchors.topMargin: 16
-                    width: parent.width
-                    spacing: 8
-
-                    StatusContactRequestsIndicatorListItem {
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        title: "Contact requests"
-                        requestsCount: 3
-                        sensor.onClicked: demoContactRequestsModal.open()
-                    }
-
-                    StatusChatList {
-                        anchors.horizontalCenter: parent.horizontalCenter
-
-                        chatListItems.model: models.demoChatListItems
-                        selectedChatId: "0"
-                        onChatItemSelected: selectedChatId = id
-                        onChatItemUnmuted: {
-                            for (var i = 0; i < models.demoChatListItems.count; i++) {
-                                let item = models.demoChatListItems.get(i);
-                                if (item.chatId === id) {
-                                    models.demoChatListItems.setProperty(i, "muted", false)
-                                }
-                            }
-                        }
-
-                        popupMenu: StatusPopupMenu {
-
-                            property string chatId
-
-                            openHandler: function (id) {
-                                chatId = id
-                            }
-
-                            StatusMenuItem {
-                                text: "View Profile"
-                                icon.name: "group-chat"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Mute chat"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem {
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem {
-                                text: "Clear history"
-                                icon.name: "close-circle"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete chat"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-
-                StatusChatToolBar {
-                    anchors.top: parent.top
-                    width: parent.width
-
-                    chatInfoButton.title: "Amazing Funny Squirrel"
-                    chatInfoButton.subTitle: "Contact"
-                    chatInfoButton.icon.color: Theme.palette.miscColor7
-                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-                    chatInfoButton.pinnedMessagesCount: 1
-
-                    searchButton.visible: false
-                    membersButton.visible: false
-                    notificationCount: 1
-
-                    onNotificationButtonClicked: notificationCount = 0
-
-                    popupMenu: StatusPopupMenu {
-                        id: contextMenu
-
-                        StatusMenuItem {
-                            text: "Mute Chat"
-                            icon.name: "notification"
-                        }
-                        StatusMenuItem {
-                            text: "Mark as Read"
-                            icon.name: "checkmark-circle"
-                        }
-                        StatusMenuItem {
-                            text: "Clear History"
-                            icon.name: "close-circle"
-                        }
-
-                        StatusMenuSeparator {}
-
-                        StatusMenuItem {
-                            text: "Leave Chat"
-                            icon.name: "arrow-right"
-                            icon.width: 14
-                            iconRotation: 180
-                            type: StatusMenuItem.Type.Danger
-                        }
-                    }
-                }
-            }
-        }
+        StatusAppChatView { }
     }
 
     Component {
         id: statusAppCommunityView
-
-        StatusAppThreePanelLayout {
-            id: root
-
-            handle: Rectangle {
-                implicitWidth: 5
-                color: SplitHandle.pressed ? Theme.palette.baseColor2
-                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
-            }
-            leftPanel: Item {
-                id: leftPanel
-
-                StatusChatInfoToolBar {
-                    id: statusChatInfoToolBar
-
-                    anchors.top: parent.top
-                    anchors.horizontalCenter: parent.horizontalCenter
-
-                    chatInfoButton.title: "CryptoKitties"
-                    chatInfoButton.subTitle: "128 Members"
-                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                    chatInfoButton.icon.color: Theme.palette.miscColor6
-                    chatInfoButton.onClicked: demoCommunityDetailModal.open()
-
-                    popupMenu: StatusPopupMenu {
-
-                        StatusMenuItem {
-                            text: "Create channel"
-                            icon.name: "channel"
-                        }
-
-                        StatusMenuItem {
-                            text: "Create category"
-                            icon.name: "channel-category"
-                        }
-
-                        StatusMenuSeparator {}
-
-                        StatusMenuItem {
-                            text: "Invite people"
-                            icon.name: "share-ios"
-                        }
-
-                    }
-                }
-
-                ScrollView {
-                    id: scrollView
-
-                    anchors.top: statusChatInfoToolBar.bottom
-                    anchors.topMargin: 8
-                    anchors.bottom: parent.bottom
-                    width: leftPanel.width
-
-                    contentHeight: communityCategories.height
-                    clip: true
-
-                    StatusChatListAndCategories {
-                        id: communityCategories
-                        width: leftPanel.width
-                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
-
-                        draggableItems: true
-                        draggableCategories: false
-                        chatList.model: models.demoCommunityChatListItems
-                        categoryList.model: models.demoCommunityCategoryItems
-
-                        showCategoryActionButtons: true
-                        onChatItemSelected: selectedChatId = id
-
-                        categoryPopupMenu: StatusPopupMenu {
-
-                            property string categoryId
-
-                            openHandler: function (id) {
-                                categoryId = id
-                            }
-
-                            StatusMenuItem {
-                                text: "Mute Category"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem {
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem {
-                                text: "Edit Category"
-                                icon.name: "edit"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete Category"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-
-                        chatListPopupMenu: StatusPopupMenu {
-
-                            property string chatId
-
-                            StatusMenuItem {
-                                text: "Mute chat"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem {
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem {
-                                text: "Clear history"
-                                icon.name: "close-circle"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete chat"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-
-                        popupMenu: StatusPopupMenu {
-                            StatusMenuItem {
-                                text: "Create channel"
-                                icon.name: "channel"
-                            }
-
-                            StatusMenuItem {
-                                text: "Create category"
-                                icon.name: "channel-category"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Invite people"
-                                icon.name: "share-ios"
-                            }
-                        }
-                    }
-                }
-            }
-
-            centerPanel: Item {
-                StatusChatToolBar {
-                    id: statusChatToolBar
-                    anchors.top: parent.top
-                    width: parent.width
-
-                    chatInfoButton.title: "general"
-                    chatInfoButton.subTitle: "Community Chat"
-                    chatInfoButton.icon.color: Theme.palette.miscColor6
-                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-                    onSearchButtonClicked: {
-                        searchButton.highlighted = !searchButton.highlighted;
-                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
-                                                       "",
-                                                       demoCommunityDetailModal.header.image.source);
-                        searchPopup.open();
-                    }
-                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
-                    onMembersButtonClicked: {
-                        root.showRightPanel = !root.showRightPanel;
-                    }
-                }
-
-                StatusSearchPopup {
-                    id: searchPopup
-                    searchOptionsPopupMenu: searchPopupMenu
-                    onAboutToHide: {
-                        if (searchPopupMenu.visible) {
-                            searchPopupMenu.close();
-                        }
-                        //clear menu
-                        for (var i = 2; i < searchPopupMenu.count; i++) {
-                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
-                        }
-                    }
-                    onClosed: {
-                        statusChatToolBar.searchButton.highlighted = false
-                        searchPopupMenu.dismiss();
-                    }
-                    onSearchTextChanged: {
-                        if (searchPopup.searchText !== "") {
-                            searchPopup.loading = true;
-                            searchModelSimTimer.start();
-                        } else {
-                            searchPopup.searchResults = [];
-                            searchModelSimTimer.stop();
-                        }
-                    }
-                    Timer {
-                        id: searchModelSimTimer
-                        interval: 500
-                        onTriggered: {
-                            if (searchPopup.searchText.startsWith("c")) {
-                                searchPopup.searchResults = models.searchResultsA;
-                            } else {
-                                searchPopup.searchResults = models.searchResultsB;
-                            }
-                            searchPopup.loading = false;
-                        }
-                    }
-                }
-                StatusSearchLocationMenu {
-                    id: searchPopupMenu
-                    searchPopup: searchPopup
-                    locationModel: models.optionsModel
-                }
-            }
-
-            rightPanel: Item {
-                id: rightPanel
-                StatusBaseText {
-                    id: titleText
-                    anchors.top: parent.top
-                    anchors.topMargin:16
-                    anchors.left: parent.left
-                    anchors.leftMargin: 16
-                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
-                    visible: (opacity > 0.1)
-                    font.pixelSize: 15
-                    text: qsTr("Members")
-                }
-
-                ListView {
-                    anchors.top: titleText.bottom
-                    anchors.topMargin: 16
-                    anchors.left: parent.left
-                    anchors.leftMargin: 8
-                    anchors.right: parent.right
-                    anchors.rightMargin: 8
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 16
-                    boundsBehavior: Flickable.StopAtBounds
-                    model: ["John", "Nick", "Maria", "Mike"]
-                    delegate: Row {
-                        width: parent.width
-                        height: 30
-                        spacing: 8
-                        Rectangle {
-                            width: 24
-                            height: 24
-                            radius: width/2
-                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
-                        }
-                        StatusBaseText {
-                            height: parent.height
-                            horizontalAlignment: Text.AlignHCenter
-                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
-                            visible: (opacity > 0.1)
-                            font.pixelSize: 15
-                            color: Theme.palette.directColor1
-                            text: modelData
-                        }
-                    }
-                }
+        StatusAppCommunityView {
+            communityDetailModalTitle: demoCommunityDetailModal.header.title
+            communityDetailModalImage: demoCommunityDetailModal.header.image.source
+            onChatInfoButtonClicked: {
+                demoCommunityDetailModal.open();
             }
         }
     }
 
     Component {
         id: statusAppProfileSettingsView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                anchors.fill: parent
-
-                StatusNavigationPanelHeadline {
-                    id: profileHeadline
-                    anchors.top: parent.top
-                    anchors.topMargin: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    text: "Profile"
-                }
-
-                ScrollView {
-                    anchors.top: profileHeadline.bottom
-                    anchors.topMargin: 16
-                    anchors.bottom: parent.bottom
-                    width: parent.width
-
-                    contentHeight: profileMenuItems.height + 8
-                    contentWidth: parent.width
-                    clip: true
-
-                    Column {
-                        id: profileMenuItems
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        spacing: 4
-
-                        Repeater {
-                            model: models.demoProfileGeneralMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-
-                        StatusListSectionHeadline { text: "Settings" }
-
-                        Repeater {
-                            model: models.demoProfileSettingsMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-
-                        Item {
-                            id: invisibleSeparator
-                            height: 16
-                            width: parent.width
-                        }
-
-                        Repeater {
-                            model: models.demoProfileOtherMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-            }
-        }
+        StatusAppProfileSettingsView { }
     }
 
-    StatusModal {
+    Component {
+        id: statusCommunityPortalView
+        StatusAppCommunitiesPortalView { }
+    }
+
+    DemoContactRequestsModal {
         id: demoContactRequestsModal
         anchors.centerIn: parent
-
-        header.title: "Contact Requests"
-        headerActionButton: StatusFlatRoundButton {
-            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
-
-            icon.width: 20
-            icon.height: 20
-            icon.name: "notification"
-        }
-
-        contentItem: StatusBaseText {
-            anchors.centerIn: parent
-            text: "Contact request will be shown here"
-            font.pixelSize: 15
-            color: Theme.palette.directColor1
-        }
-
-        rightButtons: [
-            StatusButton {
-                text: "Decline all"
-                type: StatusBaseButton.Type.Danger
-                onClicked: demoContactRequestsModal.close()
-            },
-            StatusButton {
-                text: "Accept all"
-                onClicked: demoContactRequestsModal.close()
-            }
-        ]
     }
 
-    StatusModal {
+    DemoCommunityDetailModal {
         id: demoCommunityDetailModal
-
-        anchors.centerIn: parent
-
-        header.title: "Cryptokitties"
-        header.subTitle: "Public Community"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-
-        contentItem: Column {
-            width: demoCommunityDetailModal.width
-
-            StatusModalDivider {
-                bottomPadding: 8
-            }
-
-            StatusBaseText {
-                text: "A community of cat lovers, meow!"
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: 15
-                height: 46
-                color: Theme.palette.directColor1
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.leftMargin: 16
-                anchors.rightMargin: 16
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusDescriptionListItem {
-                title: "Share community"
-                subTitle: "https://join.status.im/u/0x04...45f19"
-                tooltip.text: "Copy to clipboard"
-                icon.name: "copy"
-                iconButton.onClicked: tooltip.visible = !tooltip.visible
-                width: parent.width
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Members"
-                icon.name: "group-chat"
-                label: "184"
-                components: [
-                    StatusIcon {
-                        icon: "chevron-down"
-                        rotation: 270
-                        color: Theme.palette.baseColor1
-                    }
-                ]
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Notifications"
-                icon.name: "notification"
-                components: [
-                    StatusSwitch {}
-                ]
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Edit community"
-                icon.name: "edit"
-                type: StatusListItem.Type.Secondary
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Transfer ownership"
-                icon.name: "exchange"
-                type: StatusListItem.Type.Secondary
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Leave community"
-                icon.name: "arrow-right"
-                icon.rotation: 180
-                type: StatusListItem.Type.Secondary
-            }
-        }
-    }
-
-    Models {
-        id: models
     }
 }

sandbox/Layout.qml

@@ -1,295 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
-
-Column {
-    spacing: 5
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.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
-    }
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-        chatInfoButton.pinnedMessagesCount: 1
-        notificationCount: 1
-    }
-
-    Row {
-        spacing: 5
-        Button {
-            id: btn
-            text: "Append"
-            onClicked: {
-                buttons.append({
-                    name: "Test community",
-                    tooltipText: "Test Community"
-                })
-            }
-        }
-
-        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                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
-                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
-                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 {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                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
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                }
-            ]
-        }
-
-        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                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
-                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
-                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"
-                }
-                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"
-                }
-            }
-
-            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"
-                }
-            ]
-        }
-    }
-}
-

sandbox/Models.qml

@@ -1,336 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Components 0.1
-
-QtObject {
-
-    property var demoChatListItems: ListModel {
-        id: demoChatListItems
-        ListElement {
-            chatId: "0"
-            name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            unreadMessagesCount: 0
-            mentionsCount: 0
-            color: "blue"
-            position: 0
-        }
-        ListElement {
-            chatId: "1"
-            name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "red"
-            unreadMessagesCount: 1
-            mentionsCount: 1
-            position: 1
-        }
-        ListElement {
-            chatId: "2"
-            name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
-            position: 2
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            color: "purple"
-            unreadMessagesCount: 0
-            position: 3
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            color: "Orange"
-            unreadMessagesCount: 0
-            position: 4
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "green"
-            unreadMessagesCount: 0
-            position: 5
-        }
-    }
-
-    property var demoCommunityChatListItems: ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            chatId: "0"
-            name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            position: 0
-        }
-        ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 0
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 1
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-            position: 0
-        }
-    }
-
-    property var demoCommunityCategoryItems: ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
-            name: "Public"
-            position: 0
-        }
-        ListElement {
-            categoryId: "dev"
-            name: "Development"
-            position: 1
-        }
-    }
-
-    property var demoProfileGeneralMenuItems: ListModel {
-        id: demoProfileGeneralMenuItems
-
-        ListElement {
-            title: "My Profile"
-            icon: "profile"
-        }
-
-        ListElement {
-            title: "Contacts"
-            icon: "contact"
-        }
-
-        ListElement {
-            title: "ENS Usernames"
-            icon: "username"
-        }
-
-    }
-
-    property var demoProfileSettingsMenuItems: ListModel {
-        id: demoProfileSettingsMenuItems
-
-        ListElement {
-            title: "Privacy & Security"
-            icon: "security"
-        }
-
-        ListElement {
-            title: "Appearance"
-            icon: "appearance"
-        }
-
-        ListElement {
-            title: "Browser"
-            icon: "browser"
-        }
-
-        ListElement {
-            title: "Sounds"
-            icon: "sound"
-        }
-
-        ListElement {
-            title: "Language"
-            icon: "language"
-        }
-
-        ListElement {
-            title: "Notifications"
-            icon: "notification"
-        }
-
-        ListElement {
-            title: "Sync settings"
-            icon: "mobile"
-        }
-
-        ListElement {
-            title: "Advanced"
-            icon: "settings"
-        }
-
-    }
-
-    property var demoProfileOtherMenuItems: ListModel {
-        id: demoProfileOtherMenuItems
-
-        ListElement {
-            title: "Need help?"
-            icon: "help"
-        }
-
-        ListElement {
-            title: "About"
-            icon: "info"
-        }
-
-        ListElement {
-            title: "Sign out & Quit"
-            icon: "logout"
-        }
-    }
-
-    //dummy search popup models
-    property var searchResultsA: ListModel {
-        ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
-            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
-            color: "orange";
-            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
-            badgePrimaryText: "CryptoKities";
-            badgeSecondaryText: "";
-            badgeIconColor: "";
-            badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "yellow"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "black"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "green"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "red"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "red"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i9"; titleId: "t9"; image: ""; color: "blue"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i10"; titleId: "t10"; image: ""; color: "green"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-    }
-    property var searchResultsB: ListModel {
-        ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
-            image: "";
-            color: "orange";
-            badgeImage: "";
-            badgePrimaryText: "CryptoKities";
-            badgeSecondaryText: "#design";
-            badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
-        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "red"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "orange"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "black"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
-        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "green"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "yellow"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "orange"; badgeIsLetterIdenticon: true }
-    }
-
-    property ListModel optionsModel: ListModel {
-        ListElement {
-            value: "item_1"
-            title: "Item with icon"
-            imageSource: ""
-            iconName: "chat"
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_1_1"
-                    text: "Profile image item"
-                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                    iconName: ""
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_1_2"
-                    text: "identicon item"
-                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-                    iconName: ""
-                    iconColor: ""
-                    isIdenticon: true
-                }]}
-        ListElement {
-            value: "item_2"
-            title: "Community item";
-            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-            iconName: ""
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_2_1"
-                    text: "welcome"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_2_2"
-                    text: "support"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_2_3"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-        ListElement {
-            value: "item_3"
-            title: "Other";
-            imageSource: "";
-            iconName: "info"
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_3_1"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-        ListElement {
-            value: "item_4"
-            title: "Letter identicon";
-            imageSource: "";
-            iconName: ""
-            iconColor: "red"
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_4_1"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-    }
-}

sandbox/Others.qml

@@ -1,41 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
-
-    StatusLoadingIndicator {
-        color: Theme.palette.directColor4
-    }
-
-    StatusLetterIdenticon {
-        name: "#status"
-    }
-
-    StatusRoundedImage {
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-    }
-
-    StatusBadge {}
-
-    StatusBadge {
-        value: 1
-    }
-
-    StatusBadge {
-        value: 10
-    }
-
-    StatusBadge {
-        value: 100
-    }
-
-    StatusRoundIcon {
-        icon.name: "info"
-    }
-}

sandbox/StatusAssetSelectorPage.qml

@@ -1,36 +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 {
-        assets: ListModel {
-            ListElement {
-                address: "0x1234"
-                name: "Status Network Token"
-                value: "20"
-                symbol: "SNT"
-                fiatBalance: "9992.01"
-                fiatBalanceDisplay: "9992.01"
-            }
-            ListElement {
-                address: "0x1234"
-                name: "DAI Token"
-                value: "20"
-                symbol: "DAI"
-                fiatBalance: "20"
-                fiatBalanceDisplay: "20"
-            }
-        }
-    }
-}
-

sandbox/StatusInputPage.qml

@@ -1,133 +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.Controls.Validators 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusInput {
-        input.placeholderText: "Placeholder"
-    }
-
-    StatusInput {
-        label: "Label"
-        input.placeholderText: "Disabled"
-        input.enabled: false
-    }
-
-    StatusInput {
-        input.placeholderText: "Clearable"
-        input.clearable: true
-    }
-
-    StatusInput {
-        input.placeholderText: "Invalid"
-        input.valid: false
-    }
-
-    StatusInput {
-        label: "Label"
-
-        input.icon.name: "search"
-        input.placeholderText: "Input with icon"
-    }
-
-    StatusInput {
-        label: "Label"
-        input.placeholderText: "Placeholder"
-        input.clearable: true
-    }
-
-    StatusInput {
-        charLimit: 30
-        input.placeholderText: "Placeholder"
-        input.clearable: true
-    }
-
-    StatusInput {
-        label: "Label"
-        charLimit: 30
-        input.placeholderText: "Placeholder"
-        input.clearable: true
-    }
-
-    StatusInput {
-        label: "Label"
-        charLimit: 30
-        errorMessage: "Error message"
-
-        input.clearable: true
-        input.valid: false
-        input.placeholderText: "Placeholder"
-    }
-
-    StatusInput {
-        label: "StatusInput"
-        secondaryLabel: "with right icon"
-        input.icon.width: 15
-        input.icon.height: 11
-        input.icon.name: text !== "" ? "checkmark" : ""
-        input.leftIcon: false
-    }
-
-    StatusInput {
-        label: "Label"
-        secondaryLabel: "secondary label"
-        input.placeholderText: "Placeholder"
-        input.implicitHeight: 56
-    }
-
-    StatusInput {
-        id: input
-        label: "Label"
-        charLimit: 30
-        input.placeholderText: "Input with validator"
-
-        validators: [
-            StatusMinLengthValidator {
-                minLength: 10
-                errorMessage: {
-                    if (input.errors && input.errors.minLength) {
-                        return `Value can't be shorter than ${input.errors.minLength.min} but got ${input.errors.minLength.actual}`
-                    }
-                    return ""
-                }
-            }
-        ]
-    }
-
-    StatusInput {
-        label: "Label"
-        input.placeholderText: "Input width component (right side)"
-        input.component: StatusIcon {
-            icon: "cancel"
-            height: 16
-            color: Theme.palette.dangerColor1
-        }
-    }
-
-
-    StatusInput {
-        input.multiline: true
-        input.placeholderText: "Multiline"
-    }
-
-    StatusInput {
-        input.multiline: true
-        input.placeholderText: "Multiline with static height"
-        input.implicitHeight: 100
-    }
-
-    StatusInput {
-        input.multiline: true
-        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
-    }
-}

sandbox/ThemeSwitch.qml

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

sandbox/controls/Buttons.qml

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

sandbox/controls/Controls.qml

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

sandbox/controls/Layout.qml

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

sandbox/controls/ListItems.qml

@@ -4,6 +4,7 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
 
 GridLayout {
     columns: 1
@@ -25,7 +26,7 @@ GridLayout {
         badge.value: 1
     }
     StatusNavigationListItem {
-        title: "Menu Item (selected)"
+        title: "Menu Item (selected) with very long text"
         selected: true
         icon.name: "info"
         badge.value: 1
@@ -64,15 +65,21 @@ GridLayout {
         type: StatusChatListItem.Type.CommunityChat
     }
 
+    StatusChatListItem {
+        name: "community-channel-emoji"
+        type: StatusChatListItem.Type.CommunityChat
+        icon.emoji: "😁"
+    }
+
     StatusChatListItem {
         name: "community-channel-with-image"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.CommunityChat
     }
 
     StatusChatListItem {
         name: "Weird Crazy Otter"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.OneToOneChat
     }
 
@@ -85,7 +92,8 @@ GridLayout {
     StatusChatListItem {
         name: "has-mentions"
         type: StatusChatListItem.Type.PublicChat
-        badge.value: 1
+        hasUnreadMessages: true
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -100,7 +108,7 @@ GridLayout {
         type: StatusChatListItem.Type.PublicChat
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -130,7 +138,7 @@ GridLayout {
         selected: true
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
 
@@ -171,7 +179,7 @@ GridLayout {
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusListItem {
@@ -306,7 +314,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        badge.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         badge.primaryText: "CryptoKitties"
         badge.secondaryText: "#test"
     }
@@ -321,6 +329,43 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         badge.icon.isLetterIdenticon: true
     }
 
+    StatusListItem {
+        title: "List Item with Tags"
+        icon.isLetterIdenticon: true
+        bottomModel: 3
+        bottomDelegate: StatusListItemTag {
+            title: "tag"
+            icon.isLetterIdenticon: true
+        }
+    }
+
+    StatusListItem {
+        title: "List Item with Inline Tags"
+        icon.isLetterIdenticon: true
+        tagsModel : 2
+        tagsDelegate: StatusListItemTag {
+            color: "blue"
+            height: 24
+            radius: 6
+            closeButtonVisible: false
+            icon.emoji: "😁"
+            icon.emojiSize: Emoji.size.verySmall
+            icon.isLetterIdenticon: true
+            title: "helloworld.eth"
+            titleText.font.pixelSize: 12
+            titleText.color: Theme.palette.indirectColor1
+        }
+    }
+
+    StatusListItem {
+        title: "List Item with Emoji"
+        subTitle: "Emoji"
+        icon.emoji: "😁"
+        icon.color: "yellow"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+    }
+
     StatusDescriptionListItem {
         title: "Title"
         subTitle: "Subtitle"
@@ -345,4 +390,88 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         title: "Contact requests"
         requestsCount: 3
     }
+
+    StatusMemberListItem {
+        nickName: "This is an example"
+        userName: "annabelle"
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isVerified: true
+        isContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+        status: 1 // FIXME: use enum
+        ringSettings.ringSpecModel:
+            ListModel {
+                ListElement {colorId: 13; segmentLength: 5}
+                ListElement {colorId: 31; segmentLength: 5}
+                ListElement {colorId: 10; segmentLength: 1}
+                ListElement {colorId: 2; segmentLength: 5}
+                ListElement {colorId: 26; segmentLength: 2}
+                ListElement {colorId: 19; segmentLength: 4}
+                ListElement {colorId: 28; segmentLength: 3}
+            }
+        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+    }
+
+    StatusMemberListItem {
+        nickName: "carmen.eth"
+        isUntrustworthy: true
+    }
+
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isUntrustworthy: true
+    }
+
+    StatusMemberListItem {
+        nickName: "This girl I know from work"
+        userName: "annabelle"
+        status: 1 // FIXME: use enum
+    }
+
+    StatusMemberListItem {
+        nickName: "Mark Cuban"
+        userName: "annabelle"
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+    }
+
+    StatusMemberListItem {
+        nickName: "admin.guy"
+        isAdmin: true
+        isUntrustworthy: true
+    }
+
+    StatusBaseText {
+        Layout.fillWidth: true
+        Layout.topMargin: 16
+        text: "Loading features:"
+        font.pixelSize: 17
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Incoming device"
+        label: "loading: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loading: true
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Device"
+        label: "loadingFailed: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loadingFailed: true
+    }
 }

sandbox/controls/Others.qml

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

sandbox/controls/Popups.qml

@@ -4,6 +4,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
 
 Column {
     spacing: 20
@@ -73,6 +75,22 @@ Column {
         onClicked: spellMenu.open()
     }
 
+    StatusButton {
+        text: "Modal with Editable Title"
+        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
@@ -91,7 +109,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusModal {
@@ -99,7 +117,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         leftButtons: [
             StatusRoundButton {
                 icon.name: "arrow-right"
@@ -121,7 +139,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
@@ -152,7 +170,7 @@ Column {
     StatusModal {
         id: modalExample
         anchors.centerIn: parent
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         header.title: "Header"
         header.subTitle: "SubTitle"
         rightButtons: [
@@ -341,10 +359,101 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
     }
 
+    StatusModal {
+        id: editTitleModal
+        anchors.centerIn: parent
+        header.title: "This title can be edited"
+        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
+                    defaultLeftPadding: 4
+                    text: name
+                    icon.emoji: !!emoji ? emoji: ""
+                    icon.emojiSize: Emoji.size.middle
+                    icon.name: !emoji ? "filled-account": ""
+                    normalColor: "transparent"
+                    highlighted: index === floatingHeader.currentIndex
+                    onClicked: {
+                        floatingHeader.currentIndex = index
+                    }
+                }
+            }
+            popupMenuDelegate: StatusListItem {
+                implicitWidth: 272
+                title: name
+                onClicked: floatingHeader.itemSelected(index)
+                visible: !visibleIndices.includes(index)
+            }
+        }
+    }
+
     ListModel {
         id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
         ListElement{name: "Account 2"; iconName: "filled-account"}
+        ListElement{name: "Account 3"; iconName: "filled-account"}
+        ListElement{name: "Account 4"; iconName: "filled-account"}
+        ListElement{name: "Account 5"; iconName: "filled-account"}
+        ListElement{name: "Account 6"; iconName: "filled-account"}
+        ListElement{name: "Account 7"; iconName: "filled-account"}
     }
 
     StatusSpellcheckingMenuItems {

sandbox/demoapp/ChatChannelView.qml

@@ -0,0 +1,104 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQml.Models 2.2
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ListView {
+    id: messageList
+    anchors.fill: parent
+    anchors.margins: 15
+    clip: true
+    delegate: StatusMessage {
+        id: delegate
+        width: parent.width
+
+        audioMessageInfoText: "Audio Message"
+        cancelButtonText: "Cancel"
+        saveButtonText: "Save"
+        loadingImageText: "Loading image..."
+        errorLoadingImageText: "Error loading the image"
+        resendText: "Resend"
+        pinnedMsgInfoText: "Pinned by"
+
+        messageDetails: StatusMessageDetails {
+            contentType: model.contentType
+            messageContent: model.messageContent
+            amISender: model.amIsender
+            displayName: model.userName
+            secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
+            chatID: model.chatKey
+            profileImage: StatusImageSettings {
+                width: 40
+                height: 40
+                source: model.profileImage
+                isIdenticon: model.isIdenticon
+            }
+            messageText: model.message
+            hasMention: model.hasMention
+            isContact: model.isContact
+            trustIndicator: model.trustIndicator
+            isPinned: model.isPinned
+            pinnedBy: model.pinnedBy
+            hasExpired: model.hasExpired
+        }
+        timestamp.text: "10:00 am"
+        timestamp.tooltip.text: "10:01 am"
+        // reply related data
+        isAReply: model.isReply
+        replyDetails: StatusMessageDetails {
+            amISender:  model.isReply ? model.replyAmISender : ""
+            displayName:  model.isReply ? model.replySenderName: ""
+            profileImage: StatusImageSettings {
+                width: 20
+                height: 20
+                source:  model.isReply ? model.replyProfileImage: ""
+                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
+            }
+            messageText:  model.isReply ? model.replyMessageText: ""
+            contentType: model.replyContentType
+            messageContent: model.replyMessageContent
+        }
+        quickActions: [
+            StatusFlatRoundButton {
+                id: emojiBtn
+                width: 32
+                height: 32
+                icon.name: "reaction-b"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "Add reaction"
+            },
+            StatusFlatRoundButton {
+                id: replyBtn
+                width: 32
+                height: 32
+                icon.name: "reply"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "Reply"
+            },
+            StatusFlatRoundButton {
+                width: 32
+                height: 32
+                icon.name: "tiny/edit"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "Edit"
+                onClicked: {
+                    delegate.editMode = !delegate.editMode
+                }
+            },
+            StatusFlatRoundButton {
+                id: otherBtn
+                width: 32
+                height: 32
+                icon.name: "more"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "More"
+            }
+        ]
+    }
+}

sandbox/demoapp/CreateChatView.qml

@@ -0,0 +1,121 @@
+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 {
+            anchors.left: parent.left
+            anchors.leftMargin: 252
+            anchors.right: parent.right
+            anchors.rightMargin: 252
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -(headerRow.height/2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            visible: contactsModel.count === 0
+            wrapMode: Text.WordWrap
+            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;
+                }
+            }
+        }
+    }
+}

sandbox/demoapp/DemoCommunityDetailModal.qml

@@ -0,0 +1,111 @@
+import QtQuick 2.12
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
+    id: root
+
+    anchors.centerIn: parent
+
+    header.title: "Cryptokitties"
+    header.subTitle: "Public Community"
+    header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+
+    contentItem: Column {
+        width: root.width
+
+        StatusModalDivider {
+            bottomPadding: 8
+        }
+
+        StatusBaseText {
+            text: "A community of cat lovers, meow!"
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: 15
+            height: 46
+            color: Theme.palette.directColor1
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 16
+            anchors.rightMargin: 16
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusDescriptionListItem {
+            title: "Share community"
+            subTitle: "https://join.status.im/u/0x04...45f19"
+            tooltip.text: "Copy to clipboard"
+            icon.name: "copy"
+            iconButton.onClicked: tooltip.visible = !tooltip.visible
+            width: parent.width
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Members"
+            icon.name: "group-chat"
+            label: "184"
+            components: [
+                StatusIcon {
+                    icon: "chevron-down"
+                    rotation: 270
+                    color: Theme.palette.baseColor1
+                }
+            ]
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Notifications"
+            icon.name: "notification"
+            components: [
+                StatusSwitch {}
+            ]
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Edit community"
+            icon.name: "edit"
+            type: StatusListItem.Type.Secondary
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Transfer ownership"
+            icon.name: "exchange"
+            type: StatusListItem.Type.Secondary
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Leave community"
+            icon.name: "arrow-right"
+            icon.rotation: 180
+            type: StatusListItem.Type.Secondary
+        }
+    }
+}

sandbox/demoapp/DemoContactRequestsModal.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusModal {
+    id: root
+
+    header.title: "Contact Requests"
+    headerActionButton: StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 32
+        height: 32
+
+        icon.width: 20
+        icon.height: 20
+        icon.name: "notification"
+    }
+
+    contentItem: StatusBaseText {
+        anchors.centerIn: parent
+        text: "Contact request will be shown here"
+        font.pixelSize: 15
+        color: Theme.palette.directColor1
+    }
+
+    rightButtons: [
+        StatusButton {
+            text: "Decline all"
+            type: StatusBaseButton.Type.Danger
+            onClicked: root.close()
+        },
+        StatusButton {
+            text: "Accept all"
+            onClicked: root.close()
+        }
+    ]
+}

sandbox/demoapp/StatusAppChatView.qml

@@ -0,0 +1,223 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppThreePanelLayout {
+    id: root
+    property bool createChat: false
+
+    leftPanel: Item {
+        anchors.fill: parent
+        anchors.margins: 16
+        RowLayout {
+            id: searchInputWrapper
+            width: parent.width
+
+            StatusNavigationPanelHeadline {
+                id: headline
+                Layout.alignment: Qt.AlignVCenter
+                text: "Chat"
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+
+            StatusRoundButton {
+                Layout.alignment: Qt.AlignVCenter
+                icon.name: "public-chat"
+                icon.color: Theme.palette.directColor1
+                icon.height: editBtn.icon.height
+                icon.width: editBtn.icon.width
+                implicitWidth: editBtn.implicitWidth
+                implicitHeight: editBtn.implicitHeight
+                type: StatusRoundButton.Type.Tertiary
+                StatusToolTip {
+                    text: qsTr("Join public chats")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
+            }
+
+            StatusIconTabButton {
+                id: editBtn
+                icon.name: "edit"
+                icon.color: Theme.palette.directColor1
+                checked: root.createChat
+                highlighted: checked
+                onClicked: {
+                    root.createChat = !root.createChat;
+                }
+                StatusToolTip {
+                    text: qsTr("Start chat")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
+            }
+        }
+
+        StatusInput {
+            id: searchInput
+            anchors.top: searchInputWrapper.bottom
+            anchors.topMargin: 16
+            width: parent.width
+            maximumHeight: 36
+            topPadding: 8
+            bottomPadding: 8
+            placeholderText: "Search"
+            input.icon.name: "search"
+        }
+
+        Column {
+            width: parent.width
+            anchors.top: searchInput.bottom
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 8
+
+            StatusContactRequestsIndicatorListItem {
+                width: parent.width
+                anchors.horizontalCenter: parent.horizontalCenter
+                title: "Contact requests"
+                requestsCount: 3
+                sensor.onClicked: demoContactRequestsModal.open()
+            }
+
+            StatusChatList {
+                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);
+                        if (item.chatId === id) {
+                            Models.demoChatListItems.setProperty(i, "muted", false)
+                        }
+                    }
+                }
+
+                popupMenu: StatusPopupMenu {
+
+                    property string chatId
+
+                    openHandler: function (id) {
+                        chatId = id
+                    }
+
+                    StatusMenuItem {
+                        text: "View Profile"
+                        icon.name: "group-chat"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Mute chat"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Clear history"
+                        icon.name: "close-circle"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete chat"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+    }
+
+    centerPanel: Loader {
+        anchors.fill: parent
+        sourceComponent: root.createChat ? createChatView : chatChannelView
+        Component {
+            id: createChatView
+            CreateChatView {
+                contactsModel: Models.membersListModel
+            }
+        }
+
+        Component {
+            id: chatChannelView
+            ChatChannelView {
+                model: Models.chatMessagesModel
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+
+        StatusChatToolBar {
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+            searchButton.visible: false
+            membersButton.visible: false
+            notificationCount: 1
+
+            onNotificationButtonClicked: notificationCount = 0
+
+            popupMenu: StatusPopupMenu {
+                id: contextMenu
+
+                StatusMenuItem {
+                    text: "Mute Chat"
+                    icon.name: "notification"
+                }
+                StatusMenuItem {
+                    text: "Mark as Read"
+                    icon.name: "checkmark-circle"
+                }
+                StatusMenuItem {
+                    text: "Clear History"
+                    icon.name: "close-circle"
+                }
+
+                StatusMenuSeparator {}
+
+                StatusMenuItem {
+                    text: "Leave Chat"
+                    icon.name: "arrow-right"
+                    icon.width: 14
+                    iconRotation: 180
+                    type: StatusMenuItem.Type.Danger
+                }
+            }
+
+            Component {
+                id: statusChatInfoButton
+
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "Amazing Funny Squirrel"
+                   subTitle: "Contact"
+                   icon.color: Theme.palette.miscColor7
+                   type: StatusChatInfoButton.Type.OneToOneChat
+                   pinnedMessagesCount: 1
+                }
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

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

sandbox/demoapp/StatusAppCommunityView.qml

@@ -0,0 +1,282 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppThreePanelLayout {
+    id: root
+
+    property string communityDetailModalTitle: ""
+    property string communityDetailModalImage: ""
+    signal chatInfoButtonClicked()
+
+    handle: Rectangle {
+        implicitWidth: 5
+        color: SplitHandle.pressed ? Theme.palette.baseColor2
+                                   : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+    }
+    leftPanel: Item {
+        id: leftPanel
+
+        StatusChatInfoToolBar {
+            id: statusChatInfoToolBar
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            chatInfoButton.title: "CryptoKitties"
+            chatInfoButton.subTitle: "128 Members"
+            chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
+            chatInfoButton.onClicked:  { chatInfoButtonClicked(); }
+
+            popupMenu: StatusPopupMenu {
+
+                StatusMenuItem {
+                    text: "Create channel"
+                    icon.name: "channel"
+                }
+
+                StatusMenuItem {
+                    text: "Create category"
+                    icon.name: "channel-category"
+                }
+
+                StatusMenuSeparator {}
+
+                StatusMenuItem {
+                    text: "Invite people"
+                    icon.name: "share-ios"
+                }
+
+            }
+        }
+
+        StatusScrollView {
+            id: scrollView
+
+            anchors.top: statusChatInfoToolBar.bottom
+            anchors.topMargin: 8
+            anchors.bottom: parent.bottom
+            width: leftPanel.width
+
+            contentHeight: communityCategories.height
+            clip: true
+
+            StatusChatListAndCategories {
+                id: communityCategories
+                width: leftPanel.width
+                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+
+                draggableItems: true
+                draggableCategories: false
+                model: Models.demoCommunityChatListItems
+
+                showCategoryActionButtons: true
+
+                categoryPopupMenu: StatusPopupMenu {
+
+                    property string categoryId
+
+                    openHandler: function (id) {
+                        categoryId = id
+                    }
+
+                    StatusMenuItem {
+                        text: "Mute Category"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Edit Category"
+                        icon.name: "edit"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete Category"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+
+                chatListPopupMenu: StatusPopupMenu {
+
+                    property string chatId
+
+                    StatusMenuItem {
+                        text: "Mute chat"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Clear history"
+                        icon.name: "close-circle"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete chat"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+
+                popupMenu: StatusPopupMenu {
+                    StatusMenuItem {
+                        text: "Create channel"
+                        icon.name: "channel"
+                    }
+
+                    StatusMenuItem {
+                        text: "Create category"
+                        icon.name: "channel-category"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Invite people"
+                        icon.name: "share-ios"
+                    }
+                }
+            }
+        }
+    }
+
+    centerPanel: Item {
+        StatusChatToolBar {
+            id: statusChatToolBar
+
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+
+            onSearchButtonClicked: {
+                searchButton.highlighted = !searchButton.highlighted;
+                searchPopup.setSearchSelection(communityDetailModalTitle,
+                                               "",
+                                               communityDetailModalImage);
+                searchPopup.open();
+            }
+            membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+            onMembersButtonClicked: {
+                root.showRightPanel = !root.showRightPanel;
+            }
+
+            Component {
+                id: statusChatInfoButton
+
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "general"
+                   subTitle: "Community Chat"
+                   icon.color: Theme.palette.miscColor6
+                   type: StatusChatInfoButton.Type.CommunityChat
+                }
+            }
+        }
+
+        StatusSearchPopup {
+            id: searchPopup
+            searchOptionsPopupMenu: searchPopupMenu
+            onAboutToHide: {
+                if (searchPopupMenu.visible) {
+                    searchPopupMenu.close();
+                }
+                //clear menu
+                for (var i = 2; i < searchPopupMenu.count; i++) {
+                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                }
+            }
+            onClosed: {
+                statusChatToolBar.searchButton.highlighted = false
+                searchPopupMenu.dismiss();
+            }
+            onSearchTextChanged: {
+                if (searchPopup.searchText !== "") {
+                    searchPopup.loading = true;
+                    searchModelSimTimer.start();
+                } else {
+                    searchPopup.searchResults = [];
+                    searchModelSimTimer.stop();
+                }
+            }
+            Timer {
+                id: searchModelSimTimer
+                interval: 500
+                onTriggered: {
+                    if (searchPopup.searchText.startsWith("c")) {
+                        searchPopup.searchResults = Models.searchResultsA;
+                    } else {
+                        searchPopup.searchResults = Models.searchResultsB;
+                    }
+                    searchPopup.loading = false;
+                }
+            }
+        }
+        StatusSearchLocationMenu {
+            id: searchPopupMenu
+            searchPopup: searchPopup
+            locationModel: Models.optionsModel
+        }
+    }
+
+    rightPanel: Item {
+        id: rightPanel
+        StatusBaseText {
+            id: titleText
+            anchors.top: parent.top
+            anchors.topMargin:16
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+            visible: (opacity > 0.1)
+            font.pixelSize: 15
+            text: qsTr("Members")
+        }
+
+        ListView {
+            anchors.top: titleText.bottom
+            anchors.topMargin: 16
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 16
+            boundsBehavior: Flickable.StopAtBounds
+            model: Models.membersListModel
+            delegate: StatusMemberListItem {
+                implicitWidth: parent.width
+                nickName: model.localNickname
+                userName: model.displayName
+                pubKey: model.pubKey
+                isVerified: model.isVerified
+                isUntrustworthy: model.isUntrustworthy
+                isContact: model.isContact
+                image.source: model.icon
+                image.isIdenticon: false
+                status: model.onlineStatus
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -0,0 +1,78 @@
+import QtQuick 2.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 {
+    id: root
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: profileHeadline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Profile"
+        }
+
+        StatusScrollView {
+            anchors.top: profileHeadline.bottom
+            anchors.topMargin: 16
+            anchors.bottom: parent.bottom
+            width: parent.width
+
+            contentHeight: profileMenuItems.height + 8
+            contentWidth: parent.width
+            clip: true
+
+            Column {
+                id: profileMenuItems
+                anchors.horizontalCenter: parent.horizontalCenter
+                spacing: 4
+
+                Repeater {
+                    model: Models.demoProfileGeneralMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                StatusListSectionHeadline { text: "Settings" }
+
+                Repeater {
+                    model: Models.demoProfileSettingsMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                Item {
+                    id: invisibleSeparator
+                    height: 16
+                    width: parent.width
+                }
+
+                Repeater {
+                    model: Models.demoProfileOtherMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+    }
+}

sandbox/demoapp/data/qmldir

@@ -0,0 +1 @@
+singleton Models 1.0 Models.qml

sandbox/examples/FilteringSorting.qml

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

sandbox/main.cpp

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

sandbox/main.qml

@@ -2,6 +2,9 @@ import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
 import QtGraphicalEffects 1.13
+import QtQuick.Layouts 1.14
+import Qt.labs.settings 1.0
+import QtQml.Models 2.14
 
 import Sandbox 0.1
 
@@ -12,6 +15,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,11 +36,31 @@ 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
+    }
+
+    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);
+        }
     }
 
     StatusAppLayout {
@@ -43,37 +70,39 @@ StatusWindow {
         appNavBar: 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
                     }
+                    rootWindow.setActiveItem(model.sectionId)
                 }
-            ]
+            }
         }
 
         appView: StackView {
@@ -87,12 +116,10 @@ StatusWindow {
             anchors.topMargin: 32
             anchors.right: parent.right
             anchors.rightMargin: 32
-            onCheckedChanged: {
-                if (Theme.palette === rootWindow.lightTheme) {
-                    Theme.palette = rootWindow.darkTheme
-                } else {
-                    Theme.palette = rootWindow.lightTheme
-                }
+            lightThemeEnabled: storeSettings.lightTheme
+            onLightThemeEnabledChanged: {
+                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
+                storeSettings.lightTheme = lightThemeEnabled
             }
         }
     }
@@ -101,142 +128,207 @@ StatusWindow {
         id: libraryDocumentationCmp
 
         StatusAppTwoPanelLayout {
+            id: mainPageView
 
-            leftPanel: Item {
+            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: 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: page.sourceComponent == iconsComponent
-                            onClicked: page.sourceComponent = iconsComponent
-                        }
+                Column {
+                    id: navigation
+                    spacing: 0
 
-                        StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem { 
-                            title: "Layouts" 
-                            selected: page.sourceComponent == layoutComponent
-                            onClicked: page.sourceComponent = layoutComponent
-                        }
+                    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: page.sourceComponent == buttonsComponent
-                            onClicked: page.sourceComponent = buttonsComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusSwitchTab" 
-                            selected: page.sourceComponent == statusTabSwitchesComponent
-                            onClicked: page.sourceComponent = statusTabSwitchesComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusChatCommandButton" 
-                            selected: page.sourceComponent == statusChatCommandButtonPageComponent
-                            onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "Controls" 
-                            selected: page.sourceComponent == controlsComponent
-                            onClicked: page.sourceComponent = controlsComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusTabBarIconButton" 
-                            selected: page.sourceComponent == statusTabBarIconButtonPageComponent
-                            onClicked: page.sourceComponent = statusTabBarIconButtonPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusInput" 
-                            selected: page.sourceComponent == statusInputPageComponent
-                            onClicked: page.sourceComponent = statusInputPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusSelect" 
-                            selected: page.sourceComponent == statusSelectPageComponent
-                            onClicked: page.sourceComponent = statusSelectPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusAccountSelector" 
-                            selected: page.sourceComponent == statusAccountSelectorPageComponent
-                            onClicked: page.sourceComponent = statusAccountSelectorPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusAssetSelector" 
-                            selected: page.sourceComponent == statusAssetSelectorPageComponent
-                            onClicked: page.sourceComponent = statusAssetSelectorPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusColorSelector" 
-                            selected: page.sourceComponent == statusColorSelectorPageComponent
-                            onClicked: page.sourceComponent = statusColorSelectorPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusWalletColorButton" 
-                            selected: page.sourceComponent == statusWalletColorButtonPageComponent
-                            onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusWalletColorSelect" 
-                            selected: page.sourceComponent == statusWalletColorSelectPageComponent
-                            onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Components" }
-                        StatusNavigationListItem { 
-                            title: "StatusAddress"
-                            selected: page.sourceComponent == statusAddressPageComponent
-                            onClicked: page.sourceComponent = statusAddressPageComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "List Items"
-                            selected: page.sourceComponent == listItemsComponent
-                            onClicked: page.sourceComponent = listItemsComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusChatInfoToolBar"
-                            selected: page.sourceComponent == chatInfoToolBarComponent
-                            onClicked: page.sourceComponent = chatInfoToolBarComponent
-                        }
-                        StatusNavigationListItem { 
-                            title: "Others"
-                            selected: page.sourceComponent == othersComponent
-                            onClicked: page.sourceComponent = othersComponent
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusExpandableItem"
-                            selected: page.sourceComponent == settingsComponent
-                            onClicked: page.sourceComponent = settingsComponent
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem { 
-                            title: "StatusPopupMenu"
-                            selected: page.sourceComponent == popupMenuComponent
-                            onClicked: page.sourceComponent = popupMenuComponent
-                        }
+                    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: page.sourceComponent == statusModalComponent
-                            onClicked: page.sourceComponent = statusModalComponent
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Platform" }
-                        StatusNavigationListItem {
-                            title: "StatusMacNotification"
-                            selected: page.sourceComponent == notificationComponent
-                            onClicked: page.sourceComponent = notificationComponent
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Controls" }
+                    StatusNavigationListItem {
+                        title: "Buttons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSwitchTab"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusTabSwitch");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatCommandButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Controls"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarIconButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusAccountSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPasswordStrengthIndicator"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPinInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Components" }
+                    StatusNavigationListItem {
+                        title: "StatusAddress"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "List Items"
+                        selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                        onClicked: mainPageView.control(title.replace(/\s+/g, ''));
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatInfoToolBar"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Others"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusExpandableItem"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusExpandableSettingsItem");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTagSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusToastMessage"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWizardStepper"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusListPicker"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityTags"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Popup" }
+                    StatusNavigationListItem {
+                        title: "StatusPopupMenu"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusModal"
+                        selected: viewLoader.source.toString().includes("Popups")
+                        onClicked: mainPageView.control("Popups");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusDialog"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Platform" }
+                    StatusNavigationListItem {
+                        title: "StatusMacNotification"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelectorGrid"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusImageCropPanel"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSpace"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
                     }
                 }
             }
@@ -244,8 +336,11 @@ StatusWindow {
             rightPanel: Item {
                 id: rightPanel
                 anchors.fill: parent
-                ScrollView {
+
+                StatusScrollView {
+                    visible: !storeSettings.fillPage
                     anchors.fill: parent
+                    anchors.topMargin: 64
                     contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                     contentWidth: (pageWrapper.width * rootWindow.factor)
                     clip: true
@@ -254,17 +349,32 @@ StatusWindow {
                         id: pageWrapper
                         width: rightPanel.width
                         anchors.top: parent.top
-                        anchors.topMargin: 64
-                        height: Math.max(rootWindow.height, page.height + 128)
+                        height: Math.max(rootWindow.height, viewLoader.height + 128)
                         scale: rootWindow.factor
+
                         Loader {
-                            id: page
-                            active: true
+                            id: viewLoader
+                            active: !storeSettings.fillPage
                             anchors.centerIn: parent
-                            sourceComponent: iconsComponent
+                            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;
+                                }
+                            }
                         }
                     }
                 }
+                Loader {
+                    active: storeSettings.fillPage
+                    anchors.fill: parent
+                    anchors.topMargin: 64
+                    visible: storeSettings.fillPage
+                    clip: true
+
+                    source: viewLoader.source
+                }
             }
         }
     }
@@ -293,113 +403,50 @@ StatusWindow {
     }
 
     Component {
-        id: iconsComponent
-        Icons { iconColor: Theme.palette.primaryColor1 }
-    }
+        id: examplesCmp
 
-    Component {
-        id: controlsComponent
-        Controls {}
-    }
+        StatusAppTwoPanelLayout {
+            id: examplesView
 
-    Component {
-        id: statusInputPageComponent
-        StatusInputPage {}
-    }
+            function example(name) {
+                examplesLoader.source = Qt.resolvedUrl("./examples/" + name + ".qml")
+                storeSettings.selectedExample = examplesLoader.source
+            }
 
-    Component {
-        id: statusSelectPageComponent
-        StatusSelectPage {}
-    }
+            readonly property string defaultExampleSource: example("FilteringSorting")
 
-    Component {
-        id: statusAccountSelectorPageComponent
-        StatusAccountSelectorPage {}
-    }
+            leftPanel: StatusScrollView {
+                id: examplesLeftPanel
 
-    Component {
-        id: statusAssetSelectorPageComponent
-        StatusAssetSelectorPage {}
-    }
+                anchors.fill: parent
+                anchors.topMargin: 48
 
-    Component {
-        id: statusColorSelectorPageComponent
-        StatusColorSelectorPage {}
-    }
+                ColumnLayout {
+                    width: examplesLeftPanel.availableWidth
+                    spacing: 0
 
-    Component {
-        id: statusTabBarIconButtonPageComponent
-        StatusTabBarIconButtonPage {}
-    }
+                    StatusNavigationListItem {
+                        Layout.fillWidth: true
+                        title: "FilteringSorting"
+                        selected: examplesLoader.source.toString().includes(title)
+                        onClicked: examplesView.example(title)
+                    }
+                }
+            }
 
-    Component {
-        id: statusWalletColorButtonPageComponent
-        StatusWalletColorButtonPage {}
-    }
+            rightPanel: StatusScrollView {
+                id: examplesRightPanel
+                anchors.fill: parent
+                anchors.margins: 64
+                anchors.topMargin: anchors.margins + 32
 
-    Component {
-        id: statusWalletColorSelectPageComponent
-        StatusWalletColorSelectPage {}
-    }
-
-    Component {
-        id: listItemsComponent
-        ListItems {}
-    }
-
-    Component {
-        id: statusAddressPageComponent
-        StatusAddressPage {}
-    }
-
-    Component {
-        id: layoutComponent
-        Layout {}
-    }
-
-    Component {
-        id: othersComponent
-        Others {}
-    }
-
-    Component {
-        id: buttonsComponent
-        Buttons {}
-    }
-
-    Component {
-        id: statusChatCommandButtonPageComponent
-        StatusChatCommandButtonPage {}
-    }
-
-    Component {
-        id: popupMenuComponent
-        StatusPopupMenuPage {}
-    }
-
-    Component {
-        id: chatInfoToolBarComponent
-        StatusChatInfoToolBarPage {}
-    }
-
-    Component {
-        id: statusModalComponent
-        Popups {}
-    }
-
-    Component {
-        id: statusTabSwitchesComponent
-        StatusTabSwitchPage {}
-    }
-
-    Component {
-        id: settingsComponent
-        StatusExpandableSettingsItemPage{}
-    }
-
-    Component {
-        id: notificationComponent
-        StatusMacNotificationPage  {}
+                Loader {
+                    id: examplesLoader
+                    width: examplesRightPanel.availableWidth
+                    source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
+                }
+            }
+        }
     }
 
     Component {
@@ -440,8 +487,7 @@ StatusWindow {
             }
             DemoApp {
                 id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
             }
             DropShadow {
                 anchors.fill: demoApp
@@ -493,4 +539,12 @@ StatusWindow {
             rootWindow.toggleFullScreen()
         }
     }
+
+    Settings {
+        id: storeSettings
+        property string selected: ""
+        property string selectedExample: ""
+        property bool lightTheme: true
+        property bool fillPage: false
+    }
 }

sandbox/pages/StatusAccountSelectorPage.qml

@@ -2,53 +2,62 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
+import Sandbox 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 
-import Sandbox 0.1
 
 Column {
     spacing: 8
 
     StatusAccountSelector {
+        id: accountSelector
         accounts: ListModel {
             ListElement {
                 name: "Pascal"
                 address: "0x1234567891011"
-                iconColor: "red"
-                balance: "0"
+                path: ""
+                color: "red"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "1199.02"
                 assets: []
-                fiatBalance: "1199.02"
             }
             ListElement {
                 name: "Boris"
                 address: "0x123"
-                iconColor: "red"
-                balance: "0"
+                path: ""
+                color: "red"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
                 assets: []
-                fiatBalance: "0"
             }
             ListElement {
                 name: "Alexandra"
                 address: "0x123"
-                iconColor: "yellow"
-                balance: "0"
+                path: ""
+                color: "yellow"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
                 assets: []
-                fiatBalance: "0"
             }
             ListElement {
                 name: "Khushboo"
                 address: "0x123"
-                iconColor: "blue"
-                balance: "0"
+                path: ""
+                color: "blue"
+                publicKey: ""
                 walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
                 assets: []
-                fiatBalance: "0"
             }
         }
     }

sandbox/pages/StatusCardPage.qml

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

sandbox/pages/StatusChatInfoToolBarPage.qml

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

sandbox/pages/StatusColorSelectorGridPage.qml

@@ -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
+    }
+}

sandbox/pages/StatusColorSpacePage.qml

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

sandbox/pages/StatusCommunityCardPage.qml

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

sandbox/pages/StatusCommunityTagsPage.qml

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

sandbox/pages/StatusDialogPage.qml

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