feat(Theme): Added radius and bigPadding properties

feat(StatusTabButton): Created component as per design (#684 )
feat(StatusTagSelector): Replaced member delegate w/ StatusMemberLisItm (#676 )
2022-05-27 16:29:45 +03:00 · 2022-05-23 14:29:42 +03:00 · 2022-05-19 12:02:36 +03:00 · 2022-05-19 11:42:18 +03:00 · 2022-05-18 17:01:27 +03:00 · 2022-05-17 21:16:11 +03:00
10365 changed files with 50687 additions and 3193 deletions
@@ -0,0 +1,17 @@
+### Checklist
+
+- [ ] follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
+  - the scope should be the component's name e.g: `feat(StatusListItem): ... `
+  - when adding new components, the scope is the module e.g: `feat(StatusQ.Controls): ...`
+- [ ] add documentation if necessary (new component, new feature)
+- [ ] update sandbox app
+  - in case of new component, add new component page
+  - in case of new features, add variation to existing component page
+  - nice to have: add it to the demo application as well
+- [ ] test changes in both light and dark theme?
+- [ ] is this a breaking change?
+    - [ ] use the dedicated `BREAKING CHANGE` commit message section
+    - [ ] resolve breaking changes in [status-desktop](https://github.com/status-im/status-desktop)
+        - [ ] (pre-merge) adapt code to breaking changes
+        - [ ] (post-merge) update StatusQ submodule pointer
+- [ ] test changes in [status-desktop](https://github.com/status-im/status-desktop)
@@ -12,3 +12,8 @@ Makefile
 .qmake.stash
 *_qml.cpp
 *_qmlcache.qrc
+sandbox/qmlcache_loader.cpp
+doc/html
+CMakeLists.txt.user
+.vscode
+build/
@@ -0,0 +1,664 @@
+<a name=""></a>
+##  0.25.0 (2022-03-07)
+
+
+#### Bug Fixes
+
+* **@StatusListItem:**  fix left padding ([f574e390](f574e390))
+* **StatusListItem:**  add propagateTitleClicks property to StatusListItem ([8495fae8](8495fae8))
+* **StatusQ.Popups:**  removed overlay setting (#557) ([665141f8](665141f8))
+* **StatusTagSelector:**  Updates and fixes in the component ([07a5dc09](07a5dc09))
+* **build:**  fix linux build ([9d06aae1](9d06aae1), closes [#413](413))
+* **sandbox:**  Fix results popup component position ([cdf51fef](cdf51fef))
+
+#### Features
+
+* **@StatusListItem:**  add option for tags ([381150a7](381150a7))
+* **StatusChatList:**  Highlight chat item at creation time ([9e6fbe95](9e6fbe95))
+* **StatusChatListItem:**  enable assigning emoji to chat item ([5fac8774](5fac8774))
+* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
+* **StatusQ:**  Moving docs outside sandbox ([825999b1](825999b1))
+* **StatusQ.Core:**  add new arrow-left icon ([e9f20be1](e9f20be1))
+* **StatusSmartIdenticon:**  Add support for color rings in StatusSmartIdenticon (#553) ([3b86d13a](3b86d13a), closes [#517](517))
+
+#### Breaking Changes
+
+* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
+
+
+
+<a name=""></a>
+##  0.24.0 (2022-02-14)
+
+
+#### Features
+
+* **StatusListItem:**  add highlighted property ([5780f183](5780f183))
+* **StatusQ.Components:**  Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
+
+
+
+<a name=""></a>
+##  Version 0.23.0 (2022-02-08)
+
+
+#### Bug Fixes
+
+*   Icon components had wrong color in sandbox app ([b632c712](b632c712), closes [#538](538))
+* **StatusChatList:**  unexisting property name for chat item fixed ([c2e07517](c2e07517))
+
+#### Features
+
+* **StatusQ.Components:**
+  *  Adding StatusToastMessage ([7b290ddd](7b290ddd), closes [#521](521))
+  *  Adding StatusTagSelector component ([094dee49](094dee49), closes [#526](526))
+
+
+
+<a name=""></a>
+##  Version 0.22.0 (2022-01-31)
+
+
+#### Features
+
+* **StatusMemberListItem:**  Implement `StatusMemberListItem` (#539) ([c5a605bf](c5a605bf), closes [#515](515))
+
+
+
+<a name=""></a>
+##  Version 0.21.0 (2022-01-24)
+
+
+#### Bug Fixes
+
+* **build:**  broken MacOS build (#533) ([55901cf0](55901cf0))
+
+#### Features
+
+* **StatusMessage:**  Introducing a new StatusQ Component for Chat Messages ([ea955694](ea955694))
+* **StatusQ.Controls:**  Introduce `StatusPasswordStrengthIndicator` ([626695da](626695da), closes [#528](528))
+
+
+
+<a name=""></a>
+##  Version 0.20.0 (2022-01-17)
+
+
+#### Features
+
+* **StatusBanner:**  introduce type variants for different banner styles ([35d12f44](35d12f44))
+
+#### Bug Fixes
+
+* **StatusBaseInput:**  Corrects allignment of the placeholder text in the StatusBaseInput. ([5a416aa1](5a416aa1))
+* **build:**  Windows build ([14ab4ce5](14ab4ce5))
+
+
+
+<a name=""></a>
+##  Version 0.19.0 (2021-12-03)
+
+
+#### Bug Fixes
+
+* **StatusChatListItem:**  This change fixes the issue of the chat list items getting a highlight even when they are not really hovered ([ab6bdf54](ab6bdf54))
+
+#### Features
+
+* **StatusModal:**  introduce `hasCloseButton` property ([2336b6aa](2336b6aa))
+
+
+
+<a name=""></a>
+##  Version 0.18.0 (2021-11-30)
+
+
+#### Bug Fixes
+
+* **StatusAppNavBar:**  Fixed position of profile button on the NavBar ([419b7384](419b7384))
+* **StatusImageWithTitle:**  Fix position of the edit title button ([8d2121ad](8d2121ad))
+* **StatusListItem:**  ensure title is elided ([b7883e82](b7883e82))
+
+#### Features
+
+* **StatusListItem:**  Expose the Aside text so that it can be modified from the outside ([f82ce8b7](f82ce8b7))
+
+
+
+<a name=""></a>
+##  Version 0.17.1 (2021-11-19)
+
+
+#### Bug Fixes
+
+* **StatusAccountSelector:**  Adapt ui to data model changed ([db024436](db024436))
+* **StatusAssetSelector:**  Fixed error of crypto balance not updated correctly ([2040d0f8](2040d0f8))
+
+
+
+<a name=""></a>
+##  Version 0.17.0 (2021-11-10)
+
+
+#### Features
+
+* **StatusBaseButton:**  introduce `Tiny` size ([dee9f437](dee9f437))
+* **StatusQ.Controls.Validators:**  introduce `StatusUrlValidator` ([a9155865](a9155865))
+
+#### Bug Fixes
+
+* **StatusAccountSelector:**  adapt AccountSelector to new model (#482) ([ce8d3231](ce8d3231))
+* **StatusExpandibleItem:**  add missing hover indicator in `Secondary` type ([e23dc533](e23dc533), closes [#478](478))
+* **StatusInput:**  ensure validator messages are rendered when validators return boolean values ([f82cd7f5](f82cd7f5))
+* **StatusListItem:**  This solves the issue of channel list overlpaing when a category is collapsed. ([0c715b17](0c715b17))
+* **StatusSearchPopup:**  disable enter and return keys to avoid UI breakage ([fecfb2a7](fecfb2a7))
+* **StatusSlider:**  slider background and handle should not depend on root's height ([31cfc883](31cfc883))
+
+
+
+<a name=""></a>
+##  Version 0.16.0 (2021-11-01)
+
+
+#### Bug Fixes
+
+* **StatusModal:**  render footer correctly based on `showFooter` flag ([da9dc2f4](da9dc2f4))
+* **StatusRoundButton:**  ensure disabled state uses correct background color ([eb4aae40](eb4aae40))
+
+#### Features
+
+* **StatusQ.Controls:**
+  *  introduce `StatusWalletColorSelect` control ([ea9a5602](ea9a5602), closes [#467](467))
+  *  introduce `StatusWalletColorButton` component ([597ae192](597ae192), closes [#466](466))
+* **StatusQ.Platform:**  introduce StatusMacNotification component ([d301b94c](d301b94c))
+
+
+
+<a name=""></a>
+##  Version 0.15.0 (2021-10-26)
+
+
+#### Features
+
+* **StatusQ.Controls:**
+  *  introduce StatusChatCommandButton ([4cc0d2bb](4cc0d2bb), closes [#429](429))
+  *  introduce `StatusTabBarIconButton` component ([4bcd89b3](4bcd89b3), closes [#428](428))
+
+
+
+<a name=""></a>
+##  Version 0.14.0 (2021-10-25)
+
+
+#### Bug Fixes
+
+* **Spellchecking:**  Add check for hunspell existence ([ab9ab249](ab9ab249))
+* **StatusModal:**
+  *  ensure `onEditButtonClicked` signal is emitted ([074dc22b](074dc22b), closes [#454](454))
+  *  expose `header.editable` property ([9c5f79a6](9c5f79a6), closes [#452](452))
+
+#### Features
+
+* **StatusSmartIdenticon:**  Created a new StatusQ componnent to accomodate: ([14527483](14527483))
+
+
+
+<a name=""></a>
+##  Version 0.13.0 (2021-10-19)
+
+
+#### Bug Fixes
+
+*   use proper double checkmark icon ([8aba017c](8aba017c))
+* **StatusBaseButton:**  introduce missing `highlighted` property ([a3748920](a3748920))
+
+#### Features
+
+* **StatusFlatRoundButton:**  Update the StatusFlatRoundButton to take over button behaviour from StatusIconButton under ui/shared/status ([71fbdef1](71fbdef1))
+
+
+
+<a name=""></a>
+##  Version 0.12.0 (2021-10-18)
+
+
+#### Features
+
+*   Resolve StatusQ modules highlighting and add qml compiler for detecting coompile time errors ([e1b0f2dc](e1b0f2dc))
+* **StatusModal:**  Add edit avatar button ([5043b0b6](5043b0b6))
+* **StatusQ.Components:**  introduce `StatusAddress` component ([6789446d](6789446d), closes [#430](430))
+* **StatusQ.Controls:**
+  *  introduce StatusColorSelector component ([bdd69955](bdd69955), closes [#444](444))
+  *  introduce `StatusAssetSelector` component ([9fdc9aea](9fdc9aea), closes [#442](442))
+  *  introduce `StatusAccountSelector` component ([5e15cc49](5e15cc49), closes [#435](435))
+  *  introduce `StatusSelect` ([6e10959e](6e10959e), closes [#436](436))
+* **StatusQ.Popups:**  introduce `StatusMenuItemDelegate` ([0764e25a](0764e25a))
+
+#### Breaking Changes
+
+* **StatusQ.Popups:**  introduce `StatusMenuItemDelegate` ([0764e25a](0764e25a))
+
+
+
+<a name=""></a>
+##  Version 0.11.1(2021-10-12)
+
+
+#### Bug Fixes
+
+*   Sandbox doesn't build on Linux machines ([dce45c2f](dce45c2f))
+* **StatusChatInfoButton:**  StatusChatInfoButton takes up entire available width ([c276a90e](c276a90e))
+
+
+
+<a name=""></a>
+##  v0.11.0 (2021-09-27)
+
+
+#### Bug Fixes
+
+*   track category opened state ([0631d500](0631d500))
+* **StatusChatList:**  ensure right click popup opens in correct position ([a2e3659d](a2e3659d))
+* **StatusSearchPopup:**  use correct theme color for search result text ([654bd9f2](654bd9f2))
+* **StatusSpellcheckingMenuItems:**  Exact  menu items order ([478177f2](478177f2))
+
+#### Features
+
+*   add star icons (#422) ([5c3267f7](5c3267f7))
+
+
+<a name=""></a>
+## v0.10.0 (2021-09-20)
+
+
+#### Bug Fixes
+
+* **StatusChatInfoToolBar:**  Right anchored title in StatusChatInfoToolBar ([6e8a36be](6e8a36be))
+* **StatusChatListCategoryItem:**  Disable sensor when chevron clicked ([c83641d2](c83641d2))
+* **StatusQ.Controls.Validators:**  fix bug that addressOrEns validator isn't properly exposed in QML ([1374c193](1374c193))
+
+#### Features
+
+* **Spellchecker:**  Add Spellchecker class ([c65f80d2](c65f80d2))
+* **Spellchecking:**
+  *  Add dictionaries ([1d12d222](1d12d222))
+  *  Add huspell dependency ([f9457ef3](f9457ef3))
+* **StatusChatList:**  expose `statusChatListItems` Repeater ([40c0e48b](40c0e48b))
+* **StatusExpandableItem:**  Correct placement of expandable region in tertiary type ([1f244f62](1f244f62))
+* **StatusInput:**
+  *  add support for asynchronous validators ([8820cd89](8820cd89), closes [#395](395))
+  *  introduce `leftPadding` and `rightPadding` properties ([13dc8ae3](13dc8ae3))
+  *  introduce `reset` API ([a2ad08e4](a2ad08e4))
+* **StatusSpellcheckingMenuItems:**  Add spellchecking menu ([3e24b710](3e24b710))
+
+
+
+<a name=""></a>
+## v0.9.0 (2021-09-13)
+
+
+#### Breaking Changes
+
+* **StatusExpandableItem:**  Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
+
+#### Bug Fixes
+
+* **StatusAppThreePanelLayout:**  Fix margin between left and center panels ([29e9557d](29e9557d))
+* **StatusChatListAndCategories:**  rely on correct tooltip settings prop ([2971c607](2971c607))
+* **StatusCheckbox:**  give checkbox label proper theme color ([88fb57dd](88fb57dd))
+* **StatusModal:**  don't reserve header subtitle space ([eabc62f7](eabc62f7), closes [#378](378))
+
+#### Features
+
+* **Status.Core.Theme:**  add RobotoMono font ([aab44c1e](aab44c1e), closes [#342](342))
+* **StatusBaseInput:**  introduce `component` property ([019471c8](019471c8), closes [#380](380))
+* **StatusExpandableItem:**  Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
+* **StatusInput:**
+  *  introduce `ValidationMode` ([d73a1584](d73a1584))
+  *  exposed edit component ([73c77c29](73c77c29))
+* **StatusQ.Controls.Validators:**
+  *  introduce `StatusAddressAndEnsValidator` ([a93ef161](a93ef161))
+  *  introduce `StatusAddressValidator` ([77d0e9b8](77d0e9b8))
+* **StatusSearchPopup:**  introduce forceActiveFocus API ([efe31166](efe31166))
+* **StatusValidator:**  allow validators to provide default `errorMessage` ([1a23cc19](1a23cc19))
+
+
+
+<a name=""></a>
+##  v0.8.0 (2021-09-06)
+
+
+#### Bug Fixes
+
+* **StatusBaseInput:**
+  *  fix one line scroll ([d64aa6de](d64aa6de))
+  *  Make clear button bigger ([387bfe77](387bfe77))
+* **StatusChatToolBar:**  Fix mouse event catching after menu closing ([fbecac4a](fbecac4a))
+* **StatusInput:**  Forward keys events to root ([061c7d1c](061c7d1c))
+* **StatusListItem:**  Add propogateCompostedEvents to title mouse area ([5c706fdc](5c706fdc))
+* **StatusModal:**  Remove self-calculating height ([3187de54](3187de54))
+
+#### Features
+
+*   introduce bigger versions of navbar icons ([0a4d3860](0a4d3860))
+* **StatusBaseInput:**  introduce focussed property ([ddfca7a8](ddfca7a8), closes [#373](373))
+* **StatusChatListAndCategories:**  Add tooltip settings for categories buttons ([64098e84](64098e84))
+* **StatusDescriptionListItem:**
+  *  expose subtitle component for fine control ([1749cc0e](1749cc0e))
+  *  introduce support for `value` ([a963ef80](a963ef80))
+* **StatusExpandableSettingsItem:**   Added new component for wallet settings ([f3ab4ce9](f3ab4ce9))
+* **StatusInput:**  Introduced secondaryLabel property ([d648230d](d648230d), closes [#383](383))
+* **StatusModal:**
+  *  Add popup menu support for StatusModal ([8a94fb54](8a94fb54))
+  *  add ability to set elide config of header titles ([28e514f9](28e514f9), closes [#353](353))
+* **StatusQ.Controls:**  introduce StatusSwitchTabBar and StatusSwitchTabButton ([d449f0e9](d449f0e9), closes [#365](365))
+* **StatusSearchPopup:**  add function hook to allow timestamp formatting ([b45aba4b](b45aba4b), closes [#363](363))
+* **qrc:**  Add new icon needed for share modal ([38fb8f61](38fb8f61))
+
+
+<a name=""></a>
+##  v0.7.0 (2021-08-30)
+
+
+#### Features
+
+* **StatusChatListAndCategories:**  add drag and drop support for cate… (#349) ([a4178bd6](a4178bd6), closes [#227](227))
+* **StatusChatListCategoryItem:**  Add tooltips settings ([f9775e4d](f9775e4d))
+* **StatusPopupMenu:**  changed close policy ([2d8fd576](2d8fd576))
+* **StatusWindowsTitleBar:**  Add windows title bar ([faca4765](faca4765))
+
+#### Bug Fixes
+
+* **StatusAppThreePanelLayout:**  increase minimum width in right panel ([7da4bdee](7da4bdee))
+* **StatusBaseInput:**  fix click to focus ([138458d1](138458d1))
+* **StatusChatInfoButton:**  Add self-calculated implicitWIdth and elide to texts ([7ef61ed3](7ef61ed3))
+* **StatusListItem:**  don't set width on title item ([ee5ec7b3](ee5ec7b3))
+* **StatusModal:**  ensure header and subtitles elide if needed ([503a07bf](503a07bf), closes [#256](256))
+
+
+
+<a name=""></a>
+##  v0.6.0 (2021-08-24)
+
+
+#### Features
+
+* **StatusBaseInput:**  introduce `dirty` and `pristine` properties ([ea340801](ea340801), closes [#327](327))
+* **StatusChatList:**  Add drag and drop support of list items ([c679854d](c679854d))
+* **StatusLetterIdenticon:**  Expose the text component ([d16719ad](d16719ad))
+* **StatusListItem:**  introduce itemId and titleId properties and their handlers ([01da7508](01da7508))
+* **StatusSearchPopupMenuItem:**
+  *  New APIs resetSearchSelection and setSearchSelection ([78edcb37](78edcb37))
+  *  new API ([b133d10f](b133d10f))
+
+#### Bug Fixes
+
+* **StatusBaseInput:**
+  *  ensure wrapmode works as expectefd in multiline mode ([0243852c](0243852c), closes [#324](324))
+  *  expose cursorPosition ([ea6743a7](ea6743a7), closes [#323](323))
+* **StatusChatListCategory:**  emit original mouse event data in clicked signal ([5da9cb06](5da9cb06), closes [#333](333))
+* **StatusInput:**
+  *  ensure validation is performed on initialization ([4b107a0e](4b107a0e), closes [#326](326))
+  *  remove recursive binding in label height ([51d8b55b](51d8b55b))
+* **StatusSearchLocationMenu:**  typo fix ([c306b682](c306b682))
+* **StatusSearchPopup:**  replace "#" character with "channel" icon ([2de261c4](2de261c4))
+
+
+
+<a name=""></a>
+##  v0.5.0 (2021-08-16)
+
+
+#### Bug Fixes
+
+* **StatusChatToolBar:**  Use updated StatusFlatRoundButton ([d24c2e62](d24c2e62))
+
+#### Features
+
+* **StatusBaseInput:**  enforce `maximumLength` if it's set ([f635bad6](f635bad6))
+* **StatusFlatRoundButton:**  Adding tooltip to the button ([5a0489ba](5a0489ba))
+* **StatusIcon:**  add `play-filled` and `pause-filled` icons ([58a30716](58a30716), closes [#310](310))
+* **StatusInput:**  introduce new validator pipeline ([ba4f27f9](ba4f27f9), closes [#298](298))
+* **StatusToolTip:**  Adding an offset property ([ee429683](ee429683))
+
+
+
+<a name=""></a>
+##  v0.4.0 (2021-08-12)
+
+
+#### Bug Fixes
+
+* **StatusAppNavBar:**  add profile button (#311) ([2e1359c9](2e1359c9))
+* **StatusChatListItem:**  don't signal item selection if already selected ([b345c75a](b345c75a), closes [#303](303))
+* **StatusPopupMenu:**  ensure icon or image settings exist ([90aa9d76](90aa9d76), closes [#295](295))
+
+#### Features
+
+* **StatusListItem:**  add enabled prop to StatusListItem (#302) ([7e03daea](7e03daea))
+* **StatusQ.Theme.Core:**  introduce theme colors for StatusChatInput (#299) ([556e5cca](556e5cca))
+
+
+
+<a name=""></a>
+## v0.3.0 (2021-07-27)
+
+
+#### Features
+
+* **Controls:**  introduce `StatusInput` ([646c00bd](646c00bd), closes [#288](288))
+* **Popups:**  introduce `StatusMenuHeadline` component ([246bec0d](246bec0d))
+* **StatusBaseInput:**
+  *  add icon support ([c8e90349](c8e90349), closes [#242](242))
+  *  add visual validity state ([e8cce72c](e8cce72c), closes [#287](287))
+  *  add hover state visuals ([e1ebdaae](e1ebdaae), closes [#285](285))
+* **StatusInput:**  implement error message and charlimit APIs ([3cf53d02](3cf53d02), closes [#290](290))
+* **StatusPopupMenu:**  add support for letter identicons, identicons and images ([3c4c7f04](3c4c7f04), closes [#263](263))
+* **StatusQ.Layout:**  introducing StatusAppThreePanelLayout ([ffc6fcb4](ffc6fcb4), closes [#272](272))
+* **sandbox:**  make use of `StatusInput` in chat view ([731a0f8c](731a0f8c))
+
+#### Bug Fixes
+
+* **StatusAppThreePanelLayout:**
+  *  limit right panel width to 300px ([d327c515](d327c515))
+  *  limit center panel width to 300px ([762ff87b](762ff87b))
+  *  hide right panel when closed ([61705990](61705990))
+* **StatusBaseInput:**
+  *  some minor style adjustment to adhere to design ([f16e857c](f16e857c))
+  *  ensure input text is selectable with mouse ([ab303593](ab303593))
+  *  ensure clear button has the correct color ([de1cec7e](de1cec7e), closes [#286](286))
+  *  add visuals for disabled state ([35f20e33](35f20e33), closes [#284](284))
+  *  expose text prop alias ([116ddfbb](116ddfbb))
+* **StatusChatInfoButton:**  ensure pin icon button is always rendered ([baefedb8](baefedb8), closes [#278](278))
+* **StatusListItem:**  ensure title area wraps text ([e3f79314](e3f79314))
+* **StatusModal:**  reset image/identicon width when loader state has changed ([e4e7ebe3](e4e7ebe3))
+
+
+
+<a name=""></a>
+## v0.2.0 (2021-07-21)
+
+
+#### Bug Fixes
+
+* **StatusChatListCategory:**  ensures showActionButtons is taken into account ([52cb97e4](52cb97e4))
+* **StatusPopupMenu:**  ensure menu items elide ([d1f8e3e5](d1f8e3e5))
+
+#### Features
+
+* **StatusChatInfoToolBar:**  make statusMenuButton public ([38c04cb9](38c04cb9))
+* **StatusChatListAndCategories:**  new API showPopupMenu ([9cfcdace](9cfcdace))
+* **StatusChatListItem:**  introduce muted badge visuals ([a404ba07](a404ba07), closes [#259](259))
+* **StatusListItem:**
+  *  support tertiaryTitle ([03131996](03131996), closes [#275](275))
+  *  add identicon support ([214ef6b0](214ef6b0), closes [#261](261))
+* **StatusModal:**
+  *  introduce support for identicons and letter identicons ([fda9b71f](fda9b71f), closes [#269](269))
+  *  render header and footer border by default ([18dbaadd](18dbaadd), closes [#265](265))
+* **StatusToolTip:**  expose `arrow` for fine-grain control ([51b7c71d](51b7c71d))
+
+
+
+<a name=""></a>
+##  v0.1.0 (2021-07-15)
+
+
+#### Bug Fixes
+
+*   Add missing .qml to resources, add qmlcache to gitignore ([71d0ef7f](71d0ef7f))
+*   make release build work ([1a7c2133](1a7c2133))
+*   introduce tiny icon versions and make use of them where needed ([a0fae6ab](a0fae6ab), closes [#128](128))
+*   update position of window to center, add traffic lights ([26aae6d0](26aae6d0))
+*   hover effect for StatusFlatRoundButton ([ee4a7c88](ee4a7c88))
+*   fix crash on removing title bar ([c94b801e](c94b801e))
+* **Components:**
+  *  more popup menu position fine-tuning ([22eaf6fa](22eaf6fa))
+  *  add proper foreground color for StatusBadge ([6a92ff68](6a92ff68), closes [#59](59))
+* **Controls:**  ensure round buttons expose `hovered` state ([98b01946](98b01946), closes [#88](88))
+* **Core:**
+  *  add missing `rotation` property to `StatusIconSettings` ([341c0ddd](341c0ddd))
+  *  don't rotate `ColorOverlay` of `StatusIcon` ([062fe42a](062fe42a), closes [#109](109))
+  *  disable StatusIcon ColorOverlay if no color is supplied ([f1e34e39](f1e34e39))
+* **Core.Theme:**
+  *  ensure proper nav bar colors is used ([6c84fed7](6c84fed7))
+  *  remove redundant theme properties ([75e87725](75e87725))
+  *  ensure all font weight are available ([0a88e652](0a88e652), closes [#30](30))
+* **README:**  fix module name in readme docs ([f4b5b271](f4b5b271))
+* **StatusAppNavBar:**
+  *  don't rely on `undefined` property ([175d7a19](175d7a19))
+  *  don't try to render chat button if it doesn't exist ([d690a0c5](d690a0c5))
+* **StatusBadge:**  use medium font weight for badge text ([cb9492ab](cb9492ab))
+* **StatusBaseInput:**  Fix focus area Closes: #241 ([f2d36d3d](f2d36d3d))
+* **StatusChatInfoButton:**
+  *  make component identicon aware ([7dcec0ca](7dcec0ca), closes [#228](228))
+  *  prefix chat name with "#" if needed ([144ac69d](144ac69d), closes [#229](229))
+  *  vertically center title if no subtitle is provided ([7b2030c6](7b2030c6), closes [#230](230))
+  *  disable hover effects when sensor is disabled ([f7e38c9c](f7e38c9c), closes [#231](231))
+* **StatusChatList:**
+  *  ensure badge is also shown for one to one messages ([ac5c8452](ac5c8452))
+  *  ensure popupMenu closeHandler don't break ([722d92c0](722d92c0), closes [#216](216))
+  *  use fallback property to determine unread message count ([f7f217ed](f7f217ed))
+  *  expect `model.color` instead of `iconColor` prop ([70332a3f](70332a3f))
+  *  ensure component provide default `width` ([300536bc](300536bc), closes [#176](176))
+* **StatusChatListAndCategories:**
+  *  make chat list visibily flag work ([53d63a9b](53d63a9b), closes [#217](217))
+  *  ensure chatItemUnmuted event is propagated ([a9ae426c](a9ae426c), closes [#219](219))
+  *  ensure chat list receives popup menu ([23ddbc2e](23ddbc2e), closes [#218](218))
+* **StatusChatListCategory:**  only try open popup when supplied ([cbdaf128](cbdaf128), closes [#220](220))
+* **StatusChatListCategoryItem:**  don't render menubutton with no popup ([05fc97ca](05fc97ca), closes [#153](153))
+* **StatusChatListItem:**
+  *  ensure chat name elides when it's too long ([34df0f0d](34df0f0d), closes [#151](151))
+  *  ensure public chat names are prefixed with '#' ([141872c2](141872c2), closes [#191](191))
+  *  use proper font size for chat name ([ac80f7f7](ac80f7f7))
+* **StatusChatToolBar:**
+  *  ensure context menu as proper position ([3ea8da05](3ea8da05))
+  *  ensure menu button stays highlighted ([90bad9e3](90bad9e3), closes [#125](125))
+* **StatusFlatRoundButton:**  use correct hover color ([82e34d64](82e34d64))
+* **StatusListItem:**
+  *  ensure icon background in secondary type works correctly ([34b35318](34b35318))
+  *  various fixes w.r.t. sensor, icon size etc ([e5e96af5](e5e96af5))
+* **StatusMenuSeparator:**  ensure height is 0 when invisible or disabled ([fd7a5530](fd7a5530), closes [#212](212))
+* **StatusModal:**  ensure modal footer uses correct theme color ([de2c36d0](de2c36d0))
+* **StatusModalHeader:**  ensure header has enough height for children ([75b2f508](75b2f508), closes [#185](185))
+* **StatusNavBarTabButton:**
+  *  fix popup menu positioning ([705f1402](705f1402))
+  *  ensure click signal is emitted when not menu is provided ([040da2a4](040da2a4))
+  *  don't change checked state implicitly ([b1fe73ba](b1fe73ba))
+* **StatusNavigationListItem:**  make click event work again ([c5ecfe08](c5ecfe08))
+* **StatusQ.Core.Theme:**  use correct dropshadow color in dark theme ([70e17b05](70e17b05))
+* **StatusRadioButton:**  ensure control label as correct color ([1cb0c1d3](1cb0c1d3), closes [#51](51))
+* **StatusRoundedImage:**  ensure images are scaled and positioned properly ([3d0688b7](3d0688b7), closes [#172](172))
+* **sandbox:**  make scrollview content height grow with content ([2f09179f](2f09179f))
+
+#### Features
+
+*   can be used on tablets (#146) ([63be0144](63be0144))
+*   add StatusSwitch ([52998d68](52998d68), closes [#12](12))
+*  Add buttons components ([91b8d317](91b8d317))
+*   Set up catalog app (sandbox) ([3528b2ff](3528b2ff), closes [#5](5))
+*   introduce theming capability ([608fdbda](608fdbda), closes [#3](3))
+* **Components:**
+  *  introduce `StatusContactRequestsIndicatorListItem` ([baa663ce](baa663ce), closes [#175](175))
+  *  introduce `StatusListSectionHeadline` ([507703af](507703af), closes [#164](164))
+  *  introduce `StatusNavigationPanelHeadline` ([40617cd7](40617cd7), closes [#162](162))
+  *  introduce `StatusChatListAndCategories` component ([7bca2745](7bca2745), closes [#133](133))
+  *  introduce `StatusChatInfoToolBar` component ([454e73a8](454e73a8), closes [#141](141))
+  *  introduce `StatusChatListCategory` ([f4d211ac](f4d211ac), closes [#123](123))
+  *  introduce `StatusChatListCategoryItem` ([916dcc9c](916dcc9c), closes [#117](117))
+  *  introduce `StatusChatList` ([1e558b59](1e558b59), closes [#100](100))
+  *  Add StatusSlider ([c0ad32a1](c0ad32a1))
+  *  introduce `StatusChatToolBar` ([a4421b5b](a4421b5b), closes [#80](80))
+  *  introduce `StatusDescriptionListItem` ([4a25ca02](4a25ca02))
+  *  introduce StatusNavigationListItem ([63275668](63275668), closes [#72](72))
+  *  introduce StatusChatListItem ([b40d427d](b40d427d), closes [#65](65))
+  *  introduce `StatusListItem` component ([a3fe02d0](a3fe02d0), closes [#19](19))
+  *  introduce `StatusRoundIcon` component ([8639e8cc](8639e8cc), closes [#53](53))
+  *  introduce StatusBadge component ([a89e218a](a89e218a), closes [#15](15))
+  *  introduce StatusRoundedImage ([09876c1f](09876c1f), closes [#32](32))
+  *  introduce StatusLetterIdenticon ([b0155313](b0155313), closes [#28](28))
+  *  introduce StatusLoadingIndicator ([3ce1138b](3ce1138b), closes [#7](7))
+* **Controls:**
+  *  introduce StatusBaseInput ([13217604](13217604))
+  *  introduce `StatusChatInfoButton` ([8a799182](8a799182))
+  *  introduce StatusNavBarTabButton ([ea118d71](ea118d71), closes [#17](17))
+  *  introduce StatusToolTip component ([f3a6c9f4](f3a6c9f4), closes [#14](14))
+* **Core:**
+  *  introduce StatusIconBackgroundSettings ([a4e62fb2](a4e62fb2))
+  *  introduce `StatusImageSettings` ([d9529883](d9529883))
+  *  introduce StatusBaseText component ([c7d533af](c7d533af), closes [#20](20))
+* **Core.Controls:**  introduce StatusIconTabButton component ([b4b1f472](b4b1f472), closes [#16](16))
+* **Core.Theme:**  expose solid black and white on `ThemePalette` ([996ceb2b](996ceb2b))
+* **Layout:**
+  *  introduce `StatusAppTwoPanelLayout` ([af3ca15b](af3ca15b))
+  *  introduce StatusAppLayout component ([554998dc](554998dc))
+  *  introduce StatusAppNavBar ([0dfd39af](0dfd39af), closes [#18](18))
+* **Popups:**
+  *  Add StatusModal ([e49b58b9](e49b58b9))
+  *  introduce StatusModalDivider ([148c30b9](148c30b9))
+  *  Add StatusModalFooter ([9c2a5830](9c2a5830))
+  *  Add status modal header ([fa9bb7ad](fa9bb7ad))
+* **StatusBadge:**  introduce `borderColor` and `hoverBorderColor` ([041c11fb](041c11fb))
+* **StatusBaseInput:**  Add focused state Closes: #240 ([19349881](19349881))
+* **StatusChatList:**
+  *  expose hook to lazily calculate chat item names ([a664f635](a664f635))
+  *  introduce `profileImageFn` property ([cfacd5be](cfacd5be), closes [#174](174))
+  *  introduce `popupMenu` property ([a6262f0a](a6262f0a), closes [#171](171))
+  *  introduce `filterFn` and `categoryId` ([cb078134](cb078134), closes [#154](154))
+* **StatusChatListCategory:**
+  *  apply chat list filter and expose category id in popup menu ([45775518](45775518))
+  *  introduce flag to show/hide buttons ([9982c3df](9982c3df), closes [#150](150))
+* **StatusChatListCategoryItem:**  introduce `highlighted` property ([72bdd2d9](72bdd2d9))
+* **StatusChatListCategoryItemButton:**  introduce `highglighted` property ([645a3b79](645a3b79))
+* **StatusChatListItem:**
+  *  add `highlighted` property ([44343d38](44343d38), closes [#178](178))
+  *  accept right clicks ([1f3aa0bb](1f3aa0bb), closes [#131](131))
+* **StatusChatToolBar:**
+  *  add tooltips to action buttons ([86da901e](86da901e), closes [#244](244))
+  *  add members and search button ([e93dab2b](e93dab2b), closes [#243](243))
+* **StatusFlatRoundButton:**
+  *  introduce `highlighted` color for secondary type ([58e8f1cd](58e8f1cd), closes [#245](245))
+  *  support icon rotation ([3a7a338d](3a7a338d))
+* **StatusIcon:**  Improvement of Icons ([7bc7df8d](7bc7df8d))
+* **StatusIconTabButton:**  introduce image loading state and fallback ([9b99d8a9](9b99d8a9), closes [#37](37))
+* **StatusListItem:**
+  *  add `Danger` type support ([8155d9a2](8155d9a2), closes [#248](248))
+  *  support letter identicons ([531e54f2](531e54f2), closes [#239](239))
+  *  introduce primary and secondary types ([146218e0](146218e0))
+* **StatusModal:**  expose loaded content ([bd383e87](bd383e87), closes [#237](237))
+* **StatusNavBarTabButton:**  introduce `popupMenu` property ([5e8242df](5e8242df), closes [#137](137))
+* **StatusPopupMenu:**
+  *  introduce `openHandler` ([2427fa2d](2427fa2d))
+  *  make menu items invisible when disabled ([c9bc9bab](c9bc9bab), closes [#135](135))
+  *  introduce `closeHandler` hook ([fb51e9d7](fb51e9d7))
+* **StatusQ.Popups:**  introduce StatusPopupMenu component ([09a6f418](09a6f418), closes [#96](96))
+* **StatusRoundButton:**  add `highlighted` and `icon.rotation` props ([7c16a9bd](7c16a9bd))
+* **StatusRoundIcon:**  enable `icon.color` support ([70043c5b](70043c5b))
+* **StatusRoundedImage:**
+  *  introduce identicon support ([7a2648f6](7a2648f6), closes [#173](173))
+  *  add loading indicator option ([44b275f2](44b275f2), closes [#56](56))
+* **sandbox:**
+  *  introduce first part of profile view for reference app ([4588d597](4588d597))
+  *  introduce first version of reference app ([202fb886](202fb886))
+
+
+
@@ -0,0 +1,5 @@
+cmake_minimum_required(VERSION 3.19)
+
+project(StatusQ)
+
+add_subdirectory(tests)
@@ -9,6 +9,7 @@ These modules are:

 - [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
+- [StatusQ.Core.Utils](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Utils/qmldir)
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
 - [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
@@ -0,0 +1,19 @@
+/*!
+   \page statusq-index.html
+   \title StatusQ
+   \brief A components library for Status desktop client.
+
+
+   StatusQ provides a collection of components....
+
+   StatusQ - Components and Interfaces
+   \list
+      \li \l{StatusQ Components}{Components}
+      \li \l{StatusQ Controls}{Controls}
+      \li \l{StatusQ Core}{Core}
+      \li \l{StatusQ Layout}{Layout}
+      \li \l{StatusQ Platform}{Platform}
+      \li \l{StatusQ Popups}{Popups}
+   \endlist
+*/
+
@@ -0,0 +1,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
+*/
@@ -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
+*/
@@ -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
+*/
@@ -0,0 +1,16 @@
+/*!
+    \qmlmodule StatusQ.Layout 0.1
+    \title StatusQ Layout
+    \brief Basic set of Layout StatusQ components
+
+    This is a listing of all Layout components.
+
+    This module is part of the \l{StatusQ}{StatusQ} project.
+
+   \list
+       \li \l{StatusAppLayout}
+       \li \l{StatusAppNavBar}
+       \li \l{StatusAppTwoPanelLayout}
+       \li \l{StatusAppThreePanelLayout}
+   \endlist
+*/
@@ -0,0 +1,15 @@
+/*!
+    \qmlmodule StatusQ.Platform 0.1
+    \title StatusQ Platform
+    \brief Basic set of Platform StatusQ components
+
+    This is a listing of all Platform components.
+
+    This module is part of the \l{StatusQ}{StatusQ} project.
+
+   \list
+       \li \l{StatusMacTrafficLights}
+       \li \l{StatusMacNotification}
+       \li \l{StatusWindowsTitleBar}
+   \endlist
+*/
@@ -0,0 +1,22 @@
+/*!
+    \qmlmodule StatusQ.Popups 0.1
+    \title StatusQ Popups
+    \brief Basic set of Popups StatusQ components
+
+    This is a listing of all Popups components.
+
+    This module is part of the \l{StatusQ}{StatusQ} project.
+
+   \list
+       \li \l{StatusMenuSeparator}
+       \li \l{StatusPopupMenu}
+       \li \l{StatusMenuItem}
+       \li \l{StatusMenuItemDelegate}
+       \li \l{StatusModal}
+       \li \l{StatusSearchPopup}
+       \li \l{StatusModalDivider}
+       \li \l{StatusSearchPopupMenuItem}
+       \li \l{StatusSearchLocationMenu}
+       \li \l{StatusSpellcheckingMenuItems}
+   \endlist
+*/
@@ -0,0 +1,36 @@
+project = StatusQ
+version = 0.1
+description = StatusQ Project
+url     = https://github.com/status-im/StatusQ
+
+#These are set implictly by qdoc as well, but only with these the module header can be found
+includepaths = -I . \
+               -I $PWD/../src/StatusQ
+
+imagedirs = src/images
+sourcedirs += src \
+              $PWD/../src/StatusQ/Components \
+              $PWD/../src/StatusQ/Controls \
+              $PWD/../src/StatusQ/Core \
+              $PWD/../src/StatusQ/Layout \
+              $PWD/../src/StatusQ/Platform \
+              $PWD/../src/StatusQ/Popups \
+
+sources.fileextensions = "*.cpp *.qdoc *.qml"
+
+depends += qtcore \
+           qtquick \
+           qtqml \
+           qtgui \
+           qtdoc \
+           qtquickcontrols2
+
+navigation.homepage    = "StatusQ"
+
+outputdir  =    $PWD/html
+outputformats = HTML
+
+HTML.stylesheets = style.css
+HTML.headerstyles = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/style.css\"/>\n"
+HTML.postheader = "<p class=\"header\"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/>"
+HTML.footer = "<hr/><div class=\"footer\"><p><acronym title=\"Copyright\">&copy;</acronym> 2022 Status. All rights reserved. <a href=\"https://status.im\" target=\"_blank\"><small>status.im</a></small></p></div>"
@@ -0,0 +1,41 @@
+body {
+   font-family: "Verdana";
+   font-size: 14px;
+   max-width: 80%;
+   margin: auto;
+}
+
+h1, h2, h3 {
+   color: #4360DF;
+}
+
+div.sidebar {
+    float: right;
+}
+
+pre {
+    padding: 15px;
+}
+div.qmlproto {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+pre, div.qmlproto {
+    font-family: "Courier New";
+    font-size: 20px;
+    margin-left: 2em;
+    background-color: #F0F2F5;
+}
+
+hr {
+    margin-top: 2em;
+    margin-bottom: 2em;
+}
+
+p.header {
+    margin-bottom: -1em;
+}
+p.footer {
+    text-align: right;
+    margin-top: -1em;
+}
@@ -1,239 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Grid {
-
-    columns: 3
-    columnSpacing: 38
-    rowSpacing: 10
-
-    horizontalItemAlignment: Grid.AlignHCenter
-
-    // Large
-    StatusButton {
-        text: "Button"
-    }
-
-    StatusButton {
-        text: "Button"
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        loading: true
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        loading: true
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusFlatButton {
-        text: "Button"
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        loading: true
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        enabled: false
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        loading: true
-    }
-
-    // Small
-    StatusButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    // Icon buttons
-
-    // blue
-
-    StatusRoundButton {
-        icon.name: "info"
-    }
-
-    StatusRoundButton {
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusRoundButton {
-        icon.name: "info"
-        loading: true
-    }
-
-    // black
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon.name: "info"
-    }
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon.name: "info"
-        loading: true
-    }
-
-    // Rounded blue
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-
-        icon.name: "info"
-    }
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-        icon.name: "info"
-        loading: true
-    }
-
-    // Rounded white
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-
-        icon.name: "info"
-    }
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-        icon.name: "info"
-        loading: true
-    }
-
-    StatusFlatButton {
-        icon.name: "info"
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-    StatusFlatButton {
-        icon.name: "info"
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        icon.name: "info"
-        text: "Button"
-        loading: true
-        size: StatusBaseButton.Size.Small
-    }
-}
@@ -7,46 +7,64 @@ 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
    height: 602
-    width: 902
+    width: 1002
    border.width: 1
    border.color: Theme.palette.baseColor2

-    Row {
-        anchors.top: demoApp.top
-        anchors.left: demoApp.left
-        anchors.topMargin: 14
-        anchors.leftMargin: 14
+    property string titleStyle: "osx"

-        spacing: 6
+    QtObject {
+        id: appSectionType
+        readonly property int chat: 0
+        readonly property int community: 1
+        readonly property int wallet: 2
+        readonly property int browser: 3
+        readonly property int nodeManagement: 4
+        readonly property int profileSettings: 5
+        readonly property int apiDocumentation: 100
+        readonly property int demoApp: 101
+    }
+
+    function setActiveItem(sectionId) {
+        for (var i = 0; i < Models.demoAppSectionsModel.count; i++) {
+            let item = Models.demoAppSectionsModel.get(i)
+            if (item.sectionId !== sectionId)
+            {
+                Models.demoAppSectionsModel.setProperty(i, "active", false)
+                continue
+            }
+
+            Models.demoAppSectionsModel.setProperty(i, "active", true);
+        }
+    }
+
+    StatusMacTrafficLights {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.margins: 13
        z: statusAppLayout.z + 1
+        visible: titleStyle === "osx"
+    }

-        Rectangle {
-            color: "#E24640"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#FFC12F"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#2ACB42"
-            height: 12
-            width: 12
-            radius: 6
-        }
+    StatusWindowsTitleBar {
+        id: windowsTitle
+        anchors.top: parent.top
+        width: parent.width
+        z: statusAppLayout.z + 1
+        visible: titleStyle === "windows"
    }

    StatusAppLayout {
        id: statusAppLayout
-        anchors.top: demoApp.top
+        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
        anchors.left: demoApp.left
        anchors.topMargin: demoApp.border.width
        anchors.leftMargin: demoApp.border.width
@@ -58,32 +76,74 @@ Rectangle {

            id: navBar

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

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

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

                popupMenu: StatusPopupMenu {
@@ -114,39 +174,7 @@ Rectangle {
                        type: StatusMenuItem.Type.Danger
                    }
                }
-
            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    id: profileNavButton
-                    icon.name: "profile"
-                    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 {
@@ -158,713 +186,31 @@ Rectangle {

    Component {
        id: statusAppChatView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                anchors.fill: parent
-
-                StatusNavigationPanelHeadline {
-                    id: headline
-                    anchors.top: parent.top
-                    anchors.topMargin: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    text: "Chat"
-                }
-
-                Column {
-                    anchors.top: headline.bottom
-                    anchors.topMargin: 16
-                    width: parent.width
-                    spacing: 8
-
-                    StatusContactRequestsIndicatorListItem {
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        title: "Contact requests"
-                        requestsCount: 3
-                        sensor.onClicked: demoContactRequestsModal.open()
-                    }
-
-                    StatusChatList {
-                        anchors.horizontalCenter: parent.horizontalCenter
-
-                        chatListItems.model: demoChatListItems
-                        selectedChatId: "0"
-                        onChatItemSelected: selectedChatId = id
-                        onChatItemUnmuted: {
-                            for (var i = 0; i < demoChatListItems.count; i++) {
-                                let item = demoChatListItems.get(i);
-                                if (item.chatId === id) {
-                                    demoChatListItems.setProperty(i, "muted", false)
-                                }
-                            }
-                        }
-
-                        popupMenu: StatusPopupMenu {
-
-                            property string chatId
-
-                            openHandler: function (id) {
-                                chatId = id
-                            }
-
-                            StatusMenuItem {
-                                text: "View Profile"
-                                icon.name: "group-chat"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Mute chat"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem {
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem {
-                                text: "Clear history"
-                                icon.name: "close-circle"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete chat"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-
-                StatusChatToolBar {
-                    anchors.top: parent.top
-                    width: parent.width
-
-                    chatInfoButton.title: "Amazing Funny Squirrel"        
-                    chatInfoButton.subTitle: "Contact"
-                    chatInfoButton.icon.color: Theme.palette.miscColor7
-                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-                    chatInfoButton.pinnedMessagesCount: 1
-
-                    notificationCount: 1
-
-                    onNotificationButtonClicked: notificationCount = 0
-
-                    popupMenu: StatusPopupMenu {
-                        id: contextMenu
-
-                        StatusMenuItem {
-                            text: "Mute Chat"
-                            icon.name: "notification"
-                        }
-                        StatusMenuItem {
-                            text: "Mark as Read"
-                            icon.name: "checkmark-circle"
-                        }
-                        StatusMenuItem {
-                            text: "Clear History"
-                            icon.name: "close-circle"
-                        }
-
-                        StatusMenuSeparator {}
-
-                        StatusMenuItem {
-                            text: "Leave Chat"
-                            icon.name: "arrow-right"
-                            icon.width: 14
-                            iconRotation: 180
-                            type: StatusMenuItem.Type.Danger
-                        }
-                    }
-                }
-            }
-        }
+        StatusAppChatView { }
    }

    Component {
        id: statusAppCommunityView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                id: leftPanel
-                anchors.fill: parent
-
-                StatusChatInfoToolBar {
-                    id: statusChatInfoToolBar
-
-                    anchors.top: parent.top
-                    anchors.horizontalCenter: parent.horizontalCenter
-
-                    chatInfoButton.title: "CryptoKitties"
-                    chatInfoButton.subTitle: "128 Members"
-                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                    chatInfoButton.icon.color: Theme.palette.miscColor6
-                    chatInfoButton.onClicked: demoCommunityDetailModal.open()
-
-                    popupMenu: StatusPopupMenu {
-
-                        StatusMenuItem {
-                            text: "Create channel"
-                            icon.name: "channel"
-                        }
-
-                        StatusMenuItem {
-                            text: "Create category"
-                            icon.name: "channel-category"
-                        }
-
-                        StatusMenuSeparator {}
-
-                        StatusMenuItem {
-                            text: "Invite people"
-                            icon.name: "share-ios"
-                        }
-
-                    }
-                }
-
-                ScrollView {
-                    id: scrollView
-
-                    anchors.top: statusChatInfoToolBar.bottom
-                    anchors.topMargin: 8
-                    anchors.bottom: parent.bottom
-                    width: leftPanel.width
-
-                    contentHeight: communityCategories.height
-                    clip: true
-
-                    StatusChatListAndCategories {
-                        id: communityCategories
-                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
-                        width: leftPanel.width
-
-                        chatList.model: demoCommunityChatListItems
-                        categoryList.model: demoCommunityCategoryItems
-
-                        showCategoryActionButtons: true
-                        onChatItemSelected: selectedChatId = id
-
-                        categoryPopupMenu: StatusPopupMenu {
-
-                            property string categoryId
-
-                            openHandler: function (id) {
-                                categoryId = id
-                            }
-
-                            StatusMenuItem {
-                                text: "Mute Category"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem { 
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem { 
-                                text: "Edit Category"
-                                icon.name: "edit"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete Category"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-
-                        chatListPopupMenu: StatusPopupMenu {
-
-                            property string chatId
-
-                            StatusMenuItem {
-                                text: "Mute chat"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem {
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem {
-                                text: "Clear history"
-                                icon.name: "close-circle"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete chat"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-
-                        popupMenu: StatusPopupMenu {
-                            StatusMenuItem {
-                                text: "Create channel"
-                                icon.name: "channel"
-                            }
-
-                            StatusMenuItem {
-                                text: "Create category"
-                                icon.name: "channel-category"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Invite people"
-                                icon.name: "share-ios"
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-
-                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
-                }
+        StatusAppCommunityView {
+            communityDetailModalTitle: demoCommunityDetailModal.header.title
+            communityDetailModalImage: demoCommunityDetailModal.header.image.source
+            onChatInfoButtonClicked: {
+                demoCommunityDetailModal.open();
            }
        }
    }

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

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

-    StatusModal {
+    DemoCommunityDetailModal {
        id: demoCommunityDetailModal
-
-        anchors.centerIn: parent
-
-        header.title: "Cryptokitties"        
-        header.subTitle: "Public Community"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-
-        content: Column {
-            width: demoCommunityDetailModal.width
-
-            StatusModalDivider { 
-                bottomPadding: 8 
-            }
-
-            StatusBaseText {
-                text: "A community of cat lovers, meow!"
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: 15
-                height: 46
-                color: Theme.palette.directColor1
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.leftMargin: 16
-                anchors.rightMargin: 16
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusDescriptionListItem {
-                title: "Share community"
-                subTitle: "https://join.status.im/u/0x04...45f19"
-                tooltip.text: "Copy to clipboard"
-                icon.name: "copy"
-                iconButton.onClicked: tooltip.visible = !tooltip.visible
-                width: parent.width
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Members"
-                icon.name: "group-chat"
-                label: "184"
-                components: [
-                    StatusIcon {
-                        icon: "chevron-down"
-                        rotation: 270
-                        color: Theme.palette.baseColor1
-                    }
-                ]
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Notifications"
-                icon.name: "notification"
-                components: [
-                    StatusSwitch {}
-                ]
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Edit community"
-                icon.name: "edit"
-                type: StatusListItem.Type.Secondary
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Transfer ownership"
-                icon.name: "exchange"
-                type: StatusListItem.Type.Secondary
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Leave community"
-                icon.name: "arrow-right"
-                icon.rotation: 180
-                type: StatusListItem.Type.Secondary
-            }
-        }
-    }
-
-    ListModel {
-        id: demoChatListItems
-        ListElement {
-            chatId: "0"
-            name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "blue"
-        }
-        ListElement {
-            chatId: "1"
-            name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: true
-            color: "red"
-            unreadMessagesCount: 1
-        }
-        ListElement {
-            chatId: "2"
-            name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            hasUnreadMessages: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            hasUnreadMessages: false
-            color: "purple"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            hasUnreadMessages: false
-            color: "Orange"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: false
-            color: "green"
-            unreadMessagesCount: 0
-        }
-    }
-
-    ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            chatId: "0"
-            name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-        }
-        ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-        }
-    }
-
-    ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
-            name: "Public"
-        }
-        ListElement {
-            categoryId: "dev"
-            name: "Development"
-        }
-    }
-
-    ListModel {
-        id: demoProfileGeneralMenuItems
-
-        ListElement {
-            title: "My Profile"
-            icon: "profile"
-        }
-
-        ListElement {
-            title: "Contacts"
-            icon: "contact"
-        }
-
-        ListElement {
-            title: "ENS Usernames"
-            icon: "username"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileSettingsMenuItems
-
-        ListElement {
-            title: "Privacy & Security"
-            icon: "security"
-        }
-
-        ListElement {
-            title: "Appearance"
-            icon: "appearance"
-        }
-
-        ListElement {
-            title: "Browser"
-            icon: "browser"
-        }
-
-        ListElement {
-            title: "Sounds"
-            icon: "sound"
-        }
-
-        ListElement {
-            title: "Language"
-            icon: "language"
-        }
-
-        ListElement {
-            title: "Notifications"
-            icon: "notification"
-        }
-
-        ListElement {
-            title: "Sync settings"
-            icon: "mobile"
-        }
-
-        ListElement {
-            title: "Advanced"
-            icon: "settings"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileOtherMenuItems
-
-        ListElement {
-            title: "Need help?"
-            icon: "help"
-        }
-
-        ListElement {
-            title: "About"
-            icon: "info"
-        }
-
-        ListElement {
-            title: "Sign out & Quit"
-            icon: "logout"
-        }
    }
 }
@@ -1,295 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
-
-Column {
-    spacing: 5
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-    }
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
-        chatInfoButton.pinnedMessagesCount: 1
-        chatInfoButton.muted: true
-    }
-
-    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-        chatInfoButton.pinnedMessagesCount: 1
-        notificationCount: 1
-    }
-
-    Row {
-        spacing: 5
-        Button {
-            id: btn
-            text: "Append"
-            onClicked: {
-                buttons.append({
-                    name: "Test community",
-                    tooltipText: "Test Community"
-                })
-            }
-        }
-
-        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
-            }
-        }
-
-        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
-            }
-
-            navBarCommunityTabButtons.model: ListModel {
-                id: buttons
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-                }
-            ]
-        }
-
-        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
-            }
-
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                }
-            ]
-        }
-
-        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
-            }
-
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-                }
-            ]
-        }
-
-        StatusAppNavBar {
-            id: test
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
-            }
-
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-                }
-            ]
-        }
-    }
-}
-
@@ -1,250 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-GridLayout {
-    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
-
-    StatusNavigationListItem {
-        title: "Menu Item"
-    }
-
-    StatusNavigationListItem {
-        title: "Menu Item"
-        icon.name: "info"
-    }
-
-    StatusNavigationListItem {
-        title: "Menu Item"
-        icon.name: "info"
-        badge.value: 1
-    }
-    StatusNavigationListItem {
-        title: "Menu Item (selected)"
-        selected: true
-        icon.name: "info"
-        badge.value: 1
-    }
-
-    StatusChatListItem {
-        id: test
-        name: "public-channel"
-        type: StatusChatListItem.Type.PublicChat
-    }
-
-    StatusChatListCategoryItem {
-        title: "Chat list category"
-        opened: false
-        showActionButtons: true
-    }
-
-    StatusChatListCategoryItem {
-        title: "Chat list category (opened)"
-        opened: true
-        showActionButtons: true
-    }
-
-    StatusChatListCategoryItem {
-        title: "Chat list category (no buttons)"
-        opened: true
-    }
-
-    StatusChatListItem {
-        name: "group-chat"
-        type: StatusChatListItem.Type.GroupChat
-    }
-
-    StatusChatListItem {
-        name: "community-channel"
-        type: StatusChatListItem.Type.CommunityChat
-    }
-
-    StatusChatListItem {
-        name: "community-channel-with-image"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-        type: StatusChatListItem.Type.CommunityChat
-    }
-
-    StatusChatListItem {
-        name: "Weird Crazy Otter"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-        type: StatusChatListItem.Type.OneToOneChat
-    }
-
-    StatusChatListItem {
-        name: "has-unread-messages"
-        type: StatusChatListItem.Type.PublicChat
-        hasUnreadMessages: true
-    }
-
-    StatusChatListItem {
-        name: "has-mentions"
-        type: StatusChatListItem.Type.PublicChat
-        badge.value: 1
-    }
-
-    StatusChatListItem {
-        name: "is-muted"
-        type: StatusChatListItem.Type.PublicChat
-        muted: true
-        onUnmute: muted = false
-    }
-
-    StatusChatListItem {
-        name: "selected-channel"
-        type: StatusChatListItem.Type.PublicChat
-        selected: true
-    }
-    StatusChatListItem {
-        name: "selected-muted-channel"
-        type: StatusChatListItem.Type.PublicChat
-        selected: true
-        muted: true
-    }
-
-    StatusListItem {
-        title: "Title"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-    }
-
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusButton {
-            text: "Button"
-            size: StatusBaseButton.Size.Small
-        }]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusSwitch {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusRadioButton {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusCheckBox {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [
-            StatusButton {
-                text: "Button"
-                size: StatusBaseButton.Size.Small
-            }
-        ]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [StatusSwitch {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [
-          StatusRadioButton {}
-        ]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [StatusCheckBox {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [
-            StatusBadge {
-                value: 1
-            },
-            StatusIcon {
-                icon: "info"
-                color: Theme.palette.baseColor1
-                width: 20
-                height: 20
-            }
-        ]
-    }
-
-    StatusListItem {
-        title: "Title"
-        icon.name: "info"
-        type: StatusListItem.Type.Secondary
-    }
-
-    StatusDescriptionListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-    }
-
-    StatusDescriptionListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        tooltip.text: "Tooltip"
-        icon.name: "info"
-        iconButton.onClicked: tooltip.visible = !tooltip.visible
-    }
-
-    StatusContactRequestsIndicatorListItem {
-        title: "Contact requests"
-        requestsCount: 3
-    }
-}
@@ -1,41 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
-
-    StatusLoadingIndicator {
-        color: Theme.palette.directColor4
-    }
-
-    StatusLetterIdenticon {
-        name: "#status"
-    }
-
-    StatusRoundedImage {
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-    }
-
-    StatusBadge {}
-
-    StatusBadge {
-        value: 1
-    }
-
-    StatusBadge {
-        value: 10
-    }
-
-    StatusBadge {
-        value: 100
-    }
-
-    StatusRoundIcon {
-        icon.name: "info"
-    }
-}
@@ -1,174 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-Column {
-    spacing: 20
-
-    StatusButton {
-        text: "Simple modal"
-        onClicked: simpleModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with header image"
-        onClicked: headerImageModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with footer buttons"
-        onClicked: footerButtonsModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with header action button"
-        onClicked: headerActionButtonModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with content"
-        onClicked: modalExample.open()
-    }
-
-    StatusButton {
-        text: "Modal with changable content"
-        onClicked: modalWithContentAccess.open()
-    }
-
-    StatusModal {
-        id: simpleModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-    }
-
-    StatusModal {
-        id: headerImageModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-    }
-
-    StatusModal {
-        id: footerButtonsModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-        leftButtons: [
-            StatusRoundButton {
-                icon.name: "arrow-right"
-                rotation: 180
-            }
-        ]
-        rightButtons: [
-            StatusButton {
-                text: "Button"
-            },
-            StatusButton {
-                text: "Button"
-            }
-        ]
-    }
-
-    StatusModal {
-        id: headerActionButtonModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-
-        headerActionButton: StatusFlatRoundButton {
-            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
-
-            icon.width: 20
-            icon.height: 20
-            icon.name: "info"
-        }
-
-        leftButtons: [
-            StatusRoundButton {
-                icon.name: "arrow-right"
-                rotation: 180
-            }
-        ]
-        rightButtons: [
-            StatusButton {
-                text: "Button"
-            },
-            StatusButton {
-                text: "Button"
-            }
-        ]
-    }
-
-    StatusModal {
-        id: modalExample
-        anchors.centerIn: parent
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-        header.title: "Header"
-        header.subTitle: "SubTitle"
-        rightButtons: [
-            StatusButton {
-                text: "Button"
-            },
-            StatusButton {
-                text: "Button"
-            }
-        ]
-
-        leftButtons: [
-            StatusRoundButton {
-                icon.name: "arrow-right"
-                rotation: 180
-            }
-        ]
-
-        content: StatusBaseText {
-            anchors.centerIn: parent
-            text: "Some text content"
-            font.pixelSize: 15
-            color: Theme.palette.directColor1
-        }
-
-        headerActionButton: StatusFlatRoundButton {
-            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
-
-            icon.width: 20
-            icon.height: 20
-            icon.name: "info"
-        }
-    }
-
-    StatusModal {
-        id: modalWithContentAccess
-        anchors.centerIn: parent
-        header.title: "Header"
-        header.subTitle: "SubTitle"
-
-        content: StatusBaseText {
-            id: text
-            anchors.centerIn: parent
-            text: "Some text content"
-            font.pixelSize: 15
-            color: Theme.palette.directColor1
-        }
-
-        rightButtons: [
-            StatusButton {
-                text: "Change text"
-                onClicked: {
-                    modalWithContentAccess.contentComponent.text = "Changed!"
-                }
-            }
-        ]
-    }
-}
@@ -1,72 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import QtQuick.Controls 2.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-GridLayout {
-    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
-
-    StatusButton {
-        text: "Simple"
-        onClicked: simpleMenu.popup()
-    }
-
-    StatusButton {
-        text: "Complex"
-        onClicked: complexMenu.popup()
-    }
-
-    StatusPopupMenu {
-        id: simpleMenu
-        StatusMenuItem { 
-            text: "One" 
-        }
-
-        StatusMenuItem { 
-            text: "Two"
-        }
-
-        StatusMenuItem { 
-            text: "Three"
-        }
-    }
-
-    StatusPopupMenu {
-        id: complexMenu
-        subMenuItemIcons: ['info']
-        StatusMenuItem { 
-            text: "One" 
-            icon.name: "info"
-        }
-
-        StatusMenuSeparator {}
-
-        StatusMenuItem { 
-            text: "Two"
-            icon.name: "info"
-        }
-
-        StatusMenuItem { 
-            text: "Three"
-            icon.name: "info"
-        }
-
-        StatusPopupMenu {
-            title: "Four"
-            StatusMenuItem { 
-                text: "One"
-                icon.name: "info"
-            }
-            StatusMenuItem { 
-                text: "Three"
-                icon.name: "info"
-            }
-        }
-    }
-}
@@ -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 {
@@ -0,0 +1,318 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Dialogs 1.3
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+
+Column {
+    spacing: 10
+    Grid {
+        id: buttonGridWidth
+        columns: 3
+        columnSpacing: 38
+        rowSpacing: 10
+
+        horizontalItemAlignment: Grid.AlignHCenter
+
+        // Large
+        StatusButton {
+            text: "Button"
+        }
+
+        StatusButton {
+            text: "Button"
+            enabled: false
+        }
+
+        StatusButton {
+            text: "Button"
+            loading: true
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            enabled: false
+        }
+
+        StatusButton {
+            text: "Button"
+            loading: true
+            type: StatusBaseButton.Type.Danger
+        }
+
+        StatusFlatButton {
+            text: "Button"
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            enabled: false
+
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            loading: true
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            enabled: false
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            loading: true
+        }
+
+        // Small
+        StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusButton {
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+            loading: true
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            size: StatusBaseButton.Size.Small
+            enabled: false
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            size: StatusBaseButton.Size.Small
+            loading: true
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+            loading: true
+        }
+
+        // Icon buttons
+
+        // blue
+
+        StatusRoundButton {
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            icon.name: "info"
+            loading: true
+        }
+
+        // black
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "info"
+            loading: true
+        }
+
+        // Rounded blue
+
+        StatusFlatRoundButton {
+            width: 44
+            height: 44
+
+            icon.name: "info"
+        }
+
+        StatusFlatRoundButton {
+            width: 44
+            height: 44
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            width: 44
+            height: 44
+            icon.name: "info"
+            loading: true
+        }
+
+        // Rounded white
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 44
+            height: 44
+
+            icon.name: "info"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 44
+            height: 44
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 44
+            height: 44
+            icon.name: "info"
+            loading: true
+        }
+
+        StatusFlatButton {
+            icon.name: "info"
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }
+        StatusFlatButton {
+            icon.name: "info"
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusFlatButton {
+            icon.name: "info"
+            text: "Button"
+            loading: true
+            size: StatusBaseButton.Size.Small
+        }
+
+        // Tertiary
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            loading: true
+        }
+
+        // No background Tertiary
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            color: "transparent"
+            icon.name: "gif"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            color: "transparent"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            color: "transparent"
+            loading: true
+        }
+
+        // Quartenery
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Quaternary
+            icon.name: "gif"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Quaternary
+            icon.name: "gif"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Quaternary
+            icon.name: "gif"
+            loading: true
+        }
+    }
+
+    StatusPickerButton {
+        width: buttonGridWidth.width
+        bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
+        contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
+        text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : "Pick a color"
+        onClicked: {
+            colorDialog.open();
+        }
+        ColorDialog {
+            id: colorDialog
+            property bool colorSelected: false
+            onAccepted: {
+                colorSelected = true;
+            }
+        }
+    }
+}
@@ -8,10 +8,25 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

 GridLayout {
-    columns: 6
+    columns: 1
    columnSpacing: 5
    rowSpacing: 5

+    StatusSelectableText {
+        color: Theme.palette.baseColor1
+        text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
+        font.pixelSize: 15
+        width: 300
+        multiline: true
+    }
+
+    StatusSelectableText {
+        color: Theme.palette.baseColor1
+        text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
+        font.pixelSize: 15
+        width: 200
+    }
+
    StatusIconTabButton {
        icon.name: "chat"
    }
@@ -115,6 +130,36 @@ GridLayout {
        pinnedMessagesCount: 1
    }

+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 100
+        }
+    }
+
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias big not elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 400
+        }
+    }
+
    StatusChatInfoButton {
        title: "group"
        subTitle: "Group Chat"
@@ -144,31 +189,18 @@ GridLayout {
        value: 40
    }

-    StatusBaseInput {
-        placeholderText: "One line"
+    StatusBanner {
+        id: banner
+        width: 360
+        topPadding: 20
+        type: StatusBanner.Type.Danger
+        statusText: "Banner"
    }

-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline"
-    }
-
-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline with static height"
-        implicitHeight: 100
-    }
-
-    Item {
-        implicitHeight: 300
-        implicitWidth: 300
-
-        StatusBaseInput {
-            anchors.centerIn: parent
-            multiline: true
-            placeholderText: "Multiline with max/min"
-            minimumHeight: 80
-            maximumHeight: 200
-        }
+    StatusProgressBar {
+        id: progressBar        
+        text: "Weak"
+        value: 0.5
+        fillColor : Theme.palette.pinColor1
    }
 }
@@ -0,0 +1,443 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Popups 0.1
+
+Column {
+    spacing: 5
+
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+    }
+
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
+        chatInfoButton.pinnedMessagesCount: 1
+        chatInfoButton.muted: true
+    }
+
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        chatInfoButton.pinnedMessagesCount: 1
+        notificationCount: 1
+    }
+
+    Row {
+        spacing: 5
+        Button {
+            id: btn
+            text: "Append"
+            onClicked: {
+                buttons.append({
+                    name: "Test community",
+                    tooltipText: "Test Community"
+                })
+            }
+        }
+
+        QtObject {
+            id: appSectionType
+            readonly property int chat: 0
+            readonly property int community: 1
+            readonly property int wallet: 2
+            readonly property int browser: 3
+            readonly property int nodeManagement: 4
+            readonly property int profileSettings: 5
+        }
+
+        StatusAppNavBar {
+
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+            }
+        }
+
+        StatusAppNavBar {
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+
+        StatusAppNavBar {
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+
+
+        StatusAppNavBar {
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+
+        StatusAppNavBar {
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
+                ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
+                ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
+                ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+
+
+    }
+}
+
@@ -0,0 +1,444 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+    }
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+        icon.name: "info"
+    }
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+        icon.name: "info"
+        badge.value: 1
+    }
+    StatusNavigationListItem {
+        title: "Menu Item (selected) with very long text"
+        selected: true
+        icon.name: "info"
+        badge.value: 1
+    }
+
+    StatusChatListItem {
+        id: test
+        name: "public-channel"
+        type: StatusChatListItem.Type.PublicChat
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category"
+        opened: false
+        showActionButtons: true
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (opened)"
+        opened: true
+        showActionButtons: true
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (no buttons)"
+        opened: true
+    }
+
+    StatusChatListItem {
+        name: "group-chat"
+        type: StatusChatListItem.Type.GroupChat
+    }
+
+    StatusChatListItem {
+        name: "community-channel"
+        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"
+        type: StatusChatListItem.Type.CommunityChat
+    }
+
+    StatusChatListItem {
+        name: "Weird Crazy Otter"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        type: StatusChatListItem.Type.OneToOneChat
+    }
+
+    StatusChatListItem {
+        name: "has-unread-messages"
+        type: StatusChatListItem.Type.PublicChat
+        hasUnreadMessages: true
+    }
+
+    StatusChatListItem {
+        name: "has-mentions"
+        type: StatusChatListItem.Type.PublicChat
+        hasUnreadMessages: true
+        notificationsCount: 1
+    }
+
+    StatusChatListItem {
+        name: "is-muted"
+        type: StatusChatListItem.Type.PublicChat
+        muted: true
+        onUnmute: muted = false
+    }
+
+    StatusChatListItem {
+        name: "muted-with-mentions"
+        type: StatusChatListItem.Type.PublicChat
+        muted: true
+        hasUnreadMessages: true
+        notificationsCount: 1
+    }
+
+    StatusChatListItem {
+        name: "selected-channel"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+    }
+
+    StatusChatListItem {
+        name: "selected-muted-channel"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+        muted: true
+    }
+
+    StatusChatListItem {
+        name: "selected-muted-channel-with-unread-messages"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+        muted: true
+        hasUnreadMessages: true
+    }
+
+    StatusChatListItem {
+        name: "selected-muted-with-mentions"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+        muted: true
+        hasUnreadMessages: true
+        notificationsCount: 1
+    }
+
+
+    StatusListItem {
+        title: "Title"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        tertiaryTitle: "Tertiary title"
+
+        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.weight: Font.Bold
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
+        tertiaryTitle: "Tertiary title"
+        icon.name: "info"
+
+        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.weight: Font.Bold
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusRadioButton {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusButton {
+                text: "Button"
+                size: StatusBaseButton.Size.Small
+            }
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+          StatusRadioButton {}
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusBadge {
+                value: 1
+            },
+            StatusIcon {
+                icon: "info"
+                color: Theme.palette.baseColor1
+                width: 20
+                height: 20
+            }
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        icon.name: "info"
+        type: StatusListItem.Type.Secondary
+    }
+
+    StatusListItem {
+        title: "Title"
+        icon.isLetterIdenticon: true
+        icon.color: "orange"
+    }
+
+    StatusListItem {
+        title: "Title"
+        titleAsideText: "test"
+    }
+
+    StatusListItem {
+        title: "Title"
+        icon.name: "delete"
+        type: StatusListItem.Type.Danger
+    }
+
+    StatusListItem {
+        title: "List Item with Badge"
+        subTitle: "Subtitle"
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        badge.primaryText: "CryptoKitties"
+        badge.secondaryText: "#test"
+    }
+
+    StatusListItem {
+        title: "List Item with Badge 2"
+        subTitle: "Subtitle"
+        icon.isLetterIdenticon: true
+        badge.primaryText: "CryptoKitties"
+        badge.secondaryText: "#test"
+        badge.icon.color: "orange"
+        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"
+    }
+
+    StatusDescriptionListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        value: "None"
+        sensor.enabled: true
+    }
+
+    StatusDescriptionListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        tooltip.text: "Tooltip"
+        icon.name: "info"
+        iconButton.onClicked: tooltip.visible = !tooltip.visible
+    }
+
+    StatusContactRequestsIndicatorListItem {
+        title: "Contact requests"
+        requestsCount: 3
+    }
+
+    StatusMemberListItem {
+        nickName: "This is an example"
+        userName: "annabelle"
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+        isOnline: true
+        ringSettings.ringSpecModel:
+            ListModel {
+                ListElement {colorId: 13; segmentLength: 5}
+                ListElement {colorId: 31; segmentLength: 5}
+                ListElement {colorId: 10; segmentLength: 1}
+                ListElement {colorId: 2; segmentLength: 5}
+                ListElement {colorId: 26; segmentLength: 2}
+                ListElement {colorId: 19; segmentLength: 4}
+                ListElement {colorId: 28; segmentLength: 3}
+            }
+        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+    }
+
+    StatusMemberListItem {
+        nickName: "carmen.eth"
+        isOnline: false
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+    }
+
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isOnline: false
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+    }
+
+    StatusMemberListItem {
+        nickName: "This girl I know from work"
+        userName: "annabelle"
+        isOnline: true
+    }
+
+    StatusMemberListItem {
+        nickName: "Mark Cuban"
+        userName: "annabelle"
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+    }
+}
@@ -0,0 +1,61 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+ColumnLayout {
+    GridLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        columns: 6
+        columnSpacing: 5
+        rowSpacing: 5
+
+        StatusLoadingIndicator {
+            color: Theme.palette.directColor4
+        }
+
+        StatusLetterIdenticon {
+            name: "#status"
+        }
+
+        StatusRoundedImage {
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        }
+
+        StatusBadge {}
+
+        StatusBadge {
+            value: 1
+        }
+
+        StatusBadge {
+            value: 10
+        }
+
+        StatusBadge {
+            value: 100
+        }
+
+        StatusRoundIcon {
+            icon.name: "info"
+        }
+    }
+
+    Flow {
+        Layout.fillWidth: true
+        spacing: 4
+
+        Repeater {
+            model: 12
+            StatusLetterIdenticon {
+                name: "A"
+                color: Theme.palette.userCustomizationColors[index]
+                letterSize: 16
+            }
+        }
+    }
+}
+
@@ -0,0 +1,408 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+Column {
+    spacing: 20
+
+    StatusButton {
+        text: "Simple modal"
+        onClicked: simpleModal.open()
+    }
+
+    StatusButton {
+        text: "Simple title modal"
+        onClicked: simpleTitleModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with header image"
+        onClicked: headerImageModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with footer buttons"
+        onClicked: footerButtonsModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with header action button"
+        onClicked: headerActionButtonModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with content"
+        onClicked: modalExample.open()
+    }
+
+    StatusButton {
+        text: "Modal with changable content"
+        onClicked: modalWithContentAccess.open()
+    }
+
+    StatusButton {
+        text: "Modal with letter identicon"
+        onClicked: modalWithLetterIdenticon.open()
+    }
+
+    StatusButton {
+        text: "Modal with identicon"
+        onClicked: modalWithIdenticon.open()
+    }
+
+    StatusButton {
+        text: "Modal with editable identicon"
+        onClicked: modalWithEditableIdenticon.open()
+    }
+
+    StatusButton {
+        text: "Modal with long titles"
+        onClicked: modalWithLongTitles.open()
+    }
+
+    StatusButton {
+        text: "Modal with Header Popup Menu"
+        onClicked: modalWithHeaderPopupMenu.open()
+    }
+
+    StatusButton {
+        text: "Spellchecking menu"
+        onClicked: spellMenu.open()
+    }
+
+    StatusButton {
+        text: "Modal with Editable Title"
+        onClicked: editTitleModal.open()
+    }
+
+    StatusButton {
+        text: "Modal with Advanced Header/Footer"
+        onClicked: advancedHeaderFooterModal.open()
+    }
+
+    StatusModal {
+        id: simpleModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+    }
+
+    StatusModal {
+        id: simpleTitleModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+    }
+
+    StatusModal {
+        id: headerImageModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusModal {
+        id: footerButtonsModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+    }
+
+    StatusModal {
+        id: headerActionButtonModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "info"
+        }
+
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalExample
+        anchors.centerIn: parent
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "info"
+        }
+    }
+
+    StatusModal {
+        id: modalWithContentAccess
+        anchors.centerIn: parent
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+
+        contentItem: StatusBaseText {
+            id: text
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithContentAccess.contentItem.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalWithLetterIdenticon
+        anchors.centerIn: parent
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        header.icon.isLetterIdenticon: true
+        header.icon.background.color: "red"
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithLetterIdenticon.contentItem.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalWithIdenticon
+        anchors.centerIn: parent
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithIdenticon.contentItem.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalWithEditableIdenticon
+        anchors.centerIn: parent
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        header.headerImageEditable: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithIdenticon.contentItem.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalWithLongTitles
+        anchors.centerIn: parent
+        header.title: "Some super long text here that exceeds the available space"
+        header.subTitle: "Some super long text here that exceeds the available space"
+        header.subTitleElide: Text.ElideMiddle
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithLongTitles.contentItem.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalWithHeaderPopupMenu
+        anchors.centerIn: parent
+        header.title: "helloworld.eth"
+        header.subTitle: "Basic address"
+        header.popupMenu: StatusPopupMenu {
+            id: popupMenu
+            Repeater {
+                model: dummyAccountsModel
+                delegate: Loader {
+                    sourceComponent: popupMenu.delegate
+                    onLoaded: {
+                        item.action.text = model.name
+                        item.action.iconSettings.name = model.iconName
+                    }
+                }
+            }
+            onMenuItemClicked: {
+                popupMenu.dismiss()
+            }
+        }
+    }
+
+    StatusModal {
+        id: editTitleModal
+        anchors.centerIn: parent
+        header.title: "This title can be edited"
+        header.editable: true
+    }
+
+    StatusModal {
+        id: advancedHeaderFooterModal
+        anchors.centerIn: parent
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        showAdvancedFooter: true
+        height: 200
+        advancedHeaderComponent: Rectangle {
+            width: parent.width
+            height: 50
+            color: Theme.palette.baseColor1
+            border.width: 1
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: "Add any header here"
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+        }
+        advancedFooterComponent: Rectangle {
+            width: parent.width
+            height: 50
+            color: Theme.palette.baseColor1
+            border.width: 1
+            StatusBaseText {
+                anchors.centerIn: parent
+                text: "Add any footer here"
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+        }
+    }
+
+    ListModel {
+        id: dummyAccountsModel
+        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 2"; iconName: "filled-account"}
+    }
+
+    StatusSpellcheckingMenuItems {
+        id: spellMenu
+        anchors.centerIn: parent
+        suggestions: ["suggestion1", "suggestion2", "suggestion3", "suggestion4"]
+    }
+}
@@ -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"
+            }
+        ]
+    }
+}
@@ -0,0 +1,99 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Page {
+    id: root
+    anchors.fill: parent
+    anchors.margins: 16
+    property ListModel contactsModel: null
+    background: null
+
+    header: RowLayout {
+        id: headerRow
+        width: parent.width
+        height: tagSelector.height
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+
+        StatusTagSelector {
+            id: tagSelector
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            Layout.leftMargin: 17
+            maxHeight: root.height
+            toLabelText: qsTr("To: ")
+            warningText: qsTr("USER LIMIT REACHED")
+            listLabel: qsTr("Contacts")
+            ringSpecModelGetter: function(pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.getColorHashAsJson(pubKey)
+                var index = -1;
+                if (!!contactsModel) {
+                    for (var i = 0; i < contactsModel.count; i++) {
+                        if (contactsModel.get(i).publicId === pubKey) {
+                            index = i;
+                        }
+                    }
+                    return contactsModel.get(index).ringSpecModel;
+                } else {
+                    return null;
+                }
+            }
+            compressedKeyGetter: function(pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.getCompressedPk(pubKey);
+                var possibleCharacters = pubKey.split('');
+                var randomStringLength = 12; // assuming you want random strings of 12 characters
+                var randomString = [];
+                for (var i=0; i<randomStringLength; ++i) {
+                    var index = (Math.random() * possibleCharacters.length).toFixed(0);
+                    var nextChar = possibleCharacters[index];
+                    randomString.push(nextChar);
+                }
+                return randomString.join().toString().replace(/,/g, '');
+            }
+            onTextChanged: {
+                sortModel(root.contactsModel);
+            }
+            Component.onCompleted: {
+                textEdit.forceActiveFocus();
+                sortModel(root.contactsModel);
+            }
+        }
+
+        StatusButton {
+            implicitHeight: 44
+            Layout.alignment: Qt.AlignTop
+            enabled: (tagSelector.namesModel.count > 0)
+            text: "Confirm"
+        }
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+        anchors.topMargin: 68
+
+        StatusBaseText {
+            visible: (contactsModel.count === 0)
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+            text: qsTr("You can only send direct messages to your Contacts. \n\n
+Send a contact request to the person you would like to chat with, you will be\n able to
+chat with them once they have accepted your contact request.")
+            Component.onCompleted: {
+                if (visible) {
+                    tagSelector.enabled = false;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,111 @@
+import QtQuick 2.12
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
+    id: root
+
+    anchors.centerIn: parent
+
+    header.title: "Cryptokitties"
+    header.subTitle: "Public Community"
+    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+    contentItem: Column {
+        width: root.width
+
+        StatusModalDivider {
+            bottomPadding: 8
+        }
+
+        StatusBaseText {
+            text: "A community of cat lovers, meow!"
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: 15
+            height: 46
+            color: Theme.palette.directColor1
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 16
+            anchors.rightMargin: 16
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusDescriptionListItem {
+            title: "Share community"
+            subTitle: "https://join.status.im/u/0x04...45f19"
+            tooltip.text: "Copy to clipboard"
+            icon.name: "copy"
+            iconButton.onClicked: tooltip.visible = !tooltip.visible
+            width: parent.width
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Members"
+            icon.name: "group-chat"
+            label: "184"
+            components: [
+                StatusIcon {
+                    icon: "chevron-down"
+                    rotation: 270
+                    color: Theme.palette.baseColor1
+                }
+            ]
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Notifications"
+            icon.name: "notification"
+            components: [
+                StatusSwitch {}
+            ]
+        }
+
+        StatusModalDivider {
+            topPadding: 8
+            bottomPadding: 8
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Edit community"
+            icon.name: "edit"
+            type: StatusListItem.Type.Secondary
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Transfer ownership"
+            icon.name: "exchange"
+            type: StatusListItem.Type.Secondary
+        }
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            statusListItemTitle.font.pixelSize: 17
+            title: "Leave community"
+            icon.name: "arrow-right"
+            icon.rotation: 180
+            type: StatusListItem.Type.Secondary
+        }
+    }
+}
@@ -0,0 +1,40 @@
+import QtQuick 2.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusModal {
+    id: root
+
+    header.title: "Contact Requests"
+    headerActionButton: StatusFlatRoundButton {
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 32
+        height: 32
+
+        icon.width: 20
+        icon.height: 20
+        icon.name: "notification"
+    }
+
+    contentItem: StatusBaseText {
+        anchors.centerIn: parent
+        text: "Contact request will be shown here"
+        font.pixelSize: 15
+        color: Theme.palette.directColor1
+    }
+
+    rightButtons: [
+        StatusButton {
+            text: "Decline all"
+            type: StatusBaseButton.Type.Danger
+            onClicked: root.close()
+        },
+        StatusButton {
+            text: "Accept all"
+            onClicked: root.close()
+        }
+    ]
+}
@@ -0,0 +1,191 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppThreePanelLayout {
+    id: root
+    property bool createChat: false
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: headline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Chat"
+        }
+
+        RowLayout {
+            id: searchInputWrapper
+            width: 288
+            height: searchInput.height
+            anchors.top: headline.bottom
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            StatusBaseInput {
+                id: searchInput
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                implicitHeight: 36
+                topPadding: 8
+                bottomPadding: 8
+                placeholderText: "Search"
+                icon.name: "search"
+            }
+
+            StatusIconTabButton {
+                icon.name: "public-chat"
+            }
+
+            StatusIconTabButton {
+                icon.name: "edit"
+                onClicked: {
+                    root.createChat = !root.createChat;
+                }
+            }
+        }
+
+        Column {
+            anchors.top: searchInputWrapper.bottom
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 8
+
+            StatusContactRequestsIndicatorListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                title: "Contact requests"
+                requestsCount: 3
+                sensor.onClicked: demoContactRequestsModal.open()
+            }
+
+            StatusChatList {
+                model: Models.demoChatListItems
+                highlightItem: !root.createChat
+                onChatItemUnmuted: {
+                    for (var i = 0; i < Models.demoChatListItems.count; i++) {
+                        let item = Models.demoChatListItems.get(i);
+                        if (item.chatId === id) {
+                            Models.demoChatListItems.setProperty(i, "muted", false)
+                        }
+                    }
+                }
+
+                popupMenu: StatusPopupMenu {
+
+                    property string chatId
+
+                    openHandler: function (id) {
+                        chatId = id
+                    }
+
+                    StatusMenuItem {
+                        text: "View Profile"
+                        icon.name: "group-chat"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Mute chat"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Clear history"
+                        icon.name: "close-circle"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete chat"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+    }
+
+    centerPanel: Loader {
+        anchors.fill: parent
+        sourceComponent: root.createChat ? createChatView : chatChannelView
+        Component {
+            id: createChatView
+            CreateChatView {
+                contactsModel: Models.membersListModel
+            }
+        }
+
+        Component {
+            id: chatChannelView
+            ChatChannelView {
+                model: Models.chatMessagesModel
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+
+        StatusChatToolBar {
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "Amazing Funny Squirrel"
+            chatInfoButton.subTitle: "Contact"
+            chatInfoButton.icon.color: Theme.palette.miscColor7
+            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+            chatInfoButton.pinnedMessagesCount: 1
+
+            searchButton.visible: false
+            membersButton.visible: false
+            notificationCount: 1
+
+            onNotificationButtonClicked: notificationCount = 0
+
+            popupMenu: StatusPopupMenu {
+                id: contextMenu
+
+                StatusMenuItem {
+                    text: "Mute Chat"
+                    icon.name: "notification"
+                }
+                StatusMenuItem {
+                    text: "Mark as Read"
+                    icon.name: "checkmark-circle"
+                }
+                StatusMenuItem {
+                    text: "Clear History"
+                    icon.name: "close-circle"
+                }
+
+                StatusMenuSeparator {}
+
+                StatusMenuItem {
+                    text: "Leave Chat"
+                    icon.name: "arrow-right"
+                    icon.width: 14
+                    iconRotation: 180
+                    type: StatusMenuItem.Type.Danger
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,273 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppThreePanelLayout {
+    id: root
+
+    property string communityDetailModalTitle: ""
+    property string communityDetailModalImage: ""
+    signal chatInfoButtonClicked()
+
+    handle: Rectangle {
+        implicitWidth: 5
+        color: SplitHandle.pressed ? Theme.palette.baseColor2
+                                   : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+    }
+    leftPanel: Item {
+        id: leftPanel
+
+        StatusChatInfoToolBar {
+            id: statusChatInfoToolBar
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            chatInfoButton.title: "CryptoKitties"
+            chatInfoButton.subTitle: "128 Members"
+            chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
+            chatInfoButton.onClicked:  { chatInfoButtonClicked(); }
+
+            popupMenu: StatusPopupMenu {
+
+                StatusMenuItem {
+                    text: "Create channel"
+                    icon.name: "channel"
+                }
+
+                StatusMenuItem {
+                    text: "Create category"
+                    icon.name: "channel-category"
+                }
+
+                StatusMenuSeparator {}
+
+                StatusMenuItem {
+                    text: "Invite people"
+                    icon.name: "share-ios"
+                }
+
+            }
+        }
+
+        ScrollView {
+            id: scrollView
+
+            anchors.top: statusChatInfoToolBar.bottom
+            anchors.topMargin: 8
+            anchors.bottom: parent.bottom
+            width: leftPanel.width
+
+            contentHeight: communityCategories.height
+            clip: true
+
+            StatusChatListAndCategories {
+                id: communityCategories
+                width: leftPanel.width
+                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+
+                draggableItems: true
+                draggableCategories: false
+                model: Models.demoCommunityChatListItems
+
+                showCategoryActionButtons: true
+
+                categoryPopupMenu: StatusPopupMenu {
+
+                    property string categoryId
+
+                    openHandler: function (id) {
+                        categoryId = id
+                    }
+
+                    StatusMenuItem {
+                        text: "Mute Category"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Edit Category"
+                        icon.name: "edit"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete Category"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+
+                chatListPopupMenu: StatusPopupMenu {
+
+                    property string chatId
+
+                    StatusMenuItem {
+                        text: "Mute chat"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Clear history"
+                        icon.name: "close-circle"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete chat"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+
+                popupMenu: StatusPopupMenu {
+                    StatusMenuItem {
+                        text: "Create channel"
+                        icon.name: "channel"
+                    }
+
+                    StatusMenuItem {
+                        text: "Create category"
+                        icon.name: "channel-category"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Invite people"
+                        icon.name: "share-ios"
+                    }
+                }
+            }
+        }
+    }
+
+    centerPanel: Item {
+        StatusChatToolBar {
+            id: statusChatToolBar
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "general"
+            chatInfoButton.subTitle: "Community Chat"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
+            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            onSearchButtonClicked: {
+                searchButton.highlighted = !searchButton.highlighted;
+                searchPopup.setSearchSelection(communityDetailModalTitle,
+                                               "",
+                                               communityDetailModalImage);
+                searchPopup.open();
+            }
+            membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+            onMembersButtonClicked: {
+                root.showRightPanel = !root.showRightPanel;
+            }
+        }
+
+        StatusSearchPopup {
+            id: searchPopup
+            searchOptionsPopupMenu: searchPopupMenu
+            onAboutToHide: {
+                if (searchPopupMenu.visible) {
+                    searchPopupMenu.close();
+                }
+                //clear menu
+                for (var i = 2; i < searchPopupMenu.count; i++) {
+                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                }
+            }
+            onClosed: {
+                statusChatToolBar.searchButton.highlighted = false
+                searchPopupMenu.dismiss();
+            }
+            onSearchTextChanged: {
+                if (searchPopup.searchText !== "") {
+                    searchPopup.loading = true;
+                    searchModelSimTimer.start();
+                } else {
+                    searchPopup.searchResults = [];
+                    searchModelSimTimer.stop();
+                }
+            }
+            Timer {
+                id: searchModelSimTimer
+                interval: 500
+                onTriggered: {
+                    if (searchPopup.searchText.startsWith("c")) {
+                        searchPopup.searchResults = Models.searchResultsA;
+                    } else {
+                        searchPopup.searchResults = Models.searchResultsB;
+                    }
+                    searchPopup.loading = false;
+                }
+            }
+        }
+        StatusSearchLocationMenu {
+            id: searchPopupMenu
+            searchPopup: searchPopup
+            locationModel: Models.optionsModel
+        }
+    }
+
+    rightPanel: Item {
+        id: rightPanel
+        StatusBaseText {
+            id: titleText
+            anchors.top: parent.top
+            anchors.topMargin:16
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+            visible: (opacity > 0.1)
+            font.pixelSize: 15
+            text: qsTr("Members")
+        }
+
+        ListView {
+            anchors.top: titleText.bottom
+            anchors.topMargin: 16
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 16
+            boundsBehavior: Flickable.StopAtBounds
+            model: Models.membersListModel
+            delegate: StatusMemberListItem {
+                implicitWidth: parent.width
+                nickName: model.nickName
+                userName: model.name
+                chatKey: model.publicId
+                trustIndicator: model.trustIndicator
+                isMutualContact: model.isMutualContact
+                image.source: model.icon
+                image.isIdenticon: model.isIdenticon
+                isOnline: model.onlineStatus
+                ringSettings.ringSpecModel: model.ringSpecModel
+            }
+        }
+    }
+}
@@ -0,0 +1,77 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+import StatusQ.Core.Theme 0.1
+
+import "data" 1.0
+
+StatusAppTwoPanelLayout {
+    id: root
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: profileHeadline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Profile"
+        }
+
+        ScrollView {
+            anchors.top: profileHeadline.bottom
+            anchors.topMargin: 16
+            anchors.bottom: parent.bottom
+            width: parent.width
+
+            contentHeight: profileMenuItems.height + 8
+            contentWidth: parent.width
+            clip: true
+
+            Column {
+                id: profileMenuItems
+                anchors.horizontalCenter: parent.horizontalCenter
+                spacing: 4
+
+                Repeater {
+                    model: Models.demoProfileGeneralMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                StatusListSectionHeadline { text: "Settings" }
+
+                Repeater {
+                    model: Models.demoProfileSettingsMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+
+                Item {
+                    id: invisibleSeparator
+                    height: 16
+                    width: parent.width
+                }
+
+                Repeater {
+                    model: Models.demoProfileOtherMenuItems
+                    delegate: StatusNavigationListItem {
+                        title: model.title
+                        icon.name: model.icon
+                    }
+                }
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+    }
+}
@@ -0,0 +1 @@
+singleton Models 1.0 Models.qml
@@ -11,6 +11,11 @@ int main(int argc, char *argv[])
 #endif

    SandboxApp app(argc, argv);
+
+    app.setOrganizationName("Status");
+    app.setOrganizationDomain("status.im");
+    app.setApplicationName("Sandbox");
+
    app.startEngine();

    return app.exec();
@@ -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,10 +14,12 @@ 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
-                                                                  :  1024
+                                                                  :  1224
    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
                                                                   :840
    visible: true
@@ -29,11 +33,30 @@ StatusWindow {

    property real factor: 1.0

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

-        rootWindow.updatePosition();
+    QtObject {
+        id: appSectionType
+        readonly property int chat: 0
+        readonly property int community: 1
+        readonly property int wallet: 2
+        readonly property int browser: 3
+        readonly property int nodeManagement: 4
+        readonly property int profileSettings: 5
+        readonly property int apiDocumentation: 100
+        readonly property int demoApp: 101
+    }
+
+    function setActiveItem(sectionId) {
+        for (var i = 0; i < Models.mainAppSectionsModel.count; i++) {
+            let item = Models.mainAppSectionsModel.get(i)
+            if (item.sectionId !== sectionId) {
+                Models.mainAppSectionsModel.setProperty(i, "active", false);
+                continue
+            }
+
+            Models.mainAppSectionsModel.setProperty(i, "active", true);
+        }
    }

    StatusAppLayout {
@@ -43,37 +66,36 @@ StatusWindow {
        appNavBar: StatusAppNavBar {
            height: rootWindow.height

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

-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    id: apiDocsButton
-                    icon.name: "edit"
-                    tooltip.text: "API Documentation"
-                    onClicked: {
-                        stackView.clear()
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                onClicked: {
+                    stackView.clear()
+                    if(model.sectionType === appSectionType.apiDocumentation)
+                    {
                        stackView.push(libraryDocumentationCmp)
-                        checked = !checked
-                        demoAppButton.checked = false
+                        rootWindow.setActiveItem(sectionId)
                    }
-                },
-                StatusNavBarTabButton {
-                    id: demoAppButton
-                    icon.name: "status"
-                    tooltip.text: "Demo Application"
-                    checked: stackView.currentItem == demoAppCmp
-                    onClicked: {
-                        stackView.clear()
+                    else if(model.sectionType === appSectionType.demoApp)
+                    {
                        stackView.push(demoAppCmp)
-                        checked = !checked
-                        apiDocsButton.checked = false
+                        rootWindow.setActiveItem(model.sectionId)
                    }
                }
-            ]
+            }
        }

        appView: StackView {
@@ -87,12 +109,10 @@ StatusWindow {
            anchors.topMargin: 32
            anchors.right: parent.right
            anchors.rightMargin: 32
-            onCheckedChanged: {
-                if (Theme.palette === rootWindow.lightTheme) {
-                    Theme.palette = rootWindow.darkTheme
-                } else {
-                    Theme.palette = rootWindow.lightTheme
-                }
+            lightThemeEnabled: storeSettings.lightTheme
+            onLightThemeEnabledChanged: {
+                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
+                storeSettings.lightTheme = lightThemeEnabled
            }
        }
    }
@@ -101,6 +121,16 @@ StatusWindow {
        id: libraryDocumentationCmp

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

            leftPanel: Item {
                anchors.fill: parent
@@ -120,56 +150,167 @@ StatusWindow {

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

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

                        StatusListSectionHeadline { text: "StatusQ.Controls" }
                        StatusNavigationListItem { 
-                            title: "Buttons" 
-                            selected: page.sourceComponent == buttonsComponent
-                            onClicked: page.sourceComponent = buttonsComponent
+                            title: "Buttons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                        }
                        StatusNavigationListItem { 
-                            title: "Controls" 
-                            selected: page.sourceComponent == controlsComponent
-                            onClicked: page.sourceComponent = controlsComponent
+                            title: "StatusSwitchTab"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page("StatusTabSwitch");
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusChatCommandButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "Controls"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusTabBarButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusTabBarIconButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusInput"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusSelect"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusAccountSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusAssetSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusColorSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusWalletColorButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusWalletColorSelect"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusPasswordStrengthIndicator"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusPinInput"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                        }
                        StatusListSectionHeadline { text: "StatusQ.Components" }
+                        StatusNavigationListItem { 
+                            title: "StatusAddress"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                        StatusNavigationListItem { 
                            title: "List Items"
-                            selected: page.sourceComponent == listItemsComponent
-                            onClicked: page.sourceComponent = listItemsComponent
+                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                        }
                        StatusNavigationListItem { 
                            title: "StatusChatInfoToolBar"
-                            selected: page.sourceComponent == chatInfoToolBarComponent
-                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                        }
                        StatusNavigationListItem { 
                            title: "Others"
-                            selected: page.sourceComponent == othersComponent
-                            onClicked: page.sourceComponent = othersComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusExpandableItem"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page("StatusExpandableSettingsItem");
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusTagSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusToastMessage"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusWizardStepper"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusListPicker"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                        StatusNavigationListItem { 
                            title: "StatusPopupMenu"
-                            selected: page.sourceComponent == popupMenuComponent
-                            onClicked: page.sourceComponent = popupMenuComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                        }

                        StatusNavigationListItem {
                            title: "StatusModal"
-                            selected: page.sourceComponent == statusModalComponent
-                            onClicked: page.sourceComponent = statusModalComponent
+                            selected: viewLoader.source.toString().includes("Popups")
+                            onClicked: mainPageView.control("Popups");
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Platform" }
+                        StatusNavigationListItem {
+                            title: "StatusMacNotification"
+                            selected: 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);
                        }
                    }
                }
@@ -180,27 +321,43 @@ StatusWindow {
                anchors.fill: parent

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

                    Item {
                        id: pageWrapper
                        width: rightPanel.width
                        anchors.top: parent.top
-                        anchors.topMargin: 64
-                        height: Math.max(rootWindow.height, page.height + 128)
+                        height: Math.max(rootWindow.height, viewLoader.height + 128)
                        scale: rootWindow.factor
+
                        Loader {
-                            id: page
-                            active: true
+                            id: viewLoader
+                            active: !storeSettings.fillPage
                            anchors.centerIn: parent
-                            sourceComponent: iconsComponent
+                            source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
+                            onSourceChanged: {
+                                storeSettings.selected = viewLoader.source
+                                if (source.toString().includes("Icons")) {
+                                    item.iconColor = Theme.palette.primaryColor1;
+                                }
+                            }
                        }
                    }
                }
+                Loader {
+                    active: storeSettings.fillPage
+                    anchors.fill: parent
+                    anchors.topMargin: 64
+                    visible: storeSettings.fillPage
+                    clip: true
+
+                    source: viewLoader.source
+                }
            }
        }
    }
@@ -228,61 +385,45 @@ StatusWindow {
        }
    }

-    Component {
-        id: iconsComponent
-        Icons { iconColor: Theme.palette.primaryColor1 }
-    }
-
-    Component {
-        id: controlsComponent
-        Controls {}
-    }
-
-    Component {
-        id: listItemsComponent
-        ListItems {}
-    }
-
-    Component {
-        id: layoutComponent
-        Layout {}
-    }
-
-    Component {
-        id: othersComponent
-        Others {}
-    }
-
-    Component {
-        id: buttonsComponent
-        Buttons {}
-    }
-
-    Component {
-        id: popupMenuComponent
-        StatusPopupMenuPage {}
-    }
-
-    Component {
-        id: chatInfoToolBarComponent
-        StatusChatInfoToolBarPage {}
-    }
-
-    Component {
-        id: statusModalComponent
-        Popups {}
-    }
-
    Component {
        id: demoAppCmp

        Rectangle {
            anchors.fill: parent
            color: Theme.palette.baseColor3
+
+            Row {
+                id: platformSwitch
+                anchors.left: demoApp.left
+                anchors.bottom: demoApp.top
+                anchors.bottomMargin: 20
+                spacing: 2
+
+                Text {
+                    text: "OSX"
+                    font.pixelSize: 15
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StatusSwitch {
+                    onCheckedChanged: {
+                        if (checked) {
+                            demoApp.titleStyle = "windows"
+                        } else {
+                            demoApp.titleStyle = "osx"
+                        }
+                    }
+                }
+
+                Text {
+                    text: "Win"
+                    font.pixelSize: 15
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
            DemoApp {
                id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
            }
            DropShadow {
                anchors.fill: demoApp
@@ -301,6 +442,8 @@ StatusWindow {
        anchors.top: parent.top
        anchors.margins: 13

+        visible: Qt.platform.os == "osx"
+
        onClose: {
            rootWindow.close()
        }
@@ -313,4 +456,30 @@ StatusWindow {
            rootWindow.toggleFullScreen()
        }
    }
+
+    StatusWindowsTitleBar {
+        anchors.top: parent.top
+        width: parent.width
+
+        visible: Qt.platform.os == "windows"
+
+        onClose: {
+            rootWindow.close()
+        }
+
+        onMinimised: {
+            rootWindow.showMinimized()
+        }
+
+        onMaximized: {
+            rootWindow.toggleFullScreen()
+        }
+    }
+
+    Settings {
+        id: storeSettings
+        property string selected: ""
+        property bool lightTheme: true
+        property bool fillPage: false
+    }
 }
@@ -0,0 +1,64 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Sandbox 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+
+Column {
+    spacing: 8
+
+    StatusAccountSelector {
+        id: accountSelector
+        accounts: ListModel {
+            ListElement {
+                name: "Pascal"
+                address: "0x1234567891011"
+                path: ""
+                color: "red"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "1199.02"
+                assets: []
+            }
+            ListElement {
+                name: "Boris"
+                address: "0x123"
+                path: ""
+                color: "red"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
+            ListElement {
+                name: "Alexandra"
+                address: "0x123"
+                path: ""
+                color: "yellow"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
+            ListElement {
+                name: "Khushboo"
+                address: "0x123"
+                path: ""
+                color: "blue"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
+        }
+    }
+}
@@ -0,0 +1,25 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusAddress {
+        text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+    }
+
+    Item {
+        width: 200
+        height: childrenRect.height
+        StatusAddress {
+            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+            expandable: true
+            width: parent.width
+        }
+    }
+}
@@ -0,0 +1,40 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusAssetSelector {
+        getCurrencyBalanceString: function (currencyBalance) {
+            return currencyBalance.toFixed(2) + " USD"
+        }
+        tokenAssetSourceFn: function (symbol) {
+            return "../../assets/img/icons/snt.svg"
+        }
+        assets: ListModel {
+            ListElement {
+                address: "0x1234"
+                name: "Status Network Token"
+                balance: "20"
+                symbol: "SNT"
+                currencyBalance: 9992.01
+            }
+            ListElement {
+                address: "0x1234"
+                name: "DAI Token"
+                balance: "15"
+                symbol: "DAI"
+                currencyBalance: 20.00001
+            }
+        }
+    }
+}
+
@@ -0,0 +1,26 @@
+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 Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusChatCommandButton {
+        icon.name: "send"
+        icon.color: Theme.palette.miscColor2
+        text: "Send transaction"
+    }
+
+    StatusChatCommandButton {
+        icon.name: "send"
+        icon.rotation: 180
+        icon.color: Theme.palette.miscColor8
+        text: "Receive transaction"
+    }
+}
@@ -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
+    }
+}
@@ -0,0 +1,17 @@
+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 Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusColorSelector {
+        model: ["red", "blue", "green"]
+    }
+}
@@ -0,0 +1,152 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Column {
+    spacing: 12
+    width: 800
+    anchors.top:parent.top
+    leftPadding: 20
+    rightPadding: 20
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color: Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Primary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: false
+        icon.name: "seed-phrase"
+        primaryText: "Back up seed phrase"
+        secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
+        button.text: qsTr("Back up seed phrase")
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "secret"
+        primaryText: "Account signing phrase"
+        secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "seed-phrase"
+        primaryText: "View private key"
+        secondaryText: "Back up your seed phrase now to secure this account"
+        expandableComponent: notImplemented
+        button.text: "View private key"
+        button.icon.name: "tiny/public-chat"
+        button.onClicked: {
+            // To-do open  enter password Modal
+            expanded = !expanded
+        }
+    }
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color:  Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Secondary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        primaryText: "CryptoKitties"
+        additionalText: "1456 USD"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
+        additionalText: "564.90 USD"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        primaryText: "CryptoKitties"
+        additionalText: "1456 USD"
+        expandableComponent: notImplemented
+    }
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color:  Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Tertiary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Tertiary
+        expandable: true
+        primaryText: "CryptoKitties"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Tertiary
+        expandable: true
+        primaryText: "Rescue Moon"
+        expandableComponent: notImplemented
+    }
+
+    Component {
+        id: notImplemented
+        Rectangle {
+            anchors.centerIn: parent
+            width: 654
+            height: infoText.implicitHeight
+            color: Theme.palette.baseColor5
+            StatusBaseText {
+                id: infoText
+                anchors.centerIn: parent
+                color: Theme.palette.directColor4
+                font.pixelSize: 15
+                lineHeight: 22
+                lineHeightMode: Text.FixedHeight
+                font.weight: Font.Medium
+                text: qsTr("Not Implemented")
+            }
+        }
+    }
+}
@@ -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
+        }
+    }
+}
@@ -0,0 +1,215 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusInput {
+        input.placeholderText: "Placeholder"
+    }
+
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Disabled"
+        input.enabled: false
+    }
+
+    StatusInput {
+        input.placeholderText: "Clearable"
+        input.clearable: true
+    }
+
+    StatusInput {
+        input.placeholderText: "Invalid"
+        input.valid: false
+    }
+
+    StatusInput {
+        label: "Label"
+
+        input.icon.name: "search"
+        input.placeholderText: "Input with icon"
+    }
+
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        charLimit: 30
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        label: "Label"
+        charLimit: 30
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    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"
+    }
+
+    StatusInput {
+        label: "StatusInput"
+        secondaryLabel: "with right icon"
+        input.icon.width: 15
+        input.icon.height: 11
+        input.icon.name: text !== "" ? "checkmark" : ""
+        input.leftIcon: false
+    }
+
+    StatusInput {
+        label: "Label"
+        secondaryLabel: "secondary label"
+        input.placeholderText: "Placeholder"
+        input.implicitHeight: 56
+    }
+
+    StatusInput {
+        id: input
+        label: "Label"
+        charLimit: 30
+        input.placeholderText: "Input with validator"
+
+        validators: [
+            StatusMinLengthValidator {
+                minLength: 10
+                errorMessage: {
+                    if (input.errors && input.errors.minLength) {
+                        return `Value can't be shorter than ${input.errors.minLength.min} but got ${input.errors.minLength.actual}`
+                    }
+                    return ""
+                }
+            }
+        ]
+    }
+
+    StatusInput {
+        label: "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.rightComponent: StatusIcon {
+            icon: "cancel"
+            height: 16
+            color: Theme.palette.dangerColor1
+        }
+    }
+
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline"
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline with static height"
+        input.implicitHeight: 100
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline with max/min"
+        input.minimumHeight: 80
+        input.maximumHeight: 200
+    }
+
+    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
+    }
+}
@@ -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()
+        }
+    }
+}
@@ -0,0 +1,16 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Platform 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusMacNotification {
+        name: "Some name"
+        message: "Some message here"
+    }
+}
@@ -0,0 +1,38 @@
+import QtQuick.Layouts 1.14
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusPasswordStrengthIndicator {
+        id: veryweakPw
+        strength: StatusPasswordStrengthIndicator.Strength.VeryWeak
+        value: 0.75
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: weakPw
+        strength: StatusPasswordStrengthIndicator.Strength.Weak
+        value: 0.5
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: sosoPw
+        strength: StatusPasswordStrengthIndicator.Strength.SoSo
+        value: 0.25
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: goodPw
+        strength: StatusPasswordStrengthIndicator.Strength.Good
+        value: 1
+    }
+
+    StatusPasswordStrengthIndicator {
+        id: greatPw
+        strength: StatusPasswordStrengthIndicator.Strength.Great
+        value: 0.3
+    }
+}
@@ -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
+    }
+}
@@ -0,0 +1,150 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusButton {
+        text: "Simple"
+        onClicked: simpleMenu.popup()
+    }
+
+    StatusButton {
+        text: "Complex"
+        onClicked: complexMenu.popup()
+    }
+
+
+    StatusButton {
+        text: "Menu with custom images and icons"
+        onClicked: customMenu.popup()
+    }
+
+
+    StatusPopupMenu {
+        id: simpleMenu
+        StatusMenuItem { 
+            text: "One" 
+        }
+
+        StatusMenuItem { 
+            text: "Two"
+        }
+
+        StatusMenuItem { 
+            text: "Three"
+        }
+    }
+
+    StatusPopupMenu {
+        id: complexMenu
+        subMenuItemIcons: [{ icon: 'info' }]
+
+        StatusMenuItem { 
+            text: "One" 
+            iconSettings.name: "info"
+        }
+
+        StatusMenuSeparator {}
+
+        StatusMenuItem { 
+            text: "Two"
+            iconSettings.name: "info"
+        }
+
+        StatusMenuItem { 
+            text: "Three"
+            iconSettings.name: "info"
+        }
+
+        StatusPopupMenu {
+            title: "Four"
+            StatusMenuItem { 
+                text: "One"
+                iconSettings.name: "info"
+            }
+            StatusMenuItem { 
+                text: "Three"
+                iconSettings.name: "info"
+            }
+        }
+    }
+
+    StatusPopupMenu {
+        id: customMenu
+
+        subMenuItemIcons: [
+            { icon: "chat" },
+            { 
+                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
+            },
+            { 
+                isLetterIdenticon: true, 
+                color: "red" 
+            }
+        ]
+
+        StatusMenuItem {
+            text: "Anywhere"
+        }
+
+        StatusMenuSeparator {}
+
+        StatusPopupMenu {
+            title: "Chat" 
+
+            StatusMenuItem { 
+                text: "vitalik.eth"
+                image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+                image.isIdenticon: true
+            }
+
+            StatusMenuItem { 
+                text: "Pascal"
+                image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            }
+        }
+
+        StatusPopupMenu {
+            title: "Cryptokitties"
+
+            StatusMenuItem { 
+                text: "welcome" 
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
+            }
+            StatusMenuItem { 
+                text: "support" 
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
+            }
+
+            StatusMenuHeadline { text: "Public" }
+
+            StatusMenuItem { 
+                text: "news" 
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
+            }
+        }
+
+        StatusPopupMenu {
+            title: "Another community"
+
+            StatusMenuItem { 
+                text: "welcome" 
+                iconSettings.isLetterIdenticon: true
+                iconSettings.background.color: "red"
+            }
+        }
+    }
+}
@@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+Column {
+    spacing: 8
+
+    StatusSelect {
+        id: select
+        label: "Some label"
+        model: ListModel {
+            ListElement {
+                name: "Pascal"
+            }
+            ListElement {
+                name: "Khushboo"
+            }
+            ListElement {
+                name: "Alexandra"
+            }
+            ListElement {
+                name: "Eric"
+            }
+        }
+        selectMenu.delegate: StatusMenuItemDelegate {
+            statusPopupMenu: select
+            action: StatusMenuItem {
+                iconSettings.name: "filled-account"
+                text: name
+                onTriggered: {
+                    selectedItem.text = name
+                }
+            }
+        }
+        selectedItemComponent: Item {
+            id: selectedItem
+            anchors.fill: parent
+            property string text: ""
+
+            StatusBaseText {
+                text: selectedItem.text
+                anchors.centerIn: parent
+                color: Theme.palette.directColor1
+            }
+        }
+    }
+}
+
@@ -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
+        }
+    }
+}
@@ -0,0 +1,50 @@
+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 Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    Row {
+        StatusTabBarIconButton {
+            icon.name: "smileys-and-people"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "animals-and-nature"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "activity"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "travel-and-places"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "objects"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "symbols"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "flags"
+            onClicked: highlighted = !highlighted
+        }
+    }
+}
@@ -0,0 +1,24 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusSwitchTabBar {
+        StatusSwitchTabButton {
+            text: "Swap"
+        }
+        StatusSwitchTabButton {
+            text: "Swap & Send"
+        }
+        StatusSwitchTabButton {
+            text: "Send"
+        }
+    }
+}
+
@@ -0,0 +1,56 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    property ListModel asortedContacts: ListModel {
+        ListElement {
+            publicId: "0x0"
+            name: "Maria"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x1"
+            name: "James"
+            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            isIdenticon: false
+            onlineStatus: 1
+        }
+        ListElement {
+            publicId: "0x2"
+            name: "Paul"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 2
+        }
+        ListElement {
+            publicId: "0x3"
+            name: "Tracy"
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: true
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x4"
+            name: "Nick"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+    }
+
+    StatusTagSelector {
+        id: tagSelector
+        width: 650
+        height: 44
+        anchors.centerIn: parent
+        namesModel: root.asortedContacts
+        toLabelText: qsTr("To: ")
+        warningText: qsTr("USER LIMIT REACHED")
+    }
+}
@@ -0,0 +1,41 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    Column {
+        id: toastArea
+        anchors.centerIn: parent
+        spacing: 8
+        Repeater {
+            id: toastRepeater
+            width: parent.width
+            height: childrenRect.height
+            model: [
+                {"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":"", "duration":0},
+                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
+                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com", "duration":0},
+                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
+                {"title":"Test User", "subTitle":"Hello message...", "icon":"", "loading":false, "type":0,"url":"", "duration":4000}
+            ]
+            delegate: StatusToastMessage {
+                primaryText: modelData.title
+                secondaryText: modelData.subTitle
+                icon.name: modelData.icon
+                loading: modelData.loading
+                type: modelData.type
+                linkUrl: modelData.url
+                duration: modelData.duration
+                onLinkActivated: {
+                    Qt.openUrlExternally(link);
+                }
+                onClose: {
+                    console.warn("toast closed: ", modelData.title)
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,38 @@
+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 Sandbox 0.1
+Column {
+    spacing: 8
+
+    Row {
+        spacing: 4
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor1
+            selected: true
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor2
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor3
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor4
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor5
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor6
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor7
+        }
+    }
+}
@@ -0,0 +1,17 @@
+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 Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusWalletColorSelect {
+        model: Theme.palette.userCustomizationColors
+    }
+}
@@ -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
+    }
+}
@@ -1,16 +1,47 @@
 <RCC>
    <qresource prefix="/">
        <file>main.qml</file>
-        <file>Controls.qml</file>
-        <file>Icons.qml</file>
-        <file>Others.qml</file>
-        <file>Buttons.qml</file>
+        <file>pages/StatusAccountSelectorPage.qml</file>
+        <file>pages/StatusAddressPage.qml</file>
+        <file>pages/StatusAssetSelectorPage.qml</file>
+        <file>pages/StatusChatCommandButtonPage.qml</file>
+        <file>pages/StatusChatInfoToolBarPage.qml</file>
+        <file>pages/StatusColorSelectorPage.qml</file>
+        <file>pages/StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusInputPage.qml</file>
+        <file>pages/StatusMacNotificationPage.qml</file>
+        <file>pages/StatusPopupMenuPage.qml</file>
+        <file>pages/StatusSelectPage.qml</file>
+        <file>pages/StatusTabBarIconButtonPage.qml</file>
+        <file>pages/StatusTabSwitchPage.qml</file>
+        <file>pages/StatusWalletColorButtonPage.qml</file>
+        <file>pages/StatusWalletColorSelectPage.qml</file>
+        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+        <file>controls/Buttons.qml</file>
+        <file>controls/Controls.qml</file>
+        <file>controls/Icons.qml</file>
+        <file>controls/Layout.qml</file>
+        <file>controls/ListItems.qml</file>
+        <file>controls/Others.qml</file>
+        <file>controls/Popups.qml</file>
+        <file>demoapp/ChatChannelView.qml</file>
+        <file>demoapp/CreateChatView.qml</file>
+        <file>demoapp/DemoCommunityDetailModal.qml</file>
+        <file>demoapp/DemoContactRequestsModal.qml</file>
+        <file>demoapp/StatusAppChatView.qml</file>
+        <file>demoapp/StatusAppCommunityView.qml</file>
+        <file>demoapp/StatusAppProfileSettingsView.qml</file>
+        <file>demoapp/data/Models.qml</file>
+        <file>demoapp/data/qmldir</file>
+        <file>demoapp/data/logo-test-image.png</file>
        <file>DemoApp.qml</file>
-        <file>ListItems.qml</file>
-        <file>StatusChatInfoToolBarPage.qml</file>
-        <file>StatusPopupMenuPage.qml</file>
        <file>ThemeSwitch.qml</file>
-        <file>Layout.qml</file>
-        <file>Popups.qml</file>
+        <file>pages/StatusColorSelectorGridPage.qml</file>
+        <file>pages/StatusListPickerPage.qml</file>
+        <file>pages/StatusPinInputPage.qml</file>
+        <file>pages/StatusTagSelectorPage.qml</file>
+        <file>pages/StatusToastMessagePage.qml</file>
+        <file>pages/StatusWizardStepperPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
    </qresource>
 </RCC>
@@ -1,6 +1,8 @@
 QT += quick svg

-CONFIG += c++11 warn_on
+CONFIG += c++11 warn_on qtquickcompiler
+
+QML_IMPORT_PATH= $$PWD/../src

 DEFINES += QT_DEPRECATED_WARNINGS

@@ -12,18 +14,39 @@ DEFINES += QT_DEPRECATED_WARNINGS
 SOURCES += \
        handler.cpp \
        main.cpp \
-        sandboxapp.cpp
+        sandboxapp.cpp \
+        spellchecker.cpp \

 !macx {
    SOURCES += statuswindow.cpp
 }

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

 macx {
    CONFIG -= app_bundle
    OBJECTIVE_SOURCES += \
        statuswindow_mac.mm
+
+    hunspellTarget.depends = FORCE
+    hunspellTarget.commands = brew install hunspell
+    QMAKE_EXTRA_TARGETS += hunspellTarget
+
+    exists (/usr/local/lib/libhunspell-1.7.a) {
+        LIBS += -L"/usr/local/lib" -lhunspell-1.7
+        INCLUDEPATH += /usr/local/include/hunspell
+        DEFINES += USE_HUNSPELL
+        message("hunspell exists in /usr/local/lib")
+    }
+
+    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
+    first.depends = $(first) copydata
+    export(first.depends)
+    export(copydata.commands)
+    QMAKE_EXTRA_TARGETS += first copydata
 }

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

-DESTDIR = $$PWD/bin
-
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
@@ -51,17 +72,11 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 HEADERS += \
    handler.h \
    sandboxapp.h \
-    statuswindow.h
+    statuswindow.h \
+    spellchecker.h

-DISTFILES += \
-    ../src/StatusQ/Components/StatusMacWindowButtons.qml \
-    ../src/StatusQ/Controls/StatusBaseButton.qml \
-    ../src/StatusQ/Controls/StatusButton.qml \
-    ../src/StatusQ/Controls/StatusCheckBox.qml \
-    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
-    ../src/StatusQ/Controls/StatusRadioButton.qml \
-    ../src/StatusQ/Controls/StatusSlider.qml \
-    ../src/StatusQ/Controls/StatusSwitch.qml
+OTHER_FILES += $$files($$PWD/../*.qml, true)
+OTHER_FILES += $$files($$PWD/*.qml, true)

 android {

@@ -5,6 +5,7 @@
 #include <QDebug>

 #include "statuswindow.h"
+#include "spellchecker.h"

 SandboxApp::SandboxApp(int &argc, char **argv)
    : QGuiApplication(argc, argv),
@@ -16,9 +17,10 @@ SandboxApp::SandboxApp(int &argc, char **argv)
 void SandboxApp::startEngine()
 {
    qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
+    qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");

 #ifdef QT_DEBUG
-    const QUrl url(applicationDirPath() + "/../main.qml");
+    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
 #else
    const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif
@@ -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
@@ -1,6 +1,8 @@
 #include "spellchecker.h"

+#ifdef USE_HUNSPELL
 #include "hunspell.hxx"
+#endif
 #include <QTextCodec>
 #include <QFile>
 #include <QDebug>
@@ -11,18 +13,53 @@
 #include <QDir>

 SpellChecker::SpellChecker(QObject *parent)
-    : QSyntaxHighlighter(parent)
+    : QObject(parent)
+    , m_userDict("userDict_")
+#ifdef USE_HUNSPELL
+    , m_hunspell(nullptr)
+#endif
 {
-    auto language = QLocale::system().bcp47Name();

-    QString dictFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language  + "/index.dic";
-    QString affixFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language  + "/index.aff";
+}
+
+SpellChecker::~SpellChecker()
+{
+#ifdef USE_HUNSPELL
+    delete m_hunspell;
+#endif
+}
+
+bool SpellChecker::spell(const QString &word)
+{
+#ifdef USE_HUNSPELL
+    return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
+#else
+    return true;
+#endif
+}
+
+bool SpellChecker::isInit() const
+{
+#ifdef USE_HUNSPELL
+    return !m_hunspell;
+#endif  
+    return false;
+}
+
+void SpellChecker::initHunspell()
+{
+#ifdef USE_HUNSPELL
+    if (m_hunspell) {
+        delete m_hunspell;
+    }
+
+    QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
+    QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
    QByteArray dictFilePathBA = dictFile.toLocal8Bit();
    QByteArray affixFilePathBA = affixFile.toLocal8Bit();
    m_hunspell = new Hunspell(affixFilePathBA.constData(),
                             dictFilePathBA.constData());

-    qDebug() << "TEST" << dictFile;
    // detect encoding analyzing the SET option in the affix file
    auto encoding = QStringLiteral("ISO8859-15");
    QFile _affixFile(affixFile);
@@ -47,7 +84,7 @@ SpellChecker::SpellChecker(QObject *parent)
    }
    m_codec = QTextCodec::codecForName(encoding.toLatin1().constData());

-    QString userDict = "userDict_" + language + ".txt";
+    QString userDict = m_userDict + m_lang + ".txt";

    if (!userDict.isEmpty()) {
      QFile userDictonaryFile(userDict);
@@ -65,22 +102,14 @@ SpellChecker::SpellChecker(QObject *parent)
    } else {
      qDebug() << "User dictionary not set.";
    }
-}
-
-SpellChecker::~SpellChecker()
-{
-    delete m_hunspell;
-}
-
-bool SpellChecker::spell(const QString &word)
-{
-    return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
+#endif
 }

 QVariantList SpellChecker::suggest(const QString &word)
 {
    int numSuggestions = 0;
    QVariantList suggestions;
+#ifdef USE_HUNSPELL
    std::vector<std::string> wordlist;
    wordlist = m_hunspell->suggest(m_codec->fromUnicode(word).toStdString());

@@ -92,20 +121,22 @@ QVariantList SpellChecker::suggest(const QString &word)
                QByteArray::fromStdString(wordlist[i]));
        }
    }
+#endif

    return suggestions;
 }

 void SpellChecker::ignoreWord(const QString &word)
 {
+#ifdef USE_HUNSPELL
    m_hunspell->add(m_codec->fromUnicode(word).constData());
+#endif
 }

 void SpellChecker::addToUserWordlist(const QString &word)
 {
-    auto language = QLocale::scriptToString(QLocale::system().script());
-
-    QString userDict = "userDict_" + language + ".txt";
+#ifdef USE_HUNSPELL
+    QString userDict = m_userDict + m_lang + ".txt";
    if (!userDict.isEmpty()) {
        QFile userDictonaryFile(userDict);
        if (userDictonaryFile.open(QIODevice::Append)) {
@@ -119,74 +150,32 @@ void SpellChecker::addToUserWordlist(const QString &word)
    } else {
        qDebug() << "User dictionary not set.";
    }
+#endif
 }

-void SpellChecker::setText(const QString &text)
+const QString& SpellChecker::lang() const
 {
-    if (m_text != text) {
-        m_text = text;
-        emit textChanged();
-        makeDisplayText(m_text);
+    return m_lang;
+}
+
+void SpellChecker::setLang(const QString& lang)
+{
+    if (m_lang != lang) {
+        m_lang = lang;
+        initHunspell();
+        emit langChanged();
    }
 }

-const QString &SpellChecker::text() const
+const QString& SpellChecker::userDict() const
 {
-    return m_text;
+    return m_userDict;
 }

-const QString &SpellChecker::displayText() const
+void SpellChecker::setUserDict(const QString& userDict)
 {
-    return m_displayText;
-}
-
-QQuickTextDocument *SpellChecker::textDocument() const
-{
-    return m_document;
-}
-
-void SpellChecker::setTextDocument(QQuickTextDocument *document)
-{
-    if (m_document != document) {
-        m_document = document;
-        setDocument(m_document->textDocument());
-        emit textDocumentChanged();
+    if (m_userDict != userDict) {
+        m_userDict = userDict;
+        emit userDictChanged();
    }
 }
-
-void SpellChecker::highlightBlock(const QString &text)
-{
-    QTextCharFormat format;
-    format.setUnderlineColor(Qt::red);
-    format.setFontUnderline(true);
-//    format.setUnderlineStyle(QTextCharFormat::DotLine);
-   format.merge(currentBlock().charFormat());
-
-
-
-    QRegularExpression expression("\\S+");
-    QRegularExpressionMatchIterator i = expression.globalMatch(text);
-    while(i.hasNext()) {
-        QRegularExpressionMatch match = i.next();
-        if (!spell(match.captured())) {
-            setFormat(match.capturedStart(), match.capturedLength(), format);
-        }
-    }
-}
-
-void SpellChecker::makeDisplayText(const QString &text)
-{
-    auto words = text.split(" ");
-    QString gPattern = "<u style=\"color: red;\">%1</u>";
-
-    m_displayText = ""; // todo optimize delta
-    for (const auto& word: qAsConst(words)) {
-        if (!spell(word)) {
-            m_displayText.append(" " + gPattern.arg(word));
-        } else {
-            m_displayText.append(" " + word);
-        }
-    }
-
-    emit displayTextChanged();
-}
@@ -6,15 +6,17 @@
 #include <QQuickTextDocument>
 #include <QSyntaxHighlighter>

+#ifdef USE_HUNSPELL
 class Hunspell;
+#endif
 class QTextCodec;

-class SpellChecker : public QSyntaxHighlighter
+class SpellChecker : public QObject
 {
    Q_OBJECT
-    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
-    Q_PROPERTY(QString displayText READ displayText NOTIFY displayTextChanged)
-    Q_PROPERTY(QQuickTextDocument* document READ textDocument WRITE setTextDocument NOTIFY textDocumentChanged)
+    Q_PROPERTY(QString lang READ lang WRITE setLang NOTIFY langChanged)
+    Q_PROPERTY(QString userDict READ userDict WRITE setUserDict NOTIFY userDictChanged)
+
 public:
    explicit SpellChecker(QObject *parent = nullptr);
    ~SpellChecker();
@@ -23,34 +25,29 @@ public:
    Q_INVOKABLE QVariantList suggest(const QString &word);
    Q_INVOKABLE void ignoreWord(const QString &word);
    Q_INVOKABLE void addToUserWordlist(const QString &word);
+    Q_INVOKABLE bool isInit() const;

-    void setText(const QString& text);
-    const QString& text() const;
+    const QString& lang() const;
+    void setLang(const QString& lang);

-    const QString& displayText() const;
-
-    QQuickTextDocument* textDocument() const;
-    void setTextDocument(QQuickTextDocument* document);
+    const QString& userDict() const;
+    void setUserDict(const QString& userDict);

 signals:
-    void textChanged();
-    void displayTextChanged();
-    void textDocumentChanged();
-
-protected:
-    void highlightBlock(const QString &text) final;
+    void langChanged();
+    void userDictChanged();

 private:
-    void makeDisplayText(const QString& text);
+    void initHunspell();

 private:
-    QString m_text;
-    QString m_displayText;
-    QString m_dictionaryPath;
+    QString m_lang;
+    QString m_userDict;

    QQuickTextDocument *m_document;
-
+#ifdef USE_HUNSPELL
    Hunspell *m_hunspell;
+#endif
    QTextCodec *m_codec;
 };

@@ -0,0 +1,39 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusBaseText {
+    id: root 
+
+    property bool expandable: false
+    property bool expanded: false
+    readonly property real actualWidth: implicitWidth
+    property real maxWidth: width
+
+    font.family: Theme.palette.monoFont.name
+    font.pixelSize: 13
+    elide: Text.ElideMiddle
+    color: Theme.palette.baseColor1
+
+    Component.onCompleted: {
+        maxWidth = width
+        expanded = actualWidth <= maxWidth
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: root.expandable ? Qt.PointingHandCursor : Qt.arrowCursor
+        enabled: root.expandable
+
+        onClicked: {
+            if (root.expanded) {
+                width = root.width = root.maxWidth
+            } else {
+                width = root.width = root.actualWidth
+            }
+            root.expanded = !root.expanded
+        }
+    }
+}
@@ -32,7 +32,7 @@ Rectangle {
        anchors.centerIn: parent
        text: {
            if (statusBadge.value > 99) {
-                return "99+";
+                return qsTr("99+");
            }
            return statusBadge.value;
        }
@@ -11,6 +11,7 @@ Item {
    implicitHeight: 56

    property alias chatInfoButton: statusChatInfoButton
+    property alias menuButton: statusMenuButton
    property Component popupMenu

    signal chatInfoButtonClicked()
@@ -26,19 +27,19 @@ 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
        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
    }

    StatusRoundButton {
-        id: menuButton
+        id: statusMenuButton
        anchors.right: parent.right
-        anchors.rightMargin: 8
        anchors.verticalCenter: parent.verticalCenter

        visible: popupMenuSlot.active
-        width: 32
+        width: visible ? 32 : 0
        height: 32

        type: StatusRoundButton.Type.Secondary
@@ -49,14 +50,14 @@ Item {
            State {
                name: "default"
                PropertyChanges {
-                    target: menuButton
+                    target: statusMenuButton
                    icon.rotation: 0
                }
            },
            State {
                name: "pressed"
                PropertyChanges {
-                    target: menuButton
+                    target: statusMenuButton
                    icon.rotation: 45
                    highlighted: true
                }
@@ -87,8 +88,8 @@ Item {

        onClicked: {
            statusChatInfoToolBar.addButtonClicked(mouse)
-            menuButton.state = "pressed"
-            popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
+            statusMenuButton.state = "pressed"
+            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
        }

        Loader {
@@ -96,10 +97,9 @@ Item {
            active: !!statusChatInfoToolBar.popupMenu
            onLoaded: {
                popupMenuSlot.item.closeHandler = function () {
-                    menuButton.state = "default"
+                    statusMenuButton.state = "default"
                }
            }
        }
    }
-
 }
@@ -1,7 +1,10 @@
 import QtQuick 2.13
+import QtQml.Models 2.14
+import QtQuick.Controls 2.13 as QC

 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

@@ -12,17 +15,19 @@ Column {
    width: 288

    property string categoryId: ""
-    property string selectedChatId: ""
-    property alias chatListItems: statusChatListItems
+    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)

    onPopupMenuChanged: {
        if (!!popupMenu) {
@@ -30,71 +35,183 @@ Column {
        }
    }

-    Repeater {
-        id: statusChatListItems
-        delegate: StatusChatListItem {
+    DelegateModel {
+        id: delegateModel
+        model: statusChatList.model
+        delegate: Item {
+            id: draggable
+            width: statusChatListItem.width
+            height: statusChatListItem.height
+            property alias chatListItem: statusChatListItem

-            id: statusChatListItem
-
-            property string profileImage: ""
-
-            Component.onCompleted: {
-                if (typeof statusChatList.profileImageFn === "function") {
-                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
-                }
-            }
-
-            chatId: model.chatId || model.id
-            name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
-            type: model.chatType
-            muted: !!model.muted
-            hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
-            hasMention: !!model.hasMention
-            badge.value: model.unviewedMessagesCount || 0
-            selected: (model.chatId || model.id) === statusChatList.selectedChatId
-
-            icon.color: model.color || ""
-            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
-            image.source: profileImage || model.identityImage || model.identicon || ""
-
-            onClicked: {
-                if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
-                    statusChatListItem.highlighted = true
-
-                    let originalOpenHandler = popupMenuSlot.item.openHandler
-                    let originalCloseHandler = popupMenuSlot.item.closeHandler
-
-                    popupMenuSlot.item.openHandler = function () {
-                        if (!!originalOpenHandler) {
-                            originalOpenHandler((model.chatId || model.id))
-                        }
-                    }
-
-                    popupMenuSlot.item.closeHandler = function () {
-                        if (statusChatListItem) {
-                            statusChatListItem.highlighted = false
-                        }
-                        if (!!originalCloseHandler) {
-                            originalCloseHandler()
-                        }
-                    }
-
-                    popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
-                    popupMenuSlot.item.openHandler = originalOpenHandler
-                    return
-                }
-                statusChatList.chatItemSelected(model.chatId || model.id)
-            }
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
            visible: {
                if (!!statusChatList.filterFn) {
-                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                    return statusChatList.filterFn(model)
                }
                return true
            }
+
+            MouseArea {
+                id: dragSensor
+
+                anchors.fill: parent
+                cursorShape: active ? Qt.ClosedHandCursor : Qt.PointingHandCursor
+                hoverEnabled: true
+                pressAndHoldInterval: 150
+                enabled: statusChatList.draggableItems
+
+                property bool active: false
+                property real startY: 0
+                property real startX: 0
+
+                drag.target: draggedListItemLoader.item
+                drag.threshold: 0.1
+                drag.filterChildren: true
+
+                onPressed: {
+                    startY = mouseY
+                    startX = mouseX
+                }
+                onPressAndHold: active = true
+                onReleased: {
+                    if (active) {
+                        statusChatList.chatItemReordered(statusChatListItem.chatId, statusChatListItem.originalOrder, statusChatListItem.originalOrder)
+                    }
+                    active = false
+                }
+                onMouseYChanged: {
+                    if ((Math.abs(startY - mouseY) > 1) && pressed) {
+                        active = true
+                    }
+                }
+                onMouseXChanged: {
+                    if ((Math.abs(startX - mouseX) > 1) && pressed) {
+                        active = true
+                    }
+                }
+
+                StatusChatListItem {
+                    id: statusChatListItem
+
+                    opacity: dragSensor.active ? 0.0 : 1.0
+                    originalOrder: model.position
+                    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.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
+
+                            let originalOpenHandler = popupMenuSlot.item.openHandler
+                            let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+                            popupMenuSlot.item.openHandler = function () {
+                                if (!!originalOpenHandler) {
+                                    originalOpenHandler(model.itemId)
+                                }
+                            }
+
+                            popupMenuSlot.item.closeHandler = function () {
+                                if (statusChatListItem) {
+                                    statusChatListItem.highlighted = false
+                                }
+                                if (!!originalCloseHandler) {
+                                    originalCloseHandler()
+                                }
+                            }
+
+                            let p = statusChatListItem.mapToItem(statusChatList, mouse.x, mouse.y)
+
+                            popupMenuSlot.item.popup(p.x + 4, p.y + 6)
+                            popupMenuSlot.item.openHandler = originalOpenHandler
+                            return
+                        }
+                        if (!statusChatListItem.selected) {
+                            statusChatList.chatItemSelected(model.parentItemId, model.itemId)
+                        }
+                    }
+                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
+                }
+            }
+
+            DropArea {
+                id: dropArea
+                width: dragSensor.active ? 0 : parent.width
+                height: dragSensor.active ? 0 : parent.height
+                keys: ["chat-item-category-" + statusChatListItem.categoryId]
+
+                onEntered: reorderDelay.start()
+                onDropped: statusChatList.chatItemReordered(statusChatListItem.chatId, drag.source.originalOrder, statusChatListItem.DelegateModel.itemsIndex)
+
+                Timer {
+                    id: reorderDelay
+                    interval: 100
+                    repeat: false
+                    onTriggered: {
+                        if (dropArea.containsDrag) {
+                            dropArea.drag.source.chatListItem.originalOrder = statusChatListItem.originalOrder
+                            delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
+                        }
+                    }
+                }
+            }
+
+            Loader {
+                id: draggedListItemLoader
+                active: dragSensor.active
+                sourceComponent: StatusChatListItem {
+                    property var globalPosition: Utils.getAbsolutePosition(draggable)
+                    parent: QC.Overlay.overlay
+                    sensor.cursorShape: dragSensor.cursorShape
+                    Drag.active: dragSensor.active
+                    Drag.hotSpot.x: width / 2
+                    Drag.hotSpot.y: height / 2
+                    Drag.keys: ["chat-item-category-" + categoryId]
+                    Drag.source: draggable
+
+                    Component.onCompleted: {
+                        x = globalPosition.x
+                        y = globalPosition.y
+                    }
+                    chatId: draggable.chatListItem.chatId
+                    categoryId: draggable.chatListItem.categoryId
+                    name: draggable.chatListItem.name
+                    type: draggable.chatListItem.type
+                    muted: draggable.chatListItem.muted
+                    dragged: true
+                    hasUnreadMessages: model.hasUnreadMessages
+                    notificationsCount: model.notificationsCount
+                    selected: draggable.chatListItem.selected
+
+                    icon.color: draggable.chatListItem.icon.color
+                    image.isIdenticon: draggable.chatListItem.image.isIdenticon
+                    image.source: draggable.chatListItem.image.source
+                }
+            }
        }
    }

+    Repeater {
+        id: statusChatListItems
+        model: delegateModel
+    }
+
    Loader {
        id: popupMenuSlot
        active: !!statusChatList.popupMenu
@@ -1,8 +1,11 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
+import QtQml.Models 2.14
+import QtQuick.Controls 2.14 as QC

+import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Core 0.1

 Item {
    id: statusChatListAndCategories
@@ -10,18 +13,31 @@ Item {
    implicitHeight: chatListsAndCategories.height
    implicitWidth: chatListsAndCategories.width

-    property string selectedChatId: ""
+    property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
+        text: qsTr("Add channel inside category")
+    }
+    property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
+        text: qsTr("More")
+    }
+
+    property var model: []
    property bool showCategoryActionButtons: false
-    property alias chatList: statusChatList.chatListItems
-    property alias categoryList: statusChatListCategories
+    property bool showPopupMenu: true
    property alias sensor: sensor
+    property bool draggableItems: false
+    property bool draggableCategories: false
+    // Keeps track of expanded category state. Should only be modified
+    // internally at runtime.
+    property var openedCategoryState: new Object({})

    property Component categoryPopupMenu
    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)
    signal categoryAddButtonClicked(string id)

    onPopupMenuChanged: {
@@ -37,7 +53,7 @@ Item {
        height: statusChatListAndCategories.height
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
-            if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
+            if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                return
            }
@@ -52,35 +68,155 @@ Item {

            StatusChatList {
                id: statusChatList
-                anchors.horizontalCenter: parent.horizontalCenter
-                visible: !!chatListItems.model && 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 {
+                        id: statusChatListCategory
+
+                        property bool dragActive: false
+                        property real startY: 0
+                        property real startX: 0
+
+                        opacity: dragActive ? 0.0 : 1.0
+
+                        dragSensor.drag.target: draggedListCategoryLoader.item
+                        dragSensor.drag.threshold: 0.1
+                        dragSensor.drag.filterChildren: true
+                        dragSensor.onPressAndHold: {
+                            if (statusChatListAndCategories.draggableCategories) {
+                                dragActive = true
+                            }
+                        }
+                        dragSensor.onReleased: {
+                            if (dragActive) {
+                                statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, statusChatListCategory.originalOrder, statusChatListCategory.originalOrder)
+                            }
+                            dragActive = false
+                        }
+                        dragSensor.cursorShape: dragActive ? Qt.ClosedHandCursor : Qt.PointingHandCursor
+                        dragSensor.onPressed: {
+                            startY = dragSensor.mouseY
+                            startX = dragSensor.mouseX
+                        }
+                        dragSensor.onMouseYChanged: {
+                            if (statusChatListAndCategories.draggableCategories && (Math.abs(startY - dragSensor.mouseY) > 1) && dragSensor.pressed) {
+                                dragActive = true
+                            }
+                        }
+                        dragSensor.onMouseXChanged: {
+                            if (statusChatListAndCategories.draggableCategories && (Math.abs(startX - dragSensor.mouseX) > 1) && dragSensor.pressed) {
+                                dragActive = true
+                            }
+                        }
+
+                        addButton.tooltip: statusChatListAndCategories.categoryAddButtonToolTip
+                        menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
+
+                        originalOrder: model.position
+                        categoryId: model.itemId
+                        name: model.name
+                        showActionButtons: statusChatListAndCategories.showCategoryActionButtons
+                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
+
+                        chatList.model: model.subItems
+                        chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
+                        chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
+                        chatList.draggableItems: statusChatListAndCategories.draggableItems
+
+                        popupMenu: statusChatListAndCategories.categoryPopupMenu
+                        chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
+
+                        // Used to set the initial value of "opened" when the
+                        // model is bound/changed.
+                        opened: {
+                            let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
+                            return openedState !== undefined ? openedState : true // defaults to open
+                        }
+
+                        // Used to track the internal changes of the `opened`
+                        // property. This cannot be brought inside the component
+                        // as the state would be lost each time the model is
+                        // changed.
+                        onOpenedChanged: {
+                            statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
+                        }
+                    }
+
+                    DropArea {
+                        id: dropArea
+                        width: draggable.chatListCategory.dragActive ? 0 : parent.width
+                        height: draggable.chatListCategory.dragActive ? 0 : parent.height
+                        keys: ["chat-category"]
+
+                        onEntered: reorderDelay.start()
+                        onDropped: statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, drag.source.originalOrder, statusChatListCategory.DelegateModel.itemsIndex)
+
+                        Timer {
+                            id: reorderDelay
+                            interval: 100
+                            repeat: false
+                            onTriggered: {
+                                if (dropArea.containsDrag) {
+                                    dropArea.drag.source.chatListCategory.originalOrder = statusChatListCategory.originalOrder
+                                    delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
+                                }
+                            }
+                        }
+                    }
+
+                    Loader {
+                        id: draggedListCategoryLoader
+                        active: draggable.chatListCategory.dragActive
+                        sourceComponent: StatusChatListCategory {
+                            property var globalPosition: Utils.getAbsolutePosition(draggable)
+                            parent: QC.Overlay.overlay
+
+                            dragSensor.cursorShape: draggable.chatListCategory.dragSensor.cursorShape
+                            Drag.active: draggable.chatListCategory.dragActive
+                            Drag.hotSpot.x: width / 2
+                            Drag.hotSpot.y: height / 2
+                            Drag.keys: ["chat-category"]
+                            Drag.source: draggable
+
+                            Component.onCompleted: {
+                                x = globalPosition.x
+                                y = globalPosition.y
+                            }
+                            dragged: true
+                            categoryId: draggable.chatListCategory.categoryId
+                            name: draggable.chatListCategory.name
+                            showActionButtons: draggable.chatListCategory.showActionButtons
+
+                            chatList.model: draggable.chatListCategory.chatList.model
+                        }
+                    }
+                }
+            }
+
            Repeater {
                id: statusChatListCategories
                visible: !!model && model.count > 0
-
-                delegate: StatusChatListCategory {
-                    categoryId: model.categoryId
-                    name: model.name
-                    showActionButtons: statusChatListAndCategories.showCategoryActionButtons
-                    addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
-
-                    chatList.chatListItems.model: statusChatListAndCategories.chatList.model
-                    chatList.selectedChatId: statusChatListAndCategories.selectedChatId
-                    chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
-                    chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-
-                    popupMenu: statusChatListAndCategories.categoryPopupMenu
-                    chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
-                }
+                model: delegateModel
            }
        }
    }
@@ -7,16 +7,21 @@ Column {
    id: statusChatListCategory

    spacing: 0
+    opacity: dragged ? 0.5 : 1

+    objectName: "chatListCategory"
+    property int originalOrder: -1
    property string categoryId: ""
    property string name: ""
    property bool opened: true
+    property bool dragged: false

    property alias showActionButtons: statusChatListCategoryItem.showActionButtons
    property alias addButton: statusChatListCategoryItem.addButton
    property alias menuButton: statusChatListCategoryItem.menuButton
    property alias toggleButton: statusChatListCategoryItem.toggleButton
    property alias chatList: statusChatList
+    property alias dragSensor: statusChatListCategoryItem.sensor

    property Component chatListPopupMenu
    property Component popupMenu
@@ -30,18 +35,22 @@ Column {
    StatusChatListCategoryItem {
        id: statusChatListCategoryItem
        title: statusChatListCategory.name
+        visible: model.isCategory
        opened: statusChatListCategory.opened
+        sensor.pressAndHoldInterval: 150

-        showMenuButton: !!statusChatListCategory.popupMenu
-
-        onClicked: {
-            if (mouse.button === Qt.RightButton && !!statusChatListCategory.popupMenu) {
-                highlighted = true
-                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
-                return
+        showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
+        highlighted: statusChatListCategory.dragged
+        sensor.onClicked: {
+            if (sensor.enabled) {
+                if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
+                    highlighted = true;
+                    popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
+                    return
+                }
            }
-            statusChatListCategory.opened = !opened
        }
+        onTitleClicked: statusChatListCategory.opened = !opened
        onToggleButtonClicked: statusChatListCategory.opened = !opened
        onMenuButtonClicked: {
            highlighted = true
@@ -58,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
@@ -23,15 +23,12 @@ StatusListItem {
    property alias menuButton: menuButton
    property alias toggleButton: toggleButton

-    signal clicked(var mouse)
    signal addButtonClicked(var mouse)
    signal menuButtonClicked(var mouse)
    signal toggleButtonClicked(var mouse)

    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"

-    sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
-
    statusListItemTitle.color: Theme.palette.directColor4
    statusListItemTitle.font.weight: Font.Medium

@@ -42,28 +39,36 @@ 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
            icon.name: "chevron-down"
            icon.width: 18
            icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
-            onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
+            onPressed: {
+                sensor.enabled = false;
+            }
+            onClicked: {
+                statusChatListCategoryItem.toggleButtonClicked(mouse);
+            }
+            onReleased: {
+                sensor.enabled = true;
+            }
        }
    ]
 }
@@ -1,25 +1,44 @@
 import QtQuick 2.13
+import QtQml.Models 2.13
+import QtQuick.Controls 2.13 as QC
+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
    property string chatId: ""
+    property string categoryId: ""
    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 {}
-    property StatusIconSettings icon: StatusIconSettings {
-        color: Theme.palette.miscColor5
+    property StatusImageSettings image: StatusImageSettings {
+        width: 24
+        height: 24
    }
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+        color: Theme.palette.miscColor5
+        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

    signal clicked(var mouse)
    signal unmute()
@@ -43,63 +62,32 @@ Rectangle {
        if (selected) {
            return Theme.palette.statusChatListItem.selectedBackgroundColor
        }
-        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return hoverHander.hovered || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
    }

+    opacity: dragged ? 0.7 : 1
+
    MouseArea {
        id: sensor

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

-        onClicked: statusChatListItem.clicked(mouse)
+        onClicked: root.clicked(mouse)

-        Loader {
+        StatusSmartIdenticon {
            id: identicon
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.verticalCenter: parent.verticalCenter
-
-            sourceComponent: !!statusChatListItem.image.source.toString() ?
-                statusRoundedImageCmp : statusLetterIdenticonCmp
-        }
-
-        Component {
-            id: statusLetterIdenticonCmp
-            StatusLetterIdenticon {
-                height: 24
-                width: 24
-                name: statusChatListItem.name
-                letterSize: 15
-                color: statusChatListItem.icon.color
-            }
-        }
-
-        Component {
-            id: statusRoundedImageCmp
-            Item {
-                height: 24
-                width: 24
-                StatusRoundedImage {
-                    id: statusRoundedImage
-                    width: parent.width
-                    height: parent.height
-                    image.source: statusChatListItem.image.source
-                    showLoadingIndicator: true
-                    color: statusChatListItem.image.isIdenticon ?
-                        Theme.palette.statusRoundedImage.backgroundColor :
-                        "transparent"
-                    border.width: statusChatListItem.image.isIdenticon ? 1 : 0
-                    border.color: Theme.palette.directColor7
-                }
-
-                Loader {
-                    sourceComponent: statusLetterIdenticonCmp
-                    active: statusRoundedImage.image.status === Image.Error
-                }
-            }
+            image: root.image
+            icon: root.icon
+            name: root.name
        }

        StatusIcon {
@@ -109,32 +97,32 @@ Rectangle {
            anchors.verticalCenter: parent.verticalCenter

            width: 14
-            visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
+            visible: root.type !== StatusChatListItem.Type.OneToOneChat
            opacity: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (root.muted && !hoverHander.hovered && !root.highlighted) {
                    return 0.4
                }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages || 
-                  statusChatListItem.selected ||
-                  statusChatListItem.highlighted ||
-                  statusBadge.visible ||
-                  sensor.containsMouse ? 1.0 : 0.7
+                return root.hasUnreadMessages ||
+                        root.notificationsCount > 0 ||
+                        root.selected ||
+                        root.highlighted ||
+                        statusBadge.visible ||
+                        hoverHander.hovered ? 1.0 : 0.7
            }

            icon: {
-                switch (statusChatListItem.type) {
-                    case StatusChatListItem.Type.PublicCat:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
-                        break;
-                    case StatusChatListItem.Type.GroupChat:
-                        return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
-                        break;
-                    case StatusChatListItem.Type.CommunityChat:
-                        return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
-                        break;
-                    default:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                switch (root.type) {
+                case StatusChatListItem.Type.PublicCat:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                    break;
+                case StatusChatListItem.Type.GroupChat:
+                    return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
+                    break;
+                case StatusChatListItem.Type.CommunityChat:
+                    return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
+                    break;
+                default:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                }
            }
        }
@@ -143,67 +131,72 @@ Rectangle {
            id: chatName
            anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
            anchors.leftMargin: statusIcon.visible ? 1 : 8
-            anchors.right: statusBadge.visible ? statusBadge.left :
-                mutedIcon.visible ? mutedIcon.left : parent.right
+            anchors.right: mutedIcon.visible ? mutedIcon.left :
+                                               statusBadge.visible ? statusBadge.left : parent.right
            anchors.rightMargin: 6
            anchors.verticalCenter: parent.verticalCenter

-            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
-                !statusChatListItem.name.startsWith("#") ?
-                "#" + statusChatListItem.name :
-                statusChatListItem.name
+            text: (root.type === StatusChatListItem.Type.PublicChat &&
+                  !root.name.startsWith("#") ?
+                      "#" + root.name :
+                      root.name)
            elide: Text.ElideRight
            color: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (root.muted && !hoverHander.hovered && !root.highlighted) {
                    return Theme.palette.directColor5
                }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages ||
-                  statusChatListItem.selected ||
-                  statusChatListItem.highlighted ||
-                  sensor.containsMouse ||
-                  statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
+                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.hasMention || 
-              statusChatListItem.hasUnreadMessages ||
-              statusBadge.visible ? Font.Bold : Font.Medium
+            font.weight: !root.muted &&
+                         (root.hasUnreadMessages ||
+                          root.notificationsCount > 0 ||
+                          root.highlightWhenCreated ||
+                          statusBadge.visible) ? Font.Bold : Font.Medium
            font.pixelSize: 15
        }

-        StatusBadge {
-            id: statusBadge
-
-            anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
-            anchors.rightMargin: 8
-            anchors.verticalCenter: parent.verticalCenter
-
-            border.width: 4
-            border.color: color
-            visible: statusBadge.value > 0
-        }
-
        StatusIcon {
            id: mutedIcon
-            anchors.right: parent.right
+            anchors.right: statusBadge.visible ? statusBadge.left : parent.right
            anchors.rightMargin: 8
            anchors.verticalCenter: parent.verticalCenter
            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 
+                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
-                onClicked: statusChatListItem.unmute()
+                onClicked: root.unmute()
            }

            StatusToolTip {
-                text: "Unmute"
+                text: qsTr("Unmute")
                visible: mutedIconSensor.containsMouse
            }
        }
+
+        StatusBadge {
+            id: statusBadge
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+
+            color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
+            border.width: 4
+            border.color: color
+            value: root.notificationsCount
+            visible: root.notificationsCount > 0
+        }
    }
 }
@@ -14,6 +14,8 @@ Rectangle {
    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 Component popupMenu
@@ -21,6 +23,8 @@ Rectangle {
    signal chatInfoButtonClicked()
    signal menuButtonClicked()
    signal notificationButtonClicked()
+    signal membersButtonClicked()
+    signal searchButtonClicked()

    onPopupMenuChanged: {
        if (!!popupMenu) {
@@ -33,6 +37,7 @@ Rectangle {
        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()
    }

@@ -44,6 +49,34 @@ Rectangle {

        spacing: 8

+        StatusFlatRoundButton {
+            id: searchButton
+            width: 32
+            height: 32
+            icon.name: "search"
+            type: StatusFlatRoundButton.Type.Secondary
+            onClicked: statusChatToolBar.searchButtonClicked()
+
+            // initializing the tooltip
+            tooltip.text: qsTr("Search")
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
+        }
+
+        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
@@ -52,11 +85,40 @@ Rectangle {
            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 () {
+                    if (!!originalOpenHandler) {
+                        originalOpenHandler()
+                    }
+                }
+
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.highlighted = false
+                    if (!!originalCloseHandler) {
+                        originalCloseHandler()
+                    }
+                }
+
+                popupMenuSlot.item.openHandler = originalOpenHandler
+                popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
                statusChatToolBar.menuButtonClicked()
-                highlighted = true
-                let p = menuButton.mapToItem(statusChatToolBar, menuButton.x, menuButton.y)
-                popupMenuSlot.item.popup(p.x + menuButton.width - popupMenuSlot.item.width, p.y + 4 + menuButton.height)
+            }
+
+            Loader {
+                id: popupMenuSlot
+                active: !!statusChatToolBar.popupMenu
            }
        }

@@ -65,7 +127,8 @@ Rectangle {
            width: 1
            color: Theme.palette.directColor7
            anchors.verticalCenter: parent.verticalCenter
-            visible: menuButton.visible && notificationButton.visible
+            visible: notificationButton.visible &&
+                     (menuButton.visible || membersButton.visible || searchButton.visible)
        }

        StatusFlatRoundButton {
@@ -77,6 +140,11 @@ Rectangle {
            icon.height: 21
            type: StatusFlatRoundButton.Type.Secondary

+            // initializing the tooltip
+            tooltip.text: qsTr("Activity")
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
+
            onClicked: statusChatToolBar.notificationButtonClicked()

            StatusBadge {
@@ -103,15 +171,5 @@ Rectangle {
        }

    }
-
-    Loader {
-        id: popupMenuSlot
-        active: !!statusChatToolBar.popupMenu
-        onLoaded: {
-            popupMenuSlot.item.closeHandler = function () {
-                menuButton.highlighted = false
-            }
-        }
-    }
 }

@@ -14,6 +14,7 @@ StatusListItem {

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

    property string title: ""
    property string subTitle: ""
+    property alias subTitleComponent: statusDescriptionListItemSubTitle
+    property string value: ""
    property StatusIconSettings icon: StatusIconSettings {
        width: 23
        height: 23
    }
    property alias tooltip: statusToolTip
    property alias iconButton: statusFlatRoundButton
+    property alias sensor: sensor

    implicitWidth: 448
    implicitHeight: 56
@@ -21,48 +24,77 @@ Rectangle {

    color: Theme.palette.statusListItem.backgroundColor

-    StatusBaseText {
-        id: statusDescriptionListItemTitle
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.topMargin: 5
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: false
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor

-        color: Theme.palette.baseColor1
-        text: statusDescriptionListItem.title
-        font.pixelSize: 13
-        font.weight: Font.Medium
-    }
+        StatusBaseText {
+            id: statusDescriptionListItemTitle
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.topMargin: 5

-    StatusBaseText {
-        id: statusDescriptionListItemSubTitle
-        anchors.top: statusDescriptionListItemTitle.bottom
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.topMargin: 4
+            color: Theme.palette.baseColor1
+            text: statusDescriptionListItem.title
+            font.pixelSize: 13
+            font.weight: Font.Medium
+        }

-        text: statusDescriptionListItem.subTitle
-        color: Theme.palette.directColor1
-        font.pixelSize: 15
-        font.weight: Font.Normal
-    }
+        StatusBaseText {
+            id: statusDescriptionListItemSubTitle
+            anchors.top: statusDescriptionListItemTitle.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.topMargin: 4

-    StatusFlatRoundButton {
-        id: statusFlatRoundButton
-        visible: !!statusDescriptionListItem.icon.name
-        anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
-        anchors.left: statusDescriptionListItemSubTitle.right
-        anchors.leftMargin: 4
+            text: statusDescriptionListItem.subTitle
+            color: Theme.palette.directColor1
+            font.pixelSize: 15
+            font.weight: Font.Normal
+        }

-        width: 32
-        height: 32
+        StatusFlatRoundButton {
+            id: statusFlatRoundButton
+            visible: !!statusDescriptionListItem.icon.name
+            anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
+            anchors.left: statusDescriptionListItemSubTitle.right
+            anchors.leftMargin: 4

-        icon.name: statusDescriptionListItem.icon.name
-        icon.width: statusDescriptionListItem.icon.width
-        icon.height: statusDescriptionListItem.icon.height
+            width: 32
+            height: 32

-        StatusToolTip {
-            id: statusToolTip
+            icon.name: statusDescriptionListItem.icon.name
+            icon.width: statusDescriptionListItem.icon.width
+            icon.height: statusDescriptionListItem.icon.height
+
+            StatusToolTip {
+                id: statusToolTip
+            }
+        }
+
+        Row {
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !!statusDescriptionListItem.value
+            spacing: 8
+
+            StatusBaseText {
+                text: statusDescriptionListItem.value
+                color: Theme.palette.baseColor1
+                font.pixelSize: 15
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            StatusIcon {
+                icon: "chevron-down"
+                rotation: 270
+                color: Theme.palette.baseColor1
+            }
        }
    }
 }
@@ -0,0 +1,19 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+
+
+Image {
+    id: root
+
+    property string emojiId: ""
+    
+    width: 14
+    height: 14
+    sourceSize.width: width
+    sourceSize.height: height
+
+    fillMode: Image.PreserveAspectFit
+    mipmap: true
+    antialiasing: true
+    source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
+}
@@ -0,0 +1,228 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Rectangle {
+    id: statusExpandableItem
+
+    property alias primaryText: primaryText.text
+    property alias secondaryText: secondaryText.text
+    property alias additionalText: additionalText.text
+    property alias button: button
+    property alias expandableComponent: expandableRegion.sourceComponent
+    property alias expandableItem: expandableRegion.item
+
+    property int type: StatusExpandableItem.Type.Primary
+    property bool expandable: true
+    property bool expanded: false
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
+        height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
+        color: Theme.palette.directColor1
+        background: StatusIconBackgroundSettings {
+            width: 32
+            height: 32
+            color: Theme.palette.primaryColor2
+        }
+    }
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+
+    enum Type {
+        Primary, // 0
+        Secondary, // 1
+        Tertiary // 2
+    }
+
+    implicitWidth: 718
+
+    radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
+    color: "transparent"
+    border.color: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.palette.baseColor2 : "transparent"
+    state: "COLLAPSED"
+    clip: true
+
+    Rectangle {
+        id:  separatorRect
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        height: 1
+
+        color: Theme.palette.baseColor2
+        visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
+    }
+
+
+    Rectangle {
+        id: header
+        anchors.top: parent.top
+        width: parent.width
+        height: 64
+        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
+        color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+
+        StatusSmartIdenticon {
+            id: identicon
+            anchors.top: parent.top
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
+            anchors.left: parent.left
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
+            image: statusExpandableItem.image
+            icon: statusExpandableItem.icon
+            name: primaryText.text
+            active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
+        }
+
+        StatusBaseText {
+            id: primaryText
+            anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
+                        (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
+            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
+            anchors.left: identicon.active ? identicon.right : parent.left
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
+
+            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
+
+            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
+                                                          parent.width - icon.background.width - additionalText.contentWidth - 110) :
+                                        (button.visible ? parent.width - icon.background.width - button.width - 70 :
+                                                          parent.width - icon.background.width - 70)
+
+            font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
+            font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
+            lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
+        }
+
+        StatusBaseText {
+            id: secondaryText
+            anchors.top: primaryText.bottom
+            anchors.topMargin: 4
+            anchors.left: primaryText.left
+            anchors.right: primaryText.right
+
+            font.pixelSize: 15
+            lineHeight: 22
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: Theme.palette.directColor3
+        }
+
+        StatusBaseText {
+            id: additionalText
+            anchors.verticalCenter: primaryText.verticalCenter
+            anchors.verticalCenterOffset: 2
+            anchors.right: expandImage.left
+            anchors.rightMargin: 16
+
+            font.pixelSize: 15
+            lineHeight: 24
+            lineHeightMode: Text.FixedHeight
+            elide: Text.ElideRight
+            color: Theme.palette.baseColor1
+        }
+
+        StatusButton {
+            id: button
+            anchors.top: parent.top
+            anchors.topMargin: 19
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            visible: !!text
+        }
+
+        StatusIcon {
+            id: expandImage
+            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                                    primaryText.verticalCenter : identicon.verticalCenter
+            anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?  -3 : -1
+            anchors.right: parent.right
+            anchors.rightMargin: {
+                switch (statusExpandableItem.type) {
+                    case StatusExpandableItem.Type.Primary:
+                      return 23
+                      break;
+                    case StatusExpandableItem.Type.Secondary:
+                      return 16
+                      break;
+                    default:
+                      return 6
+
+                }
+            }
+            visible: expandable && !button.visible
+            color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
+                      Theme.palette.baseColor1 :
+                      Theme.palette.directColor1
+        }
+
+        MouseArea {
+            id: sensor
+            anchors.fill: parent
+            onClicked: {
+                if(expandable) {
+                    expanded = !expanded
+                }
+            }
+            cursorShape: Qt.PointingHandCursor
+            visible: !button.visible && expandable
+            hoverEnabled: true
+        }
+    }
+
+    Loader {
+        id: expandableRegion
+        anchors.top: header.bottom
+        anchors.topMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
+        anchors.right: parent.right
+        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
+        visible: false
+    }
+
+    onExpandedChanged: {
+        if(expanded) {
+            state = "EXPANDED"
+        }
+        else {
+            state = "COLLAPSED"
+        }
+    }
+
+    states: [
+        State {
+            name: "EXPANDED"
+            PropertyChanges {target: expandImage; icon: "chevron-up"}
+            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
+            PropertyChanges {target: expandableRegion; visible: true}
+        },
+        State {
+            name: "COLLAPSED"
+            PropertyChanges {target: expandImage; icon: "chevron-down"}
+            PropertyChanges {target: statusExpandableItem; height: 82}
+            PropertyChanges {target: expandableRegion; visible: false}
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "COLLAPSED"
+            to: "EXPANDED"
+            NumberAnimation { properties: "height"; duration: 200 }
+        },
+        Transition {
+            from: "EXPANDED"
+            to: "COLLAPSED"
+            NumberAnimation { properties: "height"; duration: 200 }
+        }
+    ]
+}
--- a/Show More
+++ b/Show More