fix(StatusSwitch): Removed running property on transition animation

closes: #725

.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,60 @@
+<a name=""></a>
+##  0.25.0 (2022-03-07)
+
+
+#### Bug Fixes
+
+* **@StatusListItem:**  fix left padding ([f574e390](f574e390))
+* **StatusListItem:**  add propagateTitleClicks property to StatusListItem ([8495fae8](8495fae8))
+* **StatusQ.Popups:**  removed overlay setting (#557) ([665141f8](665141f8))
+* **StatusTagSelector:**  Updates and fixes in the component ([07a5dc09](07a5dc09))
+* **build:**  fix linux build ([9d06aae1](9d06aae1), closes [#413](413))
+* **sandbox:**  Fix results popup component position ([cdf51fef](cdf51fef))
+
+#### Features
+
+* **@StatusListItem:**  add option for tags ([381150a7](381150a7))
+* **StatusChatList:**  Highlight chat item at creation time ([9e6fbe95](9e6fbe95))
+* **StatusChatListItem:**  enable assigning emoji to chat item ([5fac8774](5fac8774))
+* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
+* **StatusQ:**  Moving docs outside sandbox ([825999b1](825999b1))
+* **StatusQ.Core:**  add new arrow-left icon ([e9f20be1](e9f20be1))
+* **StatusSmartIdenticon:**  Add support for color rings in StatusSmartIdenticon (#553) ([3b86d13a](3b86d13a), closes [#517](517))
+
+#### Breaking Changes
+
+* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
+
+
+
+<a name=""></a>
+##  0.24.0 (2022-02-14)
+
+
+#### Features
+
+* **StatusListItem:**  add highlighted property ([5780f183](5780f183))
+* **StatusQ.Components:**  Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
+
+
+
+<a name=""></a>
+##  Version 0.23.0 (2022-02-08)
+
+
+#### Bug Fixes
+
+*   Icon components had wrong color in sandbox app ([b632c712](b632c712), closes [#538](538))
+* **StatusChatList:**  unexisting property name for chat item fixed ([c2e07517](c2e07517))
+
+#### Features
+
+* **StatusQ.Components:**
+  *  Adding StatusToastMessage ([7b290ddd](7b290ddd), closes [#521](521))
+  *  Adding StatusTagSelector component ([094dee49](094dee49), closes [#526](526))
+
+
+
 <a name=""></a>
 ##  Version 0.22.0 (2022-01-31)
 

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

@@ -1,12 +1,16 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.14
 
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Platform 0.1
 
 import "demoapp"
+import "demoapp/data" 1.0
 
 Rectangle {
     id: demoApp
@@ -17,6 +21,32 @@ Rectangle {
 
     property string titleStyle: "osx"
 
+    QtObject {
+        id: appSectionType
+        readonly property int chat: 0
+        readonly property int community: 1
+        readonly property int communitiesPortal: 2
+        readonly property int wallet: 3
+        readonly property int browser: 3
+        readonly property int nodeManagement: 5
+        readonly property int profileSettings: 6
+        readonly property int apiDocumentation: 100
+        readonly property int demoApp: 101
+    }
+
+    function setActiveItem(sectionId) {
+        for (var i = 0; i < Models.demoAppSectionsModel.count; i++) {
+            let item = Models.demoAppSectionsModel.get(i)
+            if (item.sectionId !== sectionId)
+            {
+                Models.demoAppSectionsModel.setProperty(i, "active", false)
+                continue
+            }
+
+            Models.demoAppSectionsModel.setProperty(i, "active", true);
+        }
+    }
+
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
@@ -47,32 +77,79 @@ Rectangle {
 
             id: navBar
 
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                tooltip.text: "Chat"
-                checked: appView.sourceComponent == statusAppChatView
-                onClicked: {
-                    appView.sourceComponent = statusAppChatView
-                }
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: Models.demoAppSectionsModel
+
+            property bool communityAdded: false
+
+            onAboutToUpdateFilteredRegularModel: {
+                communityAdded = false
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Status Community"
-                    tooltipText: "Status Community"
-                }
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
             }
 
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                id: communityBtn
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
-                name: model.name
-                tooltip.text: model.tooltipText
-                icon.color: Theme.palette.miscColor6
-                icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                checked: appView.sourceComponent == statusAppCommunityView
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
                 onClicked: {
-                    appView.sourceComponent = statusAppCommunityView
+                    if(model.sectionType === appSectionType.chat)
+                    {
+                        appView.sourceComponent = statusAppChatView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.communitiesPortal)
+                    {
+                        appView.sourceComponent = statusCommunityPortalView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.profileSettings)
+                    {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                }
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                onClicked: {
+                    if(model.sectionType === appSectionType.community)
+                    {
+                        appView.sourceComponent = statusAppCommunityView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
                 }
 
                 popupMenu: StatusPopupMenu {
@@ -103,40 +180,7 @@ Rectangle {
                         type: StatusMenuItem.Type.Danger
                     }
                 }
-
             }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "bigger/browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "bigger/status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    id: profileNavButton
-                    icon.name: "bigger/settings"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-
-                    checked: appView.sourceComponent == statusAppProfileSettingsView
-                    onClicked: {
-                        appView.sourceComponent = statusAppProfileSettingsView
-                    }
-                }
-            ]
-
         }
 
         appView: Loader {
@@ -167,6 +211,11 @@ Rectangle {
         StatusAppProfileSettingsView { }
     }
 
+    Component {
+        id: statusCommunityPortalView
+        StatusAppCommunitiesPortalView { }
+    }
+
     DemoContactRequestsModal {
         id: demoContactRequestsModal
         anchors.centerIn: parent

sandbox/ThemeSwitch.qml

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

sandbox/controls/Buttons.qml

@@ -3,9 +3,10 @@ import QtQuick.Layouts 1.14
 import QtQuick.Dialogs 1.3
 
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
-
 Column {
     spacing: 10
     Grid {
@@ -173,6 +174,25 @@ Column {
             loading: true
         }
 
+        // transparent
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            loading: true
+        }
+
         // Rounded blue
 
         StatusFlatRoundButton {
@@ -307,12 +327,20 @@ Column {
         onClicked: {
             colorDialog.open();
         }
-        ColorDialog {
-            id: colorDialog
-            property bool colorSelected: false
-            onAccepted: {
-                colorSelected = true;
-            }
+    }
+
+    StatusColorDialog {
+        id: colorDialog
+        anchors.centerIn: parent
+        property bool colorSelected: false
+        onAccepted: {
+            colorSelected = true;
         }
     }
+
+    // Button with emoji
+    StatusButton {
+        text: "Button with Emoji"
+        icon.emoji: "🖼️️"
+    }
 }

sandbox/controls/Controls.qml

@@ -189,6 +189,16 @@ GridLayout {
         value: 40
     }
 
+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
+    }
+
+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
+    }
+
     StatusBanner {
         id: banner
         width: 360
@@ -198,7 +208,7 @@ GridLayout {
     }
 
     StatusProgressBar {
-        id: progressBar        
+        id: progressBar
         text: "Weak"
         value: 0.5
         fillColor : Theme.palette.pinColor1

sandbox/controls/Layout.qml

@@ -7,33 +7,99 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Popups 0.1
 
 Column {
-    spacing: 5
+    spacing: 10
 
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        toolbarComponent: chatInfoButton1
+        width: 518
+
+        Component {
+            id: chatInfoButton1
+
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.OneToOneChat
+             }
+        }
     }
 
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
-        chatInfoButton.pinnedMessagesCount: 1
-        chatInfoButton.muted: true
+        toolbarComponent: chatInfoButton2
+        width: 518
+
+        Component {
+            id: chatInfoButton2
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.PublicChat
+                pinnedMessagesCount: 1
+                muted: true
+             }
+        }
     }
 
+
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-        chatInfoButton.pinnedMessagesCount: 1
         notificationCount: 1
+        toolbarComponent: chatInfoButton3
+        width: 518
+
+        Component {
+            id: chatInfoButton3
+
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.OneToOneChat
+                pinnedMessagesCount: 1
+             }
+        }
+    }
+
+    StatusChatToolBar {
+        notificationCount: 1
+        toolbarComponent: tagSelector
+        width: 518
+
+        Component {
+            id: tagSelector
+
+            StatusTagSelector {
+                namesModel: ListModel {
+                    ListElement {
+                        publicId: "0x0"
+                        name: "Maria"
+                        icon: ""
+                        isIdenticon: false
+                        onlineStatus: 3
+                        isReadonly: true
+                        tagIcon: "crown"
+                    }
+                    ListElement {
+                        publicId: "0x1"
+                        name: "James"
+                        icon: ""
+                        isIdenticon: false
+                        onlineStatus: 1
+                        isReadonly: false
+                        tagIcon: ""
+                    }
+                }
+                toLabelText: qsTr("To: ")
+                warningText: qsTr("USER LIMIT REACHED")
+            }
+        }
     }
 
     Row {
@@ -49,247 +115,394 @@ Column {
             }
         }
 
-        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"
-            }
+        QtObject {
+            id: appSectionType
+            readonly property int chat: 0
+            readonly property int community: 1
+            readonly property int wallet: 2
+            readonly property int browser: 3
+            readonly property int nodeManagement: 4
+            readonly property int profileSettings: 5
         }
 
         StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
+
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                id: buttons
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            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
             }
-
-            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
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-                tooltip.text: "Chat"
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
-            }
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
 
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
+                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 {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-                tooltip.text: "Chat"
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
+                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}
             }
 
-            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
+            property bool communityAdded: false
 
-                    tooltip.text: "Profile"
+            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 {
-            id: test
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
+                ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
+                ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
+                ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-                tooltip.text: "Chat"
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                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
+            communityNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
-            }
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
 
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
+                popupMenu: StatusPopupMenu {
 
-                    tooltip.text: "Profile"
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-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"
@@ -349,34 +394,84 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     StatusMemberListItem {
         nickName: "This is an example"
         userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        trustIndicator: StatusMemberListItem.TrustedType.Verified
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isVerified: true
+        isContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        isOnline: true
+        status: 1 // FIXME: use enum
+        ringSettings.ringSpecModel:
+            ListModel {
+                ListElement {colorId: 13; segmentLength: 5}
+                ListElement {colorId: 31; segmentLength: 5}
+                ListElement {colorId: 10; segmentLength: 1}
+                ListElement {colorId: 2; segmentLength: 5}
+                ListElement {colorId: 26; segmentLength: 2}
+                ListElement {colorId: 19; segmentLength: 4}
+                ListElement {colorId: 28; segmentLength: 3}
+            }
+        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
     }
 
     StatusMemberListItem {
         nickName: "carmen.eth"
-        isOnline: false
-        trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+        isUntrustworthy: true
+    }
+
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isUntrustworthy: true
     }
 
     StatusMemberListItem {
         nickName: "This girl I know from work"
         userName: "annabelle"
-        isOnline: true        
+        status: 1 // FIXME: use enum
     }
 
     StatusMemberListItem {
         nickName: "Mark Cuban"
         userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                        nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
     }
+
+    StatusMemberListItem {
+        nickName: "admin.guy"
+        isAdmin: true
+        isUntrustworthy: true
+    }
+
+    StatusBaseText {
+        Layout.fillWidth: true
+        Layout.topMargin: 16
+        text: "Loading features:"
+        font.pixelSize: 17
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Incoming device"
+        label: "loading: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loading: true
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Device"
+        label: "loadingFailed: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loadingFailed: true
+    }
 }

sandbox/controls/Others.qml

@@ -4,38 +4,58 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+ColumnLayout {
+    GridLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
 
-    StatusLoadingIndicator {
-        color: Theme.palette.directColor4
+        columns: 6
+        columnSpacing: 5
+        rowSpacing: 5
+
+        StatusLoadingIndicator {
+            color: Theme.palette.directColor4
+        }
+
+        StatusLetterIdenticon {
+            name: "#status"
+        }
+
+        StatusRoundedImage {
+            image.source: "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"
+        }
     }
 
-    StatusLetterIdenticon {
-        name: "#status"
-    }
+    Flow {
+        Layout.fillWidth: true
+        spacing: 4
 
-    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"
+        Repeater {
+            model: 12
+            StatusLetterIdenticon {
+                name: "A"
+                color: Theme.palette.userCustomizationColors[index]
+                letterSize: 16
+            }
+        }
     }
 }
+

sandbox/controls/Popups.qml

@@ -4,6 +4,9 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core.Utils 0.1
 
 Column {
     spacing: 20
@@ -78,6 +81,17 @@ Column {
         onClicked: editTitleModal.open()
     }
 
+    StatusButton {
+        text: "Modal with Advanced Header/Footer"
+        onClicked: advancedHeaderFooterModal.open()
+    }
+
+
+    StatusButton {
+        text: "Modal with Floating header Buttons"
+        onClicked: floatingHeaderModal.open()
+    }
+
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -353,10 +367,93 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         header.editable: true
     }
 
+    StatusModal {
+        id: advancedHeaderFooterModal
+        anchors.centerIn: parent
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        showAdvancedFooter: true
+        height: 200
+        advancedHeaderComponent: Rectangle {
+            width: parent.width
+            height: 50
+            color: Theme.palette.baseColor1
+            border.width: 1
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: "Add any header here"
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+        }
+        advancedFooterComponent: Rectangle {
+            width: parent.width
+            height: 50
+            color: Theme.palette.baseColor1
+            border.width: 1
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: "Add any footer here"
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+        }
+    }
+
+    StatusModal {
+        id: floatingHeaderModal
+        anchors.centerIn: parent
+        height: 200
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        hasFloatingButtons: true
+        advancedHeaderComponent: StatusFloatingButtonsSelector {
+            id: floatingHeader
+            model: dummyAccountsModel
+            delegate: Rectangle {
+                width: button.width
+                height: button.height
+                radius: 8
+                visible: visibleIndices.includes(index)
+                StatusButton {
+                    id: button
+                    topPadding: 8
+                    bottomPadding: 0
+                    implicitHeight: 32
+                    defaultLeftPadding: 4
+                    text: name
+                    icon.emoji: !!emoji ? emoji: ""
+                    icon.emojiSize: Emoji.size.middle
+                    icon.name: !emoji ? "filled-account": ""
+                    normalColor: "transparent"
+                    highlighted: index === floatingHeader.currentIndex
+                    onClicked: {
+                        floatingHeader.currentIndex = index
+                    }
+                }
+            }
+            popupMenuDelegate: StatusListItem {
+                implicitWidth: 272
+                title: name
+                onClicked: floatingHeader.itemSelected(index)
+                visible: !visibleIndices.includes(index)
+            }
+        }
+    }
+
     ListModel {
         id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
         ListElement{name: "Account 2"; iconName: "filled-account"}
+        ListElement{name: "Account 3"; iconName: "filled-account"}
+        ListElement{name: "Account 4"; iconName: "filled-account"}
+        ListElement{name: "Account 5"; iconName: "filled-account"}
+        ListElement{name: "Account 6"; iconName: "filled-account"}
+        ListElement{name: "Account 7"; iconName: "filled-account"}
     }
 
     StatusSpellcheckingMenuItems {

sandbox/demoapp/ChatChannelView.qml

@@ -0,0 +1,104 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQml.Models 2.2
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ListView {
+    id: messageList
+    anchors.fill: parent
+    anchors.margins: 15
+    clip: true
+    delegate: StatusMessage {
+        id: delegate
+        width: parent.width
+
+        audioMessageInfoText: "Audio Message"
+        cancelButtonText: "Cancel"
+        saveButtonText: "Save"
+        loadingImageText: "Loading image..."
+        errorLoadingImageText: "Error loading the image"
+        resendText: "Resend"
+        pinnedMsgInfoText: "Pinned by"
+
+        messageDetails: StatusMessageDetails {
+            contentType: model.contentType
+            messageContent: model.messageContent
+            amISender: model.amIsender
+            displayName: model.userName
+            secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
+            chatID: model.chatKey
+            profileImage: StatusImageSettings {
+                width: 40
+                height: 40
+                source: model.profileImage
+                isIdenticon: model.isIdenticon
+            }
+            messageText: model.message
+            hasMention: model.hasMention
+            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,104 @@
+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).pubKey === pubKey) {
+                            index = i;
+                        }
+                    }
+                    return contactsModel.get(index).ringSpecModel;
+                } else {
+                    return null;
+                }
+            }
+            compressedKeyGetter: function(pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.getCompressedPk(pubKey);
+                var possibleCharacters = pubKey.split('');
+                var randomStringLength = 12; // assuming you want random strings of 12 characters
+                var randomString = [];
+                for (var i=0; i<randomStringLength; ++i) {
+                    var index = (Math.random() * possibleCharacters.length).toFixed(0);
+                    var nextChar = possibleCharacters[index];
+                    randomString.push(nextChar);
+                }
+                return randomString.join().toString().replace(/,/g, '');
+            }
+            colorIdForPubkeyGetter: function (pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.colorIdForPubkey(pubKey);
+                return Math.floor(Math.random() * 10);
+            }
+            onTextChanged: {
+                sortModel(root.contactsModel);
+            }
+            Component.onCompleted: {
+                textEdit.forceActiveFocus();
+                sortModel(root.contactsModel);
+            }
+        }
+
+        StatusButton {
+            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/StatusAppChatView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.12
+import QtQuick.Layouts 1.12
 
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
@@ -11,6 +12,7 @@ import "data" 1.0
 
 StatusAppThreePanelLayout {
     id: root
+    property bool createChat: false
 
     leftPanel: Item {
         anchors.fill: parent
@@ -23,113 +25,33 @@ StatusAppThreePanelLayout {
             text: "Chat"
         }
 
-        Item {
+        RowLayout {
             id: searchInputWrapper
+            width: 288
+            height: searchInput.height
             anchors.top: headline.bottom
             anchors.topMargin: 16
-            width: parent.width
-            height: searchInput.height
+            anchors.horizontalCenter: parent.horizontalCenter
 
             StatusBaseInput {
                 id: searchInput
-
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.right: actionButton.left
-                anchors.leftMargin: 16
-                anchors.rightMargin: 16
-
-                height: 36
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                implicitHeight: 36
                 topPadding: 8
-                bottomPadding: 0
+                bottomPadding: 8
                 placeholderText: "Search"
                 icon.name: "search"
             }
 
-            StatusRoundButton {
-                id: actionButton
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: 8
-                width: 32
-                height: 32
+            StatusIconTabButton {
+                icon.name: "public-chat"
+            }
 
-                type: StatusRoundButton.Type.Secondary
-                icon.name: "add"
-                state: "default"
-
-                onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
-                states: [
-                    State {
-                        name: "default"
-                        PropertyChanges {
-                            target: actionButton
-                            icon.rotation: 0
-                            highlighted: false
-                        }
-                    },
-                    State {
-                        name: "pressed"
-                        PropertyChanges {
-                            target: actionButton
-                            icon.rotation: 45
-                            highlighted: true
-                        }
-                    }
-                ]
-
-                transitions: [
-                    Transition {
-                        from: "default"
-                        to: "pressed"
-
-                        RotationAnimation {
-                            duration: 150
-                            direction: RotationAnimation.Clockwise
-                            easing.type: Easing.InCubic
-                        }
-                    },
-                    Transition {
-                        from: "pressed"
-                        to: "default"
-                        RotationAnimation {
-                            duration: 150
-                            direction: RotationAnimation.Counterclockwise
-                            easing.type: Easing.OutCubic
-                        }
-                    }
-                ]
-
-                StatusPopupMenu {
-                    id: chatContextMenu
-
-                    onOpened: {
-                        actionButton.state = "pressed"
-                    }
-
-                    onClosed: {
-                        actionButton.state = "default"
-                    }
-
-                    StatusMenuItem {
-                        text: "Start new chat"
-                        icon.name: "private-chat"
-                    }
-
-                    StatusMenuItem {
-                        text: "Start group chat"
-                        icon.name: "group-chat"
-                    }
-
-                    StatusMenuItem {
-                        text: "Join public chat"
-                        icon.name: "public-chat"
-                    }
-
-                    StatusMenuItem {
-                        text: "Communities"
-                        icon.name: "communities"
-                    }
+            StatusIconTabButton {
+                icon.name: "edit"
+                onClicked: {
+                    root.createChat = !root.createChat;
                 }
             }
         }
@@ -137,7 +59,7 @@ StatusAppThreePanelLayout {
         Column {
             anchors.top: searchInputWrapper.bottom
             anchors.topMargin: 16
-            width: parent.width
+            anchors.horizontalCenter: parent.horizontalCenter
             spacing: 8
 
             StatusContactRequestsIndicatorListItem {
@@ -148,11 +70,8 @@ StatusAppThreePanelLayout {
             }
 
             StatusChatList {
-                anchors.horizontalCenter: parent.horizontalCenter
-
-                chatListItems.model: Models.demoChatListItems
-                selectedChatId: "0"
-                onChatItemSelected: selectedChatId = id
+                model: Models.demoChatListItems
+                highlightItem: !root.createChat
                 onChatItemUnmuted: {
                     for (var i = 0; i < Models.demoChatListItems.count; i++) {
                         let item = Models.demoChatListItems.get(i);
@@ -204,19 +123,30 @@ StatusAppThreePanelLayout {
         }
     }
 
+    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
-
+            toolbarComponent: statusChatInfoButton
             searchButton.visible: false
             membersButton.visible: false
             notificationCount: 1
@@ -249,100 +179,19 @@ StatusAppThreePanelLayout {
                     type: StatusMenuItem.Type.Danger
                 }
             }
-        }
-    }
 
-    centerPanel: ListView {
-        id: messageList
-        anchors.fill: parent
-        anchors.margins: 15
-        clip: true
-        model: Models.chatMessagesModel
-        delegate: StatusMessage {
-            id: delegate
-            width: parent.width
+            Component {
+                id: statusChatInfoButton
 
-            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
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "Amazing Funny Squirrel"
+                   subTitle: "Contact"
+                   icon.color: Theme.palette.miscColor7
+                   type: StatusChatInfoButton.Type.OneToOneChat
+                   pinnedMessagesCount: 1
                 }
-                messageText: model.message
-                hasMention: model.hasMention
-                contactType: model.contactType
-                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/StatusAppCommunitiesPortalView.qml

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

sandbox/demoapp/StatusAppCommunityView.qml

@@ -77,11 +77,9 @@ StatusAppThreePanelLayout {
 
                 draggableItems: true
                 draggableCategories: false
-                chatList.model: Models.demoCommunityChatListItems
-                categoryList.model: Models.demoCommunityCategoryItems
+                model: Models.demoCommunityChatListItems
 
                 showCategoryActionButtons: true
-                onChatItemSelected: selectedChatId = id
 
                 categoryPopupMenu: StatusPopupMenu {
 
@@ -168,13 +166,10 @@ StatusAppThreePanelLayout {
     centerPanel: Item {
         StatusChatToolBar {
             id: statusChatToolBar
-            anchors.top: parent.top
-            width: parent.width
 
-            chatInfoButton.title: "general"
-            chatInfoButton.subTitle: "Community Chat"
-            chatInfoButton.icon.color: Theme.palette.miscColor6
-            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+
             onSearchButtonClicked: {
                 searchButton.highlighted = !searchButton.highlighted;
                 searchPopup.setSearchSelection(communityDetailModalTitle,
@@ -186,6 +181,18 @@ StatusAppThreePanelLayout {
             onMembersButtonClicked: {
                 root.showRightPanel = !root.showRightPanel;
             }
+
+            Component {
+                id: statusChatInfoButton
+
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "general"
+                   subTitle: "Community Chat"
+                   icon.color: Theme.palette.miscColor6
+                   type: StatusChatInfoButton.Type.CommunityChat
+                }
+            }
         }
 
         StatusSearchPopup {
@@ -260,14 +267,15 @@ StatusAppThreePanelLayout {
             model: Models.membersListModel
             delegate: StatusMemberListItem {
                 implicitWidth: parent.width
-                nickName: model.nickName
-                userName: model.userName
-                chatKey: model.chatKey
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
-                image.source: model.source
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.isOnline
+                nickName: model.localNickname
+                userName: model.displayName
+                pubKey: model.pubKey
+                isVerified: model.isVerified
+                isUntrustworthy: model.isUntrustworthy
+                isContact: model.isContact
+                image.source: model.icon
+                image.isIdenticon: false
+                status: model.onlineStatus
             }
         }
     }

sandbox/main.cpp

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

sandbox/main.qml

@@ -2,6 +2,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
             }
         }
     }
@@ -103,11 +123,13 @@ StatusWindow {
         StatusAppTwoPanelLayout {
             id: mainPageView
 
-            function page(name) {
+            function page(name, fillPage) {
+                storeSettings.fillPage = fillPage ? true : false
                 viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
             }
             function control(name) {
                 viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
+                storeSettings.fillPage = false
             }
 
             leftPanel: Item {
@@ -127,76 +149,81 @@ StatusWindow {
                         spacing: 0
 
                         StatusListSectionHeadline { text: "StatusQ.Core" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Icons"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Layouts"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title.substring(0, title.length - 1));
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Buttons"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusSwitchTab"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page("StatusTabSwitch");
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusChatCommandButton"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Controls"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusTabBarButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusNavigationListItem { 
                             title: "StatusTabBarIconButton"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusInput"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusSelect"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusAccountSelector"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusAssetSelector"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusColorSelector"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusWalletColorButton"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusWalletColorSelect"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
@@ -206,23 +233,28 @@ StatusWindow {
                             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 { 
+                        StatusNavigationListItem {
                             title: "StatusAddress"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "List Items"
                             selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
                             onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusChatInfoToolBar"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Others"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
@@ -232,24 +264,73 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page("StatusExpandableSettingsItem");
                         }
+                        StatusNavigationListItem {
+                            title: "StatusTagSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusToastMessage"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusWizardStepper"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusListPicker"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusCommunityCard"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusCommunityTags"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusPopupMenu"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-
                         StatusNavigationListItem {
                             title: "StatusModal"
                             selected: viewLoader.source.toString().includes("Popups")
                             onClicked: mainPageView.control("Popups");
                         }
+                        StatusNavigationListItem {
+                            title: "StatusDialog"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Platform" }
                         StatusNavigationListItem {
                             title: "StatusMacNotification"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusColorSelectorGrid"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusImageCropPanel"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title, true);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusColorSpace"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title, true);
+                        }
                     }
                 }
             }
@@ -257,8 +338,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
@@ -267,14 +351,16 @@ StatusWindow {
                         id: pageWrapper
                         width: rightPanel.width
                         anchors.top: parent.top
-                        anchors.topMargin: 64
                         height: Math.max(rootWindow.height, viewLoader.height + 128)
                         scale: rootWindow.factor
+
                         Loader {
                             id: viewLoader
+                            active: !storeSettings.fillPage
                             anchors.centerIn: parent
-                            source: mainPageView.control("Icons")
+                            source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
                             onSourceChanged: {
+                                storeSettings.selected = viewLoader.source
                                 if (source.toString().includes("Icons")) {
                                     item.iconColor = Theme.palette.primaryColor1;
                                 }
@@ -282,6 +368,15 @@ StatusWindow {
                         }
                     }
                 }
+                Loader {
+                    active: storeSettings.fillPage
+                    anchors.fill: parent
+                    anchors.topMargin: 64
+                    visible: storeSettings.fillPage
+                    clip: true
+
+                    source: viewLoader.source
+                }
             }
         }
     }
@@ -347,8 +442,7 @@ StatusWindow {
             }
             DemoApp {
                 id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
             }
             DropShadow {
                 anchors.fill: demoApp
@@ -400,4 +494,11 @@ StatusWindow {
             rootWindow.toggleFullScreen()
         }
     }
+
+    Settings {
+        id: storeSettings
+        property string selected: ""
+        property bool lightTheme: true
+        property bool fillPage: false
+    }
 }

sandbox/pages/StatusColorSelectorGridPage.qml

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

sandbox/pages/StatusColorSpacePage.qml

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

sandbox/pages/StatusCommunityCardPage.qml

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

sandbox/pages/StatusCommunityTagsPage.qml

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

sandbox/pages/StatusDialogPage.qml

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

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/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,66 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    property ListModel asortedContacts: ListModel {
+        ListElement {
+            publicId: "0x0"
+            name: "emily.eth"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+            isReadonly: false
+            tagIcon: ""
+        }
+        ListElement {
+            publicId: "0x1"
+            name: "vitalikbuterin"
+            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            isIdenticon: false
+            onlineStatus: 1
+            isReadonly: false
+            tagIcon: ""
+        }
+        ListElement {
+            publicId: "0x2"
+            name: "Paul"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 2
+            isReadonly: false
+            tagIcon: ""
+        }
+        ListElement {
+            publicId: "0x3"
+            name: "carmen.eth"
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: true
+            onlineStatus: 3
+            isReadonly: true
+            tagIcon: "crown"
+        }
+        ListElement {
+            publicId: "0x4"
+            name: "Nick"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+            isReadonly: false
+            tagIcon: ""
+        }
+    }
+
+    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,44 @@
+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)
+                }
+                onClicked: {
+                    console.warn("toast clicked")
+                }
+            }
+        }
+    }
+}

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

@@ -16,7 +16,7 @@
         <file>pages/StatusTabSwitchPage.qml</file>
         <file>pages/StatusWalletColorButtonPage.qml</file>
         <file>pages/StatusWalletColorSelectPage.qml</file>
-		<file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
         <file>controls/Buttons.qml</file>
         <file>controls/Controls.qml</file>
         <file>controls/Icons.qml</file>
@@ -24,6 +24,8 @@
         <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>
@@ -31,5 +33,40 @@
         <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>ThemeSwitch.qml</file>
+        <file>pages/StatusColorSelectorGridPage.qml</file>
+        <file>pages/StatusListPickerPage.qml</file>
+        <file>pages/StatusPinInputPage.qml</file>
+        <file>pages/StatusTagSelectorPage.qml</file>
+        <file>pages/StatusToastMessagePage.qml</file>
+        <file>pages/StatusWizardStepperPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
+        <file>pages/StatusColorSpacePage.qml</file>
+        <file>images/CryptoKitties.png</file>
+        <file>images/CryptoPunks.png</file>
+        <file>images/Dragonerum.png</file>
+        <file>images/FriendsBenefits.png</file>
+        <file>images/logo-test-image.png</file>
+        <file>images/P2PCrypto.png</file>
+        <file>images/SNT.png</file>
+        <file>images/Socks.png</file>
+        <file>images/StatusPunks.png</file>
+        <file>images/CommunityBanner1.png</file>
+        <file>images/Coinbase.png</file>
+        <file>images/CoinBaseCommunityBanner.png</file>
+        <file>images/DribbbleCommunityBanner.png</file>
+        <file>images/Ethereum.png</file>
+        <file>images/EthereumCommunityBanner.png</file>
+        <file>images/Fluff.png</file>
+        <file>images/Rarible.png</file>
+        <file>images/RaribleCommunityBanner.png</file>
+        <file>images/Spotify.png</file>
+        <file>images/SpotifyCommunityBanner.png</file>
+        <file>images/SR.png</file>
+        <file>images/SuperRareCommunityBanner.png</file>
+        <file>images/RARI.png</file>
+        <file>images/SRToken.png</file>
     </qresource>
-</RCC>
+</RCC>

sandbox/sandbox.pro

@@ -1,11 +1,13 @@
 QT += quick svg
 
 CONFIG += c++11 warn_on qtquickcompiler
+CONFIG += resources_big
 
 QML_IMPORT_PATH= $$PWD/../src
 
 DEFINES += QT_DEPRECATED_WARNINGS
 
+QMAKE_LFLAGS += $$(LDFLAGS)
 
 # You can make your code fail to compile if it uses deprecated APIs.
 # In order to do so, uncomment the following line.
@@ -15,7 +17,7 @@ SOURCES += \
         handler.cpp \
         main.cpp \
         sandboxapp.cpp \
-        spellchecker.cpp
+        spellchecker.cpp \
 
 !macx {
     SOURCES += statuswindow.cpp

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/Animations/SkeletonAnimation.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.14
+
+Item {
+    id: root
+
+    property Item mask
+    property color color: "#F6F8FA"
+
+    Rectangle {
+        id: gradient
+        anchors.fill: parent
+        visible: false
+
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+            SkeletonGradientStop { color: "transparent"; from: -3; }
+            SkeletonGradientStop { color: "transparent"; from: -2; }
+            SkeletonGradientStop { color: root.color; from: -1 ; }
+            SkeletonGradientStop { color: "transparent"; from: 0; }
+            SkeletonGradientStop { color: "transparent"; from: 1; }
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: gradient
+        maskSource: root.mask
+    }
+}

src/StatusQ/Animations/SkeletonGradientStop.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.14
+
+/*
+    TODO:   This component should be implemented as inline component of `SkeletonAnimation.qml`
+            when we use Qt > 5.15
+*/
+
+GradientStop {
+    id: root
+
+    property real from: 0
+
+    color: "transparent"
+
+    NumberAnimation on position {
+        easing.type: Easing.Linear
+        loops: Animation.Infinite
+        running: visible
+        from: root.from
+        to: from + 4
+        duration: 2000
+    }
+}

src/StatusQ/Animations/qmldir

@@ -0,0 +1,4 @@
+module StatusQ.Animations
+
+SkeletonAnimation 0.1 SkeletonAnimation.qml
+SkeletonGradientStop 0.1 SkeletonGradientStop.qml

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
@@ -75,6 +73,7 @@ Item {
                     duration: 150
                     direction: RotationAnimation.Clockwise
                     easing.type: Easing.InCubic
+                    running: visible
                 }
             },
             Transition {
@@ -84,6 +83,7 @@ Item {
 										duration: 150
 										direction: RotationAnimation.Counterclockwise
 										easing.type: Easing.OutCubic
+										running: visible
 								}
         		}
         ]
@@ -104,5 +104,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
@@ -74,16 +78,16 @@ Rectangle {
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
 
-        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 {
@@ -93,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 && !hoverHander.hovered && !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 ||
                         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;
@@ -132,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 && !hoverHander.hovered && !statusChatListItem.highlighted) {
+                if (root.muted && !hoverHander.hovered && !root.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.selected ||
-                        statusChatListItem.highlighted ||
+                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
         }
@@ -163,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
             }
         }
@@ -186,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

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

src/StatusQ/Components/StatusColorSpace.qml

@@ -0,0 +1,201 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+
+    property int thickness: width * 0.1
+    property real minSaturate: 0.0
+    property real minValue: 0.0
+    property real maxSaturate: 1.0
+    property real maxValue: 1.0
+    property color color: "red"
+    property color rootColor: Qt.hsva(color.hsvHue, 1, 1, 1)
+
+    function pickColorFromHueGauge(x, y) {
+        // Get angle of picked color
+        let theta = Math.atan2(y - hueGauge.height / 2, x - hueGauge.width / 2) * 0.5 / Math.PI;
+        if (theta < 0.0)
+            theta += 1.0;
+
+        // Convert angle value to color
+        return Qt.hsva(1 - theta, 1, 1, 1)
+    }
+
+    function pickColorFromSatValRect(x, y) {
+        // x for saturation, reversed y for value
+        let sat = mapFromRange(Math.min(Math.max(x, 0), satValRect.width),
+                               minSaturate, maxSaturate, satValRect.width);
+        let val = 1 - mapFromRange(Math.min(Math.max(y, 0), satValRect.height),
+                                   1 - maxValue, 1 - minValue, satValRect.height);
+        return Qt.hsva(rootColor.hsvHue, sat, val, 1);
+    }
+
+    function angleOnHueGauge(pickingColor) {
+        // color hue to angle
+        return (1 - pickingColor.hsvHue) * 2 * Math.PI;
+    }
+
+    // TODO: mapToRange & mapFromRange to helper js
+    function mapToRange(value, minValue, maxValue, range) {
+        return (value - minValue) / (maxValue - minValue) * range;
+    }
+
+    function mapFromRange(pos, minValue, maxValue, range) {
+        return pos / range * (maxValue - minValue) + minValue;
+    }
+
+    onColorChanged: {
+        // update root color if only we are not picking on satValRect
+        if (!d.pickingSatVal)
+            rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
+    }
+
+    implicitWidth: 340
+    implicitHeight: 340
+
+    QtObject {
+        id: d
+
+        property bool pickingSatVal: false
+    }
+
+    ConicalGradient {
+        id: hueGauge
+        anchors.fill: parent
+        angle: 90.0
+        gradient: Gradient {
+            GradientStop { position: 0.000; color: Qt.hsva(1.000, 1, 1, 1) }
+            GradientStop { position: 0.167; color: Qt.hsva(0.833, 1, 1, 1) }
+            GradientStop { position: 0.333; color: Qt.hsva(0.666, 1, 1, 1) }
+            GradientStop { position: 0.500; color: Qt.hsva(0.500, 1, 1, 1) }
+            GradientStop { position: 0.667; color: Qt.hsva(0.333, 1, 1, 1) }
+            GradientStop { position: 0.833; color: Qt.hsva(0.166, 1, 1, 1) }
+            GradientStop { position: 1.000; color: Qt.hsva(0.000, 1, 1, 1) }
+        }
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Item {
+                width: root.width
+                height: root.height
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Math.min(width, height) / 2
+                }
+            }
+        }
+
+        MouseArea {
+            id: hueArea
+
+            property bool pressedOnGauge: false
+
+            anchors.fill: parent
+            preventStealing: true
+            onPressed: {
+                // Check we clicked on gauge
+                let dist = Math.sqrt(Math.pow(width / 2 - mouseX, 2) +
+                                     Math.pow(height / 2 - mouseY, 2));
+                let radius = Math.min(width, height) / 2;
+                if (dist < radius - thickness || dist > radius)
+                    return;
+
+                pressedOnGauge = true;
+                pickRootColor();
+            }
+            onReleased: pressedOnGauge = false
+            onPositionChanged: if (pressedOnGauge) pickRootColor()
+
+            function pickRootColor() {
+                // Update both colors
+                rootColor = pickColorFromHueGauge(mouseX, mouseY);
+                color.hsvHue = rootColor.hsvHue;
+                color.hsvSaturation = Math.min(maxSaturate, Math.max(minSaturate, color.hsvSaturation));
+                color.hsvValue = Math.min(maxValue, Math.max(minValue, color.hsvValue));
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: root.thickness
+        radius: Math.min(width, height) / 2
+
+        color: Theme.palette.baseColor5
+
+        Rectangle {
+            id: satValRect
+            anchors.centerIn: parent
+            width: parent.width * 0.55
+            height: width
+            border.color: Theme.palette.baseColor3
+            gradient: Gradient {
+                orientation: Gradient.Horizontal
+                GradientStop { position: -minSaturate; color: "white" }
+                GradientStop { position: 2.0 - maxSaturate; color: rootColor }
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                gradient: Gradient {
+                    orientation: Gradient.Vertical
+                    GradientStop { position: maxValue - 1; color: "transparent" }
+                    GradientStop { position: 1.0 + minValue; color: "black" }
+                }
+            }
+
+            MouseArea {
+                id: satValArea
+                anchors.fill: parent
+                preventStealing: true
+                onPressed: {
+                    d.pickingSatVal = true;
+                    pickColor();
+                }
+                onReleased: d.pickingSatVal = false
+                onPositionChanged: pickColor()
+
+                function pickColor() {
+                    root.color = pickColorFromSatValRect(mouseX, mouseY);
+                }
+            }
+
+            Rectangle {
+                id: satValLens
+                x: mapToRange(root.color.hsvSaturation, minSaturate, maxSaturate,
+                              satValRect.width) - radius
+                y: mapToRange(1 - root.color.hsvValue, 1 - maxValue, 1 - minValue,
+                              satValRect.height) - radius
+                width: thickness * 1.3
+                height: width
+                radius: height / 2
+                border.width: 2
+                border.color: Theme.palette.baseColor3
+                color: root.color
+                visible: x + 1 >= -radius && x - 1 <= satValRect.width - radius &&
+                         y + 1 >= -radius && y - 1 <= satValRect.height - radius
+            }
+        }
+    }
+
+    Rectangle {
+        id: hueLens
+
+        property real theta: angleOnHueGauge(rootColor);
+        property real dist: (hueGauge.width - width) / 2 + thickness / 6;
+
+        anchors.centerIn: parent
+        anchors.horizontalCenterOffset: dist * Math.cos(theta);
+        anchors.verticalCenterOffset: dist * Math.sin(theta);
+        width: thickness * 1.3
+        height: width
+        radius: height / 2
+        border.width: 2
+        border.color: Theme.palette.baseColor3
+        color: rootColor
+    }
+}

src/StatusQ/Components/StatusCommunityCard.qml

@@ -0,0 +1,469 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+   \qmltype StatusCommunityCard
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It is a community card item that provides relevant information about a community model. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-rectangle.html}{Rectangle}.
+
+   The \c StatusCommunityCard is a community card clickable item that represents a data model. The data model is commonly a JavaScript array or a ListModel object.
+
+   Example of how the component looks like:
+   \image status_community_card.png
+   Example of how to use it:
+   \qml
+        StatusCommunityCard {
+            locale: "en"
+            communityId: model.communityId
+            loaded: model.available
+            logo: model.icon
+            name: model.name
+            description: model.description
+            members: model.members
+            popularity: model.popularity
+            categories:  model.categories
+
+            onClicked: { d.navigateToCommunity(communityId) }
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+Rectangle {
+    id: root
+
+    /*!
+       \qmlproperty string StatusCommunityCard::communityId
+       This property holds the community identifier value.
+    */
+    property string communityId: ""
+    /*!
+       \qmlproperty bool StatusCommunityCard::loaded
+       This property holds a boolean value that represents if the community information is loaded or not.
+    */
+    property bool loaded: true
+    /*!
+       \qmlproperty url StatusCommunityCard::logo
+       This property holds the community logo source.
+    */
+    property url logo: ""
+    /*!
+       \qmlproperty string StatusCommunityCard::name
+       This property holds the community name.
+    */
+    property string name: ""
+    /*!
+       \qmlproperty string StatusCommunityCard::description
+       This property holds the community description.
+    */
+    property string description: ""
+    /*!
+       \qmlproperty int StatusCommunityCard::members
+       This property holds the community members value.
+    */
+    property int members: 0
+    /*!
+       \qmlproperty int StatusCommunityCard::activeUsers
+       This property holds the community active users value.
+    */
+    property int activeUsers: 0
+    /*!
+       \qmlproperty int StatusCommunityCard::popularity
+       This property holds the community popularity (community rate).
+    */
+    property int popularity: 0
+    /*!
+       \qmlproperty string StatusCommunityCard::categories
+       This property holds the data that will be populated as the tags row of the community.
+
+       Here an example of the model roles expected:
+       \qml
+            categories: ListModel {
+                ListElement { name: "gaming"; emoji: "🎮"; selected: false}
+                ListElement { name: "art"; emoji: "🖼️️"; selected: false}
+                ListElement { name: "crypto"; emoji: "💸"; selected: false}
+                ListElement { name: "nsfw"; emoji: "🍆"; selected: false}
+                ListElement { name: "markets"; emoji: "💎"; selected: false}
+            }
+       \endqml
+    */
+    property ListModel categories: ListModel {}
+    /*!
+       \qmlproperty string StatusCommunityCard::locale
+       This property holds the application locale used to give format to members number representation.
+       If not provided, default value is "en".
+    */
+    property string locale: "en"
+    /*!
+       \qmlproperty url StatusCommunityCard::banner
+       This property holds the community banner image url.
+    */
+    property url banner: ""
+    /*!
+       \qmlproperty color StatusCommunityCard::communityColor
+       This property holds the community color.
+       If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF".
+    */
+    property color communityColor: Theme.palette.primaryColor1
+    /*!
+       \qmlproperty bool StatusCommunityCard::isPrivate
+       This property holds if the community is private.
+       If not provided, default value is false.
+    */
+    property bool isPrivate: false
+    /*!
+       \qmlproperty url StatusCommunityCard::tokenLogo
+       This property holds the image of the token needed if the community is private.
+    */
+    property url tokenLogo: ""
+
+    /*!
+        \qmlsignal StatusCommunityCard::clicked(string communityId)
+        This signal is emitted when the card item is clicked.
+    */
+    signal clicked(string communityId)
+
+    QtObject {
+        id: d
+        property int cardWidth: 335
+        property int bannerHeigth: 64
+        property int cardHeigth: 190
+        property int totalHeigth: 230
+        property int margins: 12
+        property int bannerRadius: 20
+        property int cardRadius: 16
+        property color cardColor: Theme.palette.indirectColor1
+        property color fontColor: Theme.palette.directColor1
+        property color loadingColor1: Theme.palette.baseColor5
+        property color loadingColor2: Theme.palette.baseColor4
+
+        function numberFormat(number) {
+            var res = number
+            const million = 1000000
+            const ks = 1000
+            if(number > million) {
+                res = number / million
+                res = Number(number / million).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'M'
+            }
+            else if(number > ks) {
+                res = number / ks
+                res = Number(number / ks).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'K'
+            }
+            else
+                res = Number(number).toLocaleString(Qt.locale(root.locale), 'f', 0)
+            return res
+        }
+    }
+
+    implicitWidth: d.cardWidth
+    implicitHeight: d.totalHeigth
+    radius: d.bannerRadius
+    color: "transparent"
+    layer.enabled: true
+    layer.effect: DropShadow {
+        source: root
+        horizontalOffset: 0
+        verticalOffset: 2
+        radius: sensor.containsMouse ? 30 : d.bannerRadius
+        samples: 25
+        spread: 0
+        color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
+    }
+
+    // Community banner:
+    Item {
+        id: banner
+        anchors.top: parent.top
+        width: d.cardWidth
+        height: d.bannerHeigth
+        Rectangle {
+            id: mask
+            anchors.fill: parent
+            radius: d.bannerRadius
+            color: root.loaded ? root.communityColor : d.loadingColor2
+        }
+        Image {
+            id: image
+            source: root.banner
+            anchors.fill: parent
+            anchors.centerIn: parent
+            fillMode: Image.PreserveAspectFit
+            smooth: true
+            visible: !root.loaded || !root.banner
+        }
+        OpacityMask {
+            anchors.fill: image
+            source: image
+            maskSource: mask
+        }
+    }
+
+    // Community logo:
+    Rectangle {
+        z: content.z + 1
+        anchors.top: parent.top
+        anchors.topMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        width: 48
+        height: width
+        radius: width / 2
+        color: root.loaded ? d.cardColor : d.loadingColor1
+
+        StatusRoundedImage {
+            visible: root.loaded
+            anchors.centerIn: parent
+            width: parent.width - 4
+            height: width
+            image.source: root.logo
+            color: "transparent"
+        }
+    } // End of community logo
+
+    // Content card
+    Rectangle {
+        id: content
+        z: banner.z + 1
+        visible: root.loaded
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        width: d.cardWidth
+        height: d.cardHeigth
+        color: d.cardColor
+        radius: d.cardRadius
+        clip: true
+        // Community restriccions
+        Rectangle {
+            visible: root.isPrivate
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: 48
+            height: 24
+            color: d.loadingColor2
+            radius: 200
+            StatusIcon {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: 6
+                anchors.left: parent.left
+                icon: "tiny/unlocked"
+                width: 16
+                height: 16
+                color: Theme.palette.baseColor1
+            }
+            StatusRoundedImage {
+                anchors.rightMargin: 2
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                width: 20
+                height: width
+                image.source: root.tokenLogo
+                color: "transparent"
+            }
+        }
+        // Community info
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 32
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
+            clip: true
+            spacing: 6
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                text: root.name
+                font.weight: Font.Bold
+                font.pixelSize: 19
+                color: d.fontColor
+            }
+            StatusBaseText {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                text: root.description
+                font.pixelSize: 15
+                lineHeight: 1.2
+                color: d.fontColor
+                maximumLineCount: 2
+                wrapMode: Text.WordWrap
+                elide: Text.ElideRight
+                clip: true
+            }
+        }
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 116
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
+            clip: true
+            spacing: 18
+            Row {
+                Layout.alignment: Qt.AlignVCenter
+                spacing: 20
+                // Members
+                Row {
+                    height: membersTxt.height
+                    spacing: 4
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/members"
+                        width: 16
+                        height: 16
+                    }
+                    StatusBaseText {
+                        id: membersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.members)
+                        font.pixelSize: 15
+                        color: d.fontColor
+                    }
+                }
+                // Active users:
+                Row {
+                    height: activeUsersTxt.height
+                    spacing: 4
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/flash"
+                        width: 14
+                        height: 14
+                    }
+                    StatusBaseText {
+                        id: activeUsersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.activeUsers)
+                        font.pixelSize: 15
+                        color: d.fontColor
+                    }
+                }
+            }
+            // TODO: Replace by `StatusListItemTagRow` - To be done!
+            Row {
+                visible: root.categories.count > 0
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                spacing: 8
+                clip: true
+
+                Repeater {
+                    model: root.categories
+                    delegate: StatusListItemTag {
+                        border.color: Theme.palette.baseColor2
+                        color: "transparent"
+                        height: 24
+                        radius: 20
+                        closeButtonVisible: false
+                        icon.emoji: model.emoji
+                        icon.height: 24
+                        icon.width: icon.height
+                        icon.color: "transparent"
+                        icon.isLetterIdenticon: true
+                        title: model.name
+                        titleText.font.pixelSize: 13
+                        titleText.color: d.fontColor
+                    }
+                }
+            }
+        }
+    } // End of content card
+
+    // Loading card
+    Rectangle {
+        visible: !root.loaded
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        width: d.cardWidth
+        height: d.cardHeigth
+        color: d.cardColor
+        radius: d.cardRadius
+        clip: true
+        Rectangle {
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: 48
+            height: 24
+            color: d.loadingColor2
+            radius: 200
+        }
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 32
+            anchors.margins: d.margins
+            clip: true
+            spacing: 9
+            Rectangle {
+                width: 84
+                height: 16
+                color: d.loadingColor1
+                radius: 5
+            }
+            Rectangle {
+                width: 311
+                height: 16
+                color: d.loadingColor1
+                radius: 5
+            }
+            Rectangle {
+                width: 271
+                height: 16
+                color: d.loadingColor1
+                radius: 5
+            }
+            Row {
+                Layout.topMargin: 22 - 9
+                spacing: 16
+                Repeater {
+                    model: 2
+                    delegate: Row {
+                        spacing: 4
+                        Rectangle {
+                            width: 14
+                            height: 14
+                            color: d.loadingColor1
+                            radius: width / 2
+                        }
+                        Rectangle {
+                            width: 50
+                            height: 12
+                            color: d.loadingColor2
+                            radius: 5
+                        }
+                    }
+                }
+            }
+            Row {
+                Layout.topMargin: 21 - 9
+                spacing: 8
+                Repeater {
+                    model: 3
+                    delegate:
+                    Rectangle {
+                        width: 76
+                        height: 24
+                        color: d.loadingColor2
+                        radius: 20
+                    }
+                }
+            }
+        }
+    } // End of loading card
+
+    MouseArea {
+        id: sensor
+        enabled: root.loaded
+        anchors.fill: parent
+        cursorShape: root.loaded ? Qt.PointingHandCursor : Qt.ArrowCursor
+        hoverEnabled: true
+
+        onClicked: root.clicked(root.communityId)
+    }
+}