feat(Theme): Added radius and bigPadding properties

Fixes https://github.com/status-im/status-desktop/issues/5625

.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/

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,5 @@
+cmake_minimum_required(VERSION 3.19)
+
+project(StatusQ)
+
+add_subdirectory(tests)

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,43 @@
+/*!
+    \qmlmodule StatusQ.Components 0.1
+    \title StatusQ Components
+    \brief Basic set of Components StatusQ components
+
+    This is a listing of all Components components.
+
+    This module is part of the \l{StatusQ}{StatusQ} project.
+
+   \list
+       \li \l{StatusAddress}
+       \li \l{StatusBadge}
+       \li \l{StatusChatInfoToolBar}
+       \li \l{StatusChatList}
+       \li \l{StatusChatListItem}
+       \li \l{StatusImageSettings}
+       \li \l{StatusChatListCategory}
+       \li \l{StatusChatListCategoryItem}
+       \li \l{StatusChatListAndCategories}
+       \li \l{StatusChatToolBar}
+       \li \l{StatusContactRequestsIndicatorListItem}
+       \li \l{StatusDescriptionListItem}
+       \li \l{StatusLetterIdenticon}
+       \li \l{StatusListItem}
+       \li \l{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,49 @@
+/*!
+    \qmlmodule StatusQ.Controls 0.1
+    \title StatusQ Controls
+    \brief Basic set of Controls StatusQ components
+
+    This is a listing of all Controls components.
+
+    This module is part of the \l{StatusQ}{StatusQ} project.
+
+   \list
+       \li \l{StatusAccountSelector}
+       \li \l{StatusAssetSelector}
+       \li \l{StatusBanner}
+       \li \l{StatusChatCommandButton}
+       \li \l{StatusChatInfoButton}
+       \li \l{StatusChatListCategoryItemButton}
+       \li \l{StatusColorSelector}
+       \li \l{StatusIconTabButton}
+       \li \l{StatusNavBarTabButton}
+       \li \l{StatusTabBarIconButton}
+       \li \l{StatusToolTip}
+       \li \l{StatusBaseButton}
+       \li \l{StatusButton}
+       \li \l{StatusFlatButton}
+       \li \l{StatusRoundButton}
+       \li \l{StatusFlatRoundButton}
+       \li \l{StatusSwitch}
+       \li \l{StatusRadioButton}
+       \li \l{StatusCheckBox}
+       \li \l{StatusSlider}
+       \li \l{StatusSelect}
+       \li \l{StatusBaseInput}
+       \li \l{StatusIdenticonRing}
+       \li \l{StatusInput}
+       \li \l{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,23 @@
+/*!
+    \qmlmodule StatusQ.Core 0.1
+    \title StatusQ Core
+    \brief Basic set of Core StatusQ components
+
+    This is a listing of all Core components. These
+    files are available for general import and they are based off the \l{https://doc.qt.io/qt-5/qtquick-qmlmodule.html}{Qt
+    Quick Primitives} and \l{https://doc.qt.io/archives/qt-5.11/qtquick-controls2-qmlmodule.html}{Qt Quick Controls 2}.
+
+    This module is part of the \l{StatusQ}{StatusQ} project.
+
+   \list
+       \li \l{StatusAppNavBarFilterModel}
+       \li \l{StatusBaseText}
+       \li \l{StatusIcon}
+       \li \l{StatusIconBackgroundSettings}
+       \li \l{StatusIconSettings}
+       \li \l{StatusIdenticonRingSettings}
+       \li \l{StatusImageSettings}
+       \li \l{StatusModalHeaderSettings}
+       \li \l{StatusTooltipSettings}
+   \endlist
+*/

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/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,31 @@ Rectangle {
 
     property string titleStyle: "osx"
 
+    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 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 +76,74 @@ 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.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 +174,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 +186,31 @@ 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 {
+    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/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/Controls.qml

@@ -188,4 +188,19 @@ GridLayout {
         to: 100
         value: 40
     }
+
+    StatusBanner {
+        id: banner
+        width: 360
+        topPadding: 20
+        type: StatusBanner.Type.Danger
+        statusText: "Banner"
+    }
+
+    StatusProgressBar {
+        id: progressBar        
+        text: "Weak"
+        value: 0.5
+        fillColor : Theme.palette.pinColor1
+    }
 }

sandbox/controls/Layout.qml

@@ -0,0 +1,443 @@
+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: 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"
+                })
+            }
+        }
+
+        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,6 +65,12 @@ 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"
@@ -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
     }
 
 
@@ -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,55 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         title: "Contact requests"
         requestsCount: 3
     }
+
+    StatusMemberListItem {
+        nickName: "This is an example"
+        userName: "annabelle"
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+        isOnline: true
+        ringSettings.ringSpecModel:
+            ListModel {
+                ListElement {colorId: 13; segmentLength: 5}
+                ListElement {colorId: 31; segmentLength: 5}
+                ListElement {colorId: 10; segmentLength: 1}
+                ListElement {colorId: 2; segmentLength: 5}
+                ListElement {colorId: 26; segmentLength: 2}
+                ListElement {colorId: 19; segmentLength: 4}
+                ListElement {colorId: 28; segmentLength: 3}
+            }
+        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+    }
+
+    StatusMemberListItem {
+        nickName: "carmen.eth"
+        isOnline: false
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+    }
+
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isOnline: false
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+    }
+
+    StatusMemberListItem {
+        nickName: "This girl I know from work"
+        userName: "annabelle"
+        isOnline: true
+    }
+
+    StatusMemberListItem {
+        nickName: "Mark Cuban"
+        userName: "annabelle"
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+    }
 }

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: "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"
+        }
+    }
+
+    Flow {
+        Layout.fillWidth: true
+        spacing: 4
+
+        Repeater {
+            model: 12
+            StatusLetterIdenticon {
+                name: "A"
+                color: Theme.palette.userCustomizationColors[index]
+                letterSize: 16
+            }
+        }
+    }
+}
+

sandbox/controls/Popups.qml

@@ -73,6 +73,16 @@ Column {
         onClicked: spellMenu.open()
     }
 
+    StatusButton {
+        text: "Modal with Editable Title"
+        onClicked: editTitleModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with Advanced Header/Footer"
+        onClicked: advancedHeaderFooterModal.open()
+    }
+
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -341,6 +351,49 @@ 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
+            }
+
+        }
+    }
+
     ListModel {
         id: dummyAccountsModel
         ListElement{name: "Account 1"; iconName: "filled-account"}

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
+            isMutualContact: model.isMutualContact
+            trustIndicator: model.trustIndicator
+            isPinned: model.isPinned
+            pinnedBy: model.pinnedBy
+            hasExpired: model.hasExpired
+        }
+        timestamp.text: "10:00 am"
+        timestamp.tooltip.text: "10:01 am"
+        // reply related data
+        isAReply: model.isReply
+        replyDetails: StatusMessageDetails {
+            amISender:  model.isReply ? model.replyAmISender : ""
+            displayName:  model.isReply ? model.replySenderName: ""
+            profileImage: StatusImageSettings {
+                width: 20
+                height: 20
+                source:  model.isReply ? model.replyProfileImage: ""
+                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
+            }
+            messageText:  model.isReply ? model.replyMessageText: ""
+            contentType: model.replyContentType
+            messageContent: model.replyMessageContent
+        }
+        quickActions: [
+            StatusFlatRoundButton {
+                id: emojiBtn
+                width: 32
+                height: 32
+                icon.name: "reaction-b"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "Add reaction"
+            },
+            StatusFlatRoundButton {
+                id: replyBtn
+                width: 32
+                height: 32
+                icon.name: "reply"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "Reply"
+            },
+            StatusFlatRoundButton {
+                width: 32
+                height: 32
+                icon.name: "tiny/edit"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "Edit"
+                onClicked: {
+                    delegate.editMode = !delegate.editMode
+                }
+            },
+            StatusFlatRoundButton {
+                id: otherBtn
+                width: 32
+                height: 32
+                icon.name: "more"
+                type: StatusFlatRoundButton.Type.Tertiary
+                tooltip.text: "More"
+            }
+        ]
+    }
+}

sandbox/demoapp/CreateChatView.qml

@@ -0,0 +1,99 @@
+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
+
+        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).publicId === 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, '');
+            }
+            onTextChanged: {
+                sortModel(root.contactsModel);
+            }
+            Component.onCompleted: {
+                textEdit.forceActiveFocus();
+                sortModel(root.contactsModel);
+            }
+        }
+
+        StatusButton {
+            implicitHeight: 44
+            Layout.alignment: Qt.AlignTop
+            enabled: (tagSelector.namesModel.count > 0)
+            text: "Confirm"
+        }
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+        anchors.topMargin: 68
+
+        StatusBaseText {
+            visible: (contactsModel.count === 0)
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+            text: qsTr("You can only send direct messages to your Contacts. \n\n
+Send a contact request to the person you would like to chat with, you will be\n able to
+chat with them once they have accepted your contact request.")
+            Component.onCompleted: {
+                if (visible) {
+                    tagSelector.enabled = false;
+                }
+            }
+        }
+    }
+}

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: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+    contentItem: Column {
+        width: root.width
+
+        StatusModalDivider {
+            bottomPadding: 8
+        }
+
+        StatusBaseText {
+            text: "A community of cat lovers, meow!"
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: 15
+            height: 46
+            color: Theme.palette.directColor1
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 16
+            anchors.rightMargin: 16
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusDescriptionListItem {
+            title: "Share community"
+            subTitle: "https://join.status.im/u/0x04...45f19"
+            tooltip.text: "Copy to clipboard"
+            icon.name: "copy"
+            iconButton.onClicked: tooltip.visible = !tooltip.visible
+            width: parent.width
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Members"
+            icon.name: "group-chat"
+            label: "184"
+            components: [
+                StatusIcon {
+                    icon: "chevron-down"
+                    rotation: 270
+                    color: Theme.palette.baseColor1
+                }
+            ]
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Notifications"
+            icon.name: "notification"
+            components: [
+                StatusSwitch {}
+            ]
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Edit community"
+            icon.name: "edit"
+            type: StatusListItem.Type.Secondary
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Transfer ownership"
+            icon.name: "exchange"
+            type: StatusListItem.Type.Secondary
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Leave community"
+            icon.name: "arrow-right"
+            icon.rotation: 180
+            type: StatusListItem.Type.Secondary
+        }
+    }
+}

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,191 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppThreePanelLayout {
+    id: root
+    property bool createChat: false
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: headline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Chat"
+        }
+
+        RowLayout {
+            id: searchInputWrapper
+            width: 288
+            height: searchInput.height
+            anchors.top: headline.bottom
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            StatusBaseInput {
+                id: searchInput
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                implicitHeight: 36
+                topPadding: 8
+                bottomPadding: 8
+                placeholderText: "Search"
+                icon.name: "search"
+            }
+
+            StatusIconTabButton {
+                icon.name: "public-chat"
+            }
+
+            StatusIconTabButton {
+                icon.name: "edit"
+                onClicked: {
+                    root.createChat = !root.createChat;
+                }
+            }
+        }
+
+        Column {
+            anchors.top: searchInputWrapper.bottom
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 8
+
+            StatusContactRequestsIndicatorListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                title: "Contact requests"
+                requestsCount: 3
+                sensor.onClicked: demoContactRequestsModal.open()
+            }
+
+            StatusChatList {
+                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 {
+            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
+                }
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppCommunityView.qml

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

sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -0,0 +1,77 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppTwoPanelLayout {
+    id: root
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: profileHeadline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Profile"
+        }
+
+        ScrollView {
+            anchors.top: profileHeadline.bottom
+            anchors.topMargin: 16
+            anchors.bottom: parent.bottom
+            width: parent.width
+
+            contentHeight: profileMenuItems.height + 8
+            contentWidth: parent.width
+            clip: true
+
+            Column {
+                id: profileMenuItems
+                anchors.horizontalCenter: parent.horizontalCenter
+                spacing: 4
+
+                Repeater {
+                    model: Models.demoProfileGeneralMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                StatusListSectionHeadline { text: "Settings" }
+
+                Repeater {
+                    model: Models.demoProfileSettingsMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                Item {
+                    id: invisibleSeparator
+                    height: 16
+                    width: parent.width
+                }
+
+                Repeater {
+                    model: Models.demoProfileOtherMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+    }
+}

sandbox/demoapp/data/qmldir

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

sandbox/main.cpp

@@ -11,6 +11,11 @@ int main(int argc, char *argv[])
 #endif
 
     SandboxApp app(argc, argv);
+
+    app.setOrganizationName("Status");
+    app.setOrganizationDomain("status.im");
+    app.setApplicationName("Sandbox");
+
     app.startEngine();
 
     return app.exec();

sandbox/main.qml

@@ -2,6 +2,8 @@ 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 Sandbox 0.1
 
@@ -12,6 +14,8 @@ import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
 
+import "demoapp/data" 1.0
+
 StatusWindow {
     id: rootWindow
     width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
@@ -29,11 +33,30 @@ 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 demoApp: 101
+    }
+
+    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 +66,36 @@ 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
+                        rootWindow.setActiveItem(sectionId)
                     }
-                },
-                StatusNavBarTabButton {
-                    id: demoAppButton
-                    icon.name: "status"
-                    tooltip.text: "Demo Application"
-                    checked: stackView.currentItem == demoAppCmp
-                    onClicked: {
-                        stackView.clear()
+                    else if(model.sectionType === appSectionType.demoApp)
+                    {
                         stackView.push(demoAppCmp)
-                        checked = !checked
-                        apiDocsButton.checked = false
+                        rootWindow.setActiveItem(model.sectionId)
                     }
                 }
-            ]
+            }
         }
 
         appView: StackView {
@@ -87,12 +109,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,6 +121,16 @@ StatusWindow {
         id: libraryDocumentationCmp
 
         StatusAppTwoPanelLayout {
+            id: mainPageView
+
+            function page(name, fillPage) {
+                storeSettings.fillPage = fillPage ? true : false
+                viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
+            }
+            function control(name) {
+                viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
+                storeSettings.fillPage = false
+            }
 
             leftPanel: Item {
                 anchors.fill: parent
@@ -120,122 +150,167 @@ StatusWindow {
 
                         StatusListSectionHeadline { text: "StatusQ.Core" }
                         StatusNavigationListItem { 
-                            title: "Icons" 
-                            selected: page.sourceComponent == iconsComponent
-                            onClicked: page.sourceComponent = iconsComponent
+                            title: "Icons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Layout" }
                         StatusNavigationListItem { 
-                            title: "Layouts" 
-                            selected: page.sourceComponent == layoutComponent
-                            onClicked: page.sourceComponent = layoutComponent
+                            title: "Layouts"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Controls" }
                         StatusNavigationListItem { 
-                            title: "Buttons" 
-                            selected: page.sourceComponent == buttonsComponent
-                            onClicked: page.sourceComponent = buttonsComponent
+                            title: "Buttons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusSwitchTab" 
-                            selected: page.sourceComponent == statusTabSwitchesComponent
-                            onClicked: page.sourceComponent = statusTabSwitchesComponent
+                            title: "StatusSwitchTab"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page("StatusTabSwitch");
                         }
                         StatusNavigationListItem { 
-                            title: "StatusChatCommandButton" 
-                            selected: page.sourceComponent == statusChatCommandButtonPageComponent
-                            onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
+                            title: "StatusChatCommandButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "Controls" 
-                            selected: page.sourceComponent == controlsComponent
-                            onClicked: page.sourceComponent = controlsComponent
+                            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: page.sourceComponent == statusTabBarIconButtonPageComponent
-                            onClicked: page.sourceComponent = statusTabBarIconButtonPageComponent
+                            title: "StatusTabBarIconButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusInput" 
-                            selected: page.sourceComponent == statusInputPageComponent
-                            onClicked: page.sourceComponent = statusInputPageComponent
+                            title: "StatusInput"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusSelect" 
-                            selected: page.sourceComponent == statusSelectPageComponent
-                            onClicked: page.sourceComponent = statusSelectPageComponent
+                            title: "StatusSelect"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusAccountSelector" 
-                            selected: page.sourceComponent == statusAccountSelectorPageComponent
-                            onClicked: page.sourceComponent = statusAccountSelectorPageComponent
+                            title: "StatusAccountSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusAssetSelector" 
-                            selected: page.sourceComponent == statusAssetSelectorPageComponent
-                            onClicked: page.sourceComponent = statusAssetSelectorPageComponent
+                            title: "StatusAssetSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusColorSelector" 
-                            selected: page.sourceComponent == statusColorSelectorPageComponent
-                            onClicked: page.sourceComponent = statusColorSelectorPageComponent
+                            title: "StatusColorSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusWalletColorButton" 
-                            selected: page.sourceComponent == statusWalletColorButtonPageComponent
-                            onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
+                            title: "StatusWalletColorButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
-                            title: "StatusWalletColorSelect" 
-                            selected: page.sourceComponent == statusWalletColorSelectPageComponent
-                            onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
+                            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: page.sourceComponent == statusAddressPageComponent
-                            onClicked: page.sourceComponent = statusAddressPageComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
                             title: "List Items"
-                            selected: page.sourceComponent == listItemsComponent
-                            onClicked: page.sourceComponent = listItemsComponent
+                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                         }
                         StatusNavigationListItem { 
                             title: "StatusChatInfoToolBar"
-                            selected: page.sourceComponent == chatInfoToolBarComponent
-                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
                             title: "Others"
-                            selected: page.sourceComponent == othersComponent
-                            onClicked: page.sourceComponent = othersComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
                         StatusNavigationListItem {
                             title: "StatusExpandableItem"
-                            selected: page.sourceComponent == settingsComponent
-                            onClicked: page.sourceComponent = settingsComponent
+                            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);
                         }
                         StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem { 
                             title: "StatusPopupMenu"
-                            selected: page.sourceComponent == popupMenuComponent
-                            onClicked: page.sourceComponent = popupMenuComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
 
                         StatusNavigationListItem {
                             title: "StatusModal"
-                            selected: page.sourceComponent == statusModalComponent
-                            onClicked: page.sourceComponent = statusModalComponent
+                            selected: viewLoader.source.toString().includes("Popups")
+                            onClicked: mainPageView.control("Popups");
                         }
                         StatusListSectionHeadline { text: "StatusQ.Platform" }
                         StatusNavigationListItem {
                             title: "StatusMacNotification"
-                            selected: page.sourceComponent == notificationComponent
-                            onClicked: page.sourceComponent = notificationComponent
+                            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);
                         }
                     }
                 }
@@ -244,8 +319,11 @@ StatusWindow {
             rightPanel: Item {
                 id: rightPanel
                 anchors.fill: parent
+
                 ScrollView {
+                    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 +332,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
+                }
             }
         }
     }
@@ -292,116 +385,6 @@ StatusWindow {
         }
     }
 
-    Component {
-        id: iconsComponent
-        Icons { iconColor: Theme.palette.primaryColor1 }
-    }
-
-    Component {
-        id: controlsComponent
-        Controls {}
-    }
-
-    Component {
-        id: statusInputPageComponent
-        StatusInputPage {}
-    }
-
-    Component {
-        id: statusSelectPageComponent
-        StatusSelectPage {}
-    }
-
-    Component {
-        id: statusAccountSelectorPageComponent
-        StatusAccountSelectorPage {}
-    }
-
-    Component {
-        id: statusAssetSelectorPageComponent
-        StatusAssetSelectorPage {}
-    }
-
-    Component {
-        id: statusColorSelectorPageComponent
-        StatusColorSelectorPage {}
-    }
-
-    Component {
-        id: statusTabBarIconButtonPageComponent
-        StatusTabBarIconButtonPage {}
-    }
-
-    Component {
-        id: statusWalletColorButtonPageComponent
-        StatusWalletColorButtonPage {}
-    }
-
-    Component {
-        id: statusWalletColorSelectPageComponent
-        StatusWalletColorSelectPage {}
-    }
-
-    Component {
-        id: listItemsComponent
-        ListItems {}
-    }
-
-    Component {
-        id: statusAddressPageComponent
-        StatusAddressPage {}
-    }
-
-    Component {
-        id: layoutComponent
-        Layout {}
-    }
-
-    Component {
-        id: othersComponent
-        Others {}
-    }
-
-    Component {
-        id: buttonsComponent
-        Buttons {}
-    }
-
-    Component {
-        id: statusChatCommandButtonPageComponent
-        StatusChatCommandButtonPage {}
-    }
-
-    Component {
-        id: popupMenuComponent
-        StatusPopupMenuPage {}
-    }
-
-    Component {
-        id: chatInfoToolBarComponent
-        StatusChatInfoToolBarPage {}
-    }
-
-    Component {
-        id: statusModalComponent
-        Popups {}
-    }
-
-    Component {
-        id: statusTabSwitchesComponent
-        StatusTabSwitchPage {}
-    }
-
-    Component {
-        id: settingsComponent
-        StatusExpandableSettingsItemPage{}
-    }
-
-    Component {
-        id: notificationComponent
-        StatusMacNotificationPage  {}
-    }
-
     Component {
         id: demoAppCmp
 
@@ -440,8 +423,7 @@ StatusWindow {
             }
             DemoApp {
                 id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
             }
             DropShadow {
                 anchors.fill: demoApp
@@ -493,4 +475,11 @@ StatusWindow {
             rootWindow.toggleFullScreen()
         }
     }
+
+    Settings {
+        id: storeSettings
+        property string selected: ""
+        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/StatusAssetSelectorPage.qml

@@ -13,22 +13,26 @@ Column {
     spacing: 8
 
     StatusAssetSelector {
+        getCurrencyBalanceString: function (currencyBalance) {
+            return currencyBalance.toFixed(2) + " USD"
+        }
+        tokenAssetSourceFn: function (symbol) {
+            return "../../assets/img/icons/snt.svg"
+        }
         assets: ListModel {
             ListElement {
                 address: "0x1234"
                 name: "Status Network Token"
-                value: "20"
+                balance: "20"
                 symbol: "SNT"
-                fiatBalance: "9992.01"
-                fiatBalanceDisplay: "9992.01"
+                currencyBalance: 9992.01
             }
             ListElement {
                 address: "0x1234"
                 name: "DAI Token"
-                value: "20"
+                balance: "15"
                 symbol: "DAI"
-                fiatBalance: "20"
-                fiatBalanceDisplay: "20"
+                currencyBalance: 20.00001
             }
         }
     }

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/StatusImageCropPanelPage.qml

@@ -0,0 +1,94 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import QtGraphicalEffects 1.14
+
+Item {
+    id: root
+
+    implicitWidth: mainLayout.implicitWidth
+    implicitHeight: mainLayout.implicitHeight
+
+    property var testControls: [ctrl1, ctrl2, ctrl3]
+
+    property bool globalStylePreferRound: true
+
+    ColumnLayout {
+        id: mainLayout
+
+        anchors.fill: parent
+
+        RowLayout {
+            ColumnLayout {
+                Text {
+                    text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
+                }
+
+                StatusImageCropPanel {
+                    id: ctrl1
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    source: "qrc:/demoapp/data/logo-test-image.png"
+                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
+                }
+                Text {
+                    text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
+                }
+                StatusImageCropPanel {
+                    id: ctrl2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    source: "qrc:/demoapp/data/logo-test-image.png"
+                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
+                    aspectRatio: 16/9
+                    enableCheckers: true
+                }
+            }
+            ColumnLayout {
+                Text {
+                    text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
+                }
+                StatusImageCropPanel {
+                    id: ctrl3
+
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    source: "qrc:/demoapp/data/logo-test-image.png"
+                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
+                    aspectRatio: 0.8
+                }
+            }
+        }
+
+        Shortcut {
+            sequence: StandardKey.ZoomIn
+            onActivated: {
+                for(let i in testControls) {
+                    const c = testControls[i]
+                    c.setCropRect(ctrl1.inflateRectBy(c.cropRect, -0.05))
+                }
+            }
+        }
+
+        Shortcut {
+            sequence: StandardKey.ZoomOut
+            onActivated: {
+                for(let i in testControls) {
+                    const c = testControls[i]
+                    c.setCropRect(ctrl1.inflateRectBy(c.cropRect, 0.05))
+                }
+            }
+        }
+
+        Shortcut {
+            sequences: ["Ctrl+W"]
+            onActivated: globalStylePreferRound = !globalStylePreferRound
+        }
+    }
+}

sandbox/pages/StatusInputPage.qml

@@ -57,11 +57,38 @@ Column {
         input.clearable: true
     }
 
+    Item {
+        implicitWidth: 480
+        implicitHeight: 82
+        z: 100000
+        StatusSeedPhraseInput {
+            id: statusSeedInput
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height
+            textEdit.input.anchors.leftMargin: 16
+            textEdit.input.anchors.rightMargin: 16
+            textEdit.input.anchors.topMargin: 11
+            textEdit.label: "Input with drop down selection list"
+            leftComponentText: "1"
+            inputList: ListModel {
+                ListElement {
+                    seedWord: "panda"
+                }
+                ListElement {
+                    seedWord: "posible"
+                }
+                ListElement {
+                    seedWord: "wing"
+                }
+            }
+        }
+    }
+
     StatusInput {
         label: "Label"
         charLimit: 30
         errorMessage: "Error message"
-
         input.clearable: true
         input.valid: false
         input.placeholderText: "Placeholder"
@@ -102,10 +129,24 @@ Column {
         ]
     }
 
+    StatusInput {
+        label: "Input with <i>StatusRegularExpressionValidator</i>"
+        charLimit: 30
+        input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+        validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
+
+        validators: [
+            StatusRegularExpressionValidator {
+                regularExpression: /^[0-9A-Za-z_\$-\s]*$/
+                errorMessage: "Bad input!"
+            }
+        ]
+    }
+
     StatusInput {
         label: "Label"
         input.placeholderText: "Input width component (right side)"
-        input.component: StatusIcon {
+        input.rightComponent: StatusIcon {
             icon: "cancel"
             height: 16
             color: Theme.palette.dangerColor1
@@ -130,4 +171,45 @@ Column {
         input.minimumHeight: 80
         input.maximumHeight: 200
     }
+
+    StatusInput {
+        property bool toggled: true
+        label: "Input with emoji icon"
+        input.placeholderText: "Enter Name"
+        input.icon.emoji: toggled ? "😁" : "🧸"
+        input.icon.color: "blue"
+        input.isIconSelectable: true
+        onIconClicked: {
+            toggled = !toggled
+        }
+    }
+
+    StatusInput {
+        property bool toggled: true
+        label: "Input with selectable icon which is not an emoji"
+        input.placeholderText: "Enter Name"
+        input.icon.emoji: ""
+        input.icon.name: toggled ? "filled-account" : "image"
+        input.icon.color: "blue"
+        input.isIconSelectable: true
+        onIconClicked: {
+            toggled = !toggled
+        }
+    }
+
+    StatusInput {
+        label: "Input with inline token selector"
+        input.leftComponent: StatusTokenInlineSelector {
+            tokens: [{amount: 0.1, token: "ETH"},
+                     {amount: 10, token: "SNT"},
+                     {amount: 15, token: "MANA"}]
+
+            StatusToolTip {
+                id: toolTip
+                text: "posted"
+            }
+            onTriggered: toolTip.visible = true
+        }
+        input.edit.readOnly: true
+    }
 }

sandbox/pages/StatusListPickerPage.qml

@@ -0,0 +1,81 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+import "../demoapp/data" 1.0
+
+GridLayout {
+    id: root
+    columns: 1
+    rowSpacing: 150
+
+    GridLayout {
+        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+        rows: 4
+        columns: 2
+        rowSpacing: 170
+        columnSpacing: 150
+        z: 100
+        StatusListPicker {
+            id: languagePicker
+            z: 100
+            inputList: Models.languagePickerModel
+            placeholderSearchText: qsTr("Search Languages")
+            menuAlignment: StatusListPicker.MenuAlignment.Left
+        }
+
+        StatusListPicker {
+            id: languagePicker2
+            z: 100
+            inputList: Models.languageNoImagePickerModel
+            placeholderSearchText: qsTr("Search Languages")
+            menuAlignment: StatusListPicker.MenuAlignment.Center
+        }
+
+        StatusListPicker {
+            id: currencyPicker
+            inputList: Models.currencyPickerModel
+            placeholderSearchText: qsTr("Search Currencies")
+            multiSelection: true
+        }
+
+        StatusListPicker {
+            id: currencyPicker2
+            inputList: Models.currencyPickerModel2
+            placeholderSearchText: qsTr("Search Currencies")
+            multiSelection: true
+            printSymbol: true
+            enableSelectableItem: false
+        }
+    }
+
+    StatusBaseText {
+        id: pageDesc
+        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+        height: 100
+        width: 500
+        text: "4 different configurations for the `StatusListPicker` component:\n
+    * Single selection. \n
+    * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
+    * Multiple selection.\n
+    * Multiple selection and displayed name is the symbol + shortName\n"
+        color: Theme.palette.baseColor1
+        font.pixelSize: 15
+    }
+
+    // Outsite area
+    MouseArea {
+        height: root.height
+        width: root.width
+        onClicked: {
+            languagePicker.close()
+            languagePicker2.close()
+            currencyPicker.close()
+            currencyPicker2.close()
+        }
+    }
+}

sandbox/pages/StatusPasswordStrengthIndicatorPage.qml

@@ -0,0 +1,38 @@
+import QtQuick.Layouts 1.14
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusPasswordStrengthIndicator {
+        id: veryweakPw
+        strength: StatusPasswordStrengthIndicator.Strength.VeryWeak
+        value: 0.75
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: weakPw
+        strength: StatusPasswordStrengthIndicator.Strength.Weak
+        value: 0.5
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: sosoPw
+        strength: StatusPasswordStrengthIndicator.Strength.SoSo
+        value: 0.25
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: goodPw
+        strength: StatusPasswordStrengthIndicator.Strength.Good
+        value: 1
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: greatPw
+        strength: StatusPasswordStrengthIndicator.Strength.Great
+        value: 0.3
+    }
+}

sandbox/pages/StatusPinInputPage.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+
+Column {
+    id: root
+    spacing: 25
+    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+    // PIN input that accepts only numbers
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Enter Keycard PIN"
+        font.pixelSize: 30
+        font.bold: true
+    }
+
+    StatusPinInput {
+        id: numbersPinInput
+        anchors.horizontalCenter: parent.horizontalCenter
+        validator: StatusIntValidator{bottom: 0; top: 999999;}
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.dangerColor1
+        text: "Only numbers allowed"
+        font.pixelSize: 16
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Introduced PIN: " + numbersPinInput.pinInput
+        font.pixelSize: 12
+    }
+
+    // PIN input that accepts input depending on the regular expression definition
+    StatusBaseText {
+        topPadding: 100
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Enter another Keycard PIN"
+        font.pixelSize: 30
+        font.bold: true
+    }
+
+    StatusPinInput {
+        id: regexPinInput
+        anchors.horizontalCenter: parent.horizontalCenter
+        validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
+        circleDiameter: 22
+        circleSpacing: 22
+        pinLen: 7
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.dangerColor1
+        text: "Only alphanumeric characters and '@' allowed"
+        font.pixelSize: 16
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Introduced PIN: " + regexPinInput.pinInput
+        font.pixelSize: 12
+    }
+}

sandbox/pages/StatusTabBarButtonPage.qml

@@ -0,0 +1,27 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusTabBar {
+        StatusTabButton {
+            width: implicitWidth
+            text: "Button 1"
+        }
+        StatusTabButton {
+            width: implicitWidth
+            text: "Button 2"
+        }
+        StatusTabButton {
+            width: implicitWidth
+            text: "Button 3"
+            badge.value: 42
+        }
+    }
+}

sandbox/pages/StatusTagSelectorPage.qml

@@ -0,0 +1,56 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    property ListModel asortedContacts: ListModel {
+        ListElement {
+            publicId: "0x0"
+            name: "Maria"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x1"
+            name: "James"
+            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            isIdenticon: false
+            onlineStatus: 1
+        }
+        ListElement {
+            publicId: "0x2"
+            name: "Paul"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 2
+        }
+        ListElement {
+            publicId: "0x3"
+            name: "Tracy"
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: true
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x4"
+            name: "Nick"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+    }
+
+    StatusTagSelector {
+        id: tagSelector
+        width: 650
+        height: 44
+        anchors.centerIn: parent
+        namesModel: root.asortedContacts
+        toLabelText: qsTr("To: ")
+        warningText: qsTr("USER LIMIT REACHED")
+    }
+}

sandbox/pages/StatusToastMessagePage.qml

@@ -0,0 +1,41 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    Column {
+        id: toastArea
+        anchors.centerIn: parent
+        spacing: 8
+        Repeater {
+            id: toastRepeater
+            width: parent.width
+            height: childrenRect.height
+            model: [
+                {"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":"", "duration":0},
+                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
+                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com", "duration":0},
+                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
+                {"title":"Test User", "subTitle":"Hello message...", "icon":"", "loading":false, "type":0,"url":"", "duration":4000}
+            ]
+            delegate: StatusToastMessage {
+                primaryText: modelData.title
+                secondaryText: modelData.subTitle
+                icon.name: modelData.icon
+                loading: modelData.loading
+                type: modelData.type
+                linkUrl: modelData.url
+                duration: modelData.duration
+                onLinkActivated: {
+                    Qt.openUrlExternally(link);
+                }
+                onClose: {
+                    console.warn("toast closed: ", modelData.title)
+                }
+            }
+        }
+    }
+}

sandbox/pages/StatusWalletColorSelectPage.qml

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

sandbox/pages/StatusWizardStepperPage.qml

@@ -0,0 +1,100 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+    width: 800
+    height: 100
+
+    //Simulate animation between steps
+    property bool stepsCompleted: false
+    function reset() {
+        for (var i = 0; i < stepsListModel.count; i++) {
+            stepsListModel.setProperty(i, "loading", false);
+            stepsListModel.setProperty(i, "stepCompleted", false);
+            step1.loadingTime = 0;
+            step2.loadingTime = 0;
+            root.stepsCompleted = false;
+        }
+    }
+
+    ListModel {
+        id: stepsListModel
+        ListElement {description:"Send Request"; loadingTime: 0; stepCompleted: false}
+        ListElement {description:"Receive Response"; loadingTime: 0; stepCompleted: false}
+        ListElement {description:"Confirm Identity"; loadingTime: 0; stepCompleted: false}
+    }
+
+    Shortcut {
+        sequence: "Ctrl+R"
+        onActivated: {
+            if (!root.stepsCompleted) {
+                animate.running = true;
+            } else {
+                root.reset();
+            }
+        }
+    }
+
+    StatusBaseText {
+        id: indicLabel
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Press Ctrl+R to run the animation"
+        font.pixelSize: 17
+    }
+
+    SequentialAnimation {
+        id: animate
+        ScriptAction {
+            id: step1
+            property int loadingTime: 0
+            Behavior on loadingTime { NumberAnimation { duration: 2000 }}
+            onLoadingTimeChanged: {
+                stepsListModel.setProperty(1, "loadingTime", step1.loadingTime);
+            }
+            script: {
+                step1.loadingTime = 2000;
+                stepsListModel.setProperty(0, "loadingTime", step1.loadingTime);
+                stepsListModel.setProperty(0, "stepCompleted", true);
+            }
+        }
+        PauseAnimation {
+            duration: 2100
+        }
+        ScriptAction {
+            id: step2
+            property int loadingTime: 0
+            Behavior on loadingTime { NumberAnimation { duration: 2000 } }
+            onLoadingTimeChanged: {
+                stepsListModel.setProperty(2, "loadingTime", step2.loadingTime);
+            }
+            script: {
+                step2.loadingTime = 2000;
+                stepsListModel.setProperty(1, "stepCompleted", true);
+            }
+        }
+        PauseAnimation {
+            duration: 2100
+        }
+        ScriptAction {
+            script: {
+                stepsListModel.setProperty(2, "stepCompleted", true);
+                root.stepsCompleted = true;
+            }
+        }
+    }
+    //simulation code
+
+    StatusWizardStepper {
+        id: wizardStepper
+        width: (parent.width - 50)
+        anchors.top: indicLabel.bottom
+        anchors.topMargin: 16
+        anchors.horizontalCenter: parent.horizontalCenter
+        stepsModel: stepsListModel
+    }
+}

sandbox/qml.qrc

@@ -1,18 +1,47 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>Controls.qml</file>
-        <file>Icons.qml</file>
-        <file>Others.qml</file>
-        <file>Buttons.qml</file>
+        <file>pages/StatusAccountSelectorPage.qml</file>
+        <file>pages/StatusAddressPage.qml</file>
+        <file>pages/StatusAssetSelectorPage.qml</file>
+        <file>pages/StatusChatCommandButtonPage.qml</file>
+        <file>pages/StatusChatInfoToolBarPage.qml</file>
+        <file>pages/StatusColorSelectorPage.qml</file>
+        <file>pages/StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusInputPage.qml</file>
+        <file>pages/StatusMacNotificationPage.qml</file>
+        <file>pages/StatusPopupMenuPage.qml</file>
+        <file>pages/StatusSelectPage.qml</file>
+        <file>pages/StatusTabBarIconButtonPage.qml</file>
+        <file>pages/StatusTabSwitchPage.qml</file>
+        <file>pages/StatusWalletColorButtonPage.qml</file>
+        <file>pages/StatusWalletColorSelectPage.qml</file>
+        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+        <file>controls/Buttons.qml</file>
+        <file>controls/Controls.qml</file>
+        <file>controls/Icons.qml</file>
+        <file>controls/Layout.qml</file>
+        <file>controls/ListItems.qml</file>
+        <file>controls/Others.qml</file>
+        <file>controls/Popups.qml</file>
+        <file>demoapp/ChatChannelView.qml</file>
+        <file>demoapp/CreateChatView.qml</file>
+        <file>demoapp/DemoCommunityDetailModal.qml</file>
+        <file>demoapp/DemoContactRequestsModal.qml</file>
+        <file>demoapp/StatusAppChatView.qml</file>
+        <file>demoapp/StatusAppCommunityView.qml</file>
+        <file>demoapp/StatusAppProfileSettingsView.qml</file>
+        <file>demoapp/data/Models.qml</file>
+        <file>demoapp/data/qmldir</file>
+        <file>demoapp/data/logo-test-image.png</file>
         <file>DemoApp.qml</file>
-        <file>ListItems.qml</file>
-        <file>StatusChatInfoToolBarPage.qml</file>
-        <file>StatusPopupMenuPage.qml</file>
-        <file>StatusInputPage.qml</file>
         <file>ThemeSwitch.qml</file>
-        <file>Layout.qml</file>
-        <file>Popups.qml</file>
-        <file>StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusColorSelectorGridPage.qml</file>
+        <file>pages/StatusListPickerPage.qml</file>
+        <file>pages/StatusPinInputPage.qml</file>
+        <file>pages/StatusTagSelectorPage.qml</file>
+        <file>pages/StatusToastMessagePage.qml</file>
+        <file>pages/StatusWizardStepperPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
     </qresource>
 </RCC>

sandbox/sandbox.pro

@@ -15,13 +15,16 @@ SOURCES += \
         handler.cpp \
         main.cpp \
         sandboxapp.cpp \
-        spellchecker.cpp
+        spellchecker.cpp \
 
 !macx {
     SOURCES += statuswindow.cpp
 }
 
 TARGET = sandboxapp
+DESTDIR = $$PWD/bin
+
+DESTDIR = $$PWD/bin
 
 macx {
     CONFIG -= app_bundle
@@ -38,6 +41,12 @@ macx {
         DEFINES += USE_HUNSPELL
         message("hunspell exists in /usr/local/lib")
     }
+
+    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
+    first.depends = $(first) copydata
+    export(first.depends)
+    export(copydata.commands)
+    QMAKE_EXTRA_TARGETS += first copydata
 }
 
 ios {
@@ -54,14 +63,6 @@ ios {
 RESOURCES += qml.qrc \
             $$PWD/../statusq.qrc
 
-DESTDIR = $$PWD/bin
-
-copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
-first.depends = $(first) copydata
-export(first.depends)
-export(copydata.commands)
-QMAKE_EXTRA_TARGETS += first copydata
-
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin

sandbox/sandboxapp.cpp

@@ -20,7 +20,7 @@ void SandboxApp::startEngine()
     qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
 
 #ifdef QT_DEBUG
-    const QUrl url(applicationDirPath() + "/../main.qml");
+    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
 #else
     const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif

sandbox/scripts/build

@@ -1,4 +1,10 @@
-make clean
-qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-make
+#!/bin/bash
 
+make clean
+if [[ $OSTYPE == 'darwin'* ]]
+then
+  qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+else
+  qmake sandbox.pro CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+fi
+make

src/StatusQ/Components/StatusBadge.qml

@@ -32,7 +32,7 @@ Rectangle {
         anchors.centerIn: parent
         text: {
             if (statusBadge.value > 99) {
-                return "99+";
+                return qsTr("99+");
             }
             return statusBadge.value;
         }

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -27,7 +27,6 @@ Item {
         id: statusChatInfoButton
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.leftMargin: 5
         anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
         anchors.rightMargin: 5
         type: StatusChatInfoButton.Type.OneToOneChat
@@ -37,7 +36,6 @@ Item {
     StatusRoundButton {
         id: statusMenuButton
         anchors.right: parent.right
-        anchors.rightMargin: 8
         anchors.verticalCenter: parent.verticalCenter
 
         visible: popupMenuSlot.active
@@ -104,5 +102,4 @@ Item {
             }
         }
     }
-
 }

src/StatusQ/Components/StatusChatList.qml

@@ -15,19 +15,17 @@ Column {
     width: 288
 
     property string categoryId: ""
-    property string selectedChatId: ""
-    property alias chatListItems: delegateModel
+    property var model: null
     property bool draggableItems: false
+    property bool highlightItem: true
 
     property alias statusChatListItems: statusChatListItems
 
     property Component popupMenu
 
     property var filterFn
-    property var profileImageFn
-    property var chatNameFn
 
-    signal chatItemSelected(string id)
+    signal chatItemSelected(string categoryId, string id)
     signal chatItemUnmuted(string id)
     signal chatItemReordered(string id, int from, int to)
 
@@ -39,17 +37,16 @@ Column {
 
     DelegateModel {
         id: delegateModel
-
+        model: statusChatList.model
         delegate: Item {
             id: draggable
             width: statusChatListItem.width
             height: statusChatListItem.height
-
             property alias chatListItem: statusChatListItem
 
             visible: {
                 if (!!statusChatList.filterFn) {
-                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                    return statusChatList.filterFn(model)
                 }
                 return true
             }
@@ -94,36 +91,30 @@ Column {
                 }
 
                 StatusChatListItem {
-
                     id: statusChatListItem
 
-                    property string profileImage: ""
-
                     opacity: dragSensor.active ? 0.0 : 1.0
-                    Component.onCompleted: {
-                        if (typeof statusChatList.profileImageFn === "function") {
-                            profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
-                        }
-                    }
                     originalOrder: model.position
-                    chatId: model.chatId || model.id
-                    categoryId: model.categoryId || ""
-                    name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
-                    type: model.chatType
-                    muted: !!model.muted
-                    hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
-                    hasMention: model.mentionsCount > 0
-                    badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
-                        model.unviewedMessagesCount || 0 :
-                        model.mentionsCount || 0
-                    selected: (model.chatId || model.id) === statusChatList.selectedChatId
+                    chatId: model.itemId
+                    categoryId: model.parentItemId? model.parentItemId : ""
+                    name: model.name
+                    type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
+                    muted: model.muted
+                    hasUnreadMessages: model.hasUnreadMessages
+                    notificationsCount: model.notificationsCount
+                    highlightWhenCreated: !!model.highlight
+                    selected: (model.active && statusChatList.highlightItem)
 
-                    icon.color: model.color || ""
-                    image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
-                    image.source: profileImage || model.identityImage || model.identicon || ""
+                    icon.emoji: model.emoji
+                    icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
+                    image.isIdenticon: false
+                    image.source: model.icon
+                    ringSettings.ringSpecModel: model.colorHash
 
                     sensor.cursorShape: dragSensor.cursorShape
                     onClicked: {
+                        highlightWhenCreated = false
+
                         if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
                             statusChatListItem.highlighted = true
 
@@ -132,7 +123,7 @@ Column {
 
                             popupMenuSlot.item.openHandler = function () {
                                 if (!!originalOpenHandler) {
-                                    originalOpenHandler((model.chatId || model.id))
+                                    originalOpenHandler(model.itemId)
                                 }
                             }
 
@@ -152,10 +143,10 @@ Column {
                             return
                         }
                         if (!statusChatListItem.selected) {
-                            statusChatList.chatItemSelected(model.chatId || model.id)
+                            statusChatList.chatItemSelected(model.parentItemId, model.itemId)
                         }
                     }
-                    onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
                 }
             }
 
@@ -204,9 +195,8 @@ Column {
                     type: draggable.chatListItem.type
                     muted: draggable.chatListItem.muted
                     dragged: true
-                    hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
-                    hasMention: draggable.chatListItem.hasMention
-                    badge.value: draggable.chatListItem.badge.value
+                    hasUnreadMessages: model.hasUnreadMessages
+                    notificationsCount: model.notificationsCount
                     selected: draggable.chatListItem.selected
 
                     icon.color: draggable.chatListItem.icon.color

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -14,17 +14,15 @@ Item {
     implicitWidth: chatListsAndCategories.width
 
     property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
-        text: "Add channel inside category"
+        text: qsTr("Add channel inside category")
     }
     property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
-        text: "More"
+        text: qsTr("More")
     }
 
-    property string selectedChatId: ""
+    property var model: []
     property bool showCategoryActionButtons: false
     property bool showPopupMenu: true
-    property alias chatList: statusChatList.chatListItems
-    property alias categoryList: delegateModel
     property alias sensor: sensor
     property bool draggableItems: false
     property bool draggableCategories: false
@@ -36,7 +34,7 @@ Item {
     property Component chatListPopupMenu
     property Component popupMenu
 
-    signal chatItemSelected(string id)
+    signal chatItemSelected(string categoryId, string id)
     signal chatItemUnmuted(string id)
     signal chatItemReordered(string categoryId, string chatId, int from, int to)
     signal chatListCategoryReordered(string categoryId, int from, int to)
@@ -70,27 +68,25 @@ Item {
 
             StatusChatList {
                 id: statusChatList
-                anchors.horizontalCenter: parent.horizontalCenter
-                visible: chatListItems.count > 0
-                selectedChatId: statusChatListAndCategories.selectedChatId
-                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+                visible: statusChatList.model.count > 0
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
                 onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
                 draggableItems: statusChatListAndCategories.draggableItems
+                model: statusChatListAndCategories.model
                 filterFn: function (model) {
-                    return !!!model.categoryId
+                    return !model.isCategory
                 }
                 popupMenu: statusChatListAndCategories.chatListPopupMenu
             }
 
             DelegateModel {
                 id: delegateModel
-
+                model: statusChatListAndCategories.model
                 delegate: Item {
                     id: draggable
                     width: statusChatListCategory.width
                     height: statusChatListCategory.height
-
                     property alias chatListCategory: statusChatListCategory
 
                     StatusChatListCategory {
@@ -99,7 +95,7 @@ Item {
                         property bool dragActive: false
                         property real startY: 0
                         property real startX: 0
-                      
+
                         opacity: dragActive ? 0.0 : 1.0
 
                         dragSensor.drag.target: draggedListCategoryLoader.item
@@ -136,16 +132,15 @@ Item {
                         menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
 
                         originalOrder: model.position
-                        categoryId: model.categoryId
+                        categoryId: model.itemId
                         name: model.name
                         showActionButtons: statusChatListAndCategories.showCategoryActionButtons
-                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
+                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
 
-                        chatList.chatListItems.model: statusChatListAndCategories.chatList.model
-                        chatList.selectedChatId: statusChatListAndCategories.selectedChatId
-                        chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+                        chatList.model: model.subItems
+                        chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
                         chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
                         chatList.draggableItems: statusChatListAndCategories.draggableItems
 
                         popupMenu: statusChatListAndCategories.categoryPopupMenu
@@ -154,7 +149,7 @@ Item {
                         // Used to set the initial value of "opened" when the
                         // model is bound/changed.
                         opened: {
-                            let openedState = statusChatListAndCategories.openedCategoryState[model.categoryId]
+                            let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
                             return openedState !== undefined ? openedState : true // defaults to open
                         }
 
@@ -163,7 +158,7 @@ Item {
                         // as the state would be lost each time the model is
                         // changed.
                         onOpenedChanged: {
-                            statusChatListAndCategories.openedCategoryState[model.categoryId] = statusChatListCategory.opened
+                            statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
                         }
                     }
 
@@ -212,8 +207,7 @@ Item {
                             name: draggable.chatListCategory.name
                             showActionButtons: draggable.chatListCategory.showActionButtons
 
-                            chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
-                            chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
+                            chatList.model: draggable.chatListCategory.chatList.model
                         }
                     }
                 }

src/StatusQ/Components/StatusChatListCategory.qml

@@ -35,11 +35,11 @@ Column {
     StatusChatListCategoryItem {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
+        visible: model.isCategory
         opened: statusChatListCategory.opened
         sensor.pressAndHoldInterval: 150
 
         showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
-
         highlighted: statusChatListCategory.dragged
         sensor.onClicked: {
             if (sensor.enabled) {
@@ -48,7 +48,6 @@ Column {
                     popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
                     return
                 }
-                statusChatListCategory.opened = !opened;
             }
         }
         onTitleClicked: statusChatListCategory.opened = !opened
@@ -68,7 +67,7 @@ Column {
         visible: statusChatListCategory.opened
         categoryId: statusChatListCategory.categoryId
         filterFn: function (model) {
-            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+            return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
         }
 
         popupMenu: statusChatListCategory.chatListPopupMenu

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -39,21 +39,21 @@ StatusListItem {
             id: addButton
             icon.name: "add"
             icon.width: 20
-            visible: statusChatListCategoryItem.showAddButton && 
+            visible: statusChatListCategoryItem.showAddButton &&
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
-            tooltip.text: "Add channel inside category"
+            tooltip.text: qsTr("Add channel inside category")
         },
         StatusChatListCategoryItemButton {
             id: menuButton
             icon.name: "more"
             icon.width: 21
-            visible: statusChatListCategoryItem.showMenuButton && 
+            visible: statusChatListCategoryItem.showMenuButton &&
                 (statusChatListCategoryItem.highlighted ||
                 statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
-            tooltip.text: "More"
+            tooltip.text: qsTr("More")
         },
         StatusChatListCategoryItemButton {
             id: toggleButton

src/StatusQ/Components/StatusChatListItem.qml

@@ -5,11 +5,12 @@ import QtGraphicalEffects 1.13
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
 Rectangle {
-    id: statusChatListItem
+    id: root
 
     objectName: "chatItem"
     property int originalOrder: -1
@@ -18,7 +19,7 @@ Rectangle {
     property string name: ""
     property alias badge: statusBadge
     property bool hasUnreadMessages: false
-    property bool hasMention: false
+    property int notificationsCount: 0
     property bool muted: false
     property StatusImageSettings image: StatusImageSettings {
         width: 24
@@ -28,10 +29,13 @@ Rectangle {
         width: 24
         height: 24
         color: Theme.palette.miscColor5
-        letterSize: 15
+        emoji: ""
+        charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
     }
+    property alias ringSettings: identicon.ringSettings
     property int type: StatusChatListItem.Type.PublicChat
     property bool highlighted: false
+    property bool highlightWhenCreated: false
     property bool selected: false
     property bool dragged: false
     property alias sensor: sensor
@@ -58,7 +62,7 @@ Rectangle {
         if (selected) {
             return Theme.palette.statusChatListItem.selectedBackgroundColor
         }
-        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return hoverHander.hovered || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
     opacity: dragged ? 0.7 : 1
@@ -66,21 +70,24 @@ Rectangle {
     MouseArea {
         id: sensor
 
+        HoverHandler {
+            id: hoverHander
+        }
+
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
-        hoverEnabled: true
 
-        onClicked: statusChatListItem.clicked(mouse)
+        onClicked: root.clicked(mouse)
 
         StatusSmartIdenticon {
             id: identicon
             anchors.left: parent.left
             anchors.leftMargin: 8
             anchors.verticalCenter: parent.verticalCenter
-            image: statusChatListItem.image
-            icon: statusChatListItem.icon
-            name: statusChatListItem.name
+            image: root.image
+            icon: root.icon
+            name: root.name
         }
 
         StatusIcon {
@@ -90,21 +97,21 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
 
             width: 14
-            visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
+            visible: root.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (root.muted && !hoverHander.hovered && !root.highlighted) {
                     return 0.4
                 }
-                return statusChatListItem.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.selected ||
-                        statusChatListItem.highlighted ||
+                return root.hasUnreadMessages ||
+                        root.notificationsCount > 0 ||
+                        root.selected ||
+                        root.highlighted ||
                         statusBadge.visible ||
-                        sensor.containsMouse ? 1.0 : 0.7
+                        hoverHander.hovered ? 1.0 : 0.7
             }
 
             icon: {
-                switch (statusChatListItem.type) {
+                switch (root.type) {
                 case StatusChatListItem.Type.PublicCat:
                     return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                     break;
@@ -129,25 +136,27 @@ Rectangle {
             anchors.rightMargin: 6
             anchors.verticalCenter: parent.verticalCenter
 
-            text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
-                  !statusChatListItem.name.startsWith("#") ?
-                      "#" + statusChatListItem.name :
-                      statusChatListItem.name)
+            text: (root.type === StatusChatListItem.Type.PublicChat &&
+                  !root.name.startsWith("#") ?
+                      "#" + root.name :
+                      root.name)
             elide: Text.ElideRight
             color: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (root.muted && !hoverHander.hovered && !root.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.selected ||
-                        statusChatListItem.highlighted ||
-                        sensor.containsMouse ||
+                return root.hasUnreadMessages ||
+                        root.notificationsCount > 0 ||
+                        root.selected ||
+                        root.highlighted ||
+                        root.highlightWhenCreated ||
+                        hoverHander.hovered ||
                         statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
-            font.weight: !statusChatListItem.muted &&
-                         (statusChatListItem.hasMention ||
-                          statusChatListItem.hasUnreadMessages ||
+            font.weight: !root.muted &&
+                         (root.hasUnreadMessages ||
+                          root.notificationsCount > 0 ||
+                          root.highlightWhenCreated ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
@@ -160,18 +169,18 @@ Rectangle {
             width: 14
             opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
             icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
-            visible: statusChatListItem.muted
+            visible: root.muted
 
             MouseArea {
                 id: mutedIconSensor
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
-                onClicked: statusChatListItem.unmute()
+                onClicked: root.unmute()
             }
 
             StatusToolTip {
-                text: "Unmute"
+                text: qsTr("Unmute")
                 visible: mutedIconSensor.containsMouse
             }
         }
@@ -183,10 +192,11 @@ Rectangle {
             anchors.right: parent.right
             anchors.rightMargin: 8
 
-            color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
+            color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
             border.width: 4
             border.color: color
-            visible: statusBadge.value > 0
+            value: root.notificationsCount
+            visible: root.notificationsCount > 0
         }
     }
 }

src/StatusQ/Components/StatusChatToolBar.qml

@@ -58,7 +58,7 @@ Rectangle {
             onClicked: statusChatToolBar.searchButtonClicked()
 
             // initializing the tooltip
-            tooltip.text: "Search"
+            tooltip.text: qsTr("Search")
             tooltip.orientation: StatusToolTip.Orientation.Bottom
             tooltip.y: parent.height + 12
         }
@@ -72,7 +72,7 @@ Rectangle {
             onClicked: statusChatToolBar.membersButtonClicked()
 
             // initializing the tooltip
-            tooltip.text: "Members"
+            tooltip.text: qsTr("Members")
             tooltip.orientation: StatusToolTip.Orientation.Bottom
             tooltip.y: parent.height + 12
         }
@@ -87,12 +87,31 @@ Rectangle {
 
             // initializing the tooltip
             tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
-            tooltip.text: "More"
+            tooltip.text: qsTr("More")
             tooltip.orientation: StatusToolTip.Orientation.Bottom
             tooltip.y: parent.height + 12
 
             property bool showMoreMenu: false
             onClicked: {
+                menuButton.highlighted = true
+
+                let originalOpenHandler = popupMenuSlot.item.openHandler
+                let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+                popupMenuSlot.item.openHandler = function () {
+                    if (!!originalOpenHandler) {
+                        originalOpenHandler()
+                    }
+                }
+
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.highlighted = false
+                    if (!!originalCloseHandler) {
+                        originalCloseHandler()
+                    }
+                }
+
+                popupMenuSlot.item.openHandler = originalOpenHandler
                 popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
                 statusChatToolBar.menuButtonClicked()
             }
@@ -100,15 +119,6 @@ Rectangle {
             Loader {
                 id: popupMenuSlot
                 active: !!statusChatToolBar.popupMenu
-                onLoaded: {
-                    popupMenuSlot.item.closeHandler = function () {
-                        menuButton.highlighted = false
-                    }
-
-                    popupMenuSlot.item.openHandler = function () {
-                        menuButton.highlighted = true
-                    }
-                }
             }
         }
 
@@ -131,7 +141,7 @@ Rectangle {
             type: StatusFlatRoundButton.Type.Secondary
 
             // initializing the tooltip
-            tooltip.text: "Activity"
+            tooltip.text: qsTr("Activity")
             tooltip.orientation: StatusToolTip.Orientation.Bottom
             tooltip.y: parent.height + 12
 

src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml

@@ -14,6 +14,7 @@ StatusListItem {
 
     components: [
         StatusBadge {
+            visible:  statusContactRequestsListItem.requestsCount > 0
             value: statusContactRequestsListItem.requestsCount
             anchors.verticalCenter: parent.verticalCenter
             border.width: 4

src/StatusQ/Components/StatusContactVerificationIcons.qml

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

src/StatusQ/Components/StatusEmoji.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+
+
+Image {
+    id: root
+
+    property string emojiId: ""
+    
+    width: 14
+    height: 14
+    sourceSize.width: width
+    sourceSize.height: height
+
+    fillMode: Image.PreserveAspectFit
+    mipmap: true
+    antialiasing: true
+    source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
+}

src/StatusQ/Components/StatusExpandableItem.qml

@@ -12,6 +12,7 @@ Rectangle {
     property alias additionalText: additionalText.text
     property alias button: button
     property alias expandableComponent: expandableRegion.sourceComponent
+    property alias expandableItem: expandableRegion.item
 
     property int type: StatusExpandableItem.Type.Primary
     property bool expandable: true
@@ -58,111 +59,134 @@ Rectangle {
     }
 
 
-    StatusSmartIdenticon {
-        id: identicon
+    Rectangle {
+        id: header
         anchors.top: parent.top
-        anchors.topMargin: 25
-        anchors.left: parent.left
-        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11
-        image: statusExpandableItem.image
-        icon: statusExpandableItem.icon
-        name: primaryText.text
-        active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
-    }
+        width: parent.width
+        height: 64
+        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
+        color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
-    StatusBaseText {
-        id: primaryText
-        anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
-                     (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
-        anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
-        anchors.left: identicon.active ? identicon.right : parent.left
-        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
+        StatusSmartIdenticon {
+            id: identicon
+            anchors.top: parent.top
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
+            anchors.left: parent.left
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
+            image: statusExpandableItem.image
+            icon: statusExpandableItem.icon
+            name: primaryText.text
+            active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
+        }
 
-        anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
+        StatusBaseText {
+            id: primaryText
+            anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
+                        (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
+            anchors.left: identicon.active ? identicon.right : parent.left
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
 
-        width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
-                                                       parent.width - icon.background.width - additionalText.contentWidth - 110) :
-                                     (button.visible ? parent.width - icon.background.width - button.width - 70 :
-                                                       parent.width - icon.background.width - 70)
+            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
 
-        font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
-        font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
-        lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
-        lineHeightMode: Text.FixedHeight
-        elide: Text.ElideRight
-        color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
-    }
+            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
+                                                          parent.width - icon.background.width - additionalText.contentWidth - 110) :
+                                        (button.visible ? parent.width - icon.background.width - button.width - 70 :
+                                                          parent.width - icon.background.width - 70)
 
-    StatusBaseText {
-        id: secondaryText
-        anchors.top: primaryText.bottom
-        anchors.topMargin: 4
-        anchors.left: primaryText.left
-        anchors.right: primaryText.right
+            font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
+            font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
+            lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
+        }
 
-        font.pixelSize: 15
-        lineHeight: 22
-        lineHeightMode: Text.FixedHeight
-        elide: Text.ElideRight
-        color: Theme.palette.directColor3
-    }
+        StatusBaseText {
+            id: secondaryText
+            anchors.top: primaryText.bottom
+            anchors.topMargin: 4
+            anchors.left: primaryText.left
+            anchors.right: primaryText.right
 
-    StatusBaseText {
-        id: additionalText
-        anchors.verticalCenter: primaryText.verticalCenter
-        anchors.verticalCenterOffset: 2
-        anchors.right: expandImage.left
-        anchors.rightMargin: 16
+            font.pixelSize: 15
+            lineHeight: 22
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: Theme.palette.directColor3
+        }
 
-        font.pixelSize: 15
-        lineHeight: 24
-        lineHeightMode: Text.FixedHeight
-        elide: Text.ElideRight
-        color: Theme.palette.baseColor1
-    }
+        StatusBaseText {
+            id: additionalText
+            anchors.verticalCenter: primaryText.verticalCenter
+            anchors.verticalCenterOffset: 2
+            anchors.right: expandImage.left
+            anchors.rightMargin: 16
 
-    StatusButton {
-        id: button
-        anchors.top: parent.top
-        anchors.topMargin: 19
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        visible: !!text
-    }
+            font.pixelSize: 15
+            lineHeight: 24
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: Theme.palette.baseColor1
+        }
 
-    StatusIcon {
-        id: expandImage
-        anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
-                                 primaryText.verticalCenter : identicon.verticalCenter
-        anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?  -3 : -1
-        anchors.right: parent.right
-        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 23 : 6
-        visible: expandable && !button.visible
-        color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
-                   Theme.palette.baseColor1 :
-                   Theme.palette.directColor1
-    }
+        StatusButton {
+            id: button
+            anchors.top: parent.top
+            anchors.topMargin: 19
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            visible: !!text
+        }
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            if(expandable) {
-                expanded = !expanded
+        StatusIcon {
+            id: expandImage
+            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                                    primaryText.verticalCenter : identicon.verticalCenter
+            anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?  -3 : -1
+            anchors.right: parent.right
+            anchors.rightMargin: {
+                switch (statusExpandableItem.type) {
+                    case StatusExpandableItem.Type.Primary:
+                      return 23
+                      break;
+                    case StatusExpandableItem.Type.Secondary:
+                      return 16
+                      break;
+                    default:
+                      return 6
+
+                }
+            }
+            visible: expandable && !button.visible
+            color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                      Theme.palette.baseColor1 :
+                      Theme.palette.directColor1
+        }
+
+        MouseArea {
+            id: sensor
+            anchors.fill: parent
+            onClicked: {
+                if(expandable) {
+                    expanded = !expanded
+                }
             }
+            cursorShape: Qt.PointingHandCursor
+            visible: !button.visible && expandable
+            hoverEnabled: true
         }
-        cursorShape: Qt.PointingHandCursor
-        visible: !button.visible && expandable
     }
 
     Loader {
         id: expandableRegion
-        anchors.top: !!secondaryText.text ? secondaryText.bottom: primaryText.bottom
+        anchors.top: header.bottom
         anchors.topMargin: 16
         anchors.left: parent.left
         anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
         anchors.right: parent.right
         anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
-        active: false
+        visible: false
     }
 
     onExpandedChanged: {
@@ -179,13 +203,13 @@ Rectangle {
             name: "EXPANDED"
             PropertyChanges {target: expandImage; icon: "chevron-up"}
             PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
-            PropertyChanges {target: expandableRegion; active: true}
+            PropertyChanges {target: expandableRegion; visible: true}
         },
         State {
             name: "COLLAPSED"
             PropertyChanges {target: expandImage; icon: "chevron-down"}
             PropertyChanges {target: statusExpandableItem; height: 82}
-            PropertyChanges {target: expandableRegion; active: false}
+            PropertyChanges {target: expandableRegion; visible: false}
         }
     ]
 

src/StatusQ/Components/StatusImageCropPanel.qml

@@ -0,0 +1,281 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+
+/*!
+    \qmltype StatusImageCropPanel
+    \inherits Item
+    \inqmlmodule StatusQ.Components
+    \since StatusQ.Components 0.1
+    \brief Draw a crop-window onto an image and allows manipulating the position of the crop-window. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
+
+    Adds mouse pan and zoom functionality on top of StatusImageCrop functionality. Also adds small
+    practical features and optimizes drawing by minimizing StatusImageCrop area
+
+    \sa StatusImageCrop for more details
+
+    Example of how to use it:
+
+    \qml
+        StatusImageCropPanel {
+            width: 400
+            height: 200
+            source: "qrc:/demoapp/data/logo-test-image.png"
+            windowStyle: StatusImageCrop.WindowStyle.Rectangular
+            Component.onCompleted: setCropRect(Qt.rect(10, 0, sourceSize.width - 20, sourceSize.height))
+        }
+    \endqml
+
+    For a list of components available see StatusQ.
+*/
+Item {
+    id: root
+
+    implicitWidth: mainLayout.implicitWidth
+    implicitHeight: mainLayout.implicitHeight
+
+    /*!
+        \qmlproperty real StatusImageCrop::aspectRatio
+        Initial aspect-ratio of the crop-window
+    */
+    property real aspectRatio: 1
+    /*!
+        \qmlproperty bool StatusImageCrop::interactive
+        If true allows user to interact with the image. Set to false for previewing existing crop-data
+    */
+    property bool interactive: true
+    /*!
+        \qmlproperty bool StatusImageCrop::margins
+        Space to keep around the control borders and crop area
+    */
+    property int margins: 10
+
+    /*!
+        \qmlproperty url StatusImageCropPanel::source
+        \sa StatusImageCrop::source
+    */
+    /*required*/ property alias source: cropEditor.source
+
+    /*!
+        \qmlproperty WindowStyle StatusImageCropPanel::windowStyle
+        \sa StatusImageCrop::windowStyle
+    */
+    property alias windowStyle: cropEditor.windowStyle
+    /*!
+        \qmlproperty int StatusImageCropPanel::radius
+        \sa StatusImageCrop::radius
+    */
+    property alias radius: cropEditor.radius
+    /*!
+        \qmlproperty color StatusImageCropPanel::wallColor
+        \sa StatusImageCrop::wallColor
+    */
+    property alias wallColor: cropEditor.wallColor
+    /*!
+        \qmlproperty real StatusImageCropPanel::wallTransparency
+        \sa StatusImageCrop::wallTransparency
+    */
+    property alias wallTransparency: cropEditor.wallTransparency
+    /*!
+        \qmlproperty rect StatusImageCropPanel::cropRect
+        \sa StatusImageCrop::cropRect
+    */
+    property alias cropRect: cropEditor.cropRect
+    /*!
+        \qmlproperty rect StatusImageCropPanel::cropRect
+        \sa StatusImageCrop::cropRect
+    */
+    readonly property alias cropWindow: cropEditor.cropWindow
+    /*!
+        \qmlproperty real StatusImageCrop::scrollZoomFactor
+        How fast is image scaled (zoomed) when using mouse scroll
+    */
+    property real scrollZoomFactor: 0.5
+    /*!
+        \qmlproperty bool StatusImageCropPanel::enableCheckers
+        Shows helper guiding checkers pattern where image is not covering
+    */
+    property bool enableCheckers: root.interactive
+    /*!
+        \qmlproperty size StatusImageCropPanel::sourceSize
+        \sa StatusImageCrop::sourceSize
+    */
+    property alias sourceSize: cropEditor.sourceSize
+
+    /*
+        \qmlmethod StatusImageCropPanel::setCropRect(rect)
+        \sa StatusImageCrop::cropRect
+    */
+    function setCropRect(newRect) {
+        cropEditor.setCropRect(newRect)
+        aspectRatio = cropEditor.aspectRatio
+    }
+
+    QtObject {
+        id: d
+
+        function updateAspectRatio(newAR) {
+            // Keep width and adjust height
+            const eW = cropEditor.cropRect.width
+            const w = (eW <= 0) ? cropEditor.sourceSize.width : eW
+            const h = w/newAR
+            const c = (eW <= 0)
+                    ? Qt.point(cropEditor.sourceSize.width/2, cropEditor.sourceSize.height/2)
+                    : Qt.point(cropEditor.cropRect.x + w/2, cropEditor.cropRect.y + cropEditor.cropRect.height/2)
+            const nR = Qt.rect(c.x - w/2, c.y-h/2, w, h)
+            cropEditor.setCropRect(nR)
+        }
+    }
+
+    Component.onCompleted: d.updateAspectRatio(root.aspectRatio)
+    onAspectRatioChanged: d.updateAspectRatio(root.aspectRatio)
+    onSourceSizeChanged: d.updateAspectRatio(root.aspectRatio)
+
+    ColumnLayout {
+        id: mainLayout
+
+        anchors.fill: parent
+
+        Item {
+            id: cropSpaceItem
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            clip: true
+
+            Rectangle {
+                id: leftOverlay
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.right: cropEditor.left
+                anchors.bottom: parent.bottom
+                color: wallColor
+                opacity: wallTransparency
+                z: cropEditor.z + 1
+            }
+            Rectangle {
+                id: topOverlay
+                anchors.left: leftOverlay.right
+                anchors.top: parent.top
+                anchors.right: rightOverlay.left
+                anchors.bottom: cropEditor.top
+                color: wallColor
+                opacity: wallTransparency
+                z: cropEditor.z + 1
+            }
+
+            StatusImageCrop {
+                id: cropEditor
+                anchors.centerIn: parent
+                width: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height * aspectRatio : cropSpaceItem.width - root.margins * 2
+                height: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height - root.margins * 2 : cropSpaceItem.width / aspectRatio
+            }
+
+            Rectangle {
+                id: rightOverlay
+                anchors.left: cropEditor.right
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                color: wallColor
+                opacity: wallTransparency
+                z: cropEditor.z + 1
+            }
+
+            Rectangle {
+                id: bottomOverlay
+                anchors.left: leftOverlay.right
+                anchors.top: cropEditor.bottom
+                anchors.right: rightOverlay.left
+                anchors.bottom: parent.bottom
+                color: wallColor
+                opacity: wallTransparency
+                z: cropEditor.z + 1
+            }
+
+            // Checkers
+            Canvas {
+                visible: root.enableCheckers
+                anchors.fill: parent
+                onPaint: {
+                    var ctx = getContext("2d")
+                    for(let xI = 0; xI < Math.ceil(width/10); xI++) {
+                        for(let yI = 0; yI < Math.ceil(height/10); yI++) {
+                            ctx.fillStyle = (xI % 2) === (yI % 2) ? "#FFFFFE" : "#DBDBDB"
+                            ctx.fillRect(xI * 10, yI * 10, 10, 10)
+                        }
+                    }
+                }
+                z: cropEditor.z - 1
+            }
+
+            // Drag and zoom
+            MouseArea {
+                anchors.fill: parent
+
+                enabled: root.interactive
+
+                property var lastDragPoint: null
+                onReleased: lastDragPoint = null
+
+                onMouseXChanged: updateDrag(Qt.point(mouse.x, mouse.y))
+                onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))
+
+                onWheel: {
+                    const delta = wheel.angleDelta.y / 120
+                    cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
+                }
+
+                function moveRect(r /*rect*/, delta /*real*/) {
+                    return Qt.rect(r.x + delta.x, r.y + delta.y, r.width, r.height)
+                }
+
+                function scaleSize(sz /*size*/, s /*size*/) {
+                    return Qt.point(sz.width * s, sz.height * s)
+                }
+
+                function updateDrag(p) {
+                    let delta = (lastDragPoint ? Qt.size(lastDragPoint.x - p.x, lastDragPoint.y - p.y) : Qt.size(0, 0))
+                    delta = scaleSize(delta, 1/cropEditor.scrToImgScale)
+                    cropEditor.setCropRect(moveRect(cropEditor.cropRect, delta))
+                    lastDragPoint = p
+                }
+            }
+        }
+
+        RowLayout {
+            visible: root.interactive
+
+            StatusIcon {
+                icon: "remove-circle"
+
+                Layout.preferredWidth: 20
+                Layout.preferredHeight: 20
+            }
+            StatusSlider {
+                Layout.fillWidth: true
+                Layout.topMargin: 20
+                Layout.bottomMargin: 25
+                Layout.alignment: Qt.AlignVCenter
+
+                enabled: root.interactive
+
+                from: cropEditor.minZoomScale
+                to: cropEditor.maxZoomScale
+                value: cropEditor.zoomScale
+                live: false
+                onMoved: cropEditor.setCropRect(cropEditor.getZoomRect(valueAt(visualPosition)))
+            }
+            StatusIcon {
+                icon: "add-circle"
+
+                Layout.preferredWidth: 20
+                Layout.preferredHeight: 20
+            }
+        }
+    }
+}
+

src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -1,30 +1,60 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 
 Rectangle {
-    id: statusLetterIdenticon
+    id: root
 
     property alias identiconText: identiconText
     property string name
+    property string emoji
+    property string emojiSize: Emoji.size.small
     property int letterSize: 21
+    property int charactersLen: 1
 
     color: Theme.palette.miscColor5
     width: 40
     height: 40
     radius: width / 2
 
+    StatusEmoji {
+        visible: root.emoji
+        anchors.centerIn: parent
+        width: Math.round(parent.width / 2)
+        height: Math.round(parent.height / 2)
+        emojiId: Emoji.iconId(root.emoji, root.emojiSize) || ""
+    }
+    
     StatusBaseText {
         id: identiconText
-        text: ((statusLetterIdenticon.name.charAt(0) === "#")
-              || (statusLetterIdenticon.name.charAt(0) === "@") ?
-              statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+
+        visible: !root.emoji
+        anchors.alignWhenCentered: false
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        width: parent.width
+        height: parent.height
+
         font.weight: Font.Bold
-        font.pixelSize: statusLetterIdenticon.letterSize
-        color: Qt.rgba(255, 255, 255, 0.7)
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
+        font.pixelSize: root.letterSize
+        color: d.luminance(root.color) > 0.5 ? Qt.rgba(0, 0, 0, 0.5) : Qt.rgba(255, 255, 255, 0.7)
+
+        text: {
+            const shift = (root.name.charAt(0) === "#") ||
+                          (root.name.charAt(0) === "@")
+            return root.name.substring(shift, shift + charactersLen).toUpperCase()
+        }
+    }
+
+    QtObject {
+        id: d
+        function luminance(color) {
+            let r = Math.pow(color.r, 2.2) * 0.2126
+            let g = Math.pow(color.g, 2.2) * 0.7151
+            let b = Math.pow(color.b, 2.2) * 0.0721
+            return r + g + b
+        }
     }
 }
 
-

src/StatusQ/Components/StatusListItem.qml

@@ -9,49 +9,32 @@ import StatusQ.Controls 0.1
 Rectangle {
     id: statusListItem
 
-    implicitWidth: 448
-    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
-
-    enum Type {
-        Primary,
-        Secondary,
-        Danger
-    }
-
-    color: {
-        if (sensor.containsMouse) {
-            switch(type) {
-                case StatusListItem.Type.Primary:
-                    return Theme.palette.baseColor2
-                case StatusListItem.Type.Secondary:
-                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
-                case StatusListItem.Type.Danger:
-                    return Theme.palette.dangerColor3
-            }
-        }
-        return Theme.palette.statusListItem.backgroundColor
-    }
-
-    radius: 8
-
     property string itemId: ""
     property string titleId: ""
-
     property string title: ""
     property string titleAsideText: ""
     property string subTitle: ""
     property string tertiaryTitle: ""
-    property alias badge: statusListItemBadge
-
+    property string label: ""
     property real leftPadding: 16
     property real rightPadding: 16
     property bool enabled: true
+    property bool highlighted: false
+    property bool propagateTitleClicks: true
+    property int type: StatusListItem.Type.Primary
+    property list<Item> components
+    property var bottomModel: []
+    property Component bottomDelegate
+    property var tagsModel: []
+    property Component tagsDelegate
+
     property StatusIconSettings icon: StatusIconSettings {
         height: isLetterIdenticon ? 40 : 20
         width: isLetterIdenticon ? 40 : 20
         rotation: 0
         isLetterIdenticon: false
         letterSize: 21
+        charactersLen: 1
         color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
             Theme.palette.dangerColor1 : Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
@@ -73,23 +56,56 @@ Rectangle {
         height: 40
         isIdenticon: false
     }
-    property string label: ""
-
-    property int type: StatusListItem.Type.Primary
+    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
+        initalAngleRad: 0
+        ringPxSize: 1.5
+        distinctiveColors: Theme.palette.identiconRingColors
+    }
 
     property alias sensor: sensor
-
+    property alias badge: statusListItemBadge
     property alias statusListItemIcon: iconOrImage
     property alias statusListItemTitle: statusListItemTitle
+    property alias statusListItemTitleAside: statusListItemTitleAsideText
+    property alias statusListItemTitleIcons: titleIconsRow
+    property alias statusListItemTitleArea: statusListItemTitleArea
     property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
-
-    property list<Item> components
+    property alias statusListItemTagsSlot: statusListItemTagsSlot
+    property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline
 
     signal clicked(string itemId)
     signal titleClicked(string titleId)
 
+    enum Type {
+        Primary,
+        Secondary,
+        Danger
+    }
+
+    implicitWidth: 448
+    implicitHeight: {
+        if (bottomModel.length === 0) {
+            return Math.max(64, statusListItemTitleArea.height + 16)
+        }
+        return Math.max(64, statusListItemTitleArea.height + 90)
+    }
+    color: {
+        if (sensor.containsMouse || statusListItem.highlighted) {
+            switch(type) {
+                case StatusListItem.Type.Primary:
+                    return Theme.palette.baseColor2
+                case StatusListItem.Type.Secondary:
+                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
+                case StatusListItem.Type.Danger:
+                    return Theme.palette.dangerColor3
+            }
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
+    radius: 8
+
     onComponentsChanged: {
         if (components.length) {
             for (let idx in components) {
@@ -106,6 +122,7 @@ Rectangle {
         cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
+        preventStealing: true
 
         onClicked: {
             statusListItem.clicked(statusListItem.itemId)
@@ -122,17 +139,29 @@ Rectangle {
             name: statusListItem.title
             active: statusListItem.icon.isLetterIdenticon ||
                     !!statusListItem.icon.name ||
-                    !!statusListItem.image.source.toString()
+                    !!statusListItem.image.source.toString() ||
+                    !!statusListItem.icon.emoji
+            badge.border.color: statusListItem.color
+            ringSettings: statusListItem.ringSettings
         }
 
         Item {
             id: statusListItemTitleArea
+
+            function getStatusListItemTitleAnchorsRight() {
+                let isIconsRowVisible = false
+                if(titleIconsRow.item) {
+                    isIconsRowVisible = true//titleIconsRow.item.visible
+                }
+                return !statusListItem.titleAsideText && !isIconsRowVisible ? statusListItemTitleArea.right : undefined
+            }
+
             anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
-            anchors.right: statusListItemLabel.visible ?
-                statusListItemLabel.left : statusListItemComponentsSlot.left
-            anchors.leftMargin: statusListItem.leftPadding
+            anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
+            anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
             anchors.rightMargin: statusListItem.rightPadding
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter:  bottomModel.length === 0 ? parent.verticalCenter : undefined
+
             height: childrenRect.height
 
             StatusBaseText {
@@ -140,26 +169,39 @@ Rectangle {
                 text: statusListItem.title
                 font.pixelSize: 15
                 height: visible ? contentHeight : 0
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                elide: Text.ElideRight
+                anchors.left: parent.left
+                anchors.top: bottomModel.length === 0 ? undefined:  parent.top
+                anchors.topMargin: bottomModel.length === 0 ? undefined : 20
+                width: Math.min(implicitWidth, parent.width)
                 color: {
-                  if (!statusListItem.enabled) {
-                    return Theme.palette.baseColor1
-                  }
-                  switch (statusListItem.type) {
-                      case StatusListItem.Type.Primary:
-                          return Theme.palette.directColor1
-                      case StatusListItem.Type.Secondary:
-                          return Theme.palette.primaryColor1
-                      case StatusListItem.Type.Danger:
-                          return Theme.palette.dangerColor1
-                  }
+                    if (!statusListItem.enabled) {
+                        return Theme.palette.baseColor1
+                    }
+                    switch (statusListItem.type) {
+                        case StatusListItem.Type.Primary:
+                            return Theme.palette.directColor1
+                        case StatusListItem.Type.Secondary:
+                            return Theme.palette.primaryColor1
+                        case StatusListItem.Type.Danger:
+                            return Theme.palette.dangerColor1
+                    }
+                }
+
+                StatusToolTip {
+                    id: statusListItemTitleTooltip
+                    text: statusListItemTitle.text
+                    delay: 0
+                    visible: statusListItemTitle.truncated && statusListItemTitleMouseArea.containsMouse
                 }
 
                 MouseArea {
+                    id: statusListItemTitleMouseArea
                     anchors.fill: parent
-                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
+                    enabled: statusListItem.enabled
+                    cursorShape: sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
                     hoverEnabled: true
-                    propagateComposedEvents: true
+                    propagateComposedEvents: statusListItem.propagateTitleClicks
                     onClicked: {
                         statusListItem.titleClicked(statusListItem.titleId)
                         mouse.accepted = false
@@ -172,12 +214,21 @@ Rectangle {
                 anchors.left: statusListItemTitle.right
                 anchors.leftMargin: 4
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
+                anchors.top: bottomModel.length === 0 ? undefined:  parent.top
+                anchors.topMargin: bottomModel.length === 0 ? undefined : 20
                 text: statusListItem.titleAsideText
                 font.pixelSize: 10
                 color: Theme.palette.baseColor1
                 visible: !!statusListItem.titleAsideText
             }
 
+            Loader {
+                id: titleIconsRow
+                anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
+                anchors.verticalCenter: statusListItemTitle.verticalCenter
+                anchors.leftMargin: 4
+            }
+
             StatusBaseText {
                 id: statusListItemSubTitle
                 anchors.top: statusListItemTitle.bottom
@@ -208,11 +259,42 @@ Rectangle {
                 width: contentItem.width
                 implicitHeight: visible ? 22 : 0
             }
+
+            Row {
+                id: statusListItemTagsSlotInline
+                anchors.top: statusListItemTertiaryTitle.bottom
+                width: parent.width
+                spacing: 10
+                clip: true
+
+                Repeater {
+                    model: tagsModel
+                    delegate: tagsDelegate
+                }
+            }
+        }
+
+        Row {
+            id: statusListItemTagsSlot
+            anchors.topMargin: 16
+            anchors.top: iconOrImage.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            width: statusListItemBadge.width
+            spacing: 10
+            anchors.verticalCenter: parent.verticalCenter
+
+            Repeater {
+                model: bottomModel
+                delegate: bottomDelegate
+            }
         }
 
         StatusBaseText {
             id: statusListItemLabel
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
+            anchors.top: bottomModel.length === 0 ? undefined:  parent.top
+            anchors.topMargin: bottomModel.length === 0 ? undefined : 16
             anchors.right: statusListItemComponentsSlot.left
             anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
 
@@ -222,12 +304,13 @@ Rectangle {
             visible: !!statusListItem.label
         }
 
-
         Row {
             id: statusListItemComponentsSlot
             anchors.right: parent.right
             anchors.rightMargin: statusListItem.rightPadding
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
+            anchors.top: bottomModel.length === 0 ? undefined:  parent.top
+            anchors.topMargin: bottomModel.length === 0 ? undefined : 12
             spacing: 10
         }
     }

src/StatusQ/Components/StatusListItemBadge.qml

@@ -57,6 +57,8 @@ Control {
                 visible: root.icon.isLetterIdenticon
                 color: root.icon.color
                 name: root.primaryText
+                emoji: root.icon.emoji
+                emojiSize: root.icon.emojiSize
             }
             StatusBaseText {
                 font.weight: Font.Medium

src/StatusQ/Components/StatusListItemTag.qml

@@ -0,0 +1,81 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: root
+    width: layout.width
+    height: 30
+    color: Theme.palette.primaryColor3
+    radius: 15
+
+    property alias titleText: titleText
+
+    property string title: ""
+    property bool closeButtonVisible: true
+    signal clicked()
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 20
+        height: 20
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
+        height: 20
+        width: 20
+        rotation: 0
+        isLetterIdenticon: false
+        letterSize: 10
+        color: Theme.palette.primaryColor1
+        background: StatusIconBackgroundSettings {
+            width: 15
+            height: 15
+            color: Theme.palette.primaryColor3
+        }
+    }
+
+    RowLayout {
+        id: layout
+
+        height: parent.height
+        spacing: 5
+
+        StatusSmartIdenticon {
+            id: iconOrImage
+            Layout.leftMargin: 5
+            image: root.image
+            icon: root.icon
+            name: root.title
+            active: root.icon.isLetterIdenticon ||
+                    !!root.icon.name ||
+                    !!root.image.source.toString()
+        }
+
+        StatusBaseText {
+            id: titleText
+            color: Theme.palette.primaryColor1
+            text: root.title
+            Layout.rightMargin: closeButtonVisible ? 0 : 5
+        }
+
+        StatusIcon {
+            id: closeIcon
+            color: Theme.palette.primaryColor1
+            icon: "close-circle"
+            visible: closeButtonVisible
+            Layout.rightMargin: 5
+            MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    root.clicked()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusListPicker.qml

@@ -0,0 +1,392 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusListPicker
+   \inherits Item
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It is a combination of StatusPickerButton and a drop-down list component that provides a way of presenting a list of selectable options to the user. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
+
+   The \c StatusListPicker is populated with a data model. The data model is commonly a JavaScript array or a ListModel object.
+
+   StatusListPicker can be made as a single or multiple options picker by setting its StatusListPicker::multiSelection property properly or will be auto-set if the model contains / provides more than one selected items.
+   The StatusPickerButton text holds the text of the current item selected in the list picker. If there is more than one item selected, a string composed will be displayed.
+   The drop-down list incorporates a searcher by the following model roles: `name` or / and `shortName`.
+
+   NOTE: Make sure to set the appropriate z-index when instantiating the component in order to place it on top of your view in order to display the drop-down data properly.
+   Make sure to position the component inside its parent also when it is spanned in order to achieve a better user experience.
+
+   Example of how the component looks like:
+   \image status_list_picker.png
+   Example of how to use it:
+   \qml
+        StatusListPicker {
+            id: currencyPicker
+            inputList: Models.currencyPickerModel
+            searchText: qsTr("Search Language")
+            multiSelection: true
+            printSymbol: true
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+Item {
+    id: root
+
+    /*!
+       \qmlproperty string StatusListPicker::inputList
+       This property holds the data that will be populated in the list picker.
+
+       NOTE: This model property should not change so it is an in / out property where the selected role will be dynamically changed according to user actions.
+
+       Here an example of the model roles expected:
+       \qml
+            inputList: ListModel {
+            ListElement {
+                key: 0
+                name: "United States Dollar"
+                shortName: "USD"
+                symbol: "$"
+                imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+                category: "fiat"
+                selected: true
+            }
+            ListElement {
+                key: 1
+                name: "British Pound"
+                shortName: "GBP"
+                symbol: "£"
+                imageSource: "../../assets/twemoji/26x26/1f4b5.png"
+                category: "fiat"
+                selected: false
+            }
+        }
+       \endqml
+    */
+    property ListModel inputList: ListModel { }
+
+    /*!
+       \qmlproperty string StatusListPicker::searchText
+       This property holds the search text the searcher input displays by default.
+    */
+    property string searchText: ""
+
+    /*!
+       \qmlproperty string StatusListPicker::placeholderSearchText
+       This property holds the placeholder text the searcher input displays by default.
+    */
+    property string placeholderSearchText: qsTr("Search")
+
+    /*!
+       \qmlproperty string StatusListPicker::multiSelection
+       This property holds whether the list picker is a single or a multiple picker option by displaying a StatusRadioButton or StatusCheckBox instead.
+    */
+    property bool multiSelection: false
+
+    /*!
+       \qmlproperty string StatusListPicker::printSymbol
+       This property holds whether the selected items will display a composition of the role `symbol` in the StatusPickerButton text or just only the role `shortName`.
+    */
+    property bool printSymbol: false
+
+    /*!
+       \qmlproperty string StatusListPicker::maxPickerHeight
+       This property holds the maximum drop-down list height allowed. The drop-down list height will be set as the minimum value between the list content height and the maxPickerHeight property.
+    */
+    property int maxPickerHeight: 718
+
+    /*!
+       \qmlproperty string StatusListPicker::enableSelectableItem
+       This property holds if the item in the list will be highlighted when hovering and clickable in its complete area or just not highlighted and able to be selected by clicking only the checbox or radiobutton area.
+    */
+    property bool enableSelectableItem: true
+
+    /*!
+       \qmlproperty string StatusListPicker::menuAlignment
+       This property holds the allignment of the menu in terms of the button
+    */
+    property int menuAlignment: StatusListPicker.MenuAlignment.Right
+
+    /*!
+       \qmlproperty enum StatusListPicker::MenuAlignment
+       This property holds the allignment of the menu in terms of the button
+       values can be Left, Right or Center
+    */
+    enum MenuAlignment {
+        Left,
+        Right,
+        Center
+    }
+
+    /*
+        \qmlmethod StatusListPicker::close()
+        It can be used to force to close the drop-down picker list whenever the consumer needs it. For example by adding an outside MouseArea to close the picker when user clicks outsite the component:
+       \qml
+            // Outsite area
+            MouseArea {
+                height: root.height
+                width: root.width
+                onClicked: { currencyPicker.close() }
+            }
+       \endqml
+    */
+    function close() {
+        picker.visible = false
+
+        // Reset searcher:
+        root.searchText = ""
+    }
+
+    /*!
+        \qmlsignal StatusListPicker::itemPickerChanged(string key, bool selected)
+        This signal is emitted when an item changes its selected value.
+    */
+    signal itemPickerChanged(string key, bool selected)
+
+    QtObject {
+        id: d
+        property var filteredModel: ListModel { }
+
+        // Used to set up component and the needed private properties
+        function initialize() {
+            if(filteredModel.count === 0) {
+                // It is necessary to load the model, not loaded yet!
+                var selected = 0
+                var selectionText = ""
+                for(var i = 0; i < root.inputList.count; i++) {
+                    var item = root.inputList.get(i)
+                    d.filteredModel.append(item)
+                    if(item.selected) selected++;
+                }
+
+                // If the given model has more than one selected elements, the behaviour of the list picker will be as a multiple selector with checkboxes although it is
+                // set in the radiobutton mode. Radiobutton mode is only for mutial-exclusion.
+                if(selected > 1)
+                    multiSelection = true
+
+                // Update selected items text:
+                d.getSelectedItemsText()
+            }
+        }
+
+        // Used to update model elements given a specific text by filtering them for its `name` and / or `shortName`.
+        function applyFilter(text) {
+            const input = text.toLowerCase()
+            filteredModel.clear()
+            for(var i = 0; i < root.inputList.count; i++) {
+                let item = root.inputList.get(i)
+                if(item.name.toLowerCase().includes(input) || item.shortName.toLowerCase().includes(input))
+                    filteredModel.append(item)
+            }
+        }        
+
+        function formatSymbolShortNameText(symbol, shortName) {
+            var formattedText = ""
+            if(root.printSymbol && symbol)
+                formattedText = symbol + shortName
+            else
+                formattedText = shortName
+            return formattedText
+        }
+
+        function getSelectedItemsText() {
+            var res = ""
+            for(var i = 0; i < root.inputList.count; i++) {
+                var item = root.inputList.get(i)
+                if(item.selected) {
+                    if(res != "")
+                        res += ", "
+                    res += d.formatSymbolShortNameText(item.symbol, item.shortName)
+                }
+            }
+            return res
+        }
+
+        // Used to update the base input list model with the new selected property
+        function updateInputListModel(key, selected, isSingleSelection) {
+            // If it is a single selection we must ensure that when a new key is selected  others are cleared.
+            // It must be done manually because as there is the option of filterning, the model visualized changes
+            // and it could be possible to have a filtered list without an element selected (but in the base model
+            // it is) so, the binding to not selected will not be executed, as in the current filtered model
+            // there are no changes to update, just only the selected one.
+            for(var i = 0; i < root.inputList.count; i++) {
+                if(root.inputList.get(i).key === key) {
+                    root.inputList.get(i).selected = selected
+                }
+                else if(isSingleSelection && selected) {
+                     // Clear all the list
+                    root.inputList.get(i).selected = false
+                }
+            }
+        }
+    }
+
+    width: 110
+    height: 38
+
+    Component.onCompleted: d.initialize()
+
+    StatusPickerButton {
+        id: btn
+        anchors.fill: parent
+        bgColor: Theme.palette.primaryColor3
+        contentColor: Theme.palette.primaryColor1
+        text: picker.selectedItemsText
+        textPixelSize: 13
+        type: StatusPickerButton.Type.Down
+
+        onClicked: {
+            picker.visible = !picker.visible
+
+            // Restart list position:
+            content.positionViewAtBeginning()
+            content.forceActiveFocus()
+        }
+    }
+
+    Rectangle {
+        id: picker
+
+        property string selectedItemsText: ""
+
+        width: content.itemWidth
+        height: Math.min(content.contentHeight + content.anchors.topMargin + content.anchors.bottomMargin, root.maxPickerHeight)
+        anchors.left: root.menuAlignment === StatusListPicker.MenuAlignment.Left ? btn.left : undefined
+        anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
+        anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
+        anchors.top: btn.bottom
+        anchors.topMargin: 4
+        visible: false
+        color: Theme.palette.statusPopupMenu.backgroundColor
+        radius: 8
+        layer.enabled: true
+        layer.effect: DropShadow {
+            source: picker
+            horizontalOffset: 0
+            verticalOffset: 4
+            radius: 12
+            samples: 25
+            spread: 0.2
+            color: Theme.palette.dropShadow
+        }
+
+        ListView {
+            id: content            
+
+            property int itemHeight: 40
+            property int itemWidth: 360
+
+            model: d.filteredModel
+            width: itemWidth
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 8
+            currentIndex: -1
+            clip: true
+            headerPositioning: ListView.OverlayHeader
+            header: Rectangle {
+                id: header
+                width: content.itemWidth
+                height: searchInput.height + 24
+                color: Theme.palette.statusPopupMenu.backgroundColor
+                z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
+
+                StatusBaseInput {
+                    id: searchInput
+                    implicitHeight: 36
+                    width: content.itemWidth - 2 * 18
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    topPadding: 0
+                    bottomPadding: 0
+                    placeholderText: root.placeholderSearchText
+                    text: root.searchText
+                    icon.name: "search"
+
+                    onTextChanged: {
+                        d.applyFilter(text)
+                        root.searchText = text
+                    }
+                }
+            }// End of search input item
+            delegate: StatusItemPicker {
+                width: content.itemWidth
+                height: content.itemHeight
+                color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent"
+                image: StatusImageSettings {
+                    source: model.imageSource ? model.imageSource : ""
+                    width: 15
+                    height: 15
+                    isIdenticon: false
+                }
+                name: model.name
+                shortName: model.shortName
+                selectorType: root.multiSelection ? StatusItemPicker.SelectorType.CheckBox : StatusItemPicker.SelectorType.RadioButton
+                selected: model.selected
+                radioGroup: radioBtnGroup
+
+                onCheckedChanged: {
+                    d.updateInputListModel(model.key, checked, selectorType === StatusItemPicker.SelectorType.RadioButton)
+                    if(selectorType === StatusItemPicker.SelectorType.RadioButton && checked) {
+                        // Update selected item text
+                        picker.selectedItemsText = d.formatSymbolShortNameText(model.symbol, model.shortName)
+                    }
+                    else {
+                        // Update selected items text (multiple selection, text chain).
+                        picker.selectedItemsText = d.getSelectedItemsText()
+                    }
+
+                    // Used to notify selected property changes in the specific item picker.
+                    itemPickerChanged(model.key, checked)
+                }
+
+                MouseArea {
+                    id: mouseArea
+                    enabled: root.enableSelectableItem
+                    anchors.fill: parent
+                    cursorShape: root.enableSelectableItem ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    hoverEnabled: true
+                    onClicked: {
+                        if(selectorType === StatusItemPicker.SelectorType.RadioButton) {
+                            // Just only allow to select, not unselect in case of single selection (radiobutton)
+                             if(!selected) selected = !selected
+                        }
+                        else
+                            // In case of multiple selections you can both select and unselect.
+                            selected = !selected
+                    }
+                }
+            }
+            section.property: "category"
+            section.criteria: ViewSection.FullString
+            section.delegate: Item {
+                width: content.itemWidth
+                height: content.itemHeight
+
+                StatusBaseText {
+                    anchors.leftMargin: 18
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: section
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 15
+                    elide: Text.ElideRight
+                }
+            }// End of Category item
+
+            onActiveFocusChanged: { if(!activeFocus) root.close() }
+
+            // Not visual element to control mutual-exclusion of radiobuttons that are not sharing the same parent (inside list view)
+            ButtonGroup {
+                id: radioBtnGroup
+            }           
+        }// End of Content        
+    }// End of Rectangle picker
+}

src/StatusQ/Components/StatusMemberListItem.qml

@@ -0,0 +1,127 @@
+import QtQuick 2.0
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+/*!
+   \qmltype StatusMemberListItem
+   \inherits StatusListItem
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It is a list item with a specific format to display members of a community or chat. Inherits from  \c StatusListItem.
+
+   The \c StatusMemberListItem is a clickable / hovering list item with a specific format to display members of a community or chat.
+
+   It displays the member avatar, trust and mutual contact indicators, nick name, user name, chat key and information about the member connectivity.
+
+   Example of how the control looks like:
+   \image status_member_list_item.png
+
+   Example of how to use it:
+
+   \qml
+        StatusMemberListItem {
+            nickName: "carmen.eth"
+            isOnline: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+        }
+
+        StatusMemberListItem {
+            nickName: "This girl I know from work"
+            userName: "annabelle"
+            isOnline: true
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+StatusListItem {
+    id: root
+
+    /*!
+       \qmlproperty string StatusMemberListItem::nickName
+       This property holds the nick name of the member represented.
+    */
+    property string nickName: ""
+    /*!
+       \qmlproperty string StatusMemberListItem::userName
+       This property holds the user name of the member represented.
+    */
+    property string userName: ""
+    /*!
+       \qmlproperty string StatusMemberListItem::chatKey
+       This property holds the chat key of the member represented.
+    */
+    property string chatKey: ""
+    /*!
+       \qmlproperty string StatusMemberListItem::isMutualContact
+       This property holds if the member represented is a mutual contact.
+    */
+    property bool isMutualContact: false
+    /*!
+       \qmlproperty string StatusMemberListItem::trustIndicator
+       This property holds the trust indicator of the member represented. Possible values are:
+       \list
+       \li StatusContactVerificationIcons.TrustedType.None
+       \li StatusContactVerificationIcons.TrustedType.Verified
+       \li StatusContactVerificationIcons.TrustedType.Untrustworthy
+       \endlist
+    */
+    property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
+    /*!
+       \qmlproperty string StatusMemberListItem::isOnline
+       This property holds the connectivity status of the member represented.
+    */
+    property bool isOnline: false
+
+    QtObject {
+        id: d
+
+        // Subtitle composition:
+        function composeSubtitile() {
+            var compose = ""
+            if(root.userName !== "" && root.nickName !== "")
+                compose = "(" + root.userName + ")"
+
+            if(compose !== "" && root.chatKey !== "")
+                // Composition
+                compose += " • " + composeShortKeyChat(root.chatKey)
+
+            else if(root.chatKey !== "")
+                compose = composeShortKeyChat(root.chatKey)
+
+            return compose
+        }
+
+        // Short keychat composition:
+        function composeShortKeyChat(chatKey) {
+            return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
+        }
+    }
+
+    // root object settings:
+    title: (root.nickName === "") ? root.userName : root.nickName
+    statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
+        isMutualContact: root.isMutualContact
+        trustIndicator: root.trustIndicator
+    }
+    subTitle: d.composeSubtitile()
+    statusListItemSubTitle.font.pixelSize: 10
+    icon.isLetterIdenticon: !root.image.source.toString()
+    statusListItemIcon.badge.visible: true
+    statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
+
+    // Default sizes / positions by design
+    implicitWidth: 256
+    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
+    leftPadding: 8
+    image.width: 32
+    image.height: 32
+    icon.width: 32
+    icon.height: 32
+    statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
+    statusListItemIcon.anchors.top: undefined
+    statusListItemIcon.badge.border.width: 2
+    statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
+}

src/StatusQ/Components/StatusMessage.qml

@@ -0,0 +1,200 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import "./private/statusMessage"
+
+Rectangle {
+    id: statusMessage
+
+    enum ContentType {
+        Unknown = 0,
+        Text = 1,
+        Emoji = 2,
+        Image = 3,
+        Sticker = 4,
+        Audio = 5,
+        Transaction = 6,
+        Invitation = 7
+    }
+
+    property alias messageHeader: messageHeader
+    property alias quickActions:quickActionsPanel.quickActions
+    property alias statusChatInput: editComponent.inputComponent
+    property alias linksComponent: linksLoader.sourceComponent
+    property alias footerComponent: footer.sourceComponent
+    property alias timestamp: messageHeader.timestamp
+
+    property string resendText: ""
+    property string cancelButtonText: ""
+    property string saveButtonText: ""
+    property string loadingImageText: ""
+    property string errorLoadingImageText: ""
+    property string audioMessageInfoText: ""
+    property string pinnedMsgInfoText: ""
+
+    property bool isAppWindowActive: false
+    property bool editMode: false
+    property bool isAReply: false
+    property StatusMessageDetails messageDetails: StatusMessageDetails {}
+    property StatusMessageDetails replyDetails: StatusMessageDetails {}
+
+    signal profilePictureClicked()
+    signal senderNameClicked()
+    signal editCompleted(var newMsgText)
+    signal replyProfileClicked()
+    signal stickerLoaded()
+    signal imageClicked(var imageSource)
+    signal resendClicked()
+
+    height: childrenRect.height
+    color: hoverHandler.hovered ? (messageDetails.hasMention ? Theme.palette.mentionColor3 : messageDetails.isPinned ? Theme.palette.pinColor2 :  Theme.palette.baseColor2) : messageDetails.hasMention  ? Theme.palette.mentionColor4 : messageDetails.isPinned ? Theme.palette.pinColor3 : "transparent"
+
+    HoverHandler {
+        id: hoverHandler
+    }
+
+    ColumnLayout {
+        id: messageLayout
+        width: parent.width
+        StatusMessageReply {
+            Layout.fillWidth: true
+            visible: isAReply
+            replyDetails: statusMessage.replyDetails
+            onReplyProfileClicked: statusMessage.replyProfileClicked()
+            audioMessageInfoText: statusMessage.audioMessageInfoText
+        }
+        RowLayout {
+            spacing: 8
+            Layout.fillWidth: true
+            StatusSmartIdenticon {
+                id: profileImage
+                Layout.alignment: Qt.AlignTop
+                Layout.topMargin: 10
+                Layout.leftMargin: 16
+                image: messageDetails.profileImage
+                name: messageHeader.displayName
+                MouseArea {
+                    cursorShape: Qt.PointingHandCursor
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    anchors.fill: parent
+                    onClicked: statusMessage.profilePictureClicked()
+                }
+            }
+            Column {
+                spacing: 4
+                Layout.alignment: Qt.AlignTop
+                Layout.topMargin: 10
+                Layout.fillWidth: true
+                StatusPinMessageDetails {
+                    visible: messageDetails.isPinned && !editMode
+                    pinnedMsgInfoText: statusMessage.pinnedMsgInfoText
+                    pinnedBy: messageDetails.pinnedBy
+                }
+                StatusMessageHeader {
+                    id: messageHeader
+                    width: parent.width
+                    displayName: messageDetails.displayName
+                    secondaryName: messageDetails.secondaryName
+                    tertiaryDetail: messageDetails.chatID
+                    isMutualContact: messageDetails.isMutualContact
+                    trustIndicator: messageDetails.trustIndicator
+                    resendText: statusMessage.resendText
+                    showResendButton: messageDetails.hasExpired && messageDetails.amISender
+                    onClicked: statusMessage.senderNameClicked()
+                    onResendClicked: statusMessage.resendClicked()
+                    visible: !editMode
+                }
+                Loader {
+                    active: !editMode && !!messageDetails.messageText
+                    width: parent.width
+                    visible: active
+                    sourceComponent: StatusTextMessage {
+                        width: parent.width
+                        textField.text: messageDetails.messageText
+                    }
+                }
+                Loader {
+                    active: messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
+                    visible: active
+                    sourceComponent: StatusImageMessage {
+                        source: messageDetails.contentType === StatusMessage.ContentType.Image ? messageDetails.messageContent : ""
+                        onClicked: statusMessage.imageClicked()
+                        shapeType: messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
+                    }
+                }
+                StatusSticker {
+                    visible: messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
+                    image.source: messageDetails.messageContent
+                    onLoaded: statusMessage.stickerLoaded()
+                }
+                Loader {
+                    active: messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
+                    visible: active
+                    sourceComponent: StatusAudioMessage {
+                        audioSource: messageDetails.messageContent
+                        hovered: hoverHandler.hovered
+                        audioMessageInfoText: statusMessage.audioMessageInfoText
+                    }
+                }
+                Loader {
+                    id: linksLoader
+                    active: !!linksLoader.sourceComponent
+                    visible: active
+                }
+                Loader {
+                    id: transactionBubbleLoader
+                    active: messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
+                    visible: active
+                }
+                Loader {
+                    id: invitationBubbleLoader
+                    active: messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
+                    visible: active
+                }
+                StatusEditMessage {
+                    id: editComponent
+                    width: parent.width
+                    msgText: messageDetails.messageText
+                    visible: editMode
+                    saveButtonText: statusMessage.saveButtonText
+                    cancelButtonText: statusMessage.cancelButtonText
+                    onCancelEditClicked: editMode = false
+                    onEditCompleted: {
+                        editMode = false
+                        statusMessage.editCompleted(newMsgText)
+                    }
+                }
+                StatusBaseText {
+                    id: retryLbl
+                    color: Theme.palette.dangerColor1
+                    text: statusMessage.resendText
+                    font.pixelSize: 12
+                    visible: messageDetails.hasExpired && messageDetails.amISender && !messageDetails.timestamp && !editMode
+                    MouseArea {
+                        cursorShape: Qt.PointingHandCursor
+                        anchors.fill: parent
+                        onClicked: statusMessage.resendClicked()
+                    }
+                }
+                Loader {
+                    id: footer
+                    active: sourceComponent && !editMode
+                    visible: active
+                }
+            }
+        }
+    }
+
+    StatusMessageQuickActions {
+        id: quickActionsPanel
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        anchors.top: parent.top
+        anchors.topMargin: -8
+        visible: hoverHandler.hovered && !editMode
+    }
+}